Visual Hierarchy

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

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

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

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:

Visual Hierarchy: Organizing content to follow natural eye movement patterns

Let’s look at a topic that deals with, oddly enough, how we look at designs. Once you understand how the human eye processes these, you’ll find yourself better able to arrange your elements more effectively.

Content in any digital page layout will follow a specific hierarchy. Headers appear above body text. Menus go at the top, bottom, left, or right of the screen (or any combination of these). Designers try to organize content so that they present the highest priority content on any given page first. Then, they deliver the rest of the content from highest to lowest priority.

“Hierarchy” is simply a nicer way of saying organized from most to least important. We also use “hierarchy” to show relationships (where relationships exist) between content blocks.

Users define the visual hierarchy of a website or app. The item that first grabs the eye’s attention is at the top of the hierarchy. Each item that next draws attention is subordinate to the one before it.

Hierarchy Principle

Author/Copyright holder: Digital Markketing. Copyright terms and licence: CC BY 2.0

The human eye perceives information visually rather than as blocks of data. Unlike computers, we’re at the mercy of our eyes’ natural tendencies. The reading material we likely encountered as young children featured many pictures and larger print. Whether these were comics, coloring books, or story books, we could take in what was going on because we perceived the illustrations and interpreted the sequence of events alongside the easy-to-read text.

The way we perceive information is affected by several factors that contribute to how we rank the hierarchy of the content within the layout. Jones (2011) showed that the factors that affect hierarchy include:

Size: The larger the element, the more attention it will attract, compared to smaller elements. Think of a newspaper headline. The newspaper uses that (large font) header text to signal what the rest of the text (in smaller font) will deliver. Let’s take a hypothetical “breaking story”. Your eye should go right to the headline. Notice how it dominates, spurring you to find out what it’s about?
Color: Bright colors are more likely to draw attention than drab shades. We’ve probably all used a highlighter to mark outstanding points on a photocopied handout. Yellow is richer and brighter than white (in the sense that white is more muted), so it stands out. After bright colors, richer and darker ones will grab the eye’s attention. Lighter tints follow, because they seem more washed out and distant. At the bottom of the color hierarchy are the grayscale or muted, subdued colors. Think of a foggy day, and you’re trying to find four friends. One wears a hi-vis vest: he’ll stand out first; the one in a deep burgundy trench coat will stand out next. Someone’s wearing a cream-colored long coat; she’ll be harder to spot. You meet up with each other and start talking, asking where Jim is. Unfortunately, Jim is wearing a smoky gray hoodie and matching sweatpants. He’s seen you all already, though.
Contrast: Dramatically contrasting colors will catch the eye more than slightly contrasting colors. Contrast helps you show what’s more important in your design. Everything is relative. Imagine you want to make a design based on an architect’s plan for high-rise apartment blocks. You want to show the light, airy and eco-friendly buildings above ground, but you also need to show the strong, deep foundations and underground car park below. By dividing your design in this way, you’ll draw the eye to the cheery living features of the forest-side apartments. This plays off against the lower section—the footer—where you’re showing the utility and safety side of the structures. A little hierarchy goes a long way to engaging the user.
Alignment: Alignment can create order between design elements. For example, placing content and then a sidebar column creates a priority for the reader. We expect important information (such as login buttons) to be in the top right-hand corner of a page. We also see this at work in magazines. If you’re near one, why not flick through; look out for a pull quote. That’s part of, say, an interview, where the writer wants to highlight what the subject said. With its larger font and its break with the alignment of the other text, it makes a hierarchy that draws our eye first.
Repetition: Repeating styles can give the viewer a sense that content is related. For example, we’ve presented most of the text in this document in a similar fashion. If we broke that style, say, by using red text, it could quickly draw attention from the familiar surroundings. It worked, didn’t it? What if we did it again? Another good example is hyperlinks. When you visit a page that has lots of blue words underlined, you know right away that you can click to a lot of other pages.
Proximity: How closely we place design elements to each other tells our users how likely they are to be related. In our list, we’ve separated items with a single row of whitespace. We don’t separate headers in this lesson from the first paragraph of information. This proximity shows that list items are separate (though not so much as to be completely unrelated to each other) but that headers are related to the content that follows.
Whitespace: You can use the space around content (it can be any color, not just white) to draw attention to certain pieces of content. Imagine how much work you’d have without it! It does two jobs: it makes information easier for the eye to digest, and it lets the eye zero-in on each area of information (paragraphs in this case).
Texture and style: The use of textures and styles can help prioritize content, too. Like fonts, they can set the tone of the design. Imagine a pair of projects. Two travel agents want a landing page to show their resort package deals. One is beach-themed, one lake-themed. For the beach-themed resort, we presented a background close-up view of the clear water overlying beautiful white sand. The effect was pleasing. However, when we tried repeating that with the lake, we found that the crystal clear water gave us a lot of large, dark pebbles and stones. That texture ended up being too distracting because it was far more textured than the smooth sand.

