Screens

Empty States

The first experience a user has with a feature. Well-designed empty states guide users to take action, not stare at a void.

#empty state#zero data#first use#blank slate#onboarding#placeholder#call to action

What is it?

An empty state is the condition of a UI element when it has no content to display — a new user's empty inbox, an unused feature panel, an empty search result, or a filtered list with no matches. Empty states are the most commonly under-designed part of a product interface.

Why it matters

Empty states are often a user's first experience with a feature. A blank, unexplained empty state communicates "this is broken" or "you're in the wrong place." A well-designed empty state communicates "here's what this does and here's how to get started." First-use empty states are an onboarding tool as much as they are a UI component.

Best Practices

Every empty state needs: an illustration or icon, a headline, a description, and a CTA.
The CTA should be the specific action that creates content: "Create your first project" not "Get started."
Differentiate between types: first-use (never had data), filtered-empty (data exists but filtered out), error-empty (data failed to load).
First-use empty states can show sample data or a product tour — giving users a preview of what filled looks like.
Illustration should be relevant and branded — not a generic "no data" icon.
For filtered empty states: show what filters are active and offer to clear them.
For error empty states: explain what failed and provide a retry action.
Keep empty state content brief — a headline and one sentence is usually sufficient.
Mobile empty states often work better without illustrations — prioritize the CTA.
Don't use the same empty state for different contexts — a new inbox and an empty search need different messages.

Common Mistakes

Completely blank screens with no explanation.
Generic "No data available" message — tells the user nothing useful.
No CTA — users don't know what action to take to fill the state.
Same empty state for first-use, filtered-empty, and error-empty.
Illustration with no connection to the feature context.
CTA that navigates away from the current screen unnecessarily.

Checklist

Every empty state has: illustration/icon, headline, description, CTA

CTA is specific to the action that creates content

First-use vs. filtered vs. error empty states are distinct

Filtered empty states show active filters and offer to clear them

Error empty states explain the failure and offer retry

Illustration is contextually relevant to the feature

Content is concise (headline + 1 sentence max)

Empty state tested with new users — they take the intended action

Research & Theory

First-Use Experience (NN/g)

Nielsen Norman Group research shows that empty states experienced during first use have an outsized effect on whether users continue to explore a feature.

Why it's relevant

A bad empty state kills feature adoption. A good empty state is an activation mechanism.

Real-World Examples

Slack

New workspace empty state: illustration of the team, headline "This is the beginning of your conversation with the team," CTA to invite teammates. Contextual and actionable.

Linear

No issues state: "Your team has no open issues" + CTA to create first issue. Filtered empty: shows active filters + "Clear filters" button. Correctly differentiated.

Notion

New page empty state shows example blocks and a command palette hint. Teaches the product while providing an empty state. Onboarding integrated into the UI.