Visual Hierarchy

Your constantly-updated definition of Visual Hierarchy and collection of videos and articles
458 shares

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.

Show Hide video transcript
  1. Transcript loading…

“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:

© Interaction Design Foundation, CC BY-SA 4.0

  • 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.

Show Hide video transcript
  1. Transcript loading…

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:

    © Interaction Design Foundation, CC BY-SA 4.0

    • 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 prominent—and unmissable—for users as they go from task to task. These points are especially valuable:

Show Hide video transcript
  1. Transcript loading…

  • 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.

Show Hide video transcript
  1. Transcript loading…

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 Visual Design: The Ultimate Guide course examines visual hierarchy.

This Adobe Xd Ideas piece showcases a wealth of insights and examples.

UXPin’s Chris Bank offers incisive points, including F- and Z-patterns.

Questions related to Visual Hierarchy

How to improve or create visual hierarchy?

Show Hide video transcript
  1. Transcript loading…

To create a visual hierarchy in a UI:

  1. Prioritize visual elements by determining content types and user tasks.

  2. Establish consistent visual elements and their placements across pages, like headers, menu items, and typography, creating a basic layout or visual framework.

  3. For varied content, maintain layout flexibility.

  4. Utilize wireframes to position elements consistently, focusing on usability before visual appeal.

  5. Emphasize essential elements using size and color and de-emphasize others, guiding user attention.

  6. Ensure uniformity and brand consistency by creating style guides.

  7. Reflect on visual weight and contrast to manage user attention and make essential elements stand out.

This balance of design elements and consistent visual framework enhances user experience.

What is visual hierarchy in graphic design?

Visual hierarchy in graphic design organizes elements to guide the viewer's eye, leveraging size, color, contrast, and placement to prioritize information. It follows natural eye movement patterns, allowing for a seamless and intuitive navigation experience, emphasizing essential content while making designs aesthetically pleasing and user-friendly. 

By strategically arranging elements, visual hierarchy improves content readability and accessibility, enhancing user interaction and engagement with the design. Learn more in our detailed article on Visual Hierarchy.

What is visual hierarchy in web design?

Visual hierarchy in web design is crucial as it organizes design elements in order of importance, directing user focus. It employs size, color, contrast, and space to delineate priority, guiding users effortlessly through the content and ensuring a harmonious, intuitive user experience. 

In this illustration the heading is much larger than the subtitle. The size of the text is used to establish hierarchy.

In this illustration the heading is much larger than the subtitle. The size of the text is used to establish hierarchy.

© Interaction Design Foundation, CC BY-SA 4.0

Effective visual hierarchy aids in seamless navigation enhances readability, and elevates user interaction, facilitating users in assimilating information efficiently. Explore more about its significance in our course Visual Design: The Ultimate Guide.

What is an example of good visual hierarchy in UI design?

Since a user interface is interactive, a good visual hierarchy in UI design is illustrated by clean, clear, and intuitive tappability affordances, ensuring users can easily interact with the desired elements. 

In this video, Frank Spillers, CEO of Experience Dynamics walks us through each of these aspects that make an interface intuitive and shares best practices on what to do and not to do while designing an interface.

Show Hide video transcript
  1. Transcript loading…

 Apart from traditional methods to visual hierarchy (such as size, color, contrast, etc.) Frank Spillers also shares examples of  strategically placed animations, such as pulsating buttons, to guide users towards expected interactions. When defining the visual hierarchy, elements should be strategically animated and unambiguous, supporting the user's task and avoiding user frustration, uncertainty, and errors. Designing with proper visual cues and clear interaction invitations significantly improves user experience and minimizes confusion.

What are the 6 elements of visual hierarchy?

The 6 elements of visual hierarchy in design are:

  1. Scale and Size: Larger elements capture attention first, emphasizing importance.

  2. Color and Contrast: Vibrant colors and stark contrasts draw the eye and can signify importance.

  3. Typography: Varied font sizes, weights, and types can establish order and significance.

  4. Spacing and Proximity: The arrangement and distance between elements can group or separate information, impacting user interpretation.

  5. Alignment: Proper alignment creates order and helps in structured content presentation.

  6. Repetition and Consistency: Repeating elements and maintaining consistency enhances user understanding and recognition.

By considering these elements, designers can guide user attention and create effective, user-friendly interfaces. For more insights, refer to The Building Blocks of Visual Design.

Why is visual hierarchy important?

Visual hierarchy is pivotal for user-friendly design, facilitating swift and efficient information processing for users. In this video, HCI expert Prof Alan Dix uses one of the visual hierarchy principles—alignment—  aids users in rapidly locating desired information.

Show Hide video transcript
  1. Transcript loading…

Proper alignment accommodates various reading patterns and matches user intentions and content context, ensuring optimal readability and user experience. This contributes to intuitive design, allowing users to interact with and navigate through content seamlessly and effectively.

What is the hierarchy of visual attention?

The hierarchy of visual attention guides viewers' eyes through a sequence of focal points by arranging design elements effectively. Designers use scale, color, contrast, typography, spacing, alignment, and repetition to prioritize information and lead the viewer's attention from one visual element to the next, ensuring an intuitive and enjoyable user experience. Proper visual hierarchy aids in quickly and effectively conveying the intended message to the users. Learn more about creating balanced and harmonious designs by exploring The Building Blocks of Visual Design.

What is the difference between hierarchy and emphasis in design?

In design, hierarchy organizes elements to convey importance through positioning, scale, and color, leading the viewer’s eye through a predetermined path. Emphasis, on the other hand, creates a focal point by accentuating a specific element, drawing immediate attention and making it stand out. While hierarchy structures content to create order and facilitate navigation, emphasis interrupts the visual flow to highlight crucial information or evoke emotions. Explore more about the importance of emphasis in creating effective designs.

How do you increase visual hierarchy?
  1. Use Scale and Proportion: Enlarge essential elements or information to make them stand out and appear more important than other elements on the page.

  2. Employ Contrast: High contrast between elements can help to attract attention and create focus, especially between text and background.

Show Hide video transcript
  1. Transcript loading…

  1. Optimize Spacing and Alignment: Proper spacing around elements helps reduce visual clutter, making information more digestible, while alignment can create a clean, orderly appearance.

  2. Implement Typography Wisely: Different font sizes, weights, and styles can help establish hierarchy. Larger, bolder fonts generally attract more attention.

  3. Utilize Imagery and Multimedia: Images, videos, and icons can break text monotony and draw attention, aiding in the establishment of hierarchy.

  4. Apply Repetition and Consistency: Repeating visual elements, styles, and structures can create cohesion and guide users through the content efficiently.

  5. Design Clear Call to Action: Distinctive, well-placed CTAs guide user interaction, helping users navigate through the site or app effectively.

Implementing these strategies will create a harmonious and efficient visual hierarchy, improving user experience and engagement.

Does hierarchy mean order of importance?

Yes, in design, hierarchy does imply an order of importance. It is a crucial design principle that organizes elements, leading the viewer’s eye from the most critical elements to those of lesser importance. Establishing a clear visual hierarchy aids users in navigating content effortlessly, understanding information accurately, and interacting with the design effectively. By manipulating design elements such as size, color, contrast, and positioning, designers can guide users’ attention and create a structured, user-friendly experience, prioritizing content and actions according to their significance in achieving user and business goals.

Where to learn visual hierarchy?

To thoroughly learn visual hierarchy, explore our comprehensive courses at Interaction Design Foundation.

Explore these courses to elevate your design proficiency!

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 Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on Visual Hierarchy

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!