What is an Empty State?

Table of content

An empty state is the product state shown when a screen, section, or component has no data or content to display yet.

TL;DR

An empty state appears when there is no content or data to show.
It can be a first-use condition, filtered result, search result, permission condition, or cleared state.
Good empty states explain why the area is empty.
They should guide the next action when one exists.
An empty state is part of the product experience, not leftover whitespace.

What does an empty state look like?

A new project-management workspace may have no tasks yet. A search may return no results. A filtered table may contain no matching records.

All are empty states, but they need different messages and actions because the reasons are different.

Types of empty states

First-use empty state

The user has not created anything yet.

No-results state

Search or filters produced no match.

Cleared state

Content existed but has been removed or completed.

Permission-limited state

Content exists, but the user cannot access it.

What should a good empty state do?

explain why it is empty
set expectations
offer a useful next action
avoid blaming the user
match the surrounding product tone

Empty state vs. error state

An empty state can be a valid normal condition. An error state indicates that something prevented the intended operation from succeeding.

Common mistakes

Using generic “Nothing here” copy

Explain what the user expected to find and what they can do next.

Showing a CTA when there is no valid action

Sometimes explanation is enough.

Using the same empty state for every reason

No search results and no initial data are different situations.

The bottom line

An empty state asks: why is there nothing here, and what is the most useful thing the user can do next?

Relevant Figr resource

Read Prototyping UX Design for examples of state-aware prototypes.

Definition