Visual hierarchy: how the eye moves on a page, and how to guide it

You spend an evening writing a careful page about your service. You send the link to a friend, and two minutes later they reply: "Looks nice! What do you actually do?" The answer was right there, in the third paragraph. They never got to it.

That is a visual hierarchy problem. The words were fine. The page just never told the eye where to go first, so the eye did what it does by default and skipped most of it.

People scan first and read later

In 1997 Jakob Nielsen published a short piece with a blunt finding from his team's usability studies: 79% of test users scanned any new page they came across, and only 16% read word by word (Nielsen, 1997). The details of the web have changed a lot since then. The habit has not.

Nielsen Norman Group's eye-tracking research, which first described the F-shaped pattern in 2006, shows what that scanning looks like. When a page gives no strong cues, people read across the top, then make a shorter sweep across a little lower down, then run their eyes down the left edge. The heatmap looks like the letter F, sometimes an E. Kara Pernice's 2017 update says the pattern still shows up on desktop and on mobile, and mirrors in right-to-left languages like Arabic (Pernice, NN/g, 2017).

The important part is when it happens. According to the same article, the F-pattern appears when three things combine:

• the text has little formatting (no headings, bullets or bold),
• the reader wants to be efficient,
• the reader is not interested enough to read everything.

That describes most visitors to most pages. And the cost is clear: content on the right and lower down simply gets skipped, including content that matters.

The article also names other scanning patterns. Two are worth knowing:

• Layer-cake: the eye jumps from heading to heading and skips the body text. This is the pattern you want, because it means your headings are doing the work.
• Spotted: the eye skips around looking for something specific, like a link, a number or a price.

The F-pattern is what happens when you don't design a path. Visual hierarchy is how you design one.

What visual hierarchy means

Kelley Gordon at Nielsen Norman Group defines visual hierarchy as arranging design elements so that the eye takes them in "in the order of intended importance" (Gordon, NN/g, 2021). In plain words: you decide what people see first, second and third, and the design makes that happen without anyone having to think about it.

She names three main tools. I add a fourth, position, because the scanning research above makes it hard to ignore.

1. Size

Bigger things get noticed first. A headline twice the size of the body text will be read before the body text, almost every time. Gordon's guidance for simple designs is to use no more than three type sizes and keep no more than two elements large. When everything is big, nothing is.

2. Colour and contrast

The eye is drawn to whatever stands out from its surroundings: a dark button on a light page, a warm colour among cool ones, bold text in a paragraph. The same article suggests reserving bright warm colours like red for warnings and errors, and never relying on colour alone, because people with colour blindness may not see the difference.

Contrast also decides whether text can be read at all. The web's accessibility standard, WCAG 2.2, asks for a contrast ratio of at least 4.5:1 between normal text and its background, and at least 3:1 for large text, which it defines as 18 point (about 24px) or 14 point bold (about 18.5px) (W3C, WCAG 2.2, 1.4.3). Light grey text on white might look elegant in a mockup, but if it fails that ratio, part of your audience can't read it.

3. Grouping and white space

Things that sit close together look like they belong together. Designers call this proximity. A heading placed right above its paragraph clearly labels it. A heading floating halfway between two paragraphs confuses everyone. Borders and background panels do the same job: they tell the eye "this is one unit".

White space (the empty area around an element) is a hierarchy tool too. Gordon recommends giving important elements more of it. A button with room around it gets noticed. A button squeezed between three links gets lost.

4. Position

Because of the scanning patterns, the top of the page and the left edge get the most attention on a left-to-right page. Pernice's advice follows from that: put the most important points in the first two paragraphs, and start headings and list items with the words that carry the information (Pernice, NN/g, 2017). "Pricing for small teams" works better as a heading than "Here is how our flexible pricing works", because the eye only catches the first few words.

A worked example: a coaching page, before and after

Here is a made-up but very typical home page for a fitness coach, and how I would rebuild its hierarchy.

Before

• A large logo and a photo across the full width.
• A heading in the same size as the menu: "Welcome to my page".
• Three paragraphs about the coach's journey.
• The price, in light grey body text, in paragraph three.
• A "Book a call" link, the same blue as five other links.

When you scan this page, you see the logo, the photo, and the word "Welcome". None of them tells you what is on offer or what to do next.

After

Nothing was removed. The story is still there. But now someone who reads only the first two lines and the button knows what this is, who it's for and how to start, which is all most visitors will ever read.

The squint test

Here is the quickest way to check your hierarchy, and it costs nothing. Gordon describes it in the same NN/g article: blur the design, or simply squint at it, until you can't read the words (Gordon, NN/g, 2021). What you can still see are shapes, groups and contrast.

Then ask:

• What do I notice first? Is it the thing I most want people to see?
• Can I count three or four clear groups, or is it one grey wall?
• Is there exactly one thing that looks like the main action?

If the first thing you notice is your logo, a stock photo or a decorative shape, your hierarchy is pointing in the wrong direction.

Common mistakes I see

• Everything bold. Bold works by contrast with the text around it. A paragraph where half the words are bold has no emphasis left.
• Two buttons that look identical. "Book now" and "Learn more" side by side in the same colour and size ask the visitor to choose. Make one primary and the other a quieter text link.
• Headings that are clever instead of clear. "The journey begins" tells a scanner nothing. "How the first week works" does.
• Low-contrast text for style. It fails people with low vision, and it fails everyone on a phone in sunlight.
• The important bit hidden on the right. Sidebars and right-hand columns are where the F-pattern spends the least time.