Tackling The Empty State Graveyard
I do my bookkeeping in TextEdit. It’s color coded. I update it manually. I also write my grocery lists, reminders, and work to-dos in TextEdit. I know, it’s super efficient. But it’s routine, and I take comfort in the stability. About a year ago, my coworkers persuaded me to try Mint. Naturally the first thing you have to do is fill out all your card and bank information so that they have some stats to show you. I hesitantly set everything up, and then watched as the suggested budgets began to auto-populate. Immediately my eyes were drawn to the red, as Mint kindly hinted I was over budget in the bar and food category. While I am a rational human being that understands the value prop of Mint, I instantly and irrationally interpreted this suggestion as an all-too-quick judgment, visualizing a pretentious onlooker gasping as if to say, “you really spend that much on fried cheese balls and craft beer?” Maybe if they had broken it down to focusing on one or two categories at a time, I wouldn’t have been as overwhelmed. Perhaps if the shade of red had been more of an inviting coral I would’ve stuck it out. Or possibly, if I had set up some goals ahead of time, I would’ve been more prepared to handle my results, for better or for worse. But for whatever reason, I bailed.
So let’s take a step back here to talk a little bit about empty states, and how mine have progressed over the years to hopefully provide a better first impression, excite users, and improve retention.
State the obvious
A user often stumbles across an empty state when they’re viewing a page for the first time. In this particular example, the user is coming to a group page that doesn’t have any content yet, therefore rendering it empty. But by stating the obvious, you pretty much just remind your user that the page is, well, empty…in case they forgot or something. While the illustration provides slightly more visual interest than a vast, white wasteland, this example does nothing to educate the user about what they can do, or inspire any sort of action. It’s nothing more than a friendly reminder. While I have been guilty of doing this long ago, I have since changed my ways.
Prompt an action
Everyone loves a good CTA. Certainly that was a fair next step to improving my empty states. Here, we have an empty media page. Notice there’s some friendly informal copy and nice alliteration going (pats self on the back). It seems evident that the tone is meant to inspire the user to create a playlist. But what is a playlist, and how do I create one? Prompting an action without educating your user can be more of a frustrating cliffhanger than a motivational perk. That being said, it’s definitely on the way to a more useful empty state.
Educate your audience
No one likes feeling dumb or out of the loop. There are a few different ways you can educate your audience. Maybe it’s copy, explaining how to do something. Maybe it’s an illustration or arrow pointing to the UI to aid in the user finding something. Sometimes, it’s simply informing the user of what the purpose of the screen is, giving them a better idea of the value prop and what they can use the service for. In this example, the user has a clear idea of what will show up here, but not necessarily an obvious action. So let’s put it all together.
My ideal empty state:
1. is never empty
2. prompts an action
3. educates the user
4. leaves a good impression
I really enjoy designing illustrations for empty states. They can emphasize parts of your UI and make things seem more approachable. A thoughtful illustration combined with copy that conveys an appropriate voice and tone can work to provide a more enjoyable experience. Along with personality, you can also use copy to explain the benefits of your service. Because at the end of the day, your users are imperfect emotional humans. When first trying out your product, they may be bored, overly confident, impatient, apprehensive, or scared. It’s our job to help remind them why they got there in the first place, why they should want to be there, and why it’s all going to be okay if you happen to spend $100 on cheese from time to time.
Some killer resources: