The Complete Guide to Designing Empty States .

Empty states are often treated as an afterthought — a blank screen to fill with an icon and a few words. But these moments can have a much bigger impact on the user experience, especially when they appear early in the user journey. This guide explores what empty states are, why they matter, the different types you'll encounter, and how to design them to guide users instead of leaving them at a dead end.

A first-time user just signed up for your app. They've verified their email, sat through a two-screen tutorial, landed on their dashboard, and are finally ready to use your product or service.

And then they see a blank page — a page without any guidance, data, or hint of what they're supposed to do there. At best, maybe they'd see a faint grey icon pinned in the middle of the screen, doing absolutely nothing to help.

They refresh the tab because they wonder if something is broken or their network froze. And when that doesn't fix anything, they close the tab and leave.

That blank screen right after onboarding, or the "no results" page after a user performs a search, is called an empty state. It's also one of the most under-designed pages in product history.

What Is an Empty State?

The "empty state," or "empty screen," is the moment in a user's experience with an app when there is nothing to display. It's any screen or component where content should be, but there's currently none.

You've probably encountered dozens of empty screens without naming them. Here are a few examples of empty state moments:

• A social app right after signup, before you've followed anyone
• A brand-new Dropbox account with no files uploaded yet
• A to-do list app after you've checked off every task
• Gmail after you search for something and get zero results

Empty states aren't limited to full-page moments, either. You can find them anywhere data's meant to be. It could be a table with no rows, a filter that returns nothing, a notifications panel with nothing new, a chart with no data points yet. Anywhere your product expects content, there's a version of that space that starts empty. Depending on how you approach it, every one of those spaces is an opportunity or a liability.

Doing More With Your Empty States

Empty states account for a small fraction of total screen time. Estimates put it as little as 2–5% of what users actually see. That's why many product teams treat the space as an afterthought and spend as little time on it as possible.

Some designers might just add a placeholder icon or a line of grey text, and they're done. They move on to the next screen.

But that tiny sliver of screen time carries outsized weight. It tends to show up exactly when a user is deciding, often within their first few days with a product, whether it's worth sticking around for.

Get it wrong, and you've handed someone a reason to leave right when you needed them to stay.

Your empty state should help users understand the context — what's happening and why — and guide them to the next step. Think of these in-between moments as an opportunity to improve the user's experience and increase brand affinity.

Why Empty States Matter More Than Their Frequency Suggests

It's quite tempting to deprioritize a screen state that very few users will actually encounter for very long. Frankly, it saves the product team time to focus on other visible parts of the website or app. But doing so might cost them more.

Before you make your empty state screen as "empty" as possible to save time, consider these three things that make them punch above their weight.

They arrive at the highest-stakes moment in the user journey

Most first-use empty states show up in the initial few minutes of a brand-new relationship with your product. They arrive before trust is built and before the user has sunk any cost, when abandoning is still easy.

A bland or confusing empty state won't just cost you a bad screen — it can make you lose the user because they never get far enough to see what your product is actually good at.

They're a teachable moment in disguise

A well-designed empty state pulls double duty as onboarding. Instead of making a separate tutorial the user has to sit through, the empty space could show the what, the how, and the why.

The user will see what the space is for, how to fill it, and the benefit of doing so. They get the information they need when they need it, embedded in the interface itself, rather than in a modal they'll dismiss without reading.

An informative empty screen helps reduce the chance of abandonment.

They shape the emotional tone of your brand

Empty states are low-stakes and offer a rare spot in your product where you can be a little more human and emotional.

Some of the best user experiences happen when UX designers add a little emotion or personality to their products. Empty screens with empathetic or humorous messages add variety and a more personalized experience.

A moment of warmth, humor, or personality here reads as brand character rather than distraction. In a way, it might not work on a checkout screen or an error page tied to something the user actually cares about getting right.

Get these moments wrong, though, and the inverse happens fast. Dead ends create confusion, which leads to hesitation — and that's where abandonment lives.

The Anatomy of a Good Empty State

Strip away the illustration styles and the copy tone, and nearly every effective empty state is built from the same three parts:

