Empty State
What a screen shows when it has no content yet — the first screen every new account sees, and usually the last one anybody designs.
UI ComponentsAn empty state is the version of a screen that renders when the query returns nothing. There are three of them and they are not interchangeable: first-use (the account is new and nothing exists yet), user-cleared (everything was completed or deleted), and no-results (a filter or search matched nothing). Each needs a different sentence and a different action — “Create your first invoice” is wrong on a screen where the user just archived all twelve of theirs.
First-use empty states are the highest-leverage screens in most products because every single activated user sees them, and they see them before they understand anything. A screen that says “No data” wastes that. A screen that says what this list will hold, why it is worth filling, and gives one button to fill it is doing the job of an onboarding flow without the flow. See onboarding for the stretch this screen sits in.
Empty state vs error state
An empty state means the system worked and there is nothing to show. An error state means the system did not work. Rendering “Nothing here yet” when a request actually failed is the most common version of this mistake, and it is expensive: the user retries nothing, assumes the product is broken or their data is gone, and contacts support.
In practice
A B2B analytics product showed “No dashboards” with a grey icon to every new workspace. Activation stalled at 34%. Replacing it with a three-item list of starter dashboards the user could click to generate — same screen, same component, different content — moved first-dashboard-created to 61% without any change to the builder itself.
Where teams get it wrong
- Using the same empty state for first-use, cleared and no-results. The user who filtered to zero results does not need a tutorial, they need the filter they should remove.
- Illustration, no next action. A drawing of a box does not tell anyone what to do.
- Showing an empty state when the request failed. Distinguish “nothing matched” from “we could not ask”.
- Designing it last, from whatever copy was in the ticket. It is the first screen of the product for every new account.
- No-results states that do not echo the query. “No results” is useless; “No results for ‘invioce’” surfaces the typo.
Learn more
You may ask
Frequently Asked Questions
What should an empty state say?
What the list will contain, why it is worth filling, and one action to fill it. Three short lines beat an illustration with the word “Empty” under it. If the state is a no-results, echo the query the user typed so they can see what to change.
How many empty states does a screen need?
Up to three: first-use, user-cleared, and no-results. Most products ship one and use it for all three, which is why cleared lists congratulate nobody and filtered lists offer a tutorial.
Should empty states have an illustration?
Only after the copy and the action work without one. An illustration adds warmth to a screen that already explains itself and adds nothing to a screen that does not.
Related terms
All terms- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
- OnboardingThe experience that takes a new user from first opening a product to getting real value from it for the first time.
- Skeleton LoadingPlaceholder shapes matching the layout of content that is still loading, shown instead of a spinner so the page keeps its structure.
- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us