Sponsored ArticleThe Role Of Empty States In User Onboarding
- By Nick Babich
- February 8th, 2017
- AppsExperience Design
- 11 Comments
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.
The onboarding process is a critical step in setting up your users for success with your product. You only get one chance to make a first impression. In this article, we’ll provide some tips on how to approach onboarding using a simple pattern called “empty states.” If you’d like to bring your app or website to life with little effort, you can download and test Adobe XD1for free.
Further Reading On SmashingMag: Link
- In-App Gestures And Mobile App User Experience2
- Best Practices For Animated Progress Indicators3
- Designing Card-Based User Interfaces4
What Is An Empty State? Link
Content is what provides value for most apps. Whether it’s a news feed, a to-do app, or system dashboard, it’s why people use apps – for the content. This is why it’s critical to consider how we design empty states; those moments in a user’s journey where an app might not have content for a user yet.
An app screen 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 Link
Consider a “first-use” empty state as part of a cohesive onboarding experience. You should utilize the empty state screen to educate and engage your users. Use this screen as an opportunity to turn a moment of nothing into something.
Educate Users Link
First and foremost, the empty state screen should help users understand the context. Setting expectations for what’ll happen makes users get comfortable. The best way to deliver this information is a show-or-tell format: show the user what the screen will look like when it’s filled with content or tell them with a clear instructions.
Prompt to Action Link
Most empty states will tell you what they are for and why you’re seeing them. But, effective empty states will take this even further and tell you what you can do next. 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.
Create a Pleasurable User Experience Link
While your app should be functional (it should solve a problem for your users) and usable (it should be easy to learn and easy to use), it should also be pleasurable. Empty states are an excellent opportunity to make a human connection with your users and get across the personality of your app.
How To Design An Ideal Blank State Link
Despite the fact that empty states can engage users, they’re often overlooked during design and development. This happens because we normally design for a populated interface where everything in the layout looks well arranged. However, how should we design our page when the content is pending user action? Empty state design is actually an amazing opportunity for creativity and usability.
Avoid Dead-Ends Link
The absolute worst thing you can do with an empty state is to drop your users into a dead-end. Dead-ends create confusion and lead to additional and unnecessary taps. Consider the difference between the following two examples from Modspot’s Posts screens. The first image is Modspot’s current screen for first-time users; a useful and smartly crafted empty state reduces friction by guiding users along to an action that will get them started.
7The second image is a fake version of the same screen that I’ve created to demonstrate an ineffective empty state that provides no guidance, no examples – only a dead end.
8Keep Empty States Visually Simple Link
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. Thus, only include well-written and easily scannable copy (clear, brief descriptions or easy-to-follow instructions) and wrap it together with good visuals.
9Make Empty States Intuitive Link
Don’t forget that empty states aren’t only about visual aesthetics. They should also 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.
Let’s take an empty state screen from Google Photos as an example. Visually it looks great: a well-composed layout with beautiful graphics. However, this empty state simply doesn’t help users understand the context, and doesn’t provide an answer on following questions:
- What is a collection?
- How can I get one?
11Let Personality Shine Link
A good first impression isn’t just about usability, it’s also about personality. Personality is what makes your app memorable and pleasurable to use. It may not seem like much, but if your first empty state looks a bit different from similar products, your users will notice and expect the entire product experience to be different, as well. For example, below you can see how Khaylo Workout uses its empty states to convey personality and tone.
13Encourage Users to Act Link
Your primary goal is to persuade your users to do something as soon as possible so that the screen won’t be empty. To prompt action on an empty state don’t just show users the benefit they will receive when they interact with your app, but direct them to the desired action as well.
Let’s examine the install screen of Facebook Messenger. When users arrive at this screen, they are met with encouragement – the screen lets users know the benefits of the product (a user can take pictures or record video using Messenger) and tells them how many of their Facebook friends are already using the app. The ‘Install’ button guides users onto the next step necessary to clear up the empty state. Users simply have no other option than to touch install.
15If Possible, Provide Content That’s Personalized Link
When you personalize your app for users, you show off the value of your product even faster. The main goal of personalization is to deliver content that matches specific user needs or interests, with no effort from the targeted users. The app profiles the user and adjusts the interface – fill empty states – according to that profile.
Consider providing starter content that will allow users to explore your app right away. For example, a book reading app might provide all users with a few books based on information about a user.
17Bake Emotion Into the UI Link
Empty states can help you show the human side of your business or product. Positive emotional stimuli can build a sense of engagement with your users. What kind of feeling your empty state conveys, depends on the purpose of your app. An example below shows the emotional side of empty state in Google Hangouts and how it can incentivize users to get invites on Hangouts.
19Of course, showing emotion in design like in the example above is risky – some people don’t get it, and some people may even hate it. But, that’s OK, since emotional response to your design is much better than indifference.
Introduce Success States Link
The moment a first-time user completes an important task is a great opportunity for you to create a positive emotional connection between them and your product. Let your users know that they are doing great by acknowledging their progress and celebrate success with the user.
Success state is an amazing opportunity to congratulate users on a job well done and prompt them toward new interactions. For example, clearing a task list is certainly a positive achievement for Writeupp users. It’s great that the app offers a congratulatory, “Well done!” as a positive reinforcement. This success state delights users and offers next steps to keep them engaged.
22Dig In Deeper Link
The following resources can help you find user onboarding and user interface inspiration:
- Useronboard2624 is a great resource for exploring existing onboarding experiences and reading detailed teardowns.
25- Uxarchive28 is another great resource that contains breakdowns of onboarding in many popular apps.
- Ui-patterns3129 has a collection of web-app user onboarding & user interface.
30- Emptystat.es33 is a collection of empty state screenshots that has been taking user submissions since 2013. A majority of screenshots for this article were taken from this resource.
Conclusion Link
Your empty state should never feel empty. 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.
This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app34 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them – all in one place.
You can check out more inspiring projects created with Adobe XD on Behance35, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free36.
(ms, vf, yk, aa, il)
Footnotes Link
- 1 https://adobe.ly/2jwvPi9
- 2 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
- 3 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
- 4 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
- 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/1-preview-opt.png
- 6 https://itunes.apple.com/en/app/expensify-expense-reports/id471713959?mt=8
- 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-preview-opt.png
- 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/3-preview-opt.png
- 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-preview-opt-1.png
- 10 https://itunes.apple.com/en/app/dropbox/id327630330?mt=8
- 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-preview-opt-2.png
- 12 https://itunes.apple.com/us/app/google-photos-free-photo-video/id962194608?mt=8
- 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/7-preview-opt.png
- 14 https://itunes.apple.com/us/app/khaylo-workout/id940269385?mt=8
- 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-preview-opt-2.png
- 16 https://itunes.apple.com/us/app/facebook/id284882215?mt=8
- 17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-preview-opt-1.png
- 18 https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-states
- 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.png
- 20 https://play.google.com/store/apps/details?id=com.google.android.talk&hl=en
- 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.png
- 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-preview-opt-2.png
- 23 https://itunes.apple.com/us/app/writeupp/id989857344?mt=8
- 24 http://www.useronboard.com
- 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.png
- 26 http://www.useronboard.com
- 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.png
- 28 http://uxarchive.com/tasks/onboarding
- 29 http://ui-patterns.com/patterns/BlankSlate/examples
- 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.png
- 31 http://ui-patterns.com/patterns/BlankSlate/examples
- 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.png
- 33 http://emptystat.es/
- 34 https://adobe.ly/2jwvPi9
- 35 http://adobe.ly/1U9LS0E
- 36 https://adobe.ly/2jwvPi9