Visual hierarchy

Visual hierarchy is the order in which a page hands things over. Something is seen first, something second, and most of it is never really read at all. The order is set by design decisions whether or not anybody made them deliberately, and a page where nobody made them gives every element the same claim on attention.

In short

• The order a page is taken in, decided by design rather than by the reader.
• Size, contrast, position, spacing and grouping produce it.
• Emphasis is relative, so emphasising everything emphasises nothing.
• Blur the page until the words vanish and the hierarchy is what remains.

Attention is spent in an order, and you choose it

Nobody reads a web page evenly. Attention arrives, lands somewhere, and moves in a sequence, and the sequence takes a few seconds to run before a decision about staying is effectively made.

Eye tracking research has found repeatedly that dense, unstructured text gets scanned rather than read, with attention concentrated along the top and down the left side. That finding is often repeated as a layout instruction, which it is not. It describes what a reader falls back on when the page offers no guidance. A page with a clear hierarchy overrides it, and that is the whole point of having one.

So the practical question is not where people look by default. It is whether the first thing they land on is the thing you would have chosen.

The five things that create rank

Prominence comes from a small set of levers, and they compound. None of them are specific to the web, and all of them predate it, which is why they turn up unchanged in graphic design of every other kind.

• Size. The most obvious, and the one most likely to be overused until everything is large and nothing leads.
• Contrast. Difference from the neighbours, in weight, tone or colour. A quiet element among quieter ones still leads.
• Position. Higher and further left arrives earlier in most layouts, and what sits above the fold arrives first of all.
• Space. Room around something reads as importance. This is the lever small businesses use least and the one that costs nothing.
• Grouping. Things placed near each other are understood as belonging together, which is what lets a page be scanned in blocks rather than in words.

The levers work against each other when they disagree. A large heading crowded against three other large headings loses to a modest one with white space around it, because prominence is relative and space is a form of contrast.

When everything shouts

The common failure in small business design is not ugliness. It is flatness.

It arrives by accumulation, and it survives because no brand guideline ever forbids adding one more thing. The homepage needs the tagline, and then the promotion, and then the new service, and each addition is given prominence because whoever asked for it considers it important. Nothing is removed and nothing is demoted, so the page ends up with six things competing at the same volume. A visitor who cannot tell what to look at first looks at nothing in particular and then leaves, and the conclusion drawn afterwards is usually that the design needs refreshing.

The call to action suffers first, because it is one item among many and its whole job depends on being the item that stands out. A page can only really have one first thing, and deciding which means accepting that the others are second.

A test you can run on any page

Step back from the screen until the text is illegible, or squint until it blurs.

What survives is your hierarchy. It should be, roughly in order, what the business does, the main thing you want somebody to do, and then everything else. If instead you see an even field of grey blocks, or if the loudest surviving element is a stock photograph, the page is ranking things you did not intend to rank. Run it again at phone width, where a stacked layout can reorder everything you just checked. Fixing that is usually a matter of taking emphasis away rather than adding it, which is why the exercise tends to end with a shorter page than it started with.