Adobe Creative Cloud

June 14, 2016 /UX/UI Design /

XD Essentials: User Onboarding and Empty States in Mobile Apps

The first set of screens with which users interact set the expectations of the app. To make sure your users don’t delete your app after the first use, you should teach them how to complete key tasks and make them want to come back for more. In other words, you need to successfully onboard and engage your users during those first interactions.

Onboarding prevents users from stressing out when they use a new app, and there’s no content to display yet. In this article, we’ll provide some tips on how to approach onboarding using a simple pattern called ‘empty states.’

What is an Empty State?

An empty state, or zero-data state, is what the user sees when there is no data displayed on a screen. You can consider an empty state pretty much any state where there is no data to interact with.

An app whose default state is empty and requires users to go through one or more steps to populate it with data is perfectly suited to onboarding. Besides informing the user about what content to expect on the page, empty states also teach people how to use your app. Even if the onboarding process consists of just one step, the guidance will reassure users that they are doing the right thing.

image02

Empty state in Expensify app reassures users by telling them how to get started.

The Value of an Empty State During Onboarding

Consider a “first-use” empty state as part of a cohesive onboarding experience. First and foremost, the empty state screen helps users understand the context. You should utilize the empty state screen to educate and engage your users.

Educate Your Users

Empty state helps users get comfortable by setting expectations for what’ll happen. Most empty states will tell you what they are for and why you’re seeing them. But effective empty states will take you even further and tell you what you can do next.

As a designer, you should deliver this information in a show-or-tell format. Show the user what the screen will look like when it’s populated with content:

image08

This empty state by ModSpot app is a brilliant example of quality design. Image credit: emptystat.es

Or tell them with a clear explanation:

Health app informs users why the page is empty.

Health app informs users why the page is empty.

Prompt to Action

Educating your users is important, but true success in your first empty state means driving an action. Think of this empty state as a starting point and design it to encourage user activity.

To prompt action on an empty state you should not just show users the benefit they will receive when they interact with your app, but also direct them to the desired action. Provide a CTA button, like Facebook did in the example below:

image07

The ‘Install’ CTA guides users onto the next step necessary to clear up the empty state. Image credit: emptystat.es

Or point to the desired action with an arrow:

image00

An arrow points to the button users should click. Image credit: Khaylo Workout app for iOS.

How To Design an Ideal Blank State

We normally design for a populated interface where everything in the layout looks well arranged. But how should we design our page when the content is pending user action? Actually, empty state design is an amazing opportunity for creativity and usability.

Keep It Visually Simple

The beauty of a great empty state design is its simplicity. You should use a minimalist design approach in order to bring the most important content to the forefront and minimize distractions. Your primary goal is to persuade your users to do something as soon as possible, so that the screen won’t be empty. Thus, only include well-written and easily scannable copy (clear, brief descriptions) and wrap it together with good visuals:

Dropbox uses visuals as eye candy to encourage action.

Dropbox uses visuals as eye candy to encourage action.

Or include a CTA button:

image03

Airbnb uses a simple design to convey a pleasant feeling.

Keep It Intuitive

Don’t forget that empty states aren’t only about visual aesthetics, they should help users understand the context. Even if it’s meant to be just a temporary onboarding step, you should maximize its communication value for users and provide directions on how to change an empty state to an active one.

The empty state below does an excellent job when it comes to being useful:

Empty state (no songs) in the Music app for iOS.

Empty state (no songs) in the Music app for iOS.

Conclusion

Don’t let the user face a blank screen the first time they open an app. Invest in empty states because they aren’t a temporary or minor part of the user experience. In fact, they are just as important as other design components, and full of potential to drive engagement and delight users when they have just signed up.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD