BYD TechThe short answer
Visual hierarchy is the arrangement of elements so people notice them in order of importance. The Nielsen Norman Group names three main tools: color and contrast, scale, and grouping. On a good screen, a person can tell within seconds what the page is, what matters most, and what to do next. Weak hierarchy, where everything is equally loud, is one of the most common reasons interfaces feel cluttered.
Key points
- Decide what matters most before styling anything.
- Contrast, size and grouping create hierarchy.
- Use only a few text sizes.
- One primary action per screen.
- Squint or blur the design to test what stands out.
The three tools
| Tool | How it works | Watch out for |
|---|---|---|
| Color and contrast | Elements that differ most from their surroundings draw the eye | Too many bright colors cancel each other out |
| Scale | Larger elements read as more important | More than about three type sizes looks chaotic |
| Grouping | Proximity, white space and containers show what belongs together | Even spacing everywhere hides structure |
NN/g notes that hierarchy comes from contrast with surroundings, not from a color itself, and recommends no more than three sizes for a design’s type.
Applying it to a screen
- Write down the screen’s purpose and its one primary action.
- Rank the content: what must be seen first, second, and only if needed.
- Give the first item the most contrast and size, and the primary button the strongest color.
- Make secondary actions quieter: outlined or text buttons.
- Group related items with spacing, and separate groups with more space.
- Remove or move anything that competes without earning its place.
Checking a design
- Squint, or blur a screenshot: the shapes that remain should be the important ones.
- Show the screen for five seconds, then ask someone what it was for and what they would do.
- Look for two buttons with equal weight competing for the same moment.
- Check that headings look like headings and links look clickable.
Hierarchy matters most on pages that must convert. See Landing page best practices. It also depends on the words, so see UX writing. Screen layouts are designed and tested in our UI/UX design work.
Sources
Checked when this guide was written.
