For founders
Your empty states are your onboarding
The first screen a new user sees is almost always empty. Most products put a grey box there that says "No data yet". The good ones use that screen to teach: what goes here, one button to add the first thing, and an example of what full looks like.
Prashant Kumar Singh · · 4 min read
In short
- The empty state is the moment a new user decides whether to continue; it deserves more design than the full state.
- Three rules: say what goes here in the user's words, give one button to add the first thing, and show a faded example of what full looks like.
- Celebrate the first item quietly, then get out of the way.
Product teams design the full state. The screenshot in the pitch deck shows a dashboard with months of data, a project with a dozen tasks, an inbox with activity. No new user ever sees that screen. The screen they see is the same one with nothing on it, and in most products it has been designed by nobody.
"No items yet." That is the entire onboarding for a surprising number of products, and it is the moment the user decides whether this thing is going to be worth the effort. Here are the three rules I design empty states by, and one extra for what happens after.
Rule 1: say what goes here, in the user's words
Not "No projects". Something like "This is where your client work lives. Start with the one you are working on this week." One sentence that names what the space is for and connects it to a job the user already has. The sentence does the work a product tour tries to do, without interrupting anything, at the moment the user is actually looking.
Rule 2: one button to add the first thing
Not three options. One primary action, phrased as the first step: "Add your first project", "Paste a URL", "Import from CSV" if import is the realistic path. If there are two real ways to start, show one and make the other a text link. The empty state is not the place for a choice; it is the place for a start.
Rule 3: show what full looks like
A lightly faded example of the screen with real-looking content in it, behind or beside the empty message. Users understand a product by seeing it used, and the example answers the question "what will I get if I do this" before they have to commit. For AI products this is the strongest version of the rule: show one example output in the empty state and the user knows exactly what the product does.
Rule 4: celebrate the first item, quietly
When the first project, invoice or document appears, acknowledge it in a line and then get out of the way. No confetti, no modal, no "great job". A single quiet confirmation that the thing worked and a hint at the next step: "Added. Most people add their team next." Then the product is a product.
| Grey box | Designed empty state |
|---|---|
| "No projects yet." | "This is where your client work lives. Start with this week's." |
| Three buttons | One button: "Add your first project" |
| Blank | A faded example of a full project list |
| Nothing on success | "Added. Most people add their team next." |
Why this beats a product tour
A tour explains the product before the user has a reason to care, and most users close it; Userpilot's benchmark puts average onboarding-flow completion around 19%. An empty state explains one screen at the moment the user is on it, with the action they need and the result they will get. It is cheaper to build, impossible to skip, and it scales to every screen in the product instead of the five the tour covers.
Questions people ask
- What is an empty state in UX?
- The version of a screen a user sees when there is no data in it yet, such as a new account's project list. It is the first screen most new users see and functions as onboarding whether or not it was designed as such.
- What should an empty state contain?
- One sentence saying what the space is for in the user's words, one primary button to add the first item, and a faded example of what the screen looks like when full.
- Are empty states better than product tours?
- Usually. Tours are skipped by most users (around 19% completion in Userpilot's benchmark) and explain things before the user needs them. An empty state explains one screen at the moment the user is on it.
If you're a founder
Open a new account on your product and send me the screenshots. The free teardown will design the three most important empty states on one page.
If you run an AI lab or data team
A task programme's empty state is the first task a new author writes. A worked example, one spec and a scored trial do the same job as the three rules above.
Sources