All categories/Product and design
Interaction and UX · Level Advanced · Design Visual Hierarchy
Visual hierarchy: what gets seen first
Everything has equal weight and nothing stands out.
Prompt
Ask what the user is doing and what they fear, then decide what goes on screen. Visual tricks do not fix structural problems.
Task: Everything has equal weight and nothing stands out.
[Before you start, do three things]
1. Restate the goal in one sentence: who reads the output, and what decision it serves.
2. If I have not given you the following, ask me. Do not assume:
- the goal and key information
- current layout
- time on page
- device
3. Say how you plan to do it (at most 5 steps) and wait for my go-ahead.
[Go through each of these]
- one element stands out, the rest step down
- use size, position, whitespace, not colour stacking
- a squint test to check the focal point
- three elements competing for attention
[Process]
1. State the single job of this screen
2. Answer the user's current worry first
3. Order by information priority and delete
4. Design empty, loading and error states
5. Give a minimal usability test
[Output]
One job, priority, three states, test plan.
[Do not]
- Never two primary actions on one screen
- Do not test with lorem ipsum
- Never ignore the empty state
- Never use colour as the only signalWhat to state before it starts
Leave these unsaid and the model fills them with an assumption. Most 'wrong answers' start here.
- the goal and key information
- current layout
- time on page
- device
Go through each of these
Where this kind of work most often goes wrong. Already in the prompt, so you do not have to remember it.
- one element stands out, the rest step down
- use size, position, whitespace, not colour stacking
- a squint test to check the focal point
- three elements competing for attention