Empty states
What a screen shows when there is nothing to show — four different cases that need four different designs.
States
Do / Don't
- Treat the first-use empty state as an onboarding surface with one clear action
- Tell users why the screen is empty and what fills it
- Keep no-results states helpful — suggest broadening filters or checking spelling
- Ship a blank region or a lonely spinner as an "empty state"
- Use the same design for "no data yet" and "your search found nothing"
- Celebrate emptiness ("All done! 🎉") in contexts where emptiness may mean data loss
When to use
Any list, feed, dashboard, inbox or search UI — emptiness is not an edge case, it is the guaranteed first state of the product.
The four cases
First use — the user has not created anything yet. This is onboarding: explain the value and offer the first action. Cleared — the user emptied it intentionally; confirm, don’t lecture. No results — the query or filters matched nothing; help refine. Error — content failed to load; say so honestly and offer retry (never masquerade an error as “nothing here”).
Accessibility
Empty-state illustrations are decorative — mark them so for screen readers, and make sure the explanation and the action are real text, not baked into the image.
Evidence
- NN/g on empty states as onboarding and error-recovery surfaces.
- Baymard on “no results” pages in e-commerce: dead-end no-results pages are a measurable abandonment driver.