An empty state is the screen a user sees when there is nothing to show: a fresh inbox, a search with no results, a dashboard before the first upload. Most teams treat it as an afterthought and ship a blank box. That is a mistake. The empty state is often the first thing a new user sees, and the moment where a confused user decides whether to continue. This article shows you how to design empty states that orient people, reduce anxiety, and move them toward the next action.
Why empty states matter more than they look
A blank screen forces the user to answer three questions on their own: What is this? Did something break? What do I do now? If your design does not answer these, the user fills the gap with doubt. Empty states are the cheapest onboarding you will ever build, because they appear exactly where the user is stuck, with full context about what is missing.
The three kinds of empty
They are not interchangeable. Each needs a different tone and a different call to action.
| Type | Cause | Goal of the screen |
| First use | User is new, no data exists yet | Teach the value, invite the first action |
| User cleared | All items done, archived, or deleted | Reassure, celebrate, or offer next task |
| No results / error | A search or filter matched nothing, or a request failed | Explain why, offer a way back |
What a strong empty state contains
You do not need illustration to make an empty state work. You need clarity. At minimum, include a short heading that names the situation, one line explaining what belongs here, and a single primary action. Keep the action specific: “Import your first contact” beats “Get started.”
Match the tone to the cause
A first-use empty state should feel inviting and confident. A no-results state should feel neutral and helpful, never scolding. An error empty must be honest about what failed and give the user a path: retry, adjust filters, or contact support. Using a cheerful illustration on a failed payment screen reads as tone-deaf.
A real scenario
Consider a project management tool. A new user lands on the Tasks page. A weak version shows a gray panel that says “No tasks.” The user shrugs and leaves. A strong version shows: a heading, “Your tasks live here,” one supporting line, “Break work into small steps you can check off,” a primary button, “Add your first task,” and a faint secondary link, “Import from a template.” The difference is not decoration. It is that the second version answers all three questions and removes the decision the user was stuck on.
Common mistakes and how to fix them
- Treating all empties the same. Fix: audit each empty screen and label it first-use, cleared, or no-results. Write copy per type.
- No call to action. A dead-end empty wastes the user’s attention. Fix: give every first-use and cleared state one clear next step.
- Blaming the user. Copy like “You have not added anything” feels accusatory. Fix: describe the state, not the user’s failure. “Nothing here yet” is neutral.
- Over-designing. A huge illustration that pushes the button below the fold hurts more than it helps. Fix: lead with the action, keep art small or skip it.
- Forgetting the loading and error variants. A no-results state that also appears during a slow load makes users think their data vanished. Fix: separate loading, empty, and error into distinct states.
A checklist for every empty state
- Identify which of the three types this screen is.
- Write a heading that names the situation in plain words.
- Add one supporting line that explains what belongs here.
- Provide one primary action, phrased as a specific verb.
- Offer a secondary path only if it genuinely helps (import, learn, sample data).
- Confirm the tone fits the cause, not a default template.
- Check that loading and error states are visually distinct from the empty state.
- Test on a real new account, not a seeded demo account.
Conclusion and next step
Empty states are quiet, high-leverage design work. They appear at the exact moment users are most likely to abandon, and they cost little to improve. Your next step: open your product with a brand-new account, screenshot every empty screen you hit, and rewrite each one against the checklist above. You will usually find your best onboarding wins hiding in these blank screens.
FAQ
Do I always need an illustration?
No. Clear copy and a single obvious action do the real work. Illustration can add warmth, but it is optional and can hurt if it pushes the primary action out of view.
Should a no-results search show suggestions?
Yes, when you can. Offering a broader query, removing a filter, or showing popular items gives the user a way forward instead of a dead end.
How is an empty state different from a loading state?
A loading state means data may still arrive; an empty state means there is genuinely nothing to show. Merging them makes users think their content disappeared during a slow load.
Can seeding sample data replace a good empty state?
Sometimes, for products where a live example teaches faster than words. But sample data must be clearly labeled and easy to remove, or it creates confusion about what is real.
Where should the primary action go?
Above the fold and visually dominant. If a user has to scroll past an illustration to find the button, the design has buried the one thing that matters.
References
- Nielsen Norman Group — articles on empty states and onboarding.
- Material Design and Apple Human Interface Guidelines — sections on empty and error states.