Empty States
Date: 2026-08-17
What a screen shows when there’s nothing to show. They’re designed last if at all, they’re the first thing a new user sees, and an empty state that only says “nothing here” wastes the clearest opportunity in the interface to explain what should be.
An empty state is the display when a container has no content. There are three distinct kinds and they need different treatment.
FIRST USE nothing yet, by definition
→ onboarding opportunity
→ empty basket, no orders,
no saved items
NO RESULTS a query or filter matched
nothing
→ recovery opportunity
→ search, filters
— Search and Findability
CLEARED they emptied it deliberately
→ confirm and offer undo
Treating all three the same is the usual failure, because the right response differs entirely: the first needs encouragement, the second needs a route out, the third needs acknowledgement.
What each needs
FIRST USE
what goes here
why it's worth doing
ONE clear action
NO RESULTS
what was searched or filtered
WHY nothing matched
what to change — specifically
an alternative route
CLEARED
confirmation it worked
undo
what to do next
The no-results state is the valuable one
BAD "No products found"
GOOD "No products match all 4 filters.
Try removing:
× Size: 50ml — would show 12
× Under £20 — would show 8
Or browse all Sensitive Skin (41)"
Naming the filter to relax turns a dead end into a decision. It requires computing counts with each filter removed — cheap to implement, rarely implemented — Faceted Filtering.
For search specifically:
show what was searched, editable
suggest spelling corrections
offer related terms
show popular or related products
give a route to browse
log it ← every zero-result search is
a range gap or a synonym gap
The empty basket
The most-visited empty state on a retail site, and usually the emptiest of content:
TYPICAL "Your basket is empty"
[Continue shopping]
BETTER "Your basket is empty"
recently viewed items
saved items / wishlist
a route to the main categories
"Items are saved for 7 days
when you're signed in"
Recently-viewed products in an empty basket is one of the highest-return small features available — the person was interested minutes ago, and the alternative is a dead screen.
Writing them
SAY WHAT SHOULD BE HERE not just
that it isn't
BE SPECIFIC "no orders yet"
beats "nothing
to show"
ONE ACTION not four
DON'T BE CUTE a joke on the
fifth failed
search is
irritating
DON'T BLAME "no results for
X" not "you
searched wrong"
Illustrations are optional and usually cost more than they return. An empty state’s value is the route out, not the drawing.
The distinction that gets missed
EMPTY there is genuinely nothing
→ design it
LOADING content is coming
→ skeleton, not an empty
state
— Loading and Perceived Performance
ERROR something failed
→ say so, offer a retry
— Error Prevention and Recovery
Showing an empty state while loading is a common and damaging bug — the person concludes there’s nothing there and leaves before the content arrives. Showing an empty state on error is worse, because it converts a temporary failure into a permanent-seeming absence and generates no retry.
Distinguish all three explicitly in the component’s state model — Component States.
Measuring them
- Empty state views — how often each is reached
- Exit rate from them — a dead end, quantified
- Click rate on the primary action — does the route out work
- Zero-result queries — the to-do list
High exit rate from a no-results state is the clearest sign the recovery options aren’t good enough — and it’s a page most analytics setups never look at.