Visual Hierarchy

Your constantly-updated definition of Visual Hierarchy and collection of topical content and literature

What is Visual Hierarchy?

Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically and strategically, designers influence users’ perceptions and guide them to desired actions.

“Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.”

- The Nielsen Norman Group

See why a good visual hierarchy is vital.

Building Blocks of Visual Hierarchy

Hierarchy is a visual design principle which designers use to show the importance of each page/screen’s contents by manipulating these characteristics:

  • Size – Users notice larger elements more easily.
  • Color – Bright colors typically attract more attention than muted ones.
  • Contrast – Dramatically contrasted colors are more eye-catching.
  • Alignment – Out-of-alignment elements stand out over aligned ones.
  • Repetition – Repeating styles can suggest content is related.
  • Proximity – Closely placed elements seem related.
  • Whitespace – More space around elements draws the eye towards them.
  • Texture and Style – Richer textures stand out over flat ones.

In user interface (UI) design, an effective visual hierarchy helps inform, impress and persuade users, who have expectations – especially about an interface’s appearance. So, for a website, app or related product to succeed, it’s crucial to structure its pages or screens to minimize users’ uncertainty, show maximum empathy with them and give them something pleasant to view.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0

Font size and style is one way to establish hierarchy.

How to Craft a Strong Visual Hierarchy

A strong visual hierarchy leads users to a page/screen’s functionality and gives them the right visual cues. You’ll need user research to learn about your users, but here are some general facts:

  • When encountering an interface, users react extremely fast (in milliseconds), developing gut feelings about whether to stay or leave.
  • Users eyes follow predictable reading paths, which are culturally influenced. Left-to-right-reading Western users use an F- and a Z-pattern. So, you can design a hierarchy either to:
    • Reinforce these natural patterns and lead users along a cleverly constructed path to a desired goal; or
    • Break these patterns to highlight a focal point for users.
  • Users prefer recognition over recall – hence why it’s essential they can scan instead of having to work at reading and remembering things.

Considering these, you can help envision how to show users the most important things as they try to achieve goals in their individual contexts. Then, you can choose and scale elements to make the most important information prominentand unmissablefor users as they go from task to task. These points are especially valuable:

  • The Gestalt principles – These cater to the human eye. Use them to help users group visual elements, notice what’s important on each page and build trust with your brand.
  • Consistency Familiar icons, menu hierarchy, colors, etc. are vital aids for users.
  • Center stage – Use this UI design pattern to show users important things right up-front.
  • Whitespace – The key to crisp, clean minimalist designs; use it to calm users’ eyes and direct them to important foreground elements.
  • Typography – Use the best font, color and contrast to present three levels of text for desktop-accessed screens, two—skipping the middle one—for mobile:
  • Mobile UX design specifics – Users on smaller screens must be able to notice elements right away and navigate that much more easily.
  • Typography and style – Elaborate fonts are more appropriate in some industries, but ornate text and special effects (e.g., embossed, washed-out text) might distract users, and even slight distractions reduce usability.
    1. Primary – Use a header to attract users’ attention with the page/screen’s core information, like a newspaper headline. The first two words of a header should let users understand the gist of the section below it.
    2. Secondary – Use (e.g.) sub-headers to help users scan and navigate through content.
    3. Tertiary – The body, smaller but still highly readable.

Design guidelines suggest a ratio of 3:1 for headers to body text size.

Our About page exemplifies good visual hierarchy, including whitespace use.

Things to Watch regarding Visual Hierarchy

Here are some key considerations for optimizing your visual hierarchy for users:

  • Mobile UX design specifics – Users on smaller screens must be able to notice elements right away and navigate that much more easily.
  • Typography and style – Elaborate fonts are more appropriate in some industries, but ornate text and special effects (e.g., embossed, washed-out text) might distract users, and even slight distractions reduce usability.
  • Understand users priorities – You want to guide users with a sense of ranked information – so, it’s self-defeating to emphasize everything on a screen. Simultaneously, it’s vital that you know which elements users need to appreciate as being equally important (e.g., dials on some dashboards).
  • Remember the purpose of each page/screen’s problem-solving function throughout the users’ interaction. For example, customer journey maps are particularly helpful to keep sight of what’s important and when. As you determine the order of importance per screen, you’ll likely notice some superfluous elements which you can leave out.

Overall, remember your design’s visual hierarchy is the structure for arranging well-chosen elements that must look and work best together – so users can enjoy seamless experiences and forget they’re using an interface as a medium.

Copyright: Fair use

On Experience Dynamics easy-on-the-eye webpage, the circled images are given equal importance in size.

Learn More about Visual Hierarchy

Our course here examines visual hierarchy: https://www.interaction-design.org/courses/psychology-of-interaction-design-the-ultimate-guide

This Adobe Xd Ideas piece showcases a wealth of insights and examples: https://xd.adobe.com/ideas/process/information-architecture/visual-hierarchy-principles-examples/

This Mockplus blog presents fascinating angles on visual hierarchy: https://www.mockplus.com/blog/post/ui-visual-hierarchy

UXPin’s Chris Bank offers incisive points, including F- and Z-patterns: https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

Literature on Visual Hierarchy

Here’s the entire UX literature on Visual Hierarchy by the Interaction Design Foundation, collated in one place:

Learn more about Visual Hierarchy

Take a deep dive into Visual Hierarchy with our course The Ultimate Guide to Visual Perception and Design .

Human vision is an amazing ability; we are capable of interpreting our surroundings so as to interact safely and accurately with little conscious effort. However, we are well attuned to nature and things that occur naturally in our environment, which has significant implications for design. Unless man-made products are attuned to, and support, human visual perception, the viewing experience suffers and there is significant potential that users will be unable to use your products quickly, safely, or without error. For this reason, it is essential that we investigate how we see the world and why we see things in the way we do in order to know what we can do to ensure our products provide the best viewing experience possible. This is why we have developed “The Ultimate Guide to Visual Perception and Design,” and why it is such an important topic for designers to master.

For those of us who are blessed with good eyesight, we seldom consider it. That’s why going off to investigate the whys and hows involved is a little like trying to get behind the wind for the sake of finding the exact spot where it comes from. Happily, getting to the bottom of the phenomena involved in visual perception is a lot less laborious, and perhaps infinitely more fascinating. During the course, we will first cover the basic anatomy of the human eye so as to understand how vision is formed. We will then look at lots of different designs, evaluating each one according to specific aspects of the human visual experience. We will also identify how we can improve designs to support human vision better and improve usability as a direct result. Using the knowledge it imparts earlier on, this course will then analyze the design of icons in screen-based interfaces.

All Literature

Please check the value and try again.