Flex Article

Designing for Flex – Part 5: Designing content displays

Designing controls

When controls appear in Flex applications, they must often match the visual styles of the application's content as well as the overall brand of the web application and the larger web presence in which it often lives. Fortunately, this is easy in Flex: you can customize almost every aspect of the application's visual appearance using the Flex styling and skinning mechanisms.

Figure 12. You can change the appearance of the Flex controls using two mechanisms: styling and skinning. Styling involves changing the properties of the default control appearance to create variations on the standard look. Skinning involves completely replacing the standard look with custom artwork created using the Adobe Creative Suite tools such as Adobe Photoshop, Adobe Illustrator, Adobe Flash, and Adobe Fireworks. Skins are much more flexible than styles, but also tend to take longer to create.

There are, however, some caveats. One of the primary benefits of standard control libraries is standardization: users are familiar with these controls and how they behave. If you change the controls too dramatically, you will lose this benefit. Nonstandard controls force users to learn how to manipulate the chrome of the interface and distract them from what they really want to focus on—their content and their tasks.

To users, the most important aspect of standard controls is their behavior. For example, users expect scrollbars to implement a certain set of behaviors: the thumb should grow to indicate how much of the full scroll area is in view, clicking on the track should move the thumb to the clicked location, pressing the arrow buttons should move the scroll area up or down one notch, and so forth. If a scrollbar does not implement these behaviors or does not implement them correctly, users will struggle with the control even if its visual appearance is identical to standard Windows or Macintosh scrollbars. (In fact, this is especially important if its visual appearance is identical to standard scrollbars. The most confusing controls are those that appear to be standard controls, but behave in subtly different ways.) Flex's off-the-shelf controls also follow these standard behaviors. For this reason, never re-implement your own controls when an off-the-shelf control is available.

Figure 13. The diagram above explains the expected behavior of a scrollbar component. Like many standard controls, scrollbars contain many subtle features that users have come to rely on. If a scrollbar in your application does not implement all of these features, users will be very confused and annoyed. Instead, reuse the existing Flex scrollbar component and customize its appearance using skinning and styling.

The visual appearance of standard controls is important, but controls generally need not be visually identical to the ones users are already familiar with in order for their consistency benefits to carry over. However, radical changes to the visual appearance of controls can be quite confusing for users. In general, use Flex styling to adjust the visual appearance of the default Flex look (called Aeon). Aeon is quite flexible and often sufficient to achieve a branded look and feel. If you determine a more custom appearance is necessary for your application, you will likely need to use the skinning mechanism. Skins allow you to achieve any visual appearance you desire, but when misused they also allow you to render them unidentifiable to your users. Ensure that you preserve and distinguish the major visual elements of the control; for example, a scrollbar should still contain an up and down arrow, a track, and a resizable thumb. As always, ensure that the elements are sufficiently visually distinct so that all of your users can make them out, even users with low vision.

To learn more, stay tuned for the next part of the series, Designing for Flex – Part 6: Guiding with motion.

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Acknowledgements

Although this article series has my name on it, many people contributed to its development. I'd like to thank my reviewers, Sho Kuwamoto, Phil Costa, Steven Heintz, Narciso Jaramillo, Josh Ulm, Jeremy Clark, Deb Galdes, Tom Hobbs, and Amy Wong for providing me with extremely helpful feedback. Special thanks to Sho Kuwamoto and Phil Costa for envisioning this project and pushing me to complete it and to my managers, Josh Ulm and Jeremy Clark, for finding the time for me to give it the attention it needed. Finally, extra-special thanks to Tom Hobbs, Narciso Jaramillo, Sho Kuwamoto and Peter Flynn for guiding my thinking on many of the topics that appear in the articles.

Page 6 of 6

Previous Page