perception

Visual hierarchy

The ranked order of importance across elements, made visible through size, weight, colour, spacing and position – so scanning in order of importance takes no conscious effort.

Your eye doesn’t read a screen evenly – it lands somewhere first, then gets steered. Visual hierarchy is deliberately controlling where it lands and where it goes next. Done well, a user’s eyes flow price → primary action → details without being told to. Done badly, everything shouts at once, so nothing does.

The levers, roughly strongest first: size, weight, colour/contrast, spacing (isolation), and position. Spacing is the one people forget – an element with more room around it reads as more important at identical size and colour.

The most common failure in real products is competing hierarchy: five things styled equally important, so the user has to work out the next step themselves. “Is there one obvious primary action here?” is the single highest-value question you can ask of any screen.