📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
User Experience

The Most Overlooked Aspect Of UX Design Could Be The Most Important

The art of the empty state
The Most Overlooked Aspect Of UX Design Could Be The Most Important

I'm not much of a designer. In fact, I’m awful at it. I am, however, interested in how it’s done. I read and write plenty about customer success; along the way, (somehow) I found Samuel Hulick’s site UserOnboard.

His detailed descriptions of the user onboarding process in popular apps give designers an idea about how some of the most successful apps in the world keep you from quitting, becoming frustrated or getting no value. It leads by example.

After being introduced to Samuel’s content, I came across a tweet of his linking to the site emptystat.es, a collection of empty state screenshots that’s been taking user submissions since 2013.

With my brain still whirring from writing about user onboarding, and equipped with Evernote, I set about collecting material to write a post about what has been called the most overlooked aspect of design.

What Are Empty States?

An empty state is what the user sees when there is no data to display on the screen. This could be because:

We’ll quickly go through some examples of these three different kinds before taking a deeper look into how empty states can help increase retention and ensure users get the most out of your app.

Gmail’s New Sign-Up Empty State

Gmail Onboarding

The way Gmail onboards new users is great, but what happens when you (eventually) end up in the app itself? Well, it gives you further information in the same format you’ll be seeing it in the future: emails. It also sends instructions on how you can get more value out of the app, all designed to increase user success (and subsequently, retention).

Process Street’s Zero Data State

Process Street’s Zero Data State

Like a lot of apps that rely on the user creating their own content, Process Street’s zero data state tells you how you can populate the app. Templates are the core of Process Street, and without them, there’d be no checklists, no need for folders, tags or… you get the idea.

Eventbrite’s Error Page

Eventbrite’s Error Page

Even though it’s set in a desert wasteland, this empty state error message is inviting, helpful and full of life. Unlike, some error messages, it tells you what you should do next. Nothing in your app should be a dead-end.

The What, Why And How Of Empty States

A useful empty state tells you what it’s for, why you’re seeing it, and how you can fill it up. There are more elements that we’ll look at later, but an empty state should be useful first, amazing second.

"A useful empty state tells you what it’s for, why you’re seeing it, and how you can fill it up."

When designing, think of those three questions (what, why and how) as the formula for re-engaging your user, but also keep in mind that it’s the bare minimum requirement for an empty state.

Getting The User’s Attention With Empty States

This is a big one. It’s the most efficient way of continuing your onboarding process’ good work and keeping your valuable users sticking around. As I said at the start, empty states can and should be used to (re)engage your users and help them get success.

How can empty states be used to get attention and drive engagement? Well, what’s the first thing you’d be thinking when you land here?

Empty State - No Trips

Very empty. No trips. This tells me what the screen is for, but nothing else.

Empty State - Your Trips

Okay, so that’s why it’s empty, but the fact I’m here probably shows I don’t know how to add a trip.

Empty State - Start Exploring

Bingo. This obvious button and fitting CTA copy tells me how to solve my problem. If I just saw that I had no trips, it’d feel like the app was being deliberately unhelpful.

Let’s do this again with another app.

Zero Data - Zero Help

Zero data and zero help. It tells me what the page is for — displaying selected profiles — but nothing else.

No Data - No Selected Profiles

Now I know why I’m here, but not how to solve my problem.

No Selected Profile - Select Profile

Is it just me, or is this app being sort of rude? Anyway, helpfulness is what we like. Now we know how to fix our problem and fill the empty state with valuable data. Both of these examples follow the same what, why, how formula.

Personality And Benefits Are Icing On The State

There are two more things that there’s room for in empty states, and that is personality and benefits. Personality makes your app memorable and pleasurable to use. Benefits help communicate why your app is useful to the user, which increases retention and solves user onboarding issues.

"There are two more things that there’s room for in empty states, and that is personality and benefits."

Khaylo Workout

Khaylo Workout - Empty State

This tells you what it is (an empty Challenge screen), why it’s there (because you haven’t challenged any friends) and how to fix it (tap the + icon). But that’s not all. This empty state communicates the app’s personality with aesthetically pleasing graphics and conversational language and tells you the benefits of challenging others.

Let’s take a look at another great empty state that ticks all the boxes.

Beamly

Beamly - Empty State

I’ve never used Beamly, but this empty state was so helpful I know exactly what the app does. On top of the three basic components (what, why, how), it sneaks in a fun remark and explains the core value of the app to new users or returning users that need a handy reminder.

