Visual hierarchy

Why it matters

Every screen, poster or slide asks the viewer to do something: read a headline, press a button, notice a warning. People do not read a screen from top-left to bottom-right like a book. They glance, pick out one or two things that stand out, and decide in a second or two whether to keep looking. Visual hierarchy is the order in which the eye moves through a design. If you control it, the viewer sees the important thing first. If you do not, they see whatever happens to be biggest or brightest, which is often the wrong thing.

The core idea

Hierarchy comes from contrast: an element stands out when it is different from what is around it. You have a small set of tools for creating that difference:

• Size. Bigger elements are seen first. A headline at twice the body size reads before the body.
• Weight. Bold text and thick shapes pull attention from thin ones.
• Colour and contrast. A saturated or dark element on a light, calm background jumps out. One bright colour on a mostly neutral screen works like a pointer.
• Position. In left-to-right languages, people tend to start near the top-left and scan down. Things placed high and near the start are noticed earlier.
• Space. An element with generous empty space around it looks more important than one crowded by neighbours.
• Shape and imagery. Faces, photos and unusual shapes attract the eye before text does.

The key is restraint. If everything is bold, nothing is. A good design usually has three levels: one primary element (the main message or action), a few secondary elements (supporting headings, key facts), and everything else as quiet tertiary content.

A worked example

Here is the text for an event page, all at the same size and weight:

Community Code Night
Thursday 14 November, 6-9 pm
Main Library, Room 2
Bring a laptop. Beginners welcome. Free pizza.
Register now

Everything shouts equally, so nothing reads first. Decide what the viewer must take away. For this page: what it is (primary), when and where (secondary) and the action (the button stands out by colour, not by size).

A better arrangement:

1. "Community Code Night" at about 2.5 times the body size, bold, at the top.
2. Date and place on two lines below, at about 1.25 times body size, regular weight, darker grey.
3. The friendly details in body text with comfortable line spacing.
4. "Register now" as a button in the page's one accent colour, with space around it.

Now a passer-by who looks for one second gets the event name. Two seconds gets the time and place. Interested people find the button without searching.

Two quick tests

• The squint test. Step back from your screen or blur your eyes. The shapes that survive the blur are your top level. If the wrong thing survives, or nothing does, adjust size or contrast.
• The five-second test. Show the design to someone for five seconds, hide it, and ask what it was about and what they could do. If they cannot answer, the hierarchy is not doing its job.

Hierarchy in interfaces

On app screens hierarchy also tells people what they can do. A screen should normally have one primary action styled as a filled button. Other actions are secondary (outlined or text buttons). If a form has two filled buttons, "Save" and "Delete", users hesitate, and some press the wrong one. Make the safe, common action primary and the rare or destructive one quieter.

Page titles, section headings and labels also form a hierarchy. In HTML this is the heading order (h1, then h2, then h3), which screen reader users rely on to navigate. Visual size should match that structure: an h3 should never look bigger than the h2 above it.

Common mistakes

• Too many levels. Five font sizes and four colours create noise. Use few, clearly different steps.
• Differences that are too small. 16px next to 17px looks like a mistake, not hierarchy. Make steps obvious (for example, at least 1.2 times bigger).
• Decoration that competes. A bright illustration can steal attention from the button you actually need people to press.
• Using colour alone. Some people cannot tell certain colours apart. Back up colour with size, weight, position or an icon.

Quick recap

• Visual hierarchy is the order the eye reads a design; you create it with contrast.
• Your tools are size, weight, colour, position, space and imagery.
• Aim for one primary element, a few secondary ones, and calm everything else.
• Check with the squint test and the five-second test.

Try it

Open the Do tab. You will rank the elements of a real screen, redesign it on paper or in Figma, and test it on another person.