Empty state

Types of empty state

• First use: the user hasn't created anything yet. The most important one for activation.
• User-cleared: they've completed all their tasks or archived everything. It deserves a positive confirmation.
• No results: a search or filter returns nothing.
• Error or missing permissions: the content exists but can't be shown.

What a good empty state does

1. Explains what will go there and what the screen is for.
2. Says why it's empty: is a data source missing? Is the filter too strict?
3. Offers the next step with a clear action: create the first project, import data, invite the team, clear filters.
4. Shows what it will look like with sample data or an illustration of the result, if that helps.

Copy examples

• Instead of "No reports": "You don't have any reports yet. Connect your ad account and we'll generate the first one."
• In a search: "No results for 'March invoices'. Try fewer filters or search by customer."

Common mistakes

• Leaving the screen blank, which looks like a loading failure.
• Using the same message for every type of empty state.
• Filling it with decorative illustrations and forgetting the action.
• Designing them last, when there's no time left. They should be part of the design system like any other component.

Related terms

• Onboarding
• Microcopy
• Design system

Sources

• Nielsen Norman Group, Designing Empty States in Complex Applications: 3 Guidelines.