An empty state is the screen a user sees before there is any data: no projects, no messages, no results. Most teams treat it as an afterthought, so users land on a blank page and leave. This article shows you how to turn that blank page into a working onboarding moment that tells people what the feature is, why it matters, and exactly what to do next.
Why empty states decide whether people stay
The first-run empty state is often the very first thing a new user sees inside a feature. If it is blank or vague, the user has no path forward. They assume the product is broken or that they missed a step. This is a common cause of early drop-off that analytics rarely explain, because the event looks like a normal session that simply ended.
There are three distinct kinds of empty state, and they are not interchangeable:
- First use – the user has never added data. This is a teaching moment.
- Cleared – the user finished everything, like an empty inbox. This is a reward moment.
- No results – a search or filter returned nothing. This is a recovery moment.
Designing all three the same way is the root mistake. A first-use screen needs to instruct. A cleared screen should reassure. A no-results screen must help the user change their query.
What a strong first-use empty state contains
A plain statement of value
Say what this space is for in one short line. “Your invoices will appear here” beats a decorative illustration with no words. Users skim; lead with meaning.
One primary action
Give a single obvious button that creates the first item. Two or more competing actions split attention and slow the decision. If setup has prerequisites, show them inline rather than letting the user fail after clicking.
A hint of the payoff
When it helps, show a small preview of what a filled state looks like. People commit faster when they can picture the result.
A real scenario
Consider a task app where a new user opens the “Projects” tab. The weak version shows a grey folder icon and the word “Empty.” The user stares, then closes the tab. The strong version reads: “Projects group related tasks. Create your first project to organize your work,” with a single “New project” button and a faint example card behind it. The second version removes the guesswork. The user knows what a project is, why to make one, and how. That is the whole job of the screen.
Common mistakes and how to fix them
- Blank or icon-only screens. Fix: add a one-line explanation and a clear action.
- Treating no-results like first-use. Fix: for search, echo the query, suggest removing a filter, and offer a reset link. Never tell a searching user to “get started.”
- Hiding the primary action below the fold or behind a menu. Fix: place the create action in the center of the empty area where the eye lands.
- Jokey copy that skips instructions. Fix: humor is fine, but the user must still learn what to do. Clarity first, personality second.
- Forgetting the cleared state. Fix: confirm success (“You’re all caught up”) instead of showing the same emptiness as a broken feature.
Action steps checklist
- List every screen in your product that can be empty.
- Label each as first-use, cleared, or no-results.
- Write one sentence of value for each first-use screen.
- Add exactly one primary action to first-use and no-results screens.
- For no-results, echo the query and give a reset path.
- For cleared states, write reassuring confirmation copy.
- Test with someone who has never seen the product and watch where they hesitate.
Conclusion and next step
Empty states are not gaps to fill with an icon. They are the moments where a user decides whether your product is worth learning. Start with your highest-traffic first-use screen this week, apply the three-part pattern, and watch early drop-off in that flow.
FAQ
Should every empty state have an illustration?
No. An illustration is optional decoration. The words and the action are what the user needs. Add art only after the copy and button are clear, and never let it push the action off screen.
How long should empty-state copy be?
One or two short sentences for value, plus a button label. If you need a paragraph, the feature itself is probably confusing and needs simplification, not more text.
What about a no-results state on search?
Repeat the searched term so users trust the system read them correctly, explain that nothing matched, and give an easy way to broaden or clear the search. Suggest close alternatives if you can compute them.
Do empty states matter for returning users?
Yes, mainly through the cleared state. An empty inbox or a done task list is a positive signal when you confirm it, and a confusing one when you leave it bare.