Visual hierarchy

The lowest level of structure in any application is the structure of individual screens. Sometimes designers disregard this structure in favor of elaborately mapping out the interconnections of the screens, but this is a mistake, especially for Flex applications that place such emphasis on the visual and interaction design of the primary application screens. Ensure that your screens are well-structured through effective and appropriate use of visual hierarchy.

Applying visual hierarchy involves employing the visual variables of color, shape, texture, direction, size, and position to communicate to your users what is important, what can be skipped, and what may be important later. The difference between good and poor use of visual hierarchy is the difference between a clean, easy-to-understand application screen and a jumbled, incomprehensible mess, even if both screens contain the exact same content.

Figure 13. This dialog box from Flex Builder is an example of poor use of visual hierarchy. The controls are jumbled together and all of the text has the same visual weight. Try scanning through the dialog to find the control for positioning the perspective switcher. Notice how long it takes; you need to read and process each control before moving on to the next.

Figure 14. This dialog, this time from Dreamweaver, uses visual hierarchy more effectively. Sections have headings indicated by lines and position, controls have more whitespace and meaningful alignment. Try scanning for the control to change the alignment of the accessibility caption. It likely took less time and mental energy.

A common use of visual hierarchy occurs in almost any report. Most reports of any significant length—such as this one—have multiple sections and subsections. These sections are separated by headings. Headings are never in the exact same font, color, weight, and style as the body text. They are generally larger, bolder, and/or in a different color. They have more visual weight. In this article, for instance, the section headers are gray and surrounded by lines, which distinguishes them from the body text and causes them to stand out on a quick visual scan. If they were not visually distinguished from the body text, you wouldn’t be able to tell what was a heading and what was a paragraph; finding sections would become a nightmare.

Headings are not the only page elements that communicate visual hierarchy, however. Anything on the page can communicate something about the visual structure (or even nothingness can; whitespace contributes to visual hierarchy as well). Colored backgrounds behind a group of elements connect them in the user’s mind, perhaps as a sidebar. (An old communication design instructor of mine called this technique “toast.”) A row of equally-sized, evenly-spaced buttons placed next to one another makes them related functions (such as on a toolbar) or even mutually-exclusive choices (such as in a dialog box). A large image draws the user’s eye and invites contemplation.

Figure 15a. Users rarely read every word on application screens. Instead, they unconsciously use the screen’s visual hierarchy to decide what to look at. For the Flex cookbook, most users likely see the large main headings first, then scan the subheadings, and only then read the content that interests them. Note that most of the page goes unread.

Figure 15b. Then, they scan the subheadings...

Figure 15c. ...and only then read the content that interests them. Note that most of the page goes unread.

Ensure that your screens’ visual hierarchy, just like everything else, clearly communicates to your users how to accomplish their goals. Use color to indicate buttons that represent default choices, or to warn against operations that might be destructive. (For instance, Wordpress colors buttons a deep warning red for operations that may damage data, such as “delete post”.) Use size to draw your user’s attention to the most important parts of the screen. Use position to guide the user’s eye through the ordering of elements on a form. (Read more about visual hierarchy and other communication design techniques in Mullet and Sano’s book “Designing Visual Interfaces.” Tidwell’s “Designing Interfaces” also contains an excellent discussion of visual hierarchy as well as other user interface design techniques.)

Flex allows you to achieve any look that you wish; use this power wisely. Always keep in mind that visual design is a way to communicate with your users, and remember that as designers and developers, we often fall into that trap of thinking that we, who spend our entire day staring at the screens we design, see them very differently than our users will. Thinking about the visual hierarchy of your pages will help you avoid that trap.

To learn more, read the next part of the series: Part 4: Merging the web and the desktop.

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 8 of 8

Previous Page