Empty state design is one of the most underrated levers in UX. Those quiet moments when a screen has nothing to show, no messages, no results, no data, are actually your best chance to teach, motivate, and convert users. Done poorly, they feel like dead ends. Done well, they act like a friendly guide showing users exactly what to do next.
In this guide, we break down the patterns, copywriting tricks, and illustration principles that separate forgettable blank screens from empty states people actually enjoy.
What Is an Empty State in UX Design?
An empty state (sometimes called a zero state or blank state) is the UI a user sees when there is no content to display. This can happen for many reasons: a first-time user has not created anything yet, a search returned no results, a filter is too narrow, or an error prevented data from loading.
Instead of treating these screens as failures, treat them as onboarding real estate. Every empty state should answer three questions:
- What is this screen supposed to show?
- Why is it empty right now?
- What can I do next?
The 3 Main Types of Empty States
1. First-Use Empty States
This is the empty state a new user sees the first time they open a feature. It sets expectations and drives activation. Slack, Notion, and Linear all invest heavily here because that first screen shapes retention.
Goals:
- Explain the value of the feature in one sentence
- Provide a single, obvious call to action
- Optionally show a preview or sample data
2. No-Results Empty States
Triggered when a search or filter returns nothing. This is where users most often bounce, so the copy needs to reassure and redirect.
Goals:
- Confirm the search or filter was applied correctly
- Suggest alternative queries or a way to clear filters
- Offer a recovery path (browse categories, popular items, contact support)
3. Error or System Empty States
Something broke: no internet, a failed API call, or expired permissions. Users need clarity, not jargon.
Goals:
- Explain what happened in human language
- Offer a retry action
- Preserve trust with honest tone (avoid blame)
Empty State Patterns at a Glance
| Pattern | When to Use | Primary CTA |
|---|---|---|
| First-use onboarding | New user, no data yet | Create first item |
| Dummy data preview | Complex dashboards | Import or connect |
| Inbox zero | User cleared all tasks | Celebrate, suggest next |
| No search results | Query returns nothing | Clear filters, retry |
| Error state | Load or network failed | Retry, contact support |
Real Examples from Popular Apps
Dropbox: First-Use Simplicity
Dropbox greets new users with a big illustration, a one-line explanation, and a single upload button. There is nothing to distract from the primary action.
Notion: Templates as Empty States
Instead of a blank page, Notion offers templates and AI prompts. The empty state doubles as a discovery engine for features users might not know exist.
Airbnb: Helpful No-Results
When a search returns no matches, Airbnb suggests nearby locations, flexible dates, and the option to remove filters. The user is never stuck.
Todoist: Rewarding Inbox Zero
Complete all your tasks and Todoist shows a delightful illustration and a motivational message. It turns a routine moment into a small dopamine hit that drives habit loops. There’s a good explainer over at nngroup.com.
Linear: Contextual Empty States
Linear tailors each empty state to the specific view (issues, cycles, projects) with keyboard shortcuts front and center, reinforcing the product’s power-user identity.
Copywriting Tips for Empty States
- Lead with the benefit, not the technical state. “Your first project starts here” beats “No data available”.
- Use active verbs in buttons: Create, Invite, Import, Explore.
- Keep it under 20 words for the main message. Long paragraphs kill momentum.
- Match your brand voice. A B2B analytics tool should not sound like a meme, and a consumer app should not sound like a legal notice.
- Never blame the user. Replace “You have not created anything” with “Ready to create your first one?”.
Using Illustrations the Right Way
Illustrations make empty states feel human, but they can also become clutter if misused. Follow these rules:
- Purpose over decoration: the visual should hint at the action, not just fill space.
- Consistent style: match the illustration system across all empty states in your product.
- Neutral or optimistic tone: avoid sad mascots or crying folders. They amplify frustration.
- Accessible contrast: illustrations should never carry critical meaning alone. Pair them with text.
- Lightweight assets: SVG or optimized PNG. A slow empty state is worse than no illustration.
A Checklist for Designing Great Empty States
- Identify every screen where content can be absent
- Classify each as first-use, no-results, or error
- Write the message before designing the visual
- Define one primary action and one optional secondary action
- Test copy with real users, not just stakeholders
- Measure conversion from empty state to first meaningful action
- Iterate based on drop-off data
Common Mistakes to Avoid
- Showing a generic “No data” label with no context or action
- Using the same empty state across totally different features
- Overloading the screen with three or four CTAs
- Forgetting the error variant (users always find network issues)
- Skipping empty states in design handoff, leaving developers to improvise
Frequently Asked Questions
What is an empty state in design?
An empty state is a screen or UI area shown when there is no content to display. It communicates system status and guides users toward the next useful action. This guide goes deeper on it.
What is an example of an empty state?
A new Dropbox account showing an upload prompt, a Gmail inbox saying “You are all caught up”, or a search result page saying “No matches, try different keywords” are all empty states.
What is the difference between zero state and empty state?
The terms are often used interchangeably. Some designers use “zero state” specifically for the first-use scenario, and “empty state” as the broader umbrella covering first-use, no-results, and error states.
How many empty states should a product have?
As many as it has content surfaces. Every list, dashboard, feed, or search result should have a dedicated empty state. Reusing a single generic one is a missed opportunity.
Should I use illustrations in every empty state?
Not necessarily. Dense B2B tools often work better with text-only empty states that emphasize speed and clarity. Consumer apps benefit more from illustration. Match the tone to your users.
Final Thoughts
Great empty state design is not about filling space, it is about removing friction. Every blank screen is a conversation with your user. Make it warm, make it useful, and make it point to a clear next step. The apps we admire most treat empty states as first-class citizens of their design system, and it shows in their activation and retention numbers.
Audit your product this week. Find every empty screen, classify it, and rewrite the message. You might discover that your best onboarding flow was hiding in plain sight.