012 min
Why Empty States get so little design attention
Picture a team that builds a task-board app. Each day they work in a test account that already holds dozens of tasks, columns and comments. The board looks busy and clear, so they judge the design good.
A new customer sees something else. They sign up and land on a board with no tasks, no columns and no comments. Nothing on the screen says what the board is for or what to do first. The screen they land on is an empty state. Some teams call it a zero state or a blank state.
The 37signals team argued for planning this screen in their book Getting Real. They told designers to plan three versions of every screen: the regular one, the blank one and the error one. The regular version is full of data, and everyone draws it. The blank version is what a person sees when they first use the app, before they have entered anything. The error version is what they see when something goes wrong.
Why the people who build a product rarely see it
The same book explains why the blank version gets skipped. Builders test with accounts full of data, so they almost never see the screen a new customer sees first. Designers also fill their mockups with sample content. The finished screen looks good in review, and nobody examines the moment when a customer has seen the least of the product and has to decide if it is worth their time.
The book adds that a weak first screen leaves a false and negative impression of the whole product.
022 min
The kinds of Empty States
The task-board team soon finds that the first-use board is only one case. The same blank space shows up in at least four situations, and each one needs different words.
| Situation | What the person needs to know | In the task board |
|---|---|---|
| First use | What will appear here and how to add the first item | A new board with no tasks |
| Cleared or finished | That the work is done and nothing is missing | Every task is marked complete |
| No results | That the search ran, and how to change it | A filter that matches no task |
| Data cannot be shown | Why nothing appears and what to do about it | The person has no permission to view the board |
The Carbon design system sorts these into three groups: no data, user action, and error management. Other guides use four or five groups. The exact grouping matters less than the habit of asking, for every blank space, which situation put the person there.
The same words mean different things in different design systems
Do not assume that "empty state" means first use everywhere. Atlassian's design system uses the term for the moment someone has cleared a task or finished their work, and uses blank slate for a feature a person has never tried. Cloudscape draws a different line. Cloudscape calls the case where no resources exist an empty state, and the case where a filter matches nothing a zero results state. Getting Real uses "blank" for the first-use screen.
When a team says "empty state", it helps to ask which situation they mean before anyone designs anything.
032 min
What an Empty State does for the person reading it
Back on the task board, the new customer has questions that a blank screen cannot answer. Kate Kaplan of Nielsen Norman Group wrote in 2021 that an empty state can do three jobs: tell the person what the system is doing, teach the feature, and start an important task.
Telling the person what the system is doing
A container with nothing in it leaves a person guessing. Did my search finish? Is the page still loading? Did something break? Did I pick the wrong filter? One line such as There are no records for the selected date range removes the doubt. This is the idea behind visibility of system status, the usability rule that a system should always show what it is doing.
Teaching the feature in the place where it will be used
The empty area can also explain itself. In Datadog, a monitoring product, the favorites list shows Star your favorites to list them here until something is starred. That one line says what the list is for and how it fills.
Nielsen Norman Group judges cues shown in the empty area to be more effective than forced tutorials at first use, because a person can apply the advice at once. A long tutorial leaves people little time to connect what they read with the screen in front of them. A short cue sits next to the thing it describes.
Starting the first task
The third job is to offer the first step. When a person has not yet added logs to Loggly, a log-management product, the empty state offers two routes: add a log source, or load demo data and explore without risk. A direct link or button gives the person something to do next.
042 min
How to build an Empty State
The task-board team now has to build the screen, and most design systems agree on its parts.
- A heading that names the state in a few words, such as No tasks. Cloudscape and Atlassian both ask for a short, scannable title.
- An optional description, only when it explains why the area is empty or what to do. It should not repeat the heading or the button.
- One action, labelled with a verb, such as Create task. This is a call to action. Carbon says to pick the most important action when several are possible. Atlassian says to keep the label to one or two words and to match the title.
The first job of this screen is to bring the new customer to the point where the product first proves useful to them, often called the aha moment. Everything on the screen should serve that step.
Copy
Say plainly why the area is empty and what the person can do. Avoid product terms the customer has not learned yet, and avoid wording that blames them. Cloudscape adds small rules: sentence case, present tense, active voice, no exclamation points, and no words like click that assume a mouse.
Images
An illustration is optional. A picture does not fix an empty state whose words are vague. Carbon says the size of the space should decide: in a small space, use text only. Material Design says the image should be subtle and neutral so it reads as part of the background.
Starter content and sample data
Another option is to avoid the empty state altogether. Material Design suggests starter content, such as a book-reading app that gives every new user a few popular books to open right away. Its advice is to choose content with broad appeal that shows the main features, to let people delete or replace it, and to personalize it when possible. Loggly's demo data follows the same idea.
Starter content has an edge case. If people cannot remove it, their own work ends up mixed with examples they never asked for.
Teaching content that can be dismissed
When a picture and a short line cannot explain the screen, Material Design suggests showing educational content instead. It should say what the person will be able to do once the screen has content, be brief, and be easy to dismiss or skip.
Several empty states at once
A dashboard can show many empty panels together, for example when several widgets fail to load. Carbon recommends a quieter button style in that case, so the page does not show several primary buttons, and text alone may work better than repeating the same illustration.
051 min
Empty States after a search or filter
Not every blank board is new. Later, the same customer filters the task board by a teammate who has no tasks, and the board goes blank again. Nothing is wrong, but the screen must say that the filter ran and found nothing.
Cloudscape gives this case its own pattern. The zero results state has a short heading such as No matches, an optional line about why, such as too many filters being applied, and one action that clears the filter. Carbon gives the same advice: explain why nothing was found and suggest changing the search or the filters.
Cloudscape also asks that a table keep showing its resource count even when the count is zero, so the number agrees with the message.
Showing the closest match instead
Sometimes the better answer to a search with no results is a result. Material Design's original guidance suggests showing the closest match when nothing fits exactly, which avoids blaming the person for a misspelling. Its condition is a heading above the results that says they are not an exact match, so no one mistakes them for what they asked for.
061 min
When an Empty State shows the wrong thing
A message can be well written and still wrong for the moment. Suppose the task board loads its tasks from a server and the list takes three seconds to arrive. If the board shows No tasks during those three seconds, it tells a returning customer that their work is gone.
The false empty state during loading
This is a documented failure. In an employee-management app that Nielsen Norman Group described, the list area first said No records and, a few seconds later, the app replaced that message with the real items. Nielsen Norman Group called such messages particularly harmful. At best, people wait and then distrust the app. At worst, they act on the first message and never see their data.
The fix is order. Show progress while the data is loading, and show the empty message only after the request finishes with nothing. A skeleton screen, which draws grey shapes in the layout of the coming content, is one way to show progress without claiming that nothing exists.
Empty because the person has no access
The same care applies when data exists but the person may not see it. Showing No tasks to someone who lacks permission is false in the same way. The message should say why the area is empty and how to ask for access.
071 min
The Empty State that says the work is done
Some blank screens are good news. When the customer finishes every task on the board, the board is empty again, and this time nothing is missing. The message needs to say so.
Instagram offers a well-known case. Instagram added a message to its feed on 2 July 2018 that appears once a person has viewed all posts from the previous two days. The company said people found it hard to keep track of which posts they had seen, and the message tells them they have not missed recent photos or videos. Posts they already viewed, and posts older than two days, appear below it.
Carbon notes that such a state may need no action at all. If a person has set up alerts and none has fired, nothing needs their attention, and extra text adds noise.
Tone needs care here too. Atlassian suggests celebrating a finished task, but it advises that messages people see often should be short and plain, and that more playful wording belongs to rarer moments such as completing a large piece of work.
082 min
Where design systems disagree about Empty States
The task-board team will notice that the guides it reads give different advice. Two disagreements matter.
Should an empty state have an action?
Material Design's original guidance says the tagline of a basic empty state should not be worded like a call to action, because people may touch it expecting something to start. Cloudscape, Carbon and Atlassian give the opposite advice. Cloudscape says to always provide an action, and Carbon says not to leave a person without a next step.
The positions are closer than they look. Material is warning against text that looks tappable but does nothing. It also lists starter content and teaching content as the answer for new users. Carbon allows a state without a next step when nothing needs doing. A workable rule: if there is an action, make it a real button, and if there is none, do not style the text as a control.
Is "no access" an empty state?
Carbon takes the opposite view from Cloudscape here and says an empty state can also appear when data exists but cannot be shown. It lists permission problems, system problems and missing configuration as examples. Cloudscape says not to use empty states for errors, and to use its flash bar and status indicator instead.
Either rule works if a team applies it consistently. What does not work is a blank area that gives the person no reason for the blank.
091 min
Accessibility for Empty States
A person who cannot see the screen needs the same news as everyone else, and three details decide whether they get it.
- Announce the message. When a search ends with no results, the message appears without any change of focus. WCAG 2.2 success criterion 4.1.3, Status Messages (Level AA), asks that a message like this be announced by assistive technology without moving keyboard focus. The W3C lists a "no results returned" text as an example.
- Replace the container. Carbon says an empty table should be replaced by the empty state, with no column headers or footer left behind. Otherwise a screen reader reads the whole empty table before it reaches the message.
- Hide decorative images. Most empty-state illustrations are decorative. Carbon follows WCAG guidance and gives them an empty alt attribute, so a screen reader skips them.
102 min
Finding and testing every Empty State
The team can now write each screen, but first it has to find all of them. An empty state can sit anywhere the product might show data: lists, tables, cards, side panels, dashboard widgets, search results and select menus with no options.
A short test pass finds many of them.
- Sign up with a fresh account and open every screen. This is the view the team never sees in its own account.
- Delete everything in one area and look at what remains.
- Apply a filter that matches nothing.
- Sign in as a person without access to part of the product.
- Slow the network and watch for a message that appears before the data does.
Measure each type on its own, because each asks the person to do something different. A first-use state is judged by how many people take its action. A no-results state is judged by how many then change or clear the filter. A finished state has nothing to measure beyond whether it caused confusion.
Many guides claim that thoughtful empty states raise retention. The sources for this article offer no measured study of that claim, so the team should measure its own screens.
Some guides also suggest using an empty state to promote an upgrade, to collect a preference, or to reward streaks. Each adds a second goal to a screen whose first goal is to make the situation clear. If the team tries one, it should check that the first goal still works.
?4 questions
Questions people ask
How long should the text in an empty state be?
Can an empty state be funny?
Does an empty table still show a count?
§9 sources
Sources
37signals, "Three State Solution", Getting Real, chapter 48.
37signals, "The Blank Slate", Getting Real, chapter 49.
Kate Kaplan, "Designing Empty States in Complex Applications: 3 Guidelines", Nielsen Norman Group, 19 September 2021.
Cloudscape Design System, "Empty states".
Show all 9 sourcesShow fewer sources
Carbon Design System, "Empty states pattern".
Atlassian Design System, "Empty state" (designing messages).
Material Design 1, "Empty states" pattern.
Instagram, "Introducing You're All Caught Up in Feed", 2 July 2018.
W3C, "Understanding Success Criterion 4.1.3: Status Messages", WCAG 2.2.
