Credits: chargify

Best Practices for Onboarding

by Nick Babich

Nick Babich
UX Planet
Published in
7 min readJan 13, 2017

--

Getting people to sign up for the product is hard. It requires a lot of time, energy, and money, yet many products are losing most of those hard-won users immediately after their first-time experience. According to the Andrew Chen research:

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

Businesses invest so much resources in acquiring new users and they lose majority of them immediately after their very first try. You definitely don’t want your company be one of them. But how can you do better?

You need to make an excellent first impression by creating a perfect onboarding experience for your users.

Onboarding is a human resources term that was borrowed by UX designers as a way of making the first-time users start using the app. Well-designed onboarding experience increase the likelihood that first-time users become full-time user after adopting your product.

There are a number of considerations when you are designing your onboarding to define how best to get your users familiar with your product and its value.

Avoid Static Up-Front Tutorials

Reduce a friction of a user’s journey

Swipe-through tutorial that users see during the first-time use is the most typical onboarding experience today. Every second app available on the market today provides this onboarding experience for their users. Quite often, this onboarding aims to introduce what an app does to a user:

Static screens describe the value of using the PayPal.

Or educate users on how to interact with it by explaining the most common operations:

Clear, a to-do app for iOS, asks users to read a 7-screen tutorial before they can start doing anything with the app.

A number of problems exist with these long swipe-through tutorials:

  • A swipe-through screens are road blockers. Swipe-through screens do not allow users to interact with a product, they simply describe how the experience will be. Most users don’t want to read about experience, they want to experience the product.
  • It feels like reading a long manual. It feels boring to read instructions especially when you don’t know whether they are valuable or not.

Provide Contextual Instructions

Provide guidance as users go

Up-front tutorials have another usability issue —they require users to work upfront — users have to read all the information and try to memorize everything. Even when users decide to dot that, they usually forget everything as soon as they close the overlay (unfortunately, our short-term memory cannot retain very much information).

Don’t force users to remember every available function before they start using the app

New users don’t sign up for your product because they are excited to learn how your product works; they sign up because they interested in the value that you promise to deliver.

We know that 90% of knowledge people get is a result of practical experience. That’s why the right way to make users to remember every valuable operation is to make them do something in your product.

A contextual (or just-in-time) onboarding approach is an excellent alternative for up front tutorials. Designers who follow this approach try to provide helpful information at the point of user action: the guidance you offer is specific to the user’s point in the journey. It’s a simple, yet powerful design technique which can be implemented in many different ways:

Focused Tips. Contextual tips can be found in YouTube app for Android. App minimizes the amount of instructions by focusing users’ attention on a single action. It uses instructional overlay to explain an unfamiliar interaction, but these hints appear on the first launch for new users, one at a time, as the user reaches the relevant section of the app.

Focussed tip in YouTube app for Android

Even more interesting solution can be created with animation. “Hint motion” in the example below shows a preview of how sample cards move when performing the action. Animation prompts users to perform a gesture (swipe a card).

Image credit: Google

Interactive tour is a user-guided tour where hints are only triggered when the user reaches the appropriate point in their experience. Thus, hints may appear in different orders for different users. Duolingo knows that learning by doing things is the best way to learn and uses an interactive way of progressive disclosure to show users how the app works. Users are encouraged to jump in and do a quick test in the selected language.

Duolingo has a user-guided tour which consists of a quick test

Maximize the Value of Empty States

Consider a “first-use” empty state as part of a cohesive onboarding experience

Content is what provides value for most apps and websites. It’s the primary reason why people are using them — for the content. Thus, it’s critical to consider how we design empty states —places in the user journey where a user might not have content yet.

Empty state is a very natural point to inject some onboarding to continue guiding users along. Instead of leaving it blank, you should use it efficiently— to guide, educate, and prompt.

Good empty turns a moment of nothing into something

Encourage users to engage with your product:

  • Help them get comfortable by setting expectations for what’ll happen.
  • Provide an obvious way to move forward.

For example, the first page users see after signing up for Instagram is empty. Other profiles have photos, likes and comments, but first-time user’s account doesn’t have any information— 0 posts, 0 followers, 0 following. To make the activation easier, Instagram has turned this “empty state” into a learning opportunity: where you would normally see your photos, it says “No Posts Yet — Tap on the camera to share your first photo or video” with an arrow pointing to the camera option.

Instagram knows that the first goal with an empty state is to teach people how to use your app

Introduce Success States

Let your users feel great when they get to their first win

When users have positive experience during first-time usage, it increases changes that they’ll launch the app again. The moment a user completes an important task for the first time 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

For example, MailChimp, a web service for creating and sending emails, rewards users for creating and scheduling their first e-mails by adding unexpected humor and positivity throughout the process.

Mailchimp’s design communicates emotion in all its forms

For mobile apps, you can reward users with an animation when they accomplish personal goals.

Rewarding the user with an animation when they accomplish personal goals can create deeper engagement with app features. Image credit: Material Design.

Measure and Iterate

Metrics are crucial when looking at whether your current user onboarding is successful and in figuring out where it needs improvement.

Here are a few tips for you:

  • Define metrics. The first metric to define is activation metric. But the activation shouldn’t be only metric. You also need to measure user retention.
  • Use special tools to test your onboarding. There are a number of user testing tools to collect information about how the people use a product. Tools such as Google Analytics, HotJar or CrazyEgg can help with this. They provide features such as heat maps, scroll maps and statistics on in-app behavior of users to draw incisive conclusions about the user experience.
  • Use qualitative testing. Google Analytics/HotJar or CrazyEgg are excellent tools for finding answers on “How many…” questions. But they useless for questions that start with “Why.” Why did your users abandon your mobile game after the 10 minutes of play? The only way to know that is by gathering qulitative feedback. It means that you have to observe or talk to users — conduct user interviews and analyze the results.

Conclusion

Your user onboarding experience can make or break your business. Before designing your onboarding, stop and think about what the experience of the first time users should be. Onboarding experience that you’ll create should be natural to your product. The users should be able to familiarize themselves with the interface and achieve their goals using your app.

Thank you!

Follow UX Planet: Twitter | Facebook

References

--

--