Onboarding for Mobile Apps: Do's and Don'ts

Nowadays, designing an onboarding process for new users is a common practice in mobile apps

The purpose of onboarding screens is to introduce the app and demonstrate what it does to your users. But onboarding is more than this – it’s a critical step in setting your users up for success with your app. There are a number of considerations to be made when you design your onboarding in order to make this process truly valuable for your users.

In this article, we’ll provide some good tips on how to approach onboarding and some common implementations that will help you provide the best experience for your users.

Screen Shot 2016-06-03 at 4.56.17 PM

Don’t: Long Up-Front Tutorials And Walkthroughs

Often the first thing users see when they launch an app is a  swipe-through tutorial. Unfortunately, a UI walkthrough isn’t the most elegant way to explain the core functionality of an app.

A long and boring static walkthrough can make your app appear overly complicated to new users. It should come as no surprise then that most users will barely pay attention to it or simply ignore the content altogether, regardless of how helpful it may be. 

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

  • Momentum killer. Walkthroughs create a barrier between new users and your app. Users want to start using the app the moment they launch it, but instead are forced to scan seven or eight screens. Thus, many users will skip the tutorial because they don’t want to learn about the app, they just want to use it.
  • Cognitive load. There is simply too much information at one time because walkthroughs try to explain everything at once. As result, they become too explicit and long.
  • No context. The first-time user barely knows what the app does and yet they are bombarded with instructions for all possible actions. Because there is no context, the actions themselves seem much more complicated than they actually are and users are easily overwhelmed.

Screen Shot 2016-06-03 at 5.02.57 PMDo: Walkthroughs as a Part of the Core UX

Are UI walkthroughs evil? No, but they should explain only the most important interactions and be a part of the core UX. Usually, a minimal walkthrough combined with progressive disclosure can establish a good starting point for new users.

For example, the walkthrough in Slack helps users understand the app’s basic value proposition. It uses the first screens to create some context and focuses on benefits instead of features.

If you use a walkthrough, it’s better to offer the option to skip the walkthrough in order to satisfy impatient or tech-savvy users.

Screen Shot 2016-06-03 at 4.56.17 PM

Don’t: Too Many Coach Marks

Another popular approach is to fill the screen with coach marks for first time users. What’s a coach mark? When a user opens the app, the screen fades out a little, and a ‘helpful’ tooltip explaining what a certain button or field is for pops up. At first glance, this solution looks pretty good. Why could it be a bad choice? There are a few reasons for that, but the main reason is pretty obvious: adding coach marks to your interface does not make it more intuitive.

Coach marks in the example below outline every possible thing a user can do on the screen. But there is no single sight of interaction with the user, just static “look and read here and here and here.” Such coach marks look like a “Quick Start Guide” manual.

And if you have to give your app an instruction manual, then you’re not doing a good job of communicating with your users. Even if users read your instructions, they usually forget everything as soon as they close the overlay, especially if it was overloaded with information.

Screen Shot 2016-06-03 at 5.02.57 PMDo: Contextual and Progressive Onboarding

A contextual (or just-in-time) onboarding approach is a good way to avoid information-loaded screen-by-screen walkthroughs or coach marks which look like manuals.  A proper way is to guide the user in the situation with UI hints. These hints should be presented to the users at precisely the time they need them.

Providing helpful information in a context of action is always better than a set of instructions and explanations out of the context. By implementing a contextual approach to onboarding, you remove the obstacles on user’s journey through your app and save user’s precious time.   

YouTube, for instance, focuses each hint on a single interaction. These hints appear on the first launch for first-time user, as the user reaches the relevant section of the app.

Why’s this solution so good? Because it is more effective to focus on a single interaction rather than attempting to explain every possible area of the user interface.

Screen Shot 2016-06-03 at 4.56.17 PM

Don’t: Empty States As Blank Canvases

Content is what provides value for most apps. It’s critical to consider how we treat empty states, because the first goal with an empty state is to teach people how to use your app based on content!  Great “blank slates” can be a key point in a user’s journey through your app and an amazing onboarding opportunity.

Conversely, the absolute worst thing you can do with an empty state is to drop your users into a dead-end. Below is a fake version of the original Khaylo Workout app’s empty state that we created to demonstrate how ineffective blank states can be for the first-time user.

The empty state screen above simply doesn’t help users understand the context. It is an example of a situation where the user is getting something other than their desired state and often unable to figure out the root cause of the problem. As result he or she will be frustrated by the app.

Screen Shot 2016-06-03 at 5.02.57 PMDo: Powerful Empty State

You should consider empty states as part of a cohesive onboarding experience, because they are actually full of potential to drive user engagement. A useful empty state tells users what it’s for, why users are seeing it, and how they can fill it up.

The empty state below does an excellent job when it comes to being useful. It demonstrates the potential value by giving users an idea of what they will get once they take an action, and provide an obvious way to move forward to that next step. It literally drives users toward the action.

Good empty states help users get comfortable by setting expectations for what will happen, and reduces friction by guiding users along to actions that will get them started.

Conclusion

Before designing your onboarding, stop and think about what the experience of the first time users should be. Remember that first time user experiences should be focused. Apps should selectively showcase the primary feature and let users discover secondary features over time.

When designing tips and any other types of hints for mobile apps, keep them as short as possible. Focus on primary user goals and design for maximum interactivity. The onboarding flow should be designed to be actually useful for your users. You need to make sure that people who pass through onboarding have a clear sense of what to do and where to go next, or you’ve just lost an app user.