Understanding Hierarchy in Design
How size, weight, colour, space and position combine to tell the eye where to look first. The lesson adds the rules; this shows them applied to real layouts.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Explain what visual hierarchy is and why people scan rather than read.
- Use size, weight, colour, contrast, position and space to set an order of importance.
- Test a design's hierarchy with the squint test and the five-second test.
The idea
Visual hierarchy is the order in which people notice things on a screen. A good hierarchy makes the most important thing the most noticeable, the next most important thing the next most noticeable, and so on. A poor hierarchy either makes everything equally loud, so nothing stands out, or makes the wrong thing loudest.
People rarely read interfaces word by word. They scan, looking for anything that matches what they came for, and only slow down when they find it. Hierarchy is how you guide that scan.
The tools of hierarchy
- Size: larger elements are noticed first. This is the strongest and most overused tool.
- Weight: bold text stands out from regular text of the same size.
- Colour and contrast: high contrast against the background draws attention; muted colours recede. A single accent colour on an otherwise neutral screen is very powerful.
- Position: in left-to-right languages, people tend to start at the top left. Content near the top of a screen gets more attention than content far below.
- Space: an element surrounded by empty space feels more important than one crowded by neighbours.
- Shape and style: a filled button stands out from text links; an image stands out from text.
Use as few tools as possible for each level. If a heading is already larger, it may not also need to be bold, coloured and underlined. Every extra signal you add to one element makes the others quieter, and you quickly run out of ways to make something stand out.
Levels, not elements
Most screens need only three or four levels of importance: the one thing people must see (the page purpose or main action), the supporting information they use to decide, the details they occasionally need, and the background chrome. Decide which level each element belongs to before you style it.
Why it matters in real projects
Hierarchy decides whether people find what they came for. On a product page, if the price and the "Add to basket" button are no more prominent than the returns policy, people take longer to decide and some give up. On a dashboard, if every number is the same size, managers miss the one that changed.
It also makes collaboration easier. When you can explain hierarchy as levels of importance, decisions become discussable: "The delivery date is level two because people use it to decide" is a far better argument than "I think it looks better bigger".
A realistic example
A food delivery app shows restaurant cards. The first version gives the restaurant name, cuisine, rating, delivery time, delivery fee and a "Free dessert" promotion the same font size and weight. In testing, people say they "can't tell the difference between the restaurants".
The redesign asks what people use to choose. Research with the app's users shows they pick a cuisine first, then compare delivery time and fees, and only then look at ratings. The new card makes the restaurant photo and name level one, puts delivery time and fee together on one line at level two, the rating and cuisine at level three in a muted colour, and the promotion as a small label on the photo. The cards become quicker to compare, and people stop missing the delivery fee.
Step by step
List every element on the screen
Write each piece of text, image and control on its own line.
Assign each one a level
Level 1 is what people must see first. Level 2 helps them decide. Level 3 is detail. Level 4 is background chrome. Be strict: usually only one or two things are level 1.
Choose one or two tools per level
For example: level 1 large and bold; level 2 medium size, regular weight, full contrast; level 3 small and muted.
Apply the levels consistently
Everything on the same level should look the same. If two level-2 items look different, people will assume they differ in importance.
Squint test
Step back or blur your eyes. What can you still see? It should be your level-1 items.
Five-second test
Show the design to someone for five seconds, hide it, and ask what they remember and what the page was for. If they remember the wrong thing, adjust.
Common mistakes
Mistake Making everything bold or big because "it's all important".
Instead If everything is emphasised, nothing is. Rank ruthlessly; most things are level 3.
Mistake Using colour as the only way to signal importance.
Instead Combine colour with size, weight or position so the hierarchy still works in greyscale and for colour-blind users.
Mistake Letting decoration outrank content, for example a large illustration above the actual task.
Instead Ask whether the decoration helps people act. If not, shrink it or move it down.
Mistake Too many levels.
Instead Three or four are enough for most screens. More levels become indistinguishable.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Hierarchy rebuild
Take a screenshot of a busy screen from an app or website you use (a product page, a bank account summary, an event listing). Redesign its hierarchy without adding or removing content.
Steps
- List every element and assign it a level from 1 to 4.
- Write down which tools you will use for each level.
- Redesign the screen in a design tool or on paper using only those rules.
- Run the squint test on the original and your version, side by side.
- Run a five-second test with one person on each version and note what they remember.
Deliverable
Before and after images, your level list, and the five-second test results.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
5 items
Summary
- Hierarchy is the order in which people notice things; it guides scanning.
- Use size, weight, colour, position, space and style, but only one or two per level.
- Decide levels of importance first, then style them consistently.
- Check with the squint test and the five-second test.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Visual Hierarchy in UX: Definition (opens in a new tab)Nielsen Norman Group
- 5 Principles of Visual Design in UX (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.