i

Visual hierarchy

STR·11 · 11 of 11

A reader can only look at one thing first. Design decides which, or the accident does.

traditional Long-standing practice, with no single citable origin. Why: Treisman and Gelade (1980) is citable for the mechanism, and is cited here. "Visual hierarchy" as a design rule is a practice tradition with no origin document — it is taught everywhere and attributed nowhere, and the honest label for that is traditional rather than documented.

The same task, built twice

Both panes below are real interfaces. They respond, they can be got wrong, and each is timed from your first move in it. The times are not a study — two panes, one reader, no controls. They are here to make a difference you can feel into a number you can see, and nothing is recorded or sent anywhere.

Your task

You have been charged twice for the same order. Find the control that disputes a charge, and press it.

Five equal candidates—

Order #48812

Two charges of £42.00 on 14 August

Every control is the same size, the same weight and the same colour. Nothing is hidden and nothing is mislabelled — the words are identical to the pane on the right. The only thing missing is a ranking, so the eye has to read all five to find one.

One, then the rest—

Order #48812

Two charges of £42.00 on 14 August

One control is larger, heavier, and given room. The other four are still there, still reachable, and now cost nothing to skip. Same words, same order, same five options.

What to watch Count the clicks, not the seconds. A screen with no hierarchy is not slower to read — it is read in a different way, by scanning every option instead of seeing one.

Five devices, one at a time

A screen decides what you read first using scale, weight, colour, space and position. Switch one off and nothing is hidden, reworded or moved out of reach — that device simply stops separating the primary action from the other four. Turn off all five and the pane on the left is what you get.

Order #48812

Two charges of £42.00 on 14 August

The principle

OriginNo single source, which is why this entry is marked traditional. The perceptual half is citable — Treisman and Gelade (1980) showed that certain attributes are processed preattentively, found in a glance and without search, which is why size and colour separate an element from its neighbours before anyone has read a word. The design half is older and unattributed: the typographic tradition of the display line, the manuscript initial, and the newspaper front page, which solved this problem for centuries before it had a name.
EvidenceThe sixty-seven published grids are an argument about this: a grid exists to make the ordering repeatable rather than renegotiated per page. Downstairs, the Hawaii alert is what happens when the most consequential control on a screen is given no more weight than its neighbours.
Limits & misuse"Make it stand out" applied to six things at once produces a screen with no hierarchy at all, only noise — the second focal point costs more than the first one gained. The devices are also not interchangeable: colour alone fails for a reader who cannot distinguish it, which is why 1.4.1 exists, and scale alone fails once everything has already been enlarged. Hierarchy is a ranking, and a ranking with no bottom is not one.