Navigation

Case StudiesExperimentationTools

Appearance

Attention, memory and perception

Visual hierarchy

Also called Visual anchors

The order in which people notice things on a screen, set by size, contrast, colour, spacing and position.

People don't read a screen top to bottom; they scan, stopping at whatever stands out. Hierarchy decides what they see first, second and not at all.

Make the most important thing the most prominent, and let everything else step back. Squint at a design: what still stands out is what people will see first.

In practice

A checkout where the order total and the pay button are the largest, highest-contrast things on the screen.

Common mistake

Giving everything equal weight, or making secondary actions as loud as the primary one, so people can't tell where to look.

Where it comes from

Draws on Gestalt psychology from the 1920s and on eye-tracking research such as Nielsen Norman Group's 2006 finding that people scan web pages in an F-shaped pattern.

See all 208 terms