What is visual hierarchy? Examples of size, contrast and spacing

Hierarchy is a relationship between elements

A heading appears prominent relative to the text around it. A button draws attention because its weight, colour or position differs from neighbouring elements. If everything gets the strongest treatment, the layout offers fewer clues about where to begin.

Nielsen Norman Group describes visual hierarchy through scale, colour, contrast and grouping. These are tools rather than a fixed recipe. A reader looking for a departure time has a different task from someone comparing the price and limitations of a subscription.

[1]

Worked example: an invitation with one job

Consider a fictional invitation to a Tuesday design meetup. Its job is to help someone recognise the event, find the time and location, then understand how to reserve a place. The two versions below contain the same words. Their different emphasis changes the route through those words.

In the second version, the event name is the main heading, the time and place form a clear group, and reservation is a distinct final instruction. The smaller organiser line remains readable. We have assigned roles, not added decoration or extra content.

Size, contrast and spacing do different work

Use each tool to answer a question about the content:

• Size: which information needs to be recognised first? Make that role visibly different, while allowing for long titles and narrow screens.
• Contrast: what needs to stand out from its surroundings? Relative emphasis should not make supporting details too faint to read.
• Spacing: which details belong together? Keep a label near the value it describes, and separate groups that have different roles.

Make the structure available beyond appearance

Visual grouping does not replace document structure. On a website, meaningful headings help assistive technology users navigate; a bold paragraph is not automatically a heading. W3C also advises sufficient foreground/background contrast and avoiding colour as the only way to communicate information.

For the invitation, the document should identify the event name as a heading and expose the reservation control as an actual link or button when it is functional. These illustrations are static examples, so their reservation labels are not clickable controls.

[2][3]

Misconception: the biggest element must always be the action

A large action button can attract attention before someone understands what they are agreeing to. In the invitation, knowing the event and time may need to come before reserving. In an urgent warning, the essential instruction may instead deserve priority.

Judge the sequence against the task. Ask someone to find the date, identify the event and explain the next step. If they find the action quickly but miss an important condition, the hierarchy may be effective at attracting a click while failing to communicate the decision.