Skip to main content
LanguageEnglish
Basics4 min readOctober 2026

What is an empty state in UX?

Short answer

An empty state is what a screen shows when there is nothing to display yet: a new inbox, an empty cart, a search with no results or a list cleared by filters. A good empty state explains why it is empty and gives one clear next step, such as creating the first item or changing the search.

Core Takeaway

  • Types: first use, user-cleared, no results, and error or no access
  • Explain why the screen is empty in plain words
  • Offer one clear action that fills it
  • Keep illustration and animation small and friendly, never in the way of the action
  • Write different copy for each type of empty state

Empty screens are easy to forget because designers usually work with sample data. In the real product, every new user meets them first, so they shape the first impression more than almost any other screen.

There are four common types. First-use empty states appear before the person has created anything. User-cleared states appear after they finished or deleted everything, such as an empty to-do list. No-result states appear after a search or filter. And error or no-access states appear when data cannot be shown at all.

Each type needs different words. A first-use state should explain what the screen is for and invite the first action: "No projects yet. Create your first project." A no-result state should help people recover: show what they searched for and offer to clear filters. A cleared state can be a small moment of reward.

Visuals are optional. A small illustration or a gentle animation can make the screen feel friendly, and an animated character can guide a first-time user. Keep it light, make sure the action is the most visible thing, and do not rely on the image to explain the state.

If you want a friendly animated character for an empty state, ExodeUI, which we make, has a free library of interactive mascots that run as ExodeUI files and react to input.

Frequently asked questions

What should an empty state include?

A short headline, one sentence explaining why it is empty or what the screen is for, and a clear action. An illustration is optional.

What is a zero state?

Another name for an empty state, usually the first-use kind shown before someone has added any content.

How do you design a no-results state?

Repeat the search term, suggest spelling fixes or broader terms, and offer to clear filters. Never leave the person with a blank area.

Should empty states be animated?

They can be, if the animation is small, does not loop distractingly and respects reduced-motion settings. The action matters more than the animation.

Related Guides & Examples

Add a friendly character to empty screens

Pick from free interactive mascots that react to the cursor and to taps, and drop them into your app or website.

Browse free mascots
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →