Don’t forget about empty states

Don’t forget about empty states

May 2016

Today’s post prompted by this helpful piece of copy from Fitbit:

Food Plan: You have no previous history

Why are empty states important?

When you’re designing software, you spend most of your time thinking about what it’ll be like when users are interacting with it normally. It’s easy to forget about what it looks like when there’s nothing in it. But that’s often the time users need your help the most, because without any content, it’s hard to work out what something does.

In the Fitbit example above, I have no idea why it’s not showing me anything (and clicking on the gear icon doesn’t give any clues). They haven’t thought very hard about the copy, either about how to explain why there’s nothing here, or what I need to do to add something.

If you’re not careful you can end up with this kind of depressing view, with no idea how to get some content in here (thanks screenshots of despair):

No activity found. No activity found. No activity found. No activity found.

Something better

For starters, explain what the next steps are, like Google Drive does here:

No files in this folder. You can create files with the New button

WhatsApp goes one better, with clearer instructions on finding that button:

To start messaging contacts who have WhatsApp, tap (button image) at the top of your screen

Even better, don’t make users go hunting for a button somewhere else - make them part of your empty state (via

New group

In short:

  • Think about what your software looks like when there’s nothing in it
  • Work out how your users can make it not empty
  • Make it really easy for them to do that