Empty State

An empty state is the screen a user sees when there is no content to display yet. It is what fills an inbox with no messages, a project board with no tasks, a search that returned no results, or a dashboard for a brand-new account that has not generated any data. Rather than leaving a blank void, a well-designed empty state acknowledges that nothing is there and, ideally, explains why and what the user can do about it. It turns an absence of content into a moment of guidance rather than a dead end.

An empty state works by replacing missing content with a purposeful message and, often, a clear next action. At minimum it tells the user what would normally appear in this space. Better empty states go further: they explain how to get started, offer a button that begins the relevant task, such as creating a first item or inviting a teammate, and sometimes include a simple illustration or a friendly line of copy to soften the emptiness. The design distinguishes among different kinds of emptiness, because the first-run experience of a new user who has not yet added anything calls for encouragement and onboarding, while a no-results screen after a search or filter calls for reassurance and suggestions to broaden the query. Each situation deserves its own tailored message rather than one generic blank.

The term simply combines "empty" with "state," describing the condition of a screen that has no data to show. It was formalized as a named part of interface design as products matured and designers recognized that these zero-content moments were not edge cases to ignore but important experiences in their own right, particularly for new users encountering a product for the first time. Naming the pattern encouraged teams to design it deliberately rather than leaving it as an afterthought.

For a business, an empty state matters because it often arrives at a decisive moment: the very first time someone uses a product. A blank, unexplained screen at that point is confusing and can cause a new user to abandon the product before they ever experience its value. A thoughtful empty state instead functions as onboarding, guiding people toward the action that will make the product useful and reducing early drop-off. For search and filter results, a helpful empty state keeps users engaged by suggesting alternatives instead of leaving them stranded, which protects conversions on retail and content sites where a dead-end no-results page would otherwise send visitors away.

The most common mistake is treating the empty state as an afterthought and shipping a literally blank screen, missing a prime opportunity to orient and motivate the user. Another error is writing empty-state copy that states the obvious without offering a next step, so it acknowledges the emptiness but does nothing to resolve it. Using the same generic message for very different situations, such as showing new-user onboarding text on a no-results search page, also misses the mark. An empty state relates to adjacent concepts: it addresses a different problem than a skeleton screen, which stands in while content is loading rather than when content is genuinely absent, it may use a modal or inline prompt to launch the first action, and as a small but pivotal touch it contributes meaningfully to the overall user experience.