Working Brand Personality Into Empty States

Empty states are an excellent opportunity to make a human connection with your users and get across the personality of your app. Just like how web designers like to get creative with 404 pages, empty states are no different. Emotional-design guru Aaron Walter turns to the hierarchy of human needs for an explanation of what makes an app’s user experience successful; while your app should be functional, reliable and usable, it also should be pleasurable.

Making User Experiences Pleasurable

According to Smashing Magazine’s Simon Schmid, there are a lot of ways to make a user’s experience pleasurable. I’ve narrowed down the list he made to the most relevant kinds of pleasure you can offer with empty states:

Using Emotion In Empty States

Going back to the topic of inboxes, I noticed something interesting about the attitudes of different empty states; that is, how some inboxes congratulate you for making it all the way there while other apps encourage you to fill it up.

What kind of feeling your empty state conveys depends on the purpose of your app. Hangouts wants you to add content, whereas Outlook (with its Focused inbox, designed to help you read everything important) wants you to remove it.

Hangouts

Hangouts Empty State

Whatever this thing is, it’s sad. Is that an incentive for the user to get invites on Hangouts? Design works in mysterious ways…

Outlook

Inbox Empty State

You’ve achieved success with the feature. Definite positivity.

Surprising Users With Empty States

It’s probably fair to say that most error messages come as a surprise to users. Why not use this surprise to delight them, instead of showing them something that feels like they’re not getting success out the app? After all, an error message isn’t what you want your user to be seeing too often, so taking a fun attitude toward it when it does happen could help lighten the mood.

Cognito Brain Training

Cognito Brain Training - Empty State

I’m always surprised to see a shark, regardless of the context.

Timehop

Timehop - Empty State

If you’re going to surprise me by saying my Internet connection’s down, at least do it in a cool way, like with time travel and stuff.

Conveying Benefits With Empty States

Finally, let’s leave the realm of design and delve in to more comfortable territory for me: copywriting.

The central focus of your first-use empty states should be (re)selling your users on the benefits of your app. Your user onboarding process won’t always go as smoothly as you planned, and it might be that after signing up, your app sits as a half-forgotten icon on the home screen for days, weeks or months before being revisited. A user who stopped using your app during or after onboarding is at the biggest risk of abandoning it for good, so make every effort to:

In other words, the old copywriting axiom of sell with benefits, support with features.

Note: If you want a quick overview of writing clean copy, check out another article of mine on business writing tips.

Now, let’s take a look at some great examples.

Basecamp’s Projects’ Zero Data State

Basecamp - Empty Data

I love it when an app tells me what to do, how to do it and why I should care.

Dropbox’s Team Zero Data State

Dropbox - Empty Data

Dropbox’s copywriters are so slick. I have no use for this feature, but I did it anyway just to get more material for my swipe file.

What Are The Key Takeaways For Empty-State Design?

Because you made it all the way to the end, you get a special reward — a break from my rambling and a clear explanation of what I found while tearing through as many empty states as I could get my hands on. To recap, the basic questions an empty state should answer are:

On top of this, you should aim to:

Here’s where I found the empty states for this article: emptystat.es; UX: Empty States; UI Empty States.

While I’m still on the empty-states kick, if anyone has some particularly good ones, I’d love to see them. And thanks for sticking with me while I enthused.

This post was originally published on Techcrunch.com and Benjamin's Medium profile.

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Content creator for @processstreet and Writerzone.net. Blogs at benjbrandall.com. Appears on @techcrunch & @thenextweb. Follow me on Twitter.

Related Posts

It’s often said that actions speak louder than words, and while goal-based and qualitative user tests are a key part of the design journey, sometimes the most informative test of all, is to watch a user interact organically with your design. Instead of taking notes or trying to manually spot the insights, heatmaps record what the user does in a… Read More →

Mobile devices like smartphones and tablets give businesses another channel to connect with their customers, no matter where they are or what network they’re on. Mobile websites and applications should offer users an intuitive customer experience in the palm of their hand. At least, that’s what good mobile design aims to achieve. But poor mobile design can make it tough… Read More →

“UX design is the process of developing and improving the quality of interaction between a user and all aspects of a company. It’s about products that are useful, easy to use, and engaging. UX design focuses on the overall feel of the experience and is not about visuals alone.” Jason Kalathas, Head of Design at Moosend According to the above… Read More →

Categories