State
Empty State
An empty state is the screen shown when there's no data to display yet, explaining what's missing and guiding people to the next action.
Definition
An empty state is the screen that appears when there's no data to show yet. A cart that's still empty right after signup, an inbox with zero messages, a list that returns no search results — they all count. If you leave that moment as a blank white page, people start to wonder whether the screen is broken. A good empty state briefly explains what's missing, why it's missing, and what to do next, turning that intimidating blank page into a signpost that leads naturally into the next action. What matters isn't the bare fact that there's no data, but how you explain the gap and guide people toward filling it.
Why does it matter?
An empty state is often the very first screen someone sees in your product, because right after signup there's naturally no data at all. If the screen just sits there blank, people don't know where to begin and tend to leave. But when an empty state warmly points to that first step, they start doing something right away and ease into the product. So treat an empty state not as an accident or an edge case, but as an invitation to the next action. Even for a fleeting empty state like an empty search result, telling people why there are no results and how to try again keeps them from getting stuck and lets them keep hunting for what they want. It's a screen that owns both the first impression and the moment of frustration. The moment when there's nothing to show is actually where it becomes clearest how carefully a product looks after its users.
Common mistakes
- Leaving the screen as a blank page with no guidance at all. People can't tell whether it's a normal state with no data or a broken screen, so they don't know what to do and drift away.
- Not distinguishing between "no data" and "still loading." If you declare that there are no results when the data is merely on its way, you confuse people with a problem that doesn't actually exist.
- Piling on sympathetic phrasing without telling people what they can do next. A kind message alone can't move anyone forward, so they end up stalled in front of the screen with no idea what to do.
Practical tips
- Build your empty state around a simple skeleton: one icon, one line of explanation, and a button that opens the next action. Just these three pieces are enough to turn a blank page into an invitation to move forward.
- Tell people not just what's missing, but why it's missing and how to fill the gap. For empty search results especially, offering a concrete next step — like suggesting they try different keywords — works well.
- Always handle the empty "no data" state and the "still loading" state separately. Blur the two together and you can trick people into thinking data that's perfectly on its way simply isn't there.