Digital psychologyAttention004

Visual Hierarchy

People read a page in the order its visual weight tells them to.

What it is

Size, contrast, position and whitespace decide what gets seen first, second and never. If the hierarchy matches the argument you want to make, people follow it without effort. If it does not, they read the wrong thing first and leave with the wrong impression.

The research

Eye-tracking studies of web pages consistently show fixation clustering on the largest and highest-contrast elements first, with an F-shaped scan pattern on text-heavy pages.

Nielsen, 2006

How to use it

Three levels, no more

Headline, supporting line, detail. If a page needs a fourth level of type, it needs a second page.

Weight the number, not the label

On a stats row, the figure is large and dark, the label small and grey. People scan the figures first, which is the point.

Whitespace is a signal

The element with the most space around it reads as the most important. Crowd the things you want ignored.

Related

Sources that shaped this entry: growth.design.

Let’s bring your idea to life

Tell me about your business and what you want digital marketing to do for it. I’ll come back with an honest view on whether I can help.

Or reach me directly at ben@compoundgrowth.au