Visual Hierarchy

011 min

The problem Visual Hierarchy solves

Picture a mobile store page where every product tile, label and banner has the same size, the same color weight and the same spacing. A visitor who wants one thing, such as a sale or a search box, has no signal for where to start. They scan at random, miss the element that matters, and often leave.

This is the problem visual hierarchy addresses. A screen holds more elements than a person can look at in a few seconds. Someone has to decide the order, and if the designer does not decide it, the viewer's eyes decide it by default.

Gordon describes a Williams-Sonoma mobile page where, apart from one maroon block, the elements are all relatively equal in size and color. Gordon adds that most of its text is in capital letters, so very little of it stands out.

The cost is not only visual. A page with no clear order makes people spend effort on a task that design could have done for them. That is why the concept sits next to information hierarchy. Information hierarchy ranks the content by importance. Visual hierarchy is how the screen shows that ranking.

022 min

How Visual Hierarchy works

Nielsen Norman Group defines visual hierarchy as the organization of design elements on a page "so that the eye is guided to consume each design element in the order of intended importance." That definition has two parts. The first part is the order: a ranking of importance that the designer chose. The second part is the means: visible differences between elements.

Nielsen Norman Group names three means. They are color and contrast, scale, and grouping.

Color and contrast

Kelley Gordon wrote in 2021 that "it's not the actual color of an element that creates the hierarchy, but rather the contrast in value and saturation between the element and the context in which it appears." The same orange button is loud on a gray page and quiet on a page full of orange.

Type can carry contrast too. A heavy weight stands out against a regular weight, and italic or underlined words stand out against plain text.

Grouping also sets rank between a heading and its content. In Gordon's Spotify example, less space between a heading and its items than between the groups shows that they belong together.

Why context decides

All three tools are relative. Itti and Koch reviewed computational models of attention in 2001 and listed as their first trend that the same object may or may not appear salient, depending on the other objects around it. This is the reason one contrast rule cannot be copied from one page to another.

An element is only prominent compared with its neighbors. Making one thing stand out always makes the rest stand out less.

031 min

Where Visual Hierarchy comes from

Visual hierarchy has no single originator and no founding experiment. It is practitioner convention. It grew out of everyday design practice, and UX writers later gave it a name.

The definition used on this page is Nielsen Norman Group's. It is a clear statement of an established practice, not the result of a study. We did not find a verified source that names a person who first described visual hierarchy, so none is named here.

Two bodies of research sit underneath the practice. One is the Gestalt grouping rules, which explain why nearby or enclosed elements look related. The other is research on visual attention, which finds that what draws the eye depends on contrast with the surroundings. Itti and Koch's 2001 review in Nature Reviews Neuroscience is one summary of the second body.

Evidence for the practice itself comes mostly from eyetracking in usability studies. Those studies show how people look at pages. They do not prove that any one ranking of elements is the correct one for a given business.

042 min

Visual Hierarchy applied and violated

Spotify on iPhone, as analyzed by Nielsen Norman Group

Gordon's 2021 article analyzes a Spotify screen on iPhone. The eye sees three separate groups on the screen. The designers placed more white space between groups and less between a heading and its own items. That spacing alone shows which items belong to which heading.

The article also uses the squint test. Designers blur a design, by squinting or with a software blur, to see which elements still stand out when the text cannot be read. Gordon blurred the Spotify screen with radii of 5, 10 and 20 pixels. In Gordon's test, a blur of 20 pixels showed that one recently played item had become the most prominent element of the page because of its strong color.

The lesson is that a template can have a correct hierarchy and the content that fills it can break it. A news photo with very strong colors can dominate a homepage even when it illustrates a secondary story.

A violated case: Williams-Sonoma on mobile

Gordon describes a Williams-Sonoma mobile page where, apart from one maroon block, the elements are all relatively equal in size and color. The article says few users will want to sort through that visual clutter.

Compare the two. Spotify has a ranking, and the layout shows it. The Williams-Sonoma page, in the version Gordon analyzed, has one block that stands out and nothing to rank the rest. The first helps people choose where to look. The second leaves them to guess. For the effect of too many competing elements, see visual noise.

052 min

What eyetracking shows about weak and strong hierarchy

Eyetracking research shows what happens to reading when the hierarchy is weak. A hierarchy is also a reading aid, so the two cases are linked.

In the study Jakob Nielsen reported in 2006, the team recorded how 232 users looked at thousands of web pages. They found a dominant pattern that looks like the letter F. People read across the top of the content, then across a shorter line a little lower, then down the left side. Nielsen noted that this is a rough shape and not an exact one.

In 2017, Pernice explained when the F appears. Kara Pernice wrote in 2017 that the F-pattern is the default pattern when there are no strong cues to attract the eyes towards meaningful information. It shows up when text has little or no formatting, such as a wall of text with no bold, bullets or subheadings, and when the person wants to finish quickly.

