Empty States in UI Design: How to Design the Screens Nobody Plans For

Design mockups are almost always full. The dashboard shows healthy charts, the project list has a dozen neatly named items, and the inbox contains realistic messages from realistic people. This makes sense — designers want to show the product working. But it means the screens a new user actually sees first are often the least designed screens in the product.

A brand-new account has no data. The project list is empty, the dashboard has nothing to chart, and the search has nothing to find. These empty states are not edge cases. They are the first impression for every single user, and they shape whether that user takes the next step or quietly leaves.

Why Empty States Matter So Much

An empty screen communicates something whether you design it or not. A blank white area with a lone "No items" label tells the user the product is inert and waiting for them to figure out what to do. That is a heavy ask for someone who signed up two minutes ago.

A well-designed empty state does the opposite. It explains what this screen is for, shows what it will look like once it is in use, and offers a clear first action. It turns a dead end into an on-ramp.

Because new users encounter empty states at the moment they are deciding whether the product is worth their time, these screens have an outsized effect on activation. Improving them is one of the highest-leverage, lowest-effort design changes available in most products.

The Four Types of Empty States

Not all empty states are the same, and each type calls for a different design response.

First-use empty states appear when a user has not yet created anything. These are onboarding moments and should focus on education and the first action.

User-cleared empty states appear when a user has completed or removed everything — inbox zero, all tasks done. These are moments of accomplishment and can be celebratory.

No-results empty states appear when a search or filter returns nothing. These are moments of potential frustration and should help the user recover.

Error empty states appear when content cannot load because of a connection problem, permissions issue, or system failure. These need to explain what went wrong and what the user can do.

Designing one generic "nothing here" component and reusing it everywhere is a common mistake. A celebration and an error should not look the same.

Designing First-Use Empty States

First-use empty states carry the most weight because they are part of onboarding. An effective one usually contains three elements.

A clear headline that explains the value. Not "No projects" but "Create your first project to start tracking work." The headline should describe what the user will get, not just what is missing.

A brief supporting line. One sentence of context — what this area is for, or what happens once they add something.

A single primary action. One prominent button that starts the most important next step. If there are multiple ways to get started, such as creating from scratch, importing, or using a template, make one primary and the others secondary.

A visual element — an illustration, an icon, or a preview of the populated state — can help, but it should support the message rather than replace it. Some of the most effective first-use states show a faded, skeleton version of what the screen will look like with data, which helps users picture the end result.

Templates and Sample Data

One of the most effective ways to handle first-use emptiness is to not leave the screen empty at all. Pre-populating with sample data or offering starter templates lets users see the product working before they have invested any effort.

A project management tool might create a sample project with example tasks that demonstrate key features. A dashboard product might show demo data with a clear label and a prompt to connect a real data source. A design tool might offer a gallery of templates on the blank canvas.

If you use sample data, label it clearly and make it easy to remove. Users should never confuse demo content with their own, and they should be able to clear it with one action once they are ready to work with real data.

Designing No-Results States

When a search or filter returns nothing, the user had a specific intent that was not met. The empty state's job is to help them recover quickly.

Start by confirming what they searched for, so they can spot a typo: "No results for 'invioce'." Then offer paths forward:

• Suggest corrections for likely misspellings.
• Offer to clear active filters, and show which filters are applied.
• Suggest broader or related search terms.
• Link to browsing the full collection.
• Where appropriate, offer to create the item they were looking for.

Avoid blaming language. "Your search returned no results" subtly places fault on the user; "We couldn't find anything matching that" is gentler and more accurate. The difference is small, but tone accumulates across an interface.

Celebrating Completion

User-cleared empty states are a rare opportunity for delight. When someone reaches inbox zero, finishes every task, or resolves every support ticket, they have accomplished something. Acknowledging that briefly can create a small moment of satisfaction that builds positive association with the product.

Keep celebrations proportionate. A short congratulatory message and a friendly illustration work well. Confetti animations can be fun the first time and tiresome by the tenth, so consider reserving more elaborate celebrations for meaningful milestones rather than routine completions.

These states can also suggest a next step without being pushy — reviewing completed items, planning the next batch of work, or exploring a feature the user has not tried yet.

Writing Empty State Copy

Empty state copy should be short, specific, and action-oriented. A useful formula is: what this is, why it matters, and what to do next. "Invoices you send will appear here. Create your first invoice to get paid faster." That covers all three in two sentences.

Match the tone to the situation. First-use states can be welcoming and encouraging. No-results states should be helpful and neutral. Error states should be clear and calm, avoiding both technical jargon and false cheerfulness. "Something went wrong" is acceptable only if it is followed by what the user can actually do about it, such as retrying or checking their connection.

Auditing Your Product's Empty States

Most products have more empty states than their designers realize. A practical audit starts by creating a brand-new account and walking through every screen before adding any data. Then search for something that does not exist, apply filters that exclude everything, complete every item in a list, and disconnect from the network.

Screenshot every empty or error state you encounter and evaluate each one: Does it explain the screen's purpose? Does it offer a clear next action? Does the tone fit the situation? Is it visually consistent with the rest of the product?

The results are usually humbling, and fixing them is usually straightforward. Empty states are small screens with a big job — and designing them deliberately is one of the simplest ways to make a product feel complete from the very first click.