Design Openbook

Designing Empty Screens

How should you design an empty state screen in an app? Design four empty states separately (first use, no search results, cleared, and error), each with exactly one next-step button and wording that fits the situation.

A screen with nothing to show still needs design. If an empty screen does not say what to do, users just leave.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. First-use empty state

    Just signed up, so there is no data yet

  2. No results

    No items match the search conditions

  3. Cleared state

    After the user has removed everything from a cart or to-do list

  4. Error state

    Loading failed. Must be told apart from an empty screen

How to use it

  • Give each empty screen exactly one button for the next step. With several, people hesitate again.
  • On "no results", show the search term again and suggest a spelling check or similar terms.
  • A cleared state is not a failure. A congratulating tone such as "All done" fits.
  • If you show an error like an empty screen, users think their data is gone. Put a [Try again] button on errors.

Prompts to copy

4 empty states

Create 4 empty states for this list screen.
1. First-use: one line saying what this place is for + one [Add your first item] button.
2. No results: "No results for '{search term}'" + a [Clear search] button.
3. Cleared: one line praising the user for finishing. No button.
4. Error state: what failed + a [Try again] button.
Use only text and buttons, no illustrations.

Source posts: @uxwoodytips

All cards (27)