The opposite case is the layer-cake pattern, first documented in a 2004 study. When headings stand out from body text and describe their sections, people look mostly at the headings and then read the section they want. Nielsen Norman Group calls the layer-cake pattern by far the most effective way to scan pages, apart from reading every word. Nielsen Norman Group sets two conditions: the viewer must identify the subheadings easily, and the subheadings must correctly summarize their sections.

The one variable that differs between the two cases is how strongly the page marks its important parts. Where the page marks them, people follow the marks. Where it does not, they read the top and left because those are the places they start.

A related finding concerns a different kind of position. Pernice's banner blindness article reports that people ignore elements in places traditionally used for ads. Pernice reports that legitimate content elements with ad-like traits are ignored too. A prominent element can therefore be skipped if it looks like an advertisement. The article names three traits: ad-specific placement, ad-like visual treatment, and closeness to real ads. For eye paths that depend on layout, compare the Z-pattern.

062 min

Applying Visual Hierarchy

These moves can be done in a week on an existing page.

1. 1

   Write the ranking first.

   List the elements on the screen and number them by importance for the main user goal. Do this before changing any visual style, as Nielsen Norman Group advises.

2. 2

   Make the top item the largest.

   Nielsen Norman Group suggests no more than two large elements, so that they stay distinct.

3. 3

   Limit the variations.

   Its guidelines say to use no more than three sizes and no more than three contrast variations. For a simple design it suggests two primary and two secondary colors. These are guidelines from one organization, not measured limits.

4. 4

   Group with space first, then borders.

   Put less space between a heading and its content than between groups. Add a border or background only if space is not enough, because containers add clutter.

5. 5

   Run the squint test.

   Blur a screenshot at a few strengths. If the element that stands out is not the one on your list, change the design or the content.

When applying it backfires

Emphasis can be overused. Nielsen Norman Group's own rule is that if everything is contrasted, nothing stands out. A page where every action is a bright, large button has no hierarchy at all.

Hierarchy can also hide things. If a rarely used but necessary control is made small and pale, people who need it will not find it. Rank by what the user needs, not by what the business wants to promote.

071 min

How to spot weak Visual Hierarchy

A weak hierarchy can be checked in data and sessions, not only by opinion.

• Scattered first fixations. In an eyetracking or gaze study, people look at many different elements first. There is no shared starting point.
• Missed primary action. In moderated tests, participants cannot name the main action after the page has loaded.
• Search for something that is visible. In session recordings, people scroll up and down past the element they need.
• Support tickets about a visible feature. The feature exists on the screen, but people write to ask where it is.
• Different readers, different starting points. If the squint test highlights the wrong element, the hierarchy is working against the plan.
• Ignored important blocks. An element with ad-like color, animation or placement gets few fixations, as the banner blindness research describes.

081 min

Visual Hierarchy vs. nearby concepts

Visual hierarchy is often mixed up with ideas that sound close to it. The separating axis is whether the idea is about ranking, about content, or about perception.

A designer can have a good information hierarchy and a poor visual hierarchy. The content is ranked correctly, but the styles do not show the ranking. The reverse is also possible: a strong visual order on top of content that has not been ranked.

091 min

Visual Hierarchy and accessibility

Visual hierarchy depends on differences that some people cannot see. Two success criteria from the Web Content Accessibility Guidelines (WCAG) 2.2 apply.

WCAG 2.2 SC 1.4.3 Contrast (Minimum) requires a contrast ratio of at least 4.5:1 for most text. Large text needs at least 3:1. This matters most for people with low vision. A pale gray secondary element may be a good hierarchy choice and still fail the criterion.

Nielsen Norman Group also warns not to rely only on color, because people with color blindness may not see differences between some color pairs. Use size, weight or position as well.

WCAG 2.2 SC 1.3.1 Info and Relationships addresses structure that is shown only by appearance. Information and relationships conveyed through presentation must also be available in code. A heading that is only large bold text is not a heading to a screen reader. Use real heading elements so the visual ranking and the programmatic ranking agree.

101 min

Where Visual Hierarchy evidence is contested

Visual hierarchy is a convention, so the question of what counts as correct is open. Three points are contested or limited.

The numbers are guidelines. Limits such as three sizes or two large elements come from Nielsen Norman Group's practice. The article gives no study that measured them. Treat them as starting points to test.

The F-pattern is not a universal law. Pernice's 2017 article says scanning on the web does not always take the shape of an F, and that other scanning patterns exist. Nielsen Norman Group's 2019 article on text scanning patterns ranks the spotted and layer-cake patterns as more effective than the F-pattern. A design should not be built around an assumed F.

Saliency is not the same as importance. Itti and Koch's review covers bottom-up attention, which is driven by the image. People also look where their goals send them, and the banner blindness research shows they skip prominent elements that look like ads. A hierarchy built only on visual strength can be ignored by someone with a task.

Where this leaves a practitioner: use the tools as hypotheses. Make a ranking, apply the tools, and then check with eyetracking, a five-second test or session recordings what people actually look at. The principle gives a way to decide where to look first. It does not prove the decision is right.

?9 questions

Questions people ask

§9 sources

Sources