Today, we live in a world where distraction has become a disease. Constantly bombarded with information from various sources, our reading behaviors have changed to adapt to that environment. A seminal study by the Nielsen Norman Group showed that only 16% of people read webpages word-by-word; 79% of test users always scanned any new page. Keeping our users engaged with the content has become critical to any designer, and visual hierarchy helps us to do just that by organizing information in a way that makes it easy to understand and prioritize. For example, a well-designed website or mobile app will use a visual hierarchy to guide users to essential information, such as the navigation menu or a call-to-action button.

Understanding visual hierarchy involves knowing which elements should be emphasized and how to do it effectively. This requires an understanding of the content, the audience, and the design principles.

Wait, what design principles am I talking about? It’s all based on how we naturally perceive and process information. Our eyes are drawn to elements that stand out, such as bright colors, high contrast, and large sizes. As a result, designers can use these principles to create a visual hierarchy that guides the viewer’s attention to the most critical information first.

What is Visual Hierarchy? It is a design principle that involves organizing elements to guide the viewer’s eye through a piece of visual content. It is an essential component of effective communication, whether in graphic design, web design, or any other form of visual media. Understanding and respecting visual hierarchy can make a significant impact on the success of a design.

Steps to establish a good visual hierarchy in your design

✅ Plan and define the hierarchy.

Before jumping to the drawing board, ensure you have the answers to these questions – What is the primary content or immediate action you want to first draw the user’s attention to? Second? Third? – Write them down in the list following the primary, secondary, tertiary, etc. order, so you remember.

✅ Choose a scanning pattern that fits your case.

We read from left to right and top to bottom, defining the direction of the scanning patterns. However, please note that some cultures read from right to left, so their scanning patterns differ from how we’ve known.

There are many scanning patterns, but the most popular are ‘F’ and ‘Z’; you can advance these in your design.

F-Pattern

The F pattern is named after the F shape, resulting in the heat map during the eye-tracking study. It suggests that people scan in an ‘F’ shape, starting with a horizontal movement across the top of the page, then a vertical movement down the left-hand side, and another horizontal movement further down the page.

By understanding how people scan content, we can strategically place key information in the areas where people are most likely to look. Key takeaways:

- Place important information in the top left-hand corner of the page, where people read.
Use headings and subheadings to break up content and make scanning easier.
- Avoid putting important information on the right-hand side of the page, as people tend to read this area less frequently.
- Use images and videos to draw people’s attention.
- Use a clear and consistent layout to make it easy for people to navigate the page.

Z-Pattern or Zic Zac Pattern

Similar to the F-pattern, Z-pattern is another scanning pattern that starts with a horizontal movement across the top of the page, then a diagonal movement down to the bottom left-hand corner, then another horizontal movement across the bottom. Here are a few key takeaways:
• Place important information in the top left-hand corner of the page, where people end to start reading
• Use images and videos to draw people’s attention and create a visual flow that follows the Z-pattern.
• Place a call-to-action at the end of the Z-pattern, where people tend to look before leaving the flow.

✅ Use the contrast effectively.

During the design process, large and small objects, bright and dark colors, high contrast, and low contrast draw the viewer’s eye to the most important elements, following notes in the hierarchy list.

👍 Good use of Contrast

This Airbnb app is a good example – In this case, the photos are the primary content, and they were used as the largest object in the layout to draw the viewer’s eye. Other UI elements, such as buttons, icons, headers, and texts, are set up in smaller sizes and mono-tone colors, yielding the way to the primary content. Yet, within these non-primary elements, there is still a hierarchy of secondary, tertiary, and so on based on the contrast in sizes, font weight, and color contrast.

👎 Bad use of Contrast

There are some efforts here in color contrast. However, there is no clear distinction between primary content and other areas – For example, the navigation is blended with the header, and the contrast ratio between the title and the introductory paragraph is not so obvious – making the user wonder where to start first.

✅ Create clear groupings

Use spacing and placement to create clear groupings of related elements. This will help the viewer understand the structure of the design and where to focus their attention.

Spacing & Placement

There are two main types of space to consider: Active and Passive.

• Active space refers to the space intentionally added in the design layout to create more focus on a specific design element.
• Passive space, on the other hand, is added more in an organic way to increase readability and comprehension of the layout structure.

Using these spaces carefully and strategically could intentionally drive the user’s focus the way we want.

✅ Test the design

Test the design with others to ensure the intended message is communicated effectively. This will also help identify any areas where the hierarchy can be improved.

Small scale: You can test your design by putting yourself in the user’s shoes or with your co-workers and stakeholders.

Larger scale: Using heatmap and eye-tracking technology, you can launch usability testing with larger audiences.

✅ Be Consistent

Use the principles of visual hierarchy consistently throughout the design. This will help the viewer understand the structure of the design and where to focus their attention.

In conclusion, understanding and respecting visual hierarchy is essential for effective communication through design. By planning the design with hierarchy in mind, using size, color, and contrast effectively, creating clear groupings, testing the design, and being consistent, a designer can create a visually compelling design that communicates the intended message and call-to-action effectively.

Design