tezvyn:

Empty State

AI-drafted, machine-checkedSource: toptal.comintermediate
Empty State

An empty state is the screen a user sees before any data exists, like a new account with no projects or a search with no results, and treating it as a real design surface rather than a blank gap is a high leverage move for activation.

WHY IT EXISTS Every product with user generated content has a moment before any content exists. Engineers naturally build for the populated case, the list with items, the dashboard with data, and treat the zero state as an edge case or even a bug to patch later. Empty state design exists because that edge case is often the very first screen a brand new user ever sees, and a confusing or broken looking one kills activation before the product gets a fair chance.

THE MENTAL MODEL Think of an empty state as a host greeting a guest at an empty venue before the party has started. A bad host says nothing and lets the guest wonder if they came to the wrong place. A good host says here is what happens here, here is what will fill this room, and here is exactly what you can do right now to get things going.

HOW IT WORKS A well designed empty state has three parts: an explanation of what this space is for, a reason it is currently empty, in plain terms, and a single specific call to action that moves the user toward filling it, like Create your first project or Invite a teammate, rather than a generic Get Started button. Distinguish between the different flavors: first use empty states for brand new users, which should teach and invite action, cleared empty states after a user deletes everything, which should confirm success neutrally, and no results empty states from a search or filter, which should suggest loosening the filter, not implying the whole product is empty.

WHEN IT MATTERS It matters most in the first session of a new user, where the empty state effectively is the product until they add data, and in any list heavy feature where filters can return zero results. The footgun is copying the same generic Nothing here yet message everywhere: a search with no results and a fresh account with no projects are different problems needing different next actions, and conflating them confuses users about whether something is broken.

ONE CONCRETE EXAMPLE A project management tool's dashboard, on a brand new account, shows a large illustration, the line You have not created a project yet, and a single prominent Create your first project button, plus a smaller Import from Trello link below it, instead of an empty gray table with just column headers and no rows.

Read the original → toptal.com

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.