ui patterns
Empty state
What is an empty state?
An empty state is what a screen shows when there is nothing to show yet - no results, no items, no history. It is the most overlooked screen in the product, and often the first one a new user meets.
Also known as: blank state, zero data state
Prefer to watch?
Watch the recap 0:34
The demo
An invoices screen with nothing in it yet - the moment a new user often arrives at. Switch between the bare version and a helpful one and feel which leaves you stuck.
Switch modes to compare the two empty states.
What this demo shows (text version)
An invoices screen with no invoices in it. In bare mode it shows only the words "No results" - a dead end with no explanation and nothing to do next.
In helpful mode the same empty screen explains that there are no invoices yet because none have been created, and offers a clear primary action to create the first one, plus a short reassuring line. The screen is just as empty of data, but one version abandons the user while the other tells them why it is empty and how to fill it - which matters most on a first visit, when this may be the first screen they see.
An empty state is what a screen shows when there's nothing to show yet - no results, no items, no history - and it's often the first screen a new user meets. Treat it as a chance to explain what's missing and offer a way forward, not a dead end that reads "No results" and leaves people stuck.
The bare "No results" left you at a dead end with nowhere to go. The helpful version did the same job - admitted there was nothing - but told you why and handed you the next step. Same emptiness; one abandons you, the other walks you forward.
An empty state has three jobs: say what's missing, say why (first visit? filter too narrow? all done?), and offer the one action that fills it. A first-run empty state is really onboarding in disguise - it is where someone decides whether the product is worth the effort, so it deserves more care than the full screen, not less.
Distinguish the kinds. "Nothing here yet" (first use) wants an inviting nudge to begin; "no matches" (a search or filter) wants a way to widen or clear it; "all caught up" (a cleared inbox) wants a moment of done-ness, not a sad face. The same blank screen, three quite different messages.