All categories/Product and design
Interaction and UX · Level Advanced · Design Empty state UX
Empty states: the first visit
New users land on a blank screen.
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: New users land on a blank screen.
[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:
- product type and first task
- where they come from
- what can be pre-filled
- sample data
3. Say how you plan to do it (at most 5 steps) and wait for my go-ahead.
[Go through each of these]
- the empty state says what will appear and offers one action
- one minimal way to start
- sample data must be removable
- avoid the bare 'no data' message
[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.
- product type and first task
- where they come from
- what can be pre-filled
- sample data
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.
- the empty state says what will appear and offers one action
- one minimal way to start
- sample data must be removable
- avoid the bare 'no data' message