Muhammed Senussi
Muhammed Senussi
  • Muhammed Senussi
The Empty State Is the Most Important ScreenUI/UX

Design files are full of screens with twelve realistic rows of data. Every real user starts with zero, and that screen decides whether they get to the twelve.

What an empty state should do

  • Explain what goes here, in one sentence, without jargon.
  • Offer the action that fills it, as a button rather than an instruction.
  • Show what it will look like once populated — a faded example row communicates more than a paragraph.
  • Distinguish "nothing yet" from "nothing matched your filter". These are different situations and users read the wrong one as a bug.

That last distinction is the one most commonly missed. A search returning no results and an account with no data look identical in most products, and the user concludes the search is broken.

The same applies to error and loading states. Together they are most of what a user sees in their first session, and they are almost always the least-designed part of the product.

The Empty State Is the Most Important Screen — Figure 1
The Empty State Is the Most Important Screen — Figure 2
The Empty State Is the Most Important Screen — Figure 3

2 Comments

  • Yara Mansour

    June 25, 2024

    We merged those two states for two years without noticing. Support tickets dropped when we split them.

    • Muhammed Senussi

      Muhammed Senussi

      AuthorJune 25, 2024

      It is one of those changes where the effort is an hour and the effect shows up in a support queue. Adding a "clear filters" button in the no-results case usually helps as much as the wording.

Leave a comment