Skip to content
UX Atlas
PatternCraft conventionFoundational

Empty States

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

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 page
  1. Definition
  2. Three kinds of empty
  3. What a first-use empty state should contain
  4. In practice
  5. Continue from here

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.

In practice

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.

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.

  • SearchPattern

    The zero-results screen is where search is judged.

Often used with

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

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Loading StatesPattern

    An empty result and an unfinished request look identical if you let them, and need opposite copy.

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.