• The message — plain language explaining what's happening and, if it isn't obvious, why. For example, "No projects yet" tells the user what's happening, while "No projects yet. Create one to start tracking tasks" tells them what's happening and why it matters.
• The visual — this part could be optional, but it's best to include it because it reinforces the message, softens what could otherwise feel like dead space, or sets the tone (playful, serious, minimal). The visuals are where brand personality tends to live.
• The action — this part shows a specific next step the user can take to move out of the empty state. It's the easiest to skip and also the most costly to skip. A message with no clear action to guide the user to the next step is just a wall with words on it.

One key point: resist the urge to offer several action steps. Hick's Law applies directly here because decision time increases with the number and complexity of choices. An empty state with one clear button gets acted on, whereas one with four competing options gets stared at, and often ignored entirely. If you find yourself wanting to add a second or third CTA, that's usually a sign you need a different empty state for a different context.

The Types of Empty States (And Why Each Needs Different Treatment)

Not all empty states are created equal, and treating them the same is one of the most common mistakes UX designers make. Before categorizing empty states, it helps to think about them along two dimensions: what caused the emptiness and what the user needs from you in that moment.

There are usually four types of empty states users frequently encounter.

First-Use States

These occur when a user is brand new to a product or feature and hasn't generated any content yet. Example: a fresh Notion workspace, a new Figma file, a just-created Trello board.

Google Ads empty-state screen in a dashboard interface, with a central message explaining that no campaigns or data are available yet and guidance for getting started, surrounded by the product navigation and controls. The uncluttered layout has an informative, encouraging tone.

This empty space's job is almost entirely educational. It explains what belongs here and makes it as easy as possible to create the first thing. First-use state is the highest-leverage empty state type because it's doing the work of onboarding whether you designed it to or not.

User-Cleared States

These happen when a user's actions empty the space. Example: finishing every task on a list, archiving every email, deleting all their filters.

Duolingo language-learning app empty state showing a completed task list with no remaining lessons, a colorful celebratory interface, and guidance for what to do next

Ideally, this type is often something to celebrate, not something to treat as a problem that needs fixing. An empty inbox after a cleanup session is a win. Pile a fresh CTA on top of that moment ("Add more tasks!"), and you risk undercutting the sense of accomplishment the user just earned. Sometimes the right move is simply acknowledgment: "All done. Nice work."

No Results / No Data States

These appear when a search, filter, or query returns nothing, and they're the type most likely to make a user feel stuck. The ideal scenario here is to avoid leaving them feeling like they're at a dead end with no way forward.

School AI empty-state interface showing that a search or request returned no results, with guidance for what to try next in a clean educational workspace; the calm, informative layout helps users recover without feeling stuck

The difference between a user getting frustrated and dropping off and staying to complete the action comes down to how you handle this state. Good handling suggests a next step — loosening the filter, checking the spelling, browsing a related category, or contacting support.

Error States

This state appears when something has gone wrong. It could be a failed request, an offline connection, or an unsupported action.

MindMarket 404 error page showing a 404 message and Page not found text in a calm, minimal layout, with guidance to recover from the missing page

Error states need a different emotional register than the other three: reassurance first, explanation second, recovery path third. The reason is that the user isn't wondering what belongs in this space — they want to know whether something is broken and whether it's their fault or the product's. Tone matters enormously here. Clear, calm, blame-free language does a lot of the trust-repair work on its own.

A grave mistake any designer can make is treating all four of these empty states the same way. Slapping a generic "Nothing here yet" illustration on a first-use screen, a cleared inbox, a failed search, and a broken connection is a missed opportunity four times over. Each moment calls for a genuinely different tone and a completely different next step.

A Writing Framework for Empty State Copy

A lot of empty state advice stops at "add a friendly illustration," and that's like telling a copywriter just to use a bigger font. The problem with this advice is that it treats the visual as the whole job, when the words usually do most of the work.

Here's a simple three-part structure that holds up across nearly every empty state you'll write:

