Empty states are the screens a product shows when there is nothing to show: an inbox with no messages, a project with no tasks, a dashboard before any data has arrived. Designers often treat them as afterthoughts, filling the void with a shrug of an illustration and the words “Nothing here yet.” That is a wasted opportunity. The empty state is frequently the very first thing a new user sees, which makes it one of the most consequential screens in the entire experience.
Why Empty States Matter More Than They Seem
A new user arrives at an empty product by definition. Every feature starts at zero. That means the emptiness is not an edge case to be tolerated but the default first impression to be designed. If that first screen leaves the user staring at a blank canvas with no idea what to do, you have created friction at the precise moment when motivation is most fragile. A well-designed empty state, by contrast, turns that blankness into a guided first step.
There is also an emotional dimension. Emptiness can read as failure, as if the user did something wrong or the product is broken. The job of the design is to reframe that emptiness as potential, a clean starting point rather than an absence.
The Three Kinds of Empty
Not all empty states are the same, and conflating them produces confusing results. It helps to distinguish three situations, because each calls for a different response.
- The first-use empty state, where the user has never added anything. This is your onboarding moment and should orient and invite action.
- The user-cleared empty state, where everything has been completed or removed. This deserves a note of accomplishment, not a prompt to start over as if nothing happened.
- The no-results empty state, where a search or filter returned nothing. This needs to help the user adjust their query rather than assume the data does not exist.
Treating an inbox-zero achievement with the same generic message as a failed search makes the product feel mechanical and unaware of context. Designing for the specific kind of empty makes it feel attentive.
Always Provide the Next Action
The single most important element of a first-use empty state is a clear, prominent action. The user should never have to wonder how to fill the void. If the screen is an empty project, the empty state should contain the button that creates the first item, placed front and center, not hidden in a toolbar. Reducing the distance between seeing the emptiness and resolving it is the whole point.
The accompanying copy should describe the benefit of taking that action, not just its mechanics. “Add your first client to start tracking invoices” is more motivating than “No clients.” The user learns both what to do and why it is worth doing.
Teach Through the Emptiness
An empty state is a rare moment when the user is paying attention and has no competing information to process. That makes it an ideal teaching surface. You can show a brief example of what the populated screen will look like, or list the two or three things this area will help the user accomplish once it has content. The goal is to build a mental model so that when real data arrives, the user already understands how to read it.
Be disciplined about how much you teach. The empty state should not become a wall of instructions. One clear action and one supporting sentence usually beats a tutorial. If the feature genuinely requires more explanation, link to it rather than cramming everything onto the empty canvas.
Match the Tone to the Moment
The visual and verbal tone should fit the situation. A celebratory empty state after the user clears every task can afford a moment of warmth or a touch of personality. A no-results search state should be calm and helpful, because the user is mildly frustrated and wants a solution, not a joke. Misreading the emotional temperature, like cracking a cheerful joke when a search failed, makes the product feel tone-deaf.
Keep It Honest and Lightweight
Resist the temptation to over-design empty states with elaborate illustrations that take longer to load than the real content would. The decoration should support the message, not bury it. A restrained graphic, clear copy, and an obvious action almost always outperform a beautiful but directionless screen. Remember that the best empty state is one the user leaves quickly, having understood exactly what to do next.
When you start treating empty states as designed moments rather than fallback screens, you close one of the most common gaps between a product that feels considered and one that feels unfinished. The emptiness is not a problem to hide. It is an invitation you get to write.