Skip to content
UX Atlas
Plate PAT·010 · PatternGrid E2 · Rev. 2026-09-14

Empty States

The screen before there is anything to show, which is a teaching opportunity rather than a gap.

PatternCraft conventionFoundational

Definition

An empty state appears when a container has no content. There are three distinct kinds, and they need different treatments: nothing yet, nothing found, and nothing here for you.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Three kinds of empty
  3. 3What a first-use empty state should contain
  4. 4Writing the four empties
  5. 5Four empties, four different jobs
  6. 6In practice
  7. 7Commonly confused with
  8. 8Local chart
  9. 9Continue from here

Reach for this when

  • Any list, table, search result or dashboard.
  • Designing first-run experience.

Common mistakes

  • Errors rendered as empty states.
  • Setup prompts shown to established users.
  • Empty states with no action.
  • Rendering a loading state as empty, so a slow request looks like a product with no data in it.

Three kinds of empty

KindCauseWhat to show
First useThe user has not created anything yetExplain what goes here, why it is useful, and the single action to start. This is the most valuable teaching moment in the product.
No resultsA filter or query matched nothingRestate the query, suggest what to change, offer to clear filters.
ClearedThe user finished everythingAcknowledge it. Do not show a setup prompt to someone who just cleared their inbox.
ErrorLoading failedSay it failed, not that there is nothing. These are completely different states.

What a first-use empty state should contain

  • A short statement of what this area holds.
  • One sentence on why it is worth using.
  • One primary action, plus an optional secondary such as importing existing data.
  • Optionally a sample or template, so the user can see a filled state before creating one.

Writing the four empties

Do

  • Distinguish first use, cleared, filtered to nothing and error, and give each different words.
  • Offer one action, and make it the obvious next step.
  • Use sample or illustrative content for a first-run canvas, so the product can be understood before it is populated.
  • Say which filter removed everything when the emptiness is a filter result.

Do not

  • Use the same illustration and sentence for all four.
  • Celebrate an empty state that the reader did not want.
  • Leave a blank region with no explanation, which reads as a failure.
  • Put the only route to creating something behind a menu, away from the empty state.

Four empties, four different jobs

First usewhat goes here, and one actionNo resultsthe query, and what to relaxClearedacknowledge it, ask nothingFailed to loadsay it failed, offer retryRendering a failed request as "nothing here" tells someone their data is gone.
One illustration and one sentence reused across all four is the usual implementation, and it is why an empty inbox congratulates someone whose data failed to load.

In practice

  1. i.

    Sample data instead of a blank canvas

    Creation tools

    Offering a removable example gives the new user something to manipulate, which is how most people learn a tool. A blank canvas asks them to make a decision before they understand the options.

  2. ii.

    Nothing here yet, and no way in

    The missing action

    An empty project list with a friendly illustration, a sentence and no create button sends the reader hunting through the navigation for the one thing the screen exists to prompt.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Loading States

Pattern

The screen shown while an answer is still being fetched.

Key difference

An empty state is a finished request that returned nothing. A loading state is an unfinished request. They look identical if you let them, and they need opposite copy: one explains, the other reassures.

Use Empty States when

  • The request finished and the answer is zero.
  • The reader needs to know why, and what to do next.
  • A first-run screen is the strongest teaching moment you get.

Use Loading States when

  • The outcome is not known yet.
  • You are choosing between a skeleton, a spinner and progress.
  • The question is how long a wait can go unexplained.

Learn about Loading States

Local chart

PAT·010 · Region III · Grid E2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Endowment EffectBIAS·007 · PRINCIPLES BEHIND THISFraming EffectBIAS·003 · PRINCIPLES BEHIND THISLoss AversionBIAS·002 · PRINCIPLES BEHIND THISHelp and DocumentationHEUR·010 · PRINCIPLES BEHIND THISPeak-End RuleLAW·007 · PRINCIPLES BEHIND THISZeigarnik EffectLAW·010 · PRINCIPLES BEHIND THISDiscoverabilityPRIN·005 · PRINCIPLES BEHIND THISBanner BlindnessPSY·003 · PRINCIPLES BEHIND THISParadox of the Active UserPSY·007 · PRINCIPLES BEHIND THISSearchPAT·002 · RELIED ON BYData TableCMP·025 · OFTEN USED WITHFilteringPAT·004 · OFTEN USED WITH

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA Data TableA FormA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Onboarding Flow

Principles behind this

The reasoning this solution is an application of.

Relied on by

Entries that assume this is already in place.

  • SearchPAT·002 · Pattern

    The zero-results screen is where search is judged.

Often used with

These usually appear in the same screen or the same decision.

  • Data TableCMP·025 · Component
  • FilteringPAT·004 · Pattern
  • OnboardingPAT·014 · Pattern

    The first screen after signup is usually an empty state, and it is the strongest teaching moment you get.

  • User FlowTPL·005 · Template

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.