1. State plainly what's empty. You don't need clever or cheeky copy at this point. Simply state: "No tasks here," or "Your inbox is empty."
2. Explain it, if it isn't obvious. Not all empty states require more than that. But when an empty state has copy like "No results for 'wireless mouse,'" it helps the user if you explain why or suggest likely next steps. Using only the first line leaves users with questions like why and what now, which isn't helpful in the user journey.
3. Move them. You don't need a description or a feature list here. The best course is one verb-led action — a button or link that does something the moment it's tapped.

A couple of before-and-afters make the difference concrete:

• Generic: "No items found."
  Better: "No matches for 'blue sneakers.' Check your spelling, or browse all shoes."
• Generic: "Empty."
  Better: "No projects yet. Create your first one to start tracking tasks."
• Generic: "0 results."
  Better: "We couldn't find anyone named 'Crystal' in your contacts. Try a different spelling, or invite them to join."

Notice none of these lean on personality for its own sake. Voice and humor are welcome additions once the message, explanation, and action are doing their job — they're not substitutes for them.

An empty state that's charming but vague is still a dead end; it just has better manners.

Design Principles That Hold Across Every Type

A few principles show up consistently across well-executed empty states, regardless of which type you're designing for.

Simplicity beats decoration

The most effective empty states use restraint. They feature a short, scannable line of copy and a clean visual — not a paragraph of explanation competing with an elaborate illustration for attention. If a user has to work to parse your empty state, you've recreated the exact problem you were trying to solve.

Guidance matters more than cleverness

Personality is a bonus layer, not the foundation. An empty state that's delightful but doesn't actually tell the user what to do has optimized for the wrong metric.

Always provide a clear next step

Worth repeating, because it's the principle most often violated under pressure to "make the screen feel more complete."

Treat your empty states as a system, not a series of one-offs.

In any product beyond a handful of screens, you'll have first-use states, cleared states, no-results states, and error states scattered across dozens of surfaces. Design them as a consistent family — a shared visual language, tone, and copy pattern — so empty moments feel like part of one product rather than whatever the designer working on that particular screen felt like doing that week.

Accessibility: The Part Most Guides Skip

Empty states get discussed almost entirely in visual terms. Still, they matter just as much — arguably more — for users relying on assistive technology, and this is where most guides fall short.

Announce state changes

When a search returns nothing, a list gets cleared, or an action fails, a user who relies on a screen reader needs to know that, just as clearly as a sighted user sees it happen. ARIA live regions can announce messages like "No search results found" or "All tasks completed" without interrupting whatever else the user is doing.

Be deliberate about alt text

If an illustration carries real informational meaning, describe it. If it's purely decorative — filling visual space without adding information — hide it from assistive technology entirely, rather than forcing a screen reader to narrate a picture that tells the user nothing useful.

Watch for contradictions between color, icon, and meaning

It's easy to end up with a mismatch — for instance, a "not saved" message paired with a green checkmark, since green typically signals "good" even when the underlying message is neutral or cautionary. These small inconsistencies are invisible in a quick visual scan but genuinely confusing when parsed literally.

Accessibility here isn't a separate checklist bolted onto the end of the design process. It poses the same underlying question the whole article has been circling: does this empty space actually communicate what's happening and what to do next, to every user who encounters it?

Common Mistakes to Avoid

• Dead ends — no action or path forward, just a message and silence
• Too many competing CTAs — violates Hick's Law and slows the exact action you're trying to encourage
• Treating every empty state the same — a filtered-empty list and a true first-use state need different tones and different next steps
• Decorative illustration with zero informational value — pretty, but doing none of the actual work
• Wrong tone for error states — cheerful copy on a failed connection or broken request reads as tone-deaf rather than reassuring

Final Words

It's easy to treat empty states as the last 5% of a design — something you fill in once the populated, fully-loaded version of a screen is finished. But there's a case for reversing that order.

Designing the empty state first forces you to answer, plainly, what this space is for and why a user would want to fill it. The point of doing it first is that these questions get easily glossed over once real data makes a screen look busy and complete.

The products that get this right treat empty states as some of the most important screens they'll ever ship, precisely because so few people will ever see them for long.

The fewer chances you get to make an impression, the more that impression really has to count.