Designing For The Empty States

From our sponsor: Squarespace is everything you need to sell anything: your brand, products, services, or content.

Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). They often write the copy and as a result it can be a little difficult to understand or it is left with the basic styles. Not the best combination. It should be logged as something that needs designing but that doesn’t always happen.

There are three mains types of empty states. First use, User cleared and Errors (e.g. no internet connection)

1. First use

First impressions are vital. From meeting new people to learning how to use an app, they help users predict what that person (or in this case applications) will be like by comparing them to an existing mental model. Something they do have experience with. Sometimes there is no basis for comparison and users are a blank canvas, waiting to be impressed or disappointed. A bad first impression is very difficult to overcome.

When someone signs up for an app, the chances are high that they know what it does. It may not be clear to them *how* it does it though. When you sign up or log in for the first time, there is no data. It is the perfect opportunity to provide some careful hand holding to help users get the best possible experience. If the lack of data is out of their control then tell them; put them at ease and show that your app has some personality. Have a look at the way Buffer, Timehop and Dropbox do this. Buffer uses the same technique on their desktop site showing that it doesn’t matter what platform or screen size you’re on.

2. User Cleared

Consider the inbox. Love it or hate it, most of the time it’s full. Some people have hundreds of unread emails. Some people have only a handful. Either way everyone is on the quest for ‘Inbox Zero’ whether they know it or not. This can be quite a monumental task and as such should be rewarded with more than just your relief.

Take a look at how Sparrow, Gmail and the default iOS Mail app handle the empty inbox.

Sparrow shows an icon representing a traditional inbox and the phrase ‘Inbox Zero’. From an experience point of view this is quite nice. It’s clean, minimal and in keeping with the rest of the app. After all, everyone wants to achieve inbox zero.

Gmail goes a step further by injecting some character into the app with the smiling sun. By anthropomorphising the app, users can imbue the app with human emotions and connect with it on a deeper level as a result. The distinction makes it clear whether something is good, bad, wrong or right with the way they use the app. By looking at Sparrow, can you tell that getting to inbox zero is a good thing?

Mail has no feedback of any kind leading users to wonder whether they have mail and there is a connection issue or other error preventing them from seeing their mail. The fact that users may question that adds to the cognitive load, to the detriment of their experience.

3. Errors

Sometimes the people will experience an empty state as part of an error. Most commonly due to lack of an internet connection. This is another opportunity to make people aware that you know this can happen by having something more than just some ugly error text. It puts them at ease knowing that it’s probably not something they’ve done as you had spent time designing something for that specific case.

Look at the way Chrome and Opera Mini handle this compared to Safari.

Chrome has a huge amount of text that only tech-minded people will understand let alone bother to read. Opera Mini has something that resembles a modal window and nothing else. The language is more succinct than Chrome but nowhere near as easy to understand as Safari.

Safari on the other hand has an almost beautiful page explaining the issue in few words but making it even a much more pleasant experience. Which do you think puts people at ease when they get a connection error? One is calming, putting people at ease and one looks broken. While the connection is broken, there’s no need to scare people.

It still matters just as much even if your app isn’t a browser; another GMail example shows how the app handles a connection issue – again showing emotions. You know the app is sad but it doesn’t make you feel like you are responsible for it. Compare that with Instagram and YouTube’s connection-less state. A little underwhelming now that you know what’s possible. The Twitter app doesn’t even tell you that there is a connection error.

Conclusion

It still matters just as much even if your app doesn’t require an internet connection or isn’t an iOS or Android app. The fundamentals are still the same. Pay attention to when users will see nothing, and give them something.

Some companies are starting to pay specific attention to empty states; either as part of UX guidelines or a styleguide. Nokia draws specific attention to designing for empty states and — even though they don’t do a particularly great job, at least it makes it into their guidelines. Baby steps.

The important thing to remember is to make sure you add a layer of delight to your apps. Even the boring ones.

Guide people on how to add data when there is none. A good idea is to break out of the conventional layout.
Think about the goals people have when using your app. Will they clear data a lot or will it be a rarity? Design a nice surprise accordingly. If it is often, consider having a few designs and randomise them for an extra level of delight.
Don’t scare users with errors. Do they make sense to someone who doesn’t know what they’re doing? Make them less daunting and more fun.

Above all, think about who is going to use the app and why. The details are what makes any app great. Delight your users and they will be much more forgiving if you make a mistake later on.

Contribute

If you have any examples of good (or bad) empty states please submit them to http://emptystates.tumblr.com which is serving as an ongoing collection. You can also follow Empty States on Twitter. Here are some good resources for empty states as well as some anti-patterns to avoid: