Empty state

What is an empty state?

An empty state is what an interface shows when there is no content to display: a new task board, a cleared list, or a search with no matches.

How it works

Explain why the space is empty and, where appropriate, give the user a next step. A new task board could show “Create your first task” with a short explanation or a useful template. An empty search needs a different response.

No data, loading, and failure are different situations. The message should make clear which one the user is facing.

Examples of different empty states

• No search matches: “No tasks match these filters.” An action such as “Clear filters” lets the user broaden the search. Keep the search terms visible so the user can also revise them.
• Everything completed: “All tasks are complete.” A link to completed tasks can let the user review the work. There is no need to imply that they must create another task.

These are hypothetical interface messages. If tasks are still loading, show that status; if loading failed, explain the failure and offer an appropriate recovery action. Neither situation should be described as an empty task list.

Why it matters

A blank screen can leave people wondering whether they should wait, try again, or do something else. Good empty-state design answers that question. It helps returning users as well as people opening the product for the first time.

Further reading: Kate Kaplan: Designing Empty States in Complex Applications; Material Design: Empty States.