7 types of empty states and how to use them

How empty states make a fuller user experience.

Kinneret Yifrah
UX Collective

--

Empty states should just be empty, right?

So why spend 2000 words on how to write them?

Well for one, because even if an app or a system has nothing to show the user, it still has to tell them that. It’s just a matter of whether it says ‘no data’ and sends them on their way, or if it gives them that little something extra.

And second, empty states are incredibly valuable for your users.

Empty states help users >

  • Use the app and gain value from it as soon as they launch it
  • Understand how to use a system — any system
  • Perform more actions and use more product features — hence, make the most out of your product
  • Get where they want to go faster

How can a supposedly empty space do all that

Let’s take a look at the 7 most common empty states you’ll encounter, and how to turn a dead-end into an open highway. The differences between these states are subtle, but critical.

Do any of these states come up in your product?

Type 1: Let’s go, get started

Users have not yet created or collected the items that are supposed to appear here (usually happens at First Use, but can also appear in ongoing use)

This is where we will eventually display items created or collected by the user.

Examples:

  • You haven’t saved any items to your wishlist yet
  • You still haven’t added any patients to track
  • You still haven’t configured servers for the system
  • You still haven’t given any permission to this user
  • You still haven’t added anything to your basket
  • You still haven’t uploaded any videos
  • You still haven’t selected dashboard widgets to display
  • You still haven’t created any automation
  • You still haven’t created any folders
  • You haven’t written your first post yet
  • You still haven’t set up any alerts
  • You still haven’t pinned your favorite places
  • You still haven’t created any albums
  • You still haven’t set any secured assets
  • You still haven’t invited friends
  • You still haven’t set up a client
  • You haven’t written your first survey question yet

We don’t write ‘no [items] yet’ — that’s just meaningless. So what should we write?

1. A heading — that describes the state and lets you know you haven’t started [doing whatever needs to be done] yet.
Example: You haven’t set up any alerts yet
Or: Set up your first alert

2. Motivation — Why I should save or create this item, how it will benefit me, or how to actually do it.
Example: Alerts will keep you updated, so you won’t have to worry about missing out on something important

3. CTA — A prominent button or link to create the first item.
Example: Create alert

Another example:

Heading: You haven’t saved any books to your Favorites list yet
Motivation: To save a book that has caught your eye, so you can easily come back to it later, click the heart icon
Button: Browse our bestsellers

And a few more examples:

Toggl empty state: Create a project and get organized
Toggl
Todoist empty state: Keep all your high-level information organized
Todoist

This one is a bit different, but follows the same principles of touching on a soft point and encouraging users to take action. Semplice is for creating portfolios:

Semplice empty state for procrastinators
Semplice

Why it matters

1. Engagement
In first use, this is our chance to engage users with direct action; not just tell them what the product does, but actually let them experience it. The sooner they start to get real value from the product, the more likely they are to continue to use it.
2. Usability
Sometimes users want to start, but don’t know exactly how. A few words and a button can send them on the right path. Win-win.

Type 2: I’m right here, waiting for you

The data that’s supposed to automatically appear here has not yet been created. Users need to do something to get the data pouring in

This area will eventually showcase data, once it’s automatically generated by user activity. In this scenario, it’s not the users who actively collect or create items — it’s the system that creates, collects and presents them as a result of user activity.

Examples:

  • Click-data for your ads is not available yet [because the user hasn’t created any ads]
  • No asset threats detected yet [because the user hasn’t defined any assets to secure]
  • No newsletter opening data available yet [because the user still hasn’t sent it out]
  • No viewing data to display [because the user hasn’t uploaded any videos]
  • Activity log not yet available [because the user has not yet been active in the system]
  • Test analysis results are not yet available [because the user hasn’t uploaded any tests for analysis]
  • No product reviews yet [because the user hasn’t sold anything]

If we wouldn’t just write ‘no data’, what should we write?

1. A heading — that describes the current state and informs that there is nothing to show (but there will be, in the future).
Example: No logs to display yet

2. An explanation — about how the feature works + motivation and value, when relevant.
Example: After you invite users and give them permissions, you’ll be able to see how frequently they log into the system and what actions they perform.

3. CTA — A prominent button or link to perform the necessary action
Example: Invite users

Another example:

Heading: How much do you have left?
Explanation: Set up your budget goals to see where you stand and make smarter financial decisions
Button: Set up your first goal

And another one:

Currently you don’t have any active jobs

Why it matters

1. Usability
When users venture into a new digital product, they try to visualize how it works, where everything is and how things fit together. An empty state automatically fills up as they go helps them know what goes on right off the bat by showing which actions produce other actions, and how everything works together.
2. Value
This type of empty state clearly reflects to users what the system does for them and what value it provides. In other words: You do your part, we’ll take care of extracting and presenting the important data.

Type 3: Come back soon

The data that should automatically appear here still hasn’t been created. The system needs time, and users can’t speed that up

Sometimes, users have done everything they need to set the system’s gears in motion, but it just needs more time to produce reliable data. This mostly happens with products that execute statistical or performance computations or collect performance data.

For example, if we launched an ad for a paid campaign, the data for the first 24 hours will often be unreliable, because the ad still hasn’t reached a wide or relevant enough audience. This will produce an empty state that says that no performance data is available yet.

Another example: If we have a dashboard that should show this month’s data compared to the previous month’s data, but only started using the system last week — there won’t be any data to compare to.

