Recently my local supermarket decided it would be a good idea to rearrange its store layout. Suddenly, my weekly shopping trip became –at least for a while - a dreadful challenge. Armed with my shopping list I wandered through the overturned aisles looking for a point of recognition or a sign to guide me to the right department. I found neither. But the challenge didn’t stop there. A lot of shelves still contained empty spaces because they hadn’t been completely stocked yet. Without an indication of which products exactly were missing, I started wondering: “Am I in the right section?” “Did I just walk past the item?” “Is my item even in stock?”
When people start using a digital product for the first time, they look for guidance in a very similar way. Whether it’s a completely new smartphone app or a redesigned website, users quickly need to find their way during first use. They will look for clear guidance to find the information they need. When that guidance fails, people will feel the same as me in my local supermarket: lost, angry and confused.
As a designer, you will be miles away from that Great User Experience you aim for when you neglect the importance of clear guidance. Worse, people will most likely abandon your product. The solution? Always guide your users so they become truly engaged with your product. It’s the first step to convert initial users into loyal ones.
There are 3 possible situations in which you might encounter empty states:
For example: Wuntu is an app to receive offers and treats each week. When you open the app you get a message that there are “no used items in your wallet”. This doesn’t answer any question. On the contrary, it raises a lot of new questions such as:
So how can you avoid this situation? Let’s take a look at the 3 moments when a user interacts with empty state screens. Depending on the moment, you handle empty states differently.
1. First use
When you are using a product for the first time, chances are that many pages are still blank because there isn’t any content to be displayed yet.
In most cases, you need to create this content yourself. However when you are completely new to a product, you haven’t got a clue how it exactly works and where everything is located. This is where the empty screens come in place. Their role is to guide you in the right direction and tell you exactly what each section of the product does.
One option is to create dummy content. This gives a preview of what the product will look like once you have taken some actions.
A great example of this is Gmail. When you create a new account you will never be greeted by an empty inbox, instead there will already be a couple of emails waiting for you (sent by Team Gmail). These emails contain information on how to get started with the product.
Let’s take a look at our redesign of a platform to send out online mailing campaigns. As you can see on the first screen, the user had not yet created a mailing campaign so the table is still empty with some small text saying: ‘no entries’. This is far from engaging and, in addition, the user might not even know what a campaign is and why he should care about it.
In our redesign we added an empty state screen explaining what a “mailing campaign” is and how it works. We also guide the user in the right direction by engaging them to create a new mailing.
Empty state screens can also be very helpful when you decide to delete all your data, like notifications or old mails. This notification drawer by BrightHR is an example. As you can see they do not show plain text saying “No new notifications” but instead they show this:
What BrightHR does is use some fun copy and a nice illustration to make the user smile. However, be careful not to overdo the fun stuff; you certainly don’t want to make the message difficult to understand. Focus on bringing across your message first, and then you think about how to add a dash of fun.
A bad error page is maybe one of the most frustrating screens to encounter. You made an error or something went wrong in the system. Maybe a page is missing or the Internet is down. No matter the issue, when you don’t get clear feedback of what is wrong, errors can become really frustrating.
Being clear about what exactly went wrong and how you can recover from a mistake is vital. Keep the technical details to a minimum and focus on using human language.
Below you can find an example of Google Cast. A simple message tells you that you are not connected to Wi-Fi, together with a clear call-to-action to turn your Wi-Fi on.
Designing a great product is one thing, getting your users to actually use it is another. Get your users on board by guiding them through your application and by giving them the feeling that you’re always there to help them.
By nailing your empty states, you are one step closer to the superb user experience you are aiming for.
Need help with your user onboarding? Contact us