Visual hierarchy

Visual hierarchy controls where attention goes. It determines what users notice, what they read, and what they ignore. Good hierarchy guides users naturally.

How users scan

Users scan headings, bold elements, images, and buttons. Hierarchy helps them understand importance without reading everything.

Tools that create hierarchy

Hierarchy is created using size, contrast, spacing, colour, positioning, and typography. Used together, these create clarity.

Hierarchy and decision-making

Clear hierarchy reduces overwhelm, speeds understanding, and supports action. Poor hierarchy causes hesitation.

Hierarchy and conversion

Conversion depends on users noticing value propositions, trust signals, and calls to action. Hierarchy makes these visible. See Calls to action.

Hierarchy on mobile

On mobile, hierarchy matters even more. Content stacks vertically and attention spans are shorter. See Mobile UX.

For next steps, see Page structure and Spacing and layout.