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.
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:
Or tell them with a clear explanation:
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:
Or point to the desired action with an arrow:
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:
Or include a CTA button:
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:
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.