Defining visual hierarchy in UX design

A clear visual hierarchy directs the eye to the most important elements on the page. It can be created using variations in color and contrast, scale and grouping.

Basics of Hierarchy in Interface Design (UI)

Have you ever come across a web page that was so overloaded with various design elements that you had no idea where to start? If you find it difficult to focus on the screen, the layout is most likely lacking a clear visual hierarchy.

The visual hierarchy of the page controls the flow of information from the system to the end user — it lets users know where to focus their attention.

Mobile version of the site Williams–Sonoma…com: where to begin? Except for the burgundy block Cyber In the meantime, there is no need to worry about it. ”Monday, the elements on this page are relatively the same in size and color and lack white space. Since most of the text is written in capital letters, very little text stands out. Few users want to spend time parsing this visual clutter.

Definition: Visual hierarchy 2D display (web page, graphics, print, etc.) refers to organizing design elements on a page, directing the user s eye to each design element in order of perceived importance.

The visual hierarchy can be created using:

1. Colors and contrast
2. The scale
3. Groupings (proximity and common areas)

1. Color and contrast

Good visual design uses color or contrast (or both) to create visual hierarchy on a page. The use of color forces some elements to come to the fore and others to recede, defining in a way that grabs our attention and the importance of various design elements.

It is not the actual color of the element that creates the hierarchy, but rather the contrast in value and saturation between the element and the context in which it is used (including the background and other nearby elements).

Designers often use contrast fonts to denote a hierarchy, demonstrating the importance of an element through special font handling. Typefaces with heavy type, such as bold, stand out from light or regular type. Words that are styled differently from the surrounding text (such as italics or underlined) also grab attention.

MoMA…org uses color to convey hierarchy – green links in the upper right corner stand out against the black background below the logo.

TheNounProject…com: The search box first attracts attention not only because of its large size, but also because of its white color, which contrasts with the black background. The field prompts the user to start searching. The gaze then moves to the white icons below the search box to show possible results.

Recommendations for using color and contrast:

• Consider color saturation. Vivid colors stand out naturally, so use them for important elements. Less saturated colors can be used for less important elements. Leave warm bright colors like red for warnings or errors.
• Don t use too many colors. While some complex color schemes are beautiful, they can overload a web page. When too many colors of the same value or saturation are used, the perception of hierarchy between elements is impaired. In common, uncomplicated designs, limit the use of color to two primary and two secondary colors.
• Don t use too many contrast options. For complex designs, use no more than three contrast options. If everything is in contrast, then nothing stands out. Effective designs often use different methods of handling heading, subheading, and body copy.

2. Scale

The principle of scaling is key in shaping the visual hierarchy of design. Larger elements stand out more and attract the attention of users, so size can be used as a marker of importance.

Jersey Dairy Milk: the typography of this milk carton forms an impressive visual hierarchy through variations in scale. The eyes are immediately focused on the most important aspects of the product – that it is milk and its fat content.

Hipcamp…com: visual hierarchy is conveyed through the size (and contrast) of the font. First, attention is drawn to the text “Find yourself outside»Due to its large size and bold text. This text gives you an overview of what you can do on this website.

Scale guidelines:

• Use no more than 3 sizes – small, medium and large. The three sizes provide ample variety – think about the font size for your headline, subheading, and body copy – while maintaining a clear and clear hierarchy. In web design, sizes can range from 14px to 16px for body copy, 18px to 22px for a subheadline, and 32px for a headline.
• Make the most important element the biggest. Highlight the most important aspect of your design by making it the largest. Likewise, reduce the less important elements. Limit the number of large items to a maximum of 2 so that they stand out and strengthen the hierarchy.

3. Grouping: proximity and common areas

Implicit and explicit groupings help us see the basis or structure of a page and allow us to direct our attention to areas of the screen that may be relevant to our purpose. Without groupings, it would be much more difficult to figure out where the standard areas such as navigation, content, advertising are, and therefore, it would be more difficult to figure out what to focus on and which areas can be safely ignored. For example, once users identify a right-handed group, they may ignore it because of its association with advertising – an example of banner blindness.

Grouping is usually conveyed implicitly through proximity and use of white space, or explicitly through stroke (common area).

Spotify on iPhone: On this screen, the eye sees 3 groups at once. Deliberately increasing the distance between groups makes each set distinct and individual. Equally important is the intentional reduction of white space between headings and related content. This reduced spacing creates a hierarchical relationship between the title and the content.

Shopify checkout form fields: The principle of intimacy manifests itself in good form… The minimal space between the section headings and the corresponding form fields makes it clear that they belong together. There is also increased space between each block of fields, further helping the eye to see this hierarchical spatial pattern. Notice also the border around the two express checkout buttons (an example of a common area principle) that separates them from the checkout form below.

Recommendations for grouping content:

• Let him breathe. An element around which there is more space will be perceived as one group and therefore will receive more attention. (If there are many elements in a group, attention is likely to be split between them.) Consider highlighting the most important aspect of your design by giving it more space.
• Consider using a container. If changing whitespace is not enough to create a hierarchy, add additional elements such as borders or backgrounds. These additional elements can create visual clutter, so use them wisely.

Blur test

In design school, we are taught to squint or slightly blur the design in order to get an idea of ​​the resulting groupings and hierarchy. This method shows you which design elements are highlighted and reveals the underlying hierarchy.

In the Spotify example above, blurring the design with a 5 or 10 px radius shows that the groupings work as intended and that the Recently Played section stands out the most, even when you can t read the text. The 20 px blur reveals an unintended hierarchy, with one of the recently reproduced elements being the most prominent element on the page due to its vibrant color – the effect is also noticeable in the original screenshot.

Spotify: original (top left) and blurred with radii of 5 (top right), 10 (bottom left) and 20 pixels (bottom right)

This example shows that it is not enough to design a template — you must also consider the content that will fill it. For example, a news photography with very vibrant colors can dominate the news homepage, even if it is intended to illustrate a secondary story. Editors should consider the UX implications of content choices.

Conclusion

Before you start designing, take a step back from the visuals and define the content hierarchy and the key points the user needs to see. Once you have established this hierarchy, focus on applying variations in color and contrast, scale or grouping. After designing with visual hierarchy in mind, take a step back and see if the design reads as you intended by testing with target users.

When the visual hierarchy of a page accurately reflects the importance of various design elements, users can easily understand it and can successfully complete tasks, which builds trust in the design and brand.

Links

Davis, M., & Hunt, J. (2017). Visual Communication Design. Bloomsbury Visual Arts.

Lupton, E. (2008). Graphic Design: The New Basics. New York: Princeton Architectural Press.