An empty state is the screen a user sees when there is no data yet: a fresh inbox, a search with zero results, a project with no tasks. It is the moment most designs go silent, and it is exactly where new users decide whether your product is worth learning. This article gives you a working method for designing empty states that reduce confusion and move people to their next action.
Why empty states matter more than they look
Empty states carry a heavy load for how little space they get. For a first-time user, the empty state is often the very first thing they see after signing up. There is no content to hide behind, so the interface has to explain itself. Handle it well and the product feels guided. Handle it poorly and the user assumes something is broken.
There are three distinct kinds, and they need different treatment. Mixing them up is the root of most empty-state problems.
The three types
- First use (blank slate): the user has done nothing yet. The job is to teach and invite the first action.
- Cleared or completed: the user finished everything, like an inbox at zero. The job is to reassure, not to nag.
- No results / error-adjacent: a filter or search returned nothing. The job is to explain why and offer a way out.
What a good empty state actually does
Strip away decoration and a strong empty state answers three questions in order: What is this space for? Why is it empty right now? What should I do next? If any of those go unanswered, the user has to guess.
The most important element is a single, obvious primary action. A blank-slate screen with a clear “Create your first project” button outperforms one with a paragraph of explanation and no button, because it converts curiosity into motion.
A real scenario
Consider a task app’s first-run screen. A weak version shows a gray box that says “No tasks.” The user stares, unsure whether tasks live here or somewhere else. A stronger version says “Your tasks will show up here” as a subtitle, adds one line explaining that tasks are how you track work, and places a single “Add a task” button in the center. Same empty screen, but now the user knows what the space is, why it is blank, and precisely what to press. That is the entire difference, and it costs almost nothing to build.
Common mistakes and how to fix them
- Treating all empty states the same. A “cleared inbox” screen that shows an aggressive “Get started” button feels wrong because the user already knows the tool. Fix: match the message to the type. Celebrate a cleared state; teach a blank slate.
- Decoration without direction. A large illustration and no button looks polished but leads nowhere. Fix: lead with the action, then decorate if space allows.
- Blaming the user on no-results screens. “Nothing found” reads like a dead end. Fix: state the likely cause and offer a recovery, such as clearing filters or broadening the search.
- Fake emptiness. Showing an empty state while data is still loading makes the product look broken for a moment. Fix: show a loading indicator first, and only render the empty state once you confirm there is truly nothing.
- Walls of text. Three sentences of instructions rarely get read. Fix: one short line plus one action.
Action checklist
- Identify which of the three types this screen is.
- Write one sentence explaining what belongs in this space.
- Add exactly one primary action for blank-slate and no-results screens.
- For no-results, name the likely cause and give a one-click recovery.
- Distinguish “loading” from “empty” so you never show empty prematurely.
- Keep copy to one or two short lines.
- Test the screen with someone who has never used the product.
Conclusion and next step
Empty states are not filler. They are the quiet onboarding of your product. Your next step: open your app, log in with a brand-new account, and screenshot every empty screen you hit. Rank each one by whether it answers what, why, and what next. The weakest one is your highest-value fix this week.
FAQ
Should every empty state have an illustration?
No. Illustration is optional and often a distraction. A clear sentence and a single action do more work. Add art only after the message and action are solid, and only if it does not push the button below the fold.
How much copy is too much?
If the user has to read more than two short lines before acting, it is too much. Empty states are glanced at, not studied. Move detailed instructions into a help link or a later tooltip.
What is the difference between an empty state and an error state?
An empty state means the system worked and there is simply nothing to show. An error state means something failed. Keep them separate: a no-results search is empty, while a failed request is an error and should say so.
Do empty states matter for internal tools?
Yes. Internal users are still new once. A clear blank slate reduces training time and support questions, which is often where internal tools bleed the most hours.