01 / DEFINITION

Empty State explained

An empty state is the interface shown when a list or screen has no content. This may happen during first use, after a search with no results, or when filters match nothing. First use, no search results, missing permission, and loading errors are different situations and should not share one generic blank screen. The message and action should reflect the actual cause.

02 / IMPACT

Why it matters.

An unexplained blank screen can look like an error. A message suited to the context and a next step help people understand what happened. Without an explanation, people may assume the product is broken. A clear reason and relevant way forward are especially helpful during first use.

03 / EVERYDAY LIFE

Let's look at an example.

REAL-LIFE SCENARIO

Think of a project board.

A new account might say ‘No projects yet’ with a ‘Create your first project’ action. An empty search needs different text and a way to clear filters. If filters empty the board, a Create project prompt is misleading. Showing the active filters and an option to clear them better matches the situation.

04 / IN PRACTICE

How to apply it.

  • 01

    Find out why the view is empty.

  • 02

    Explain the state in one short sentence.

  • 03

    Offer one useful next step when appropriate.

“

An empty screen should still say something.