--- title: "Empty State" url: "https://www.insideuxdesign.com/en/glossar/empty-state" language: "en" description: "What is an empty state and how do you design a good one? Explained with types, an example and practical tips. Learn how blank screens can guide first steps." published: "2026-10-14T15:20:26+02:00" updated: "2026-10-14T15:20:26+02:00" --- # Empty State An empty state is a place in an application where there is currently no content to show, such as an empty list or a search with no results. Done well, it explains what belongs there and shows the next step. - **Buchstabe:** E - **Englischer Begriff:** Empty State UX glossary · engl. Empty State # Empty State An empty state is a place in an application where there is currently no content to show, such as an empty list or a search with no results. Done well, it explains what belongs there and shows the next step. Imagine you install a new app for planning team tasks. After signing up, you see a white screen with the line “No entries found.” No hint about what to do next, no button, nothing. Is the app still loading? Is something broken? Or do you have to set something up first? That moment is an empty state, and here it was wasted. ## Explained simply An empty state is any place in an application where there’s currently no content to show: an empty list, an inbox with no messages, a search with no results or a dashboard that hasn’t been set up yet. Think of an empty shelf in a new store. It can simply be empty. Or it can carry a sign saying “Organic products arrive here on Monday.” In the second case, you know right away what’s going on. Nielsen Norman Group describes empty states, in essence, as areas where content doesn’t exist yet or can’t be displayed. They’re especially common the first time someone uses a product, during [onboarding](https://www.insideuxdesign.com/en/glossar/onboarding), because nothing has been created yet. ## Types of empty states Not every empty state has the same cause, and each one needs its own message: - **First use:** There’s no content yet because the person is just getting started. The focus is on orientation and the first step. - **No results:** A search or filter returns nothing. Spelling hints or similar results help here. - **Done or cleared:** All tasks are checked off or the trash is empty. Here the message can be upbeat. - **Errors:** The content exists but can’t be loaded. Then it has to be clear that something went wrong and what people can do about it. ## What matters Nielsen Norman Group names three guidelines: an empty state should communicate system status, so people know whether something is still loading or there’s really nothing there. It should explain what the area is for. And it should offer a direct path to the first step, such as a button. As an alternative to a blank screen, Material Design also recommends starter content that shows what the area will look like once it’s filled. ## An example Back to the task app, as an example of a redesign. Before: “No entries found.” After: a small illustration with the line “This is where your team’s tasks will live. Create the first one or invite your team.” Plus two buttons: “Create task” and “Invite team”. The same empty space now guides people to their first step. ## In practice - **Explain what belongs here.** A short sentence about the purpose of the area helps more than any illustration. Good [microcopy](https://www.insideuxdesign.com/en/glossar/microcopy) is your most important tool here. - **Offer exactly one clear next step.** A button that fills the area beats any long explanation. For more on wording, see [What Does a UX Writer Do?](https://www.insideuxdesign.com/en/blog/what-does-a-ux-writer-do). - **Only show “empty” when it’s true.** If the message appears while content is still loading, people think there’s nothing there and leave. ## Related terms [Onboarding](https://www.insideuxdesign.com/en/glossar/onboarding), [Microcopy](https://www.insideuxdesign.com/en/glossar/microcopy), [Progressive Disclosure](https://www.insideuxdesign.com/en/glossar/progressive-disclosure), [UX Writing](https://www.insideuxdesign.com/en/glossar/ux-writing) ## Sources - [Kate Kaplan: Designing Empty States in Complex Applications: 3 Guidelines. Nielsen Norman Group, 2021](https://www.nngroup.com/articles/empty-state-interface-design/) - [Google: Empty states. Material Design Guidelines (Version 1)](https://m1.material.io/patterns/empty-states.html) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)