Glossary

Visual hierarchy

Published 1 min read

What is visual hierarchy?

Visual hierarchy is the arrangement and styling of page elements to communicate relative importance. Size, color, contrast, spacing, grouping, and position help guide attention.

How it works

Heading sizes and weights can show how ideas relate. Space can separate groups. Contrast can make a control easier to notice. Attention also depends on the task, content, prior experience, and reading direction; not everyone will follow the same viewing order.

Example

A pricing page could make a recommended option larger or more distinct, then test whether users notice and understand it.

Why it matters

A page should help people find what they need. Evaluate whether the hierarchy communicates clearly, rather than assuming attention will produce a particular choice.

Sources and further reading