Empty states must separate no data, no results, and error
Aliases: zero data · no results · empty vs error
What it is
When a list, canvas, or inbox has no visible items, that region is an empty state. It is not an illustration style. It is one surface shared by three diagnoses: no data (this container has never had content), no results (content exists, the current filter or query hid it), and error (content may exist, this fetch failed). All three look blank; the next move is different. Reusing one “nothing here yet” picture treats an over-sharp filter as first use, or a fault as a genuinely empty mailbox.
Why it happens
People pick the next step from “why is this empty”: create the first item, loosen the query, or retry. Blankness itself carries no cause; cause has to be supplied by copy, icon, and leftover context. With no data, filter chips should not still be sitting around, because there is no set to filter. With no results, the query string or those filters must remain visible, or people will not know the emptiness is of their own making. With an error, a signal that “this is not an empty set” has to remain, or retry has no motive. One illustration for all three kills the classifier; people apply the most common story (nothing exists yet) to every case. An empty state’s first job is to make the cause legible. Guidance and actions only attach after that.
Where it stops holding
Having no permission to see any item is a fourth kind: invisible. Writing it as “nothing here yet” invites people to create objects they are not allowed to see. Blankness before a load has finished belongs to skeletons or indicators; swapping in an empty state early flashes “none” and then content. Objects that exist but were archived or deleted by someone else look like no data to this user and are not that to the system; copy should lean “none on your side,” not “none in the system.” In a nested list, a parent with children and an empty current layer must scope the sentence to this layer, or the whole project is read as empty.
Applying it
- Give the container three templates—no data, no results, error—and forbid a shared “nothing here yet.”
- No-results must echo the query and still-on filters, and offer a clear-all; errors must be retryable and must not use the empty illustration.
- No-data must not wear the “zero results” costume of a filter bar; there is no collection, so there is no filter.
- Verify by manufacturing three empties: never used, wrong search term, unplugged network. If the three screens can be swapped without anyone noticing, classification has failed.