Empty States UI Design Patterns & Examples
Empty state screen designs that delight and guide users. See how top apps handle zero-data moments with helpful illustrations and CTAs.
What makes a good empty state design?
A good empty state design turns a zero-data screen into guidance instead of a dead end. It pairs a simple illustration or icon with a one-line explanation of what will appear there and a primary call to action that produces the missing data, rather than showing generic no-data text.
- Explain what the screen will show once data exists, not just that it is empty.
- Pair the empty state with one clear CTA that leads to the action that fills it.
- Reuse the same empty-state pattern across a product instead of designing one-off screens.
Apps with Empty States screens
3 apps
Frequently asked questions
What is an empty state design?
An empty state is the UI shown when a screen has no data — typically because the user is new, has cleared their data, or there are no matches for a filter or search. Good empty states turn a dead-end into onboarding or a CTA.
What makes a good empty state?
A clear illustration or icon, one-line explanation, one-line context ('what should appear here'), and a primary CTA pointing to the action that produces data. Avoid generic 'No data' text — it tells users nothing.