The Moment Nobody Designs For
Picture this: a new user signs up for your beautifully crafted app. They complete onboarding, they're excited, they navigate to the main dashboard — and they see absolutely nothing. A blank screen. Maybe a generic message that says "No items found." And just like that, the momentum you spent so much effort building completely evaporates.
This is the empty state problem, and it is silently killing retention rates across thousands of digital products every single day. As UI/UX designers and developers, we obsess over hero sections, color systems, micro-interactions, and typography scales — but we routinely ship empty states as an afterthought, if we think about them at all.
That needs to change.
What Is an Empty State, Really?
An empty state is any screen, component, or section of your interface that has no content to display. But that clinical definition undersells how emotionally loaded these moments actually are.
Empty states appear in several distinct situations:
- First-time use: The user has just arrived and hasn't created any content yet.
- User-cleared states: The user has completed all tasks, deleted everything, or read all notifications.
- Error states: Something went wrong and the expected content couldn't load.
- No results states: A search or filter returned zero matches.
Each of these situations carries a completely different emotional context, and yet most products treat them all with the same lazy placeholder text.
Why Empty States Matter More Than You Think
The first-time empty state is arguably your most critical UX moment outside of the actual onboarding flow. A user who just signed up is at peak motivation — they want to use your product. If they hit a blank wall, that motivation collapses fast.
"Users don't experience your product at its best on day one. They experience it at its emptiest. Design for that moment first."
Research in behavioral psychology supports this instinct. The concept of completion anxiety — the discomfort we feel when something looks unfinished — is real. A blank interface doesn't feel like a fresh start to most users. It feels broken, boring, or confusing. Without clear direction, the default human response is to leave and come back later. Except later never comes.
The Three Elements of an Effective Empty State
Good empty state design isn't complicated, but it does require intentionality. Every strong empty state should contain three core elements working together.
1. A Human, Contextual Illustration or Visual
Visuals do two things simultaneously: they soften the emptiness and they communicate context without words. The key word here is contextual. A generic sad face icon tells the user nothing. An illustration of a clean inbox with a small bird perched on it tells them exactly where they are and makes the blankness feel intentional rather than broken.
Keep illustrations consistent with your overall design system. They shouldn't feel like they were pulled from a random free icon pack. The visual tone should match your brand personality — playful for a productivity app aimed at individuals, more professional and subtle for enterprise tools.
2. Copy That Explains and Encourages
Your empty state copy needs to do two jobs: explain what this space is for, and tell the user exactly what to do next. Most products only do the first job, if that.
Compare these two approaches:
- Bad: "No projects yet."
- Good: "This is where your projects live. Create your first one and it'll show up here instantly."
The second version gives context, sets expectations, and removes ambiguity. It treats the user like an intelligent person who just needs a little orientation, not someone who failed to figure out your product.
Tone matters enormously here. Match your brand voice. If your product is warm and conversational elsewhere, your empty state copy should be too. Consistency in voice is a form of trustworthiness.
3. A Clear, Direct Call to Action
Never leave a user in an empty state without a path forward. This seems obvious, but it's violated constantly. The CTA in an empty state should be the single most prominent interactive element on the screen. It should use active, specific language.
- "Create your first project" beats "Get started"
- "Upload a file" beats "Add content"
- "Invite your team" beats "Collaborate"
Specificity reduces cognitive load. The user shouldn't have to interpret what clicking a button will do. Tell them exactly what happens next.
Designing for the Emotional Arc
Here's something most design resources skip over: the emotional difference between a first-time empty state and a completed empty state is massive, and they deserve entirely different design treatment.
A first-time empty state should feel welcoming and motivating — like walking into a new apartment with no furniture yet, but with great potential. The tone should be forward-looking and encouraging.
A completed empty state — like an inbox at zero after clearing all messages — should feel like a reward. This is the famous Inbox Zero moment that Mailbox (and later Superhuman) turned into a celebrated UX touchstone. Users who reach this state have accomplished something. Celebrate it. Reinforce the behavior. A simple congratulatory message here builds a positive feedback loop that brings users back.
Common Mistakes to Avoid
- Using the same empty state design for every context. A search with no results and a brand-new dashboard serve completely different emotional needs.
- Hiding the empty state behind a loader. Some teams show a loading spinner indefinitely rather than admit the state is empty. This is actively worse than the empty state itself.
- Making the CTA too small or secondary. If the empty state has one job, it's to get the user to take the next step. The CTA should reflect that priority visually.
- Writing copy from the system's perspective. "No data available" is a database error message. Write from the user's perspective, not the system's.
A Quick Framework for Auditing Your Empty States
If you want to improve the empty states in an existing product, start with an audit. Walk through every empty state scenario in your product and ask these questions for each one:
- Does this empty state explain what this space is for?
- Does it tell the user exactly what action to take?
- Does the visual tone match the emotional context of the moment?
- Is the CTA prominent and action-specific?
- Does it match the brand voice used everywhere else in the product?
If you answer no to any of these, you've found a retention hole worth fixing.
The Bigger Picture
Great UX design isn't only about the polished, content-rich moments. It's about what happens in the gaps — the loading screens, the error messages, the onboarding flows, and yes, the empty states. These are the moments that reveal whether a product was designed with genuine care for the user's experience, or just for the screenshot.
Next time you're reviewing a design or shipping a feature, ask yourself: what does this look like with no data? What does the user see before they've done anything? Design that moment with the same rigor you give your hero sections, and you'll build something that actually keeps people around.
Empty states are not a detail. They are an opportunity — and most of your competitors are leaving it completely untouched.
