Why empty states deserve more design time | Inside Design Blog

This article is written and curated from Dina Chaiffetz. All rights belong to her.

An empty state, or zero-data state, is an afterthought for many designers. The thing you design last — if at all — because it’s a temporary or minor part of the user experience.

But don’t be fooled by the name. Empty states are actually full of potential to drive engagement

, delight users, and retain users at critical moments like when someone downloads the app, clears out their content, or runs into an issue.

These empty states are commonly known as first use, user cleared, and errors. But let’s think of these moments in terms of the user’s perspective:

• First impression
• Moment of success
• Moment of failure

These tipping points in the user experience can lead to 2 very different outcomes:

1. Temporary or permanent abandonment of the app
2. A higher level of engagement and loyalty

A key decider in which side of the scale you fall on is how much thought you invest in this small but significant design element.

The lasting impact of a first impression

Chances are you’ve designed an excellent UI for a screen once it’s filled with content or data. But your first — and arguably most important — task is ensuring the user sticks around long enough and takes enough actions to enjoy your great design.

Here’s a quick reminder about the fickle nature of users — especially in the first few moments and days of interacting with your product.

Recently, entrepreneur Andrew Chen worked with Quettra, a mobile intelligence startup led by Ankit Jain, the former head of search and discovery for Google Play, to collect and analyze app retention rates for 125 million mobile phones. They found some alarming results.

The average app loses 77% of its daily active users (DAUs) within the first 3 days post-install.

What’s worse: within 30 days, approximately 80% of DAUs are gone/lost.

Are these low retention rates a result of poorly made, unnecessary apps? Yes, in some cases.

But not always.

“Users try out a lot of apps but decide which ones they want to ‘stop using’ within the first 3–7 days. For ‘decent’ apps, the majority of users retained for 7 days stick around much longer. The key to success is to get the users hooked during that critical first 3–7 day period.”
–Ankit Jain

While this data relates to mobile apps, similar data exists for desktop clients and websites. So here’s the question:

If you know that your users are looking for a reason to leave you in the first week, how can you leverage blank states to influence early retention?

This post focuses on ways you can leverage the most critical empty screen: first use.

How to fill an empty state

Consider a “first-use” empty state alone, or preferably as part of a cohesive onboarding experience. A successful screen accomplishes these goals:

1. Educate your user

The first goal with an empty state is to teach people how to use your app.

If they don’t understand the functionality, they’ll bail.

Help them get comfortable by setting expectations for what’ll happen. Your onboarding video or tour will do this, but users might skip these or fail to absorb all the information, so it’s important to treat first-use empty states as a user’s first experience with your application.

A good first-use empty state addresses the following:

• What: an explanation of content going in that section
• Where: an orientation of where the user is in the application or broader experience
• When: an explanation of the timing of your product and the action or event that must occur for data to exist on this screen

Deliver this information in a show-or-tell format. “Show” the user what the screen will look like when it’s populated with sample data, or “tell” them with a written explanation.

Sample data can be entirely fake, have some relevance a la sample data from a celebrity user or even the CEO, or be generated for the user as suggested content. Showing someone what a partially complete or finished product looks like sets expectations and increases their excitement to jump in or get started.

However, simply showing sample data without any additional copy may be missing a piece of information. Even though the user sees “what” the screen looks like when filled in, they might not be able to infer what action needs to happen in order to get there — the “when.”

“The initial experience teaches users how to use the software and sets expectations going forward. Understand where they are in the experience. Give the user an impression of how the system will look once filled with data.”
–Joshua Porter

2. Delight your user

Properly educating the user only takes you so far in the aim to retain. Users make snap judgments about the time they’ll invest to explore an app. So every little detail counts in convincing a user to give your product a fair chance.

A good first impression isn’t just about usability, it’s also about personality.

Ask yourself these questions:

• Can you do something fresh or unexpected?
• Can you make the user crack a smile?
• Can you give the user a good taste of the brand experience?

With the pervasiveness of free products and free trials in many industries, users tend to explore a number of similar products at once and compare them against each other.

How do you stand out from your competition?

It may not seem like much, but if your first empty state looks a little different from similar products, you’ve shown the user that your entire product experience will likely be different, too.

Look at the onboarding and empty-state experience of other apps in your space (your competition) as well as your peers. I consider peer products to be non-competitive apps that your target audience is likely to have. The best way to identify peer products is through user research: ask existing users what other apps they use.

With that information in hand, delighting a user in a blank state involves being:

• On brand: introduce and reinforce your brand elements
• Different: be creative or show a sense of humor
• Relatable: show the human side of your business or product

Your goal with this state should be a pleasant surprise — don’t be afraid to gently test some boundaries.

3. Prompt action

Making a good first impression is important, but true success in your first empty state means driving an action. Make your user want to fill that screen.

Think of this empty state as a miniature landing page. While remaining minimal in design, a successful screen will explain a specific feature, reiterate the value proposition of that feature and then compel you to take the next step.

To prompt action on an empty state, incorporate these 3 components:

1. Motivate. Incorporate motivational language and design that’s appropriate for your target audience, such as: “Get started now!” or “Let’s do this.”
2. Persuade. Value propositions aren’t just for landing pages. Remind the user of the benefit they will receive when they interact with your product.
3. Direct. Recommend and show them the single best way to get started. Provide a CTA button or point to the desired action with an arrow. This is not the best time to give users options. Also, make it as easy as possible. If getting started requires that the user create content, give them some initial content they can borrow.

“People largely abandon applications for reasons which are within our control: because they do not perceive value from interacting with the software.”
–Patrick Mckenzie

Investing in empty states

The best part of design is often the most challenging — the interfaces that require a delicate balance of information and action. But, given that a blank state is what could stand between your user and the incredible UI work you’ve done, don’t these screens deserve a little more of your time and attention?

Header image by young shanahan. Creative Commons Attribution 2.0.

Originally published at www.invisionapp.com.