“Eye-Catching Designs Need Psychology"

Reports from Copenhagen confirm that more designers, especially web designers, are appreciating the need to engage users more directly. Reaching back into their art school days while working a little psychology into the mix seems to do the trick.

Hierarchy Patterns

There are common patterns for hierarchy both on the printed page and for the digital page. These patterns are based on the movements that our eyes tend to make when presented with a fresh page. English, for example, is read from left to right. English readers have a set scanning pattern when facing a page of text. Arabic readers have a different pattern. Why? It’s because Arabic is read from right to left.

It’s important to understand how your audience processes information before adopting a hierarchy pattern. As this lesson is in English, we’ve included two common left-to-right patterns here:

Z Pattern

Author/Copyright holder: Supermariolxpt. Copyright terms and licence: CC BY-NC-ND 2.0

In websites with a low level of text content (e.g., websites that act as small advertisements for a business or a product rather than delivering volumes of information), the Z pattern of eye scanning is common. The user sees the “text-lite” page and scans from the top left to top right, then glances down through the content (following a diagonal) to the bottom left, before moving to the bottom right.

You can make use of this pattern by ensuring that you include the most important information along the Z pattern this eye movement follows. You’ll have four points joined by three lines going in a Z-shape.

F Pattern

Designers usually apply the F pattern on websites that include text-heavy content and/or video content.

With the F pattern, users begin by scanning left to right along the top, but then scan down the left side of the page, looking for visual clues to the information they seek. When they find such a clue, they scan from left to right. They repeat this process until they reach the end of the page.

This scanning pattern often produces a heat map that looks like the letter “F”, as shown in the image at the top of this article.

It’s perfectly possible to use both Z and F pattern pages on the same website. For example, you might have a very clean homepage that utilizes the Z pattern; however, when the user delves deeper into the site, you might present much more data and use an F pattern instead.

The Take Away

Hierarchies give us order to make sense of a design easily. We want to prioritize headers and menus according to how we know what our users want and what we want them to do. We process information visually, perceiving elements in the order in which the designer has emphasized them according to:

Size — Larger elements will dominate and catch eyes first.
Color — Bright colors catch eyes ahead of muted, drab ones.
Contrast — Stark differences between elements draw eyes to the brighter one.
Alignment — Users expect to find certain elements in the same place.
Repetition — A repeated quality (e.g.,colored parts of text) draws the user’s eye.
Proximity — Putting related elements (e.g., header with associated text) close together means these are related.
Whitespace — Including whitespace around elements singles them out as separate groups of information.
Texture and Style — Using distinct textures/styles (e.g., chunky, military-style buttons) draws the eye while setting the theme.

In the Western World, we read designs according to two common hierarchical patterns:

The Z Pattern — In designs without much text, our eye starts scanning from top left to top right, then diagonally down to bottom left, stopping at the bottom right.

The F Pattern — In designs with more text, we scan across the top, from left to right, then down the left, searching for clues to what we want to know. On finding one, we’ll scan across to the right.

You have your user’s eye to guarantee that you can include these factors to make more effective designs. Keep all of these in mind as you plan. Your best effort might involve using them all, including a fusion of the Z and F patterns. Remember that you’re designing for your users. What are they using, and how might they want to see it online?

Where To Learn More

Course: The Ultimate Guide to Visual Perception and Design

Jones, B. (2011) Understanding Visual Hierarchy in Web Design.Web Design Tuts Plus. http://webdesign.tutsplus.com/articles/understandi...

Bank, C. (2015).“Understanding Web UI Visual Hierarchy”

Bradley, S. (2015). “Design Principles: Dominance, Focal Points And Hierarchy”

Cao, J. (2015). “The 5 Pillars of visual hierarchy in Web design”. The Next Web/TNW.

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

The Key Elements & Principles of Visual Design

Visual design is about creating and making the general aesthetics of a product consistent. To create the aesthetic style

1.1k shares
9 mths ago