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.
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.
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.
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:
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.
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.
Secondary – Use (e.g.) sub-headers to help users scan and navigate through content.
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.
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.
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.
To create a visual hierarchy in a UI:
Prioritize visual elements by determining content types and user tasks.
Establish consistent visual elements and their placements across pages, like headers, menu items, and typography, creating a basic layout or visual framework.
For varied content, maintain layout flexibility.
Utilize wireframes to position elements consistently, focusing on usability before visual appeal.
Emphasize essential elements using size and color and de-emphasize others, guiding user attention.
Ensure uniformity and brand consistency by creating style guides.
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.
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.
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.
© 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.
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.
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.
The 6 elements of visual hierarchy in design are:
Scale and Size: Larger elements capture attention first, emphasizing importance.
Color and Contrast: Vibrant colors and stark contrasts draw the eye and can signify importance.
Typography: Varied font sizes, weights, and types can establish order and significance.
Spacing and Proximity: The arrangement and distance between elements can group or separate information, impacting user interpretation.
Alignment: Proper alignment creates order and helps in structured content presentation.
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.
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.
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.
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.
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.
Use Scale and Proportion: Enlarge essential elements or information to make them stand out and appear more important than other elements on the page.
Employ Contrast: High contrast between elements can help to attract attention and create focus, especially between text and background.
Optimize Spacing and Alignment: Proper spacing around elements helps reduce visual clutter, making information more digestible, while alignment can create a clean, orderly appearance.
Implement Typography Wisely: Different font sizes, weights, and styles can help establish hierarchy. Larger, bolder fonts generally attract more attention.
Utilize Imagery and Multimedia: Images, videos, and icons can break text monotony and draw attention, aiding in the establishment of hierarchy.
Apply Repetition and Consistency: Repeating visual elements, styles, and structures can create cohesion and guide users through the content efficiently.
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.
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.
To thoroughly learn visual hierarchy, explore our comprehensive courses at Interaction Design Foundation.
Visual Design: The Ultimate Guide is an invaluable resource for mastering the intricacies of visual design elements and principles, ensuring you create aesthetically pleasing and functional designs.
Gestalt Psychology and Web Design: The Ultimate Guide will deepen your understanding of perceptual principles.
The Ultimate Guide to Visual Perception and Design will help you understand how people see designs so that you can refine your skills in crafting visually compelling designs.
Explore these courses to elevate your design proficiency!
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on Visual Hierarchy by the Interaction Design Foundation, collated in one place:
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!
