i
PTN·03·005

Empty States

The first screen anyone sees traditional

Every list is empty before it is full, and the empty version is the first thing a new user sees. It is also, almost always, the last screen anyone designs — which is how so many products introduce themselves with a blank rectangle.

The useful move is to stop treating emptiness as one condition. There is nothing yet, which is a beginning and wants an invitation. There is nothing left, which is often a success and should be allowed to look like one. There is nothing matching, which is caused by a filter the person applied and can undo — so name it and offer the undo. And there is nothing loaded, which is a fault, and the one case where a friendly illustration is a lie. The same blank rectangle serves all four, and the difference between a good empty state and a bad one is usually just that the good one knows which of them it is.

The failure mode is the cheerful mascot over an error. If the request failed, the screen must say the request failed; an empty state that absorbs a fault into a shrug denies the reader the one fact they need — that trying again might work.

— nothing yet invite — nothing left congratulate — nothing matching name the filter ! nothing loaded say so the same blank rectangle — the work is knowing which one it is
FIG 03·005 — four emptinesses, one blank rectangle.
AnatomyA statement of what belongs here · why it is not here yet · the one action that would change that · and, when the emptiness might be a fault rather than a beginning, a way to tell the difference. Four kinds share the name and want different treatment: the first run (nothing yet), the cleared (nothing left, and that is a success), the filtered (nothing matching, and the filter is the cause), and the broken (nothing loaded, and the system should say so).

Use when

  • The container will be empty on first use — which for a new account is every container
  • Emptiness is ambiguous: a person cannot tell whether nothing matched, nothing loaded, or nothing exists
  • There is a single obvious next action, and the empty space is the least crowded place it will ever have
  • Clearing the list is an achievement — an inbox at zero should say so rather than look broken

Avoid when

  • The state is a failure in costume: a load that errored must report the error, not offer a cheerful illustration
  • The screen becomes a tutorial — an empty state is one sentence and one action, not onboarding smuggled in
  • Emptiness is momentary; a state that flashes during a fast load is noise, and a skeleton belongs there instead
  • The copy performs personality at the expense of saying which of the four emptinesses this is
States & accessAn empty state that replaces a list must be announced, not merely drawn — a region that silently swaps its contents leaves a screen-reader user waiting on a list that will never arrive. Where the emptiness follows an action (a search, a filter), the message belongs in a live region so the result of the action is spoken.
HistoryThe pattern is a consequence of the account: software that ships with sample data has no empty state, and software that starts empty for every new user has nothing else to show them first. Platform design systems began publishing it as a named component in the 2010s — Material and the Apple HIG both carry guidance for it.
SpecimensInbox zero · a fresh project board · zero search results with the query echoed back · a filtered table that names the filter responsible.
Principle at stakeVisibility of system state — emptiness is a state, and an unlabelled one is indistinguishable from a fault.
SourcesApple Human Interface Guidelines and Material Design guidance on empty states, as specimens with opinions rather than authorities; WCAG 2.2 SC 4.1.3 Status Messages for the announcement requirement.
See alsoSkeleton screens cover the moment before the answer; this pattern covers the answer being nothing.

Why traditional: Widely published as a component by the major design systems and consistent across them, but the guidance is craft convention rather than a measured result. Only the announcement requirement is documented — that one is WCAG.