An empty state is like an empty box.
Except instead of opening an empty box and being super bummed, there’s a message inside.
Applied to digital products, empty states provide context when there’s nothing to display just yet. Like this:
There are two common scenarios for empty states:
- New user: The user just joined and hasn’t done anything yet
- Actually empty: The user actively emptied all items in an area
Here’s an example of a “new user” empty state:
And here’s an example of an actually empty empty state:
Why do empty states matter?
We’re gonna take a trip down memory lane. Think of the best birthday present you ever received. You were so excited to open it, and you were even more excited when you found out what it was.
Now, imagine being handed that present, opening it, and finding nothing inside. Sucks, huh?
That’s why empty states matter — they make sure users aren’t left hanging at a dead end.
Instead, empty states help users get started using a product and can even help show users how things are done.
A helpful empty state guides the user toward a happy user experience. A poor empty state influences users to close the app.
What makes effective empty states?
The best birthday present I ever got was a (faux) gold box (coincidence, huh?)
Inside the gold box was over 60 pieces of paper I could pull throughout my birthday year. Each piece of paper had a fun thing on it, like painting pottery or going on an extra-long walk. It was a pretty amazing gift.
Now, let’s imagine that box was empty. Instead of the pieces of paper being inside the box, they were scattered around the house, and I had to go find them.
Imagine my fiancé communicated that message to me, and to effectively communicate that message, he:
- Gave me peace of mind it was supposed to be empty
- Explained why my gold box was empty
- Told me what should be in the box
- Told me how to fill the box
- Explained why I should want to fill the box
While we aren’t giving users faux gold boxes, when we give them an empty state, the same ideas apply. That’s why effective empty states:
- Give users peace of mind it’s supposed to be empty
- Explain why the state is empty
- Tell users what should go there
- Tell users how to fill in the empty state
- Give users a reason to care about filling the empty state
Effective empty states give users peace of mind it’s supposed to be empty
The very first message that effective empty states communicate is the screen is supposed to be empty.
Moving on from my best birthday present example, let’s go back to the horrible memory where your most cherished birthday present was just an empty box 👿
You open the present, and the very first thing your gift-giver says is, “Don’t worry — it’s supposed to be empty.”
Hello, peace of mind.
By leading with the fact that what’s happening is intentional, you can lower your stress levels, and listen to what comes next with open ears. And the very same is true with users and empty states.
For example, this empty state from Abstract does a good job of explaining the screen is supposed to be empty by leading with “You have no personal projects”:
Effective empty states explain why the state is empty
Let’s continue with your empty birthday gift example.
Imagine you still don’t actually get the gift (sadistic, I know.) But in addition to reassuring you the box is supposed to be empty, the gift-giver included a UPS tracking code inside the box.
They also explained your gift got back-ordered, and if you look up the tracking code on ups.com, you can watch its progress. That’s totally understandable, and even leaves you feeling excited.
Like the gift-giver explaining why you got an empty box, effective empty states explain why the screen is “empty.” By being up front, it erases lingering questions for the user, and the clarity helps them move forward.
For example, this empty state explains the “trash” is empty because items are deleted after 60 days:
Effective empty states tell users what should go there
Users aren’t in the business of playing guessing games. Their time is valuable, and to be respectful, you have to be up front and transparent about what goes in an empty state. That way, they can easily move forward and make the most of their time.
Essentially, by creating a transparent empty state, you’re empowering users to use their precious time as efficiently as possible.The best way you can do that is to tell the user what should go in the empty state if it wasn’t empty. Here’s an example from Audible:
“No stories” implies “stories” are stored in the empty state. Audible goes a step further to explain stories are made of pictures and videos that will automatically be added.
Similarly, Get Response makes it clear that messages from a specific time range are what’s supposed to be in the empty state:
Effective empty states tell users how to fill in the empty state
A lot of empty states leave users to fend for themselves — kinda like getting your birthday present without the tracking code. As UX writers, we can combat that by:
- Giving instructions on how to fill the empty state
- Providing a call-to-action to resolve the empty state
Here’s an example of an actionable empty state with written instructions from Foursquare:
Foursquare explains what to do to resolve the empty state, but you gotta go do it yourself.
On the flip side, here’s an example of an empty state that provides a call-to-action to resolve the empty state from Figma:
The user hasn’t liked anything yet, so Figma is encouraging him to “explore” to fill the empty state.
Effective empty states give users a reason to care about filling the empty state
Let’s be real — most birthday presents aren’t great.
Once we get to a certain age, we can mostly buy the things we want, and more stuff doesn’t equal more space to put it in. Because of this, if you’re like me, accepting most birthday gifts is more of a nicety than something I’m excited about. (Maybe I’m too pessimistic about birthdays?)
And just like most of us and birthday gifts, we shouldn’t assume users are motivated to fill the empty state. We have to communicate a reason why they should want to fill in the empty state.
We can do this by communicating to users the benefit they get from filling the empty state.
For example, this empty state from Messenger clearly explains you should want to get started with Messenger because it’s “as fast as texting, but with more”:
Good examples of empty states
This throwback from Dropbox is an excellent example of an empty state. It explains why the empty state is empty, what should go there, and how they’ll get there.
Modern-day Dropbox continues to crush the empty state game with this gem. For context, this is an empty Paper doc, Dropbox’s version of Google Docs. Dropbox cleverly uses the empty state to explain what goes where and even how to use the Paper doc. Not to mention, the friendly tone is quite inviting.
Sometimes there isn’t an action to direct to, and the empty state serves more to relay facts. In that case, it’s best practice to be clear, direct, and not leave room for interpretation.
And that’s exactly what Insight Timer does. You have 0 notifications, and there’s no question about it. They even add a bit of delight with the Lao Tzu quote.
Bad examples of empty states
This just makes me uncomfortable. I don’t know what’s supposed to go here, and I’m not sure I want to add anything here. Either way, it’s not actionable, and leaves the user at a dead end.
“Wow, such empty” — wow, such unhelpful microcopy. That’s a little salty, but this empty state really does leave you hanging. Instead, it could encourage you to make a post and could even include a CTA to make your first one.
I gotta be honest — I have no idea what this empty state is saying. Which is why I put it here. You have to pick and choose when and where you’re clever (more on this in the voice & tone blog post.)
By being clever, Salica is super unclear. They have a CTA, but it’s not actionable because I have no idea what I’d be taking a closer look at.
Clear > clever
Happy UX writing 🖖