If we don’t want to write ‘data is unavailable’, what should we write?

1. A heading — that describes the situation and says there’s nothing there yet, but prompts the user to come back at a later time.
Example: Come back soon to see your performance data

2. An explanation — about how the feature works + motivation and value, when relevant.
Example: The system needs at least 24 hours to collect enough reliable data

In this instance, we usually don’t need a CTA button, because users can’t do anything to speed up the system. We can add one if there’s something else that users can do in the meantime, for example, share the ad with others to increase exposure. The key is to think about how we can help users help themselves. Sometimes we can’t, and they just have to wait. And that’s just the way it is.

Another example:

Nothing to compare to yet
In 10 days we will show you how this month compares to the previous one, so you can view your progress and optimize your actions

And two more:

Come back soon, we are still collecting data
Here you’ll find all transfers sent to you
Wetransfer

Why it matters

1. Usability
Copy that just says ‘data is unavailable’ leaves the user in the dark: Is there something wrong? Is there something they can do to get the data flowing? And if not, when will the data be available? A well-written empty state ties up all of these loose ends.
2. Learning and value
A well-written empty state not only saves users questions and frustration — it can also teach users how the system works, give them a sense of control and can emphasize its reliability.

Type 4: Everything is taken care of, way to go!

Users have removed or deleted every item from the list, because that’s how the product works

Let’s look at a productivity app with a task list.

On their first login, users will see the first type of empty state we mentioned, because they haven’t yet created or added any tasks (so the text would read something along these lines: ‘you still haven’t added any tasks to your list | To make your day productive, add at least three important tasks you want to accomplish | CTA: Add your first task).

In regular use, users will:
> Add tasks
> Then delete tasks one by one, once they are completed
> Then reach an empty state again

Only this time, it’s completely different.

This time you can tell them something like:

Fantastic! You’ve completed all the tasks
Go out and party, or if you’re on a roll >
[CTA] Add a new task

Other examples:

  • List of alerts already taken care of
  • Read or fully sorted inbox
  • List of read documents
  • Fully completed training program

…and anything else that needs to be taken care of.

What should we write?

Instead of going back to the first empty state, which isn’t relevant in these cases, we can commend our users for taking care of business. There’s really no need to add anything other than praise, unless we want them to take additional actions.

Examples:

Todoist: All clear!
Todoist
Todoist: Nice work!
Todoist

Why it matters

1. Personal experience
A generic, irrelevant empty state makes the product feel mechanical. An empty state that applies to the situation lets users know that they’re being seen, their goals are being noted, and their success is a reason to celebrate.
2. Pick-me-up
An encouraging empty state can make your users feel competent. Compliments were found to strengthen the bond between users and the product that complimented them. Plus, they’re great for your complexion :)

Type 5: Upgrade now

Users can’t see data, because this feature isn’t included in their plan. They need to upgrade to see it

Well, this is not quite an empty state, because the system does have data to show — but it’s similar to an empty state because the data is not available to the users.

Empty states of this kind are a perfect opportunity to motivate users to purchase and upgrade their plan, because if they’ve reached this screen — this information must interest them.

That’s why it would really be a waste to write “This data is only available in the PRO plan, upgrade now.”

Instead, we can use product marketing principles here and demonstrate the value of the specific feature we’re talking about — how exactly it can help them.

Here are a few examples:

Todoist: upgrade to get a reminder
Todoist
Todoist: upgrade for automatic backups
Todoist
Walkme: upgrade for insights
Walkme

Type 6: No search results (Search field without filters)

Users typed a word or phrase directly into the search field, and the system did not yield any results

If we don’t want to write ‘no results’, what should we write?

1. A heading — that takes responsibility, something along these lines: ‘We could not find what you were looking for.’

2. We then have several options, depending on the situation and the product:
- Back to basics: Suggest they fix or change the input text
- Present results that are related to the term they searched
- Suggest advanced search
- Tell them that we will let them know once we have what they were searching for
- Offer to add the item they were searching for to your site/product

Examples:

No results, try a different, more general, keyword
No matching tag. Try a different keyword or create a new tag
Toggl

Type 7: No search results (with filters)

Users have set up search filters and the system was unable to yield results

If we don’t want to write ‘no results’, what should we write?

1. A heading — that takes the blame, something along these lines: ‘We could not come up with any results that fit your search criteria.’

2. We then have several options, depending on the situation and the product:
- Back to basics: Suggest they remove some filters or broaden their search range
- Present best-match results (expand the range automatically and suggest other related results that might interest them)
- Offer to let them know once the item becomes available

Examples:

We couldn’t find any logs, uncheck some of the chosen filters
No data in the selected time range. Try a different range

Someone call the developers!

You’ve probably noticed that some cases call for developers:

> To present an empty state that’s different and relevant to each of the particular states described here.

> To determine whether the empty state is the result of first use (type 1) or after items were deleted (type 4).

> To notify users exactly how long it will be before they start getting data (type 3).

> To make useful suggestions when the search yields no results (types 5 and 6).

Is it worth it?

If your goal is to have your users make the most of your product and perform as many value-creating actions as possible, and if you want them to feel comfortable, capable, and that they’re seen and cared for –

Then yes. It’s worth it.

--

--

Microcopy expert and UX writer. Author of “Microcopy: The Complete Guide” — the book and the digital course (Udemy). Helps UX pros to make users’ lives easier