What Is an Empty State?
An empty state is what a screen shows when there is no data to display, such as an empty inbox, a fresh dashboard, or a search that returned no results. Instead of a blank, confusing void, a well-designed empty state explains why the space is empty and points the user toward a helpful next step, like adding their first item or adjusting a search. Empty states are a key onboarding moment, turning a discouraging blank page into guidance that helps new users start using a product.
- What it is
- The screen shown when a list, page, or view has no content yet
- Three common types
- First-use (nothing created yet), user-cleared (all done), and no-results (nothing matched)
- Core job
- Explain why it is empty and offer a clear next action
- Onboarding value
- First-use empty states double as onboarding, teaching new users what to do (Nielsen Norman Group)
- Avoid
- A truly blank screen that leaves users unsure whether something broke
What an empty state actually is #
An empty state is the design of a screen when it has no data to show, the inbox with zero messages, the project list before any project exists, the search results page when nothing matched. Every list, table, and feed has this condition, yet it is one of the most overlooked screens in a product. Handled badly it is a bare white void that leaves users wondering whether the app is broken, still loading, or simply useless. Handled well it becomes a small piece of communication: it tells the person why the space is empty, reassures them nothing is wrong, and shows them exactly what to do next. Because a first-time user often meets an empty state before any real content exists, it is frequently their very first impression of how a product works. Designing these moments deliberately, rather than leaving them blank by default, is part of the interface thinking on our /services/ui-ux-design page.
The three main types of empty state #
Empty states are not all the same, and each type calls for a different message. The first is the first-use empty state, shown to a brand-new user who has not created anything yet; its job is onboarding, welcoming the person and guiding them to add their first item. The second is the user-cleared empty state, which appears when someone has completed or removed everything, like an inbox at zero; here the tone can be positive and congratulatory, confirming they are all caught up. The third is the no-results empty state, shown when a search or filter returns nothing; it should explain that nothing matched and suggest how to broaden the query or clear filters. Treating all three identically is a common mistake, because a cheerful you are all done message makes no sense on a failed search. Distinguishing these cases is exactly the kind of detailed interaction planning we handle when building software on our /services/web-app-development page.
Why empty states matter for onboarding #
For a new user, the first-use empty state is often the doorway into the entire product, and it carries more weight than its blank appearance suggests. A person who just signed up has no data, so almost every screen they see is empty; if those screens simply show nothing, the user has no idea where to begin and may abandon the app before experiencing any value. A thoughtful empty state fills that gap by acting as inline onboarding, briefly explaining what the feature does and offering a single, obvious first action, such as Create your first project. This converts a discouraging void into momentum. Because the moment directly influences whether a new user activates and stays, it has real business impact, not just visual polish (Nielsen Norman Group). Getting people to that first success quickly is closely tied to the work on our /services/conversion-optimization page, where removing early friction turns curious visitors into active, retained users.
Anatomy of a good empty state #
A well-built empty state usually combines a few consistent parts that work together to inform and guide. There is often a light illustration or icon that softens the blank space without dominating it, a short heading that names the situation plainly, a sentence of supporting text explaining what would normally appear and why it is worth having, and a clear call-to-action button that gives the user their next step. On a first-use screen that button creates the first item; on a no-results screen it might clear filters instead. Keeping these parts simple and focused matters, since an empty state that tries to do too much becomes clutter. You can assemble the pieces in markup like the sketch below, marking the illustration as decorative so assistive technology ignores it while the heading, text, and action carry the real meaning.
<div class="empty-state" role="status">
<img src="box.svg" alt="" aria-hidden="true">
<h2>No projects yet</h2>
<p>Projects keep your work organized in one place.
Create your first one to get started.</p>
<a class="btn-primary" href="/projects/new">
Create a project
</a>
</div>Writing the message and call to action #
The words in an empty state do most of the work, so they deserve real attention rather than a generic No data placeholder. Start by naming the situation plainly, No messages yet or No results for that search, so users know nothing is broken. Then add one short line of context explaining what would normally appear here and why it is worth having. Finally, offer a clear call to action that matches the type of empty state: a button to create the first item on a first-use screen, or a suggestion to clear filters on a no-results screen. Keep the tone friendly and specific, avoid blaming the user for an empty search, and never leave them at a dead end with no way forward. This kind of precise, helpful microcopy is part of the content and interface work our team weaves through every project, and it pairs naturally with the messaging clarity covered on our /services/branding-design page.
No-results empty states and search #
The no-results empty state deserves special care because it appears at a moment of mild frustration: the user searched or filtered for something and got nothing back. A blank results area here reads as failure and often ends the session. A good version instead confirms plainly that nothing matched the query, then actively helps the user recover. Useful moves include showing the search term back to them so they can spot a typo, suggesting they broaden or clear filters, offering related or popular items as a fallback, and providing an easy way to reset. For an online store, a smart no-results screen can rescue a sale that would otherwise be lost, steering the shopper toward products they might still want. That recovery directly affects revenue, which is why thoughtful search and filtering behaviour is part of what we build on our /services/ecommerce-development page, keeping shoppers moving even when their first query comes up empty.
Common empty-state mistakes #
The biggest mistake is having no empty state at all, leaving a bare screen that users cannot distinguish from a loading failure or a bug. Close behind is the generic placeholder, a lifeless No data label that explains nothing and offers no path forward. Another frequent error is using the same message for every situation, so a failed search shows a cheerful all caught up line that makes no sense. Some empty states offer context but forget the call to action, describing the void without helping the user escape it, while others bury the one useful action among clutter. Overly cute or jokey copy can also misfire, especially on a no-results screen where the user is already mildly annoyed. Finally, many empty states ignore accessibility, failing to announce the state to screen readers. Each of these turns a chance to guide users into a dead end, and spotting them is part of the review we offer free at /free-website-audit.
Empty states versus error states #
It is easy to confuse an empty state with an error state, but they are different situations that need different handling. An empty state is a normal, expected condition: there is simply no data yet, an inbox with no mail, a new account with no projects, a search that legitimately matched nothing. Nothing has gone wrong. An error state, by contrast, means something failed, a request timed out, a server returned an error, or a connection dropped, so the data could not be loaded even though it may exist. The user needs to know which situation they are in. Presenting a genuine error as a cheerful empty state hides a real problem, while treating a normal empty result as an alarming error needlessly worries people. A good error state explains that something went wrong, avoids blaming the user, and offers a way to retry. Distinguishing these cases and messaging each correctly is part of the careful interaction design we handle on our /services/web-app-development page, where clarity about system status builds trust.
Best practices and our recommendation #
Treat every empty state as a designed screen, not an afterthought. Identify which of the three types you are handling, first-use, user-cleared, or no-results, and write copy that fits that specific moment. Always explain why the space is empty, reassure the user nothing is broken, and offer one clear next step whenever possible. Keep illustrations light and purposeful, mark decorative images so assistive technology ignores them, and announce meaningful states to screen readers. Match the tone to the situation: encouraging for a first project, positive for a cleared inbox, helpful and neutral for a failed search. Above all, never ship a truly blank screen that leaves people guessing. Done well, empty states quietly onboard new users, celebrate progress, and rescue dead-end searches, all from space that would otherwise sit wasted. If you want a product where even the empty screens guide and reassure, our /services/ui-ux-design and /services/web-design teams design these moments as carefully as the full ones.
FAQ
What is an empty state in web design?
An empty state is what a screen shows when there is no data to display, such as an empty inbox, a new dashboard, or a search with no results. Rather than a confusing blank space, a good empty state explains why it is empty and points the user toward a helpful next action.
Why are empty states important?
Empty states are often a new user's first impression, since a fresh account has no data yet. A well-designed one turns a discouraging blank page into onboarding, explaining what a feature does and guiding the first action. That directly affects whether people understand the product, activate, and keep using it.
What are the different types of empty states?
There are three common types. First-use empty states appear before a user has created anything and double as onboarding. User-cleared empty states appear when someone has finished or removed everything, like a zero inbox. No-results empty states appear when a search or filter returns nothing and should help the user recover.
What should an empty state include?
A strong empty state names the situation plainly, adds a short line of context explaining what would normally appear, and offers one clear call to action suited to the type, such as creating a first item or clearing filters. A light illustration can help, but the message and next step matter most.
How do I handle a no-results empty state?
Confirm plainly that nothing matched, show the search term back so users can spot typos, and suggest broadening or clearing filters. Offering related or popular items as a fallback keeps people moving instead of ending the session. On stores, this can rescue a sale that a blank results page would lose.
Are empty states good for accessibility?
They can be, if built with care. Announce meaningful empty states to screen readers using a status role or live region so users relying on assistive technology know the list is empty rather than still loading. Mark decorative illustrations so they are ignored, and ensure any call-to-action button is fully keyboard accessible.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?