Have you ever though about the origin of the word “on-boarding”? If not, maybe you have no idea it comes from the field of human resources. The term has been coined in the ’70s to define the post-hiring process, which aims at giving new hires all the tools, skills and resources to become an effective member of the organization.
In most recent years, the term has been borrowed by UX and product designer to define a series of techniques and actions deployed between the moment when a user lands on your digital property for the first time and the moment in which he takes one of the actions you had previously identified as conversions (e.g. registration, purchase, subscription, content interaction, etc.)
Here’s how Google puts it in its guidelines for material design:
Onboarding is one point in a longer journey that begins in the app store and ends with the user taking the first key retention-correlated action in your app.
Why should my app have an on-boarding process?
Every application, simple or complex, needs to carefully craft a flawless on-boarding journey. A carefully crafted on-boarding process will help you educating your user and pushing him to take action.
1) Educate your users
One of the main objectives of the on-boarding process is to give your user all the tools he need to benefit from using your app. Even if it’s super simple and has a great user experience, you still need to inform your user about features, tips and hidden gems of your app.
On-boarding is especially powerful as an educating tool if:
- Your App employs non-traditional gestures and interactions and does not follow conventions when it comes to icons (e.g. a menu different from the ever-present burger menu). Snapchat is the most common example in this category;
- Your app has several features, especially when some of them are difficult to reach because they are hidden in menus and sub-menus. We don’t want new users to find just a fraction of the functionalities, right?
- Your app is designed to show customized content to the user or information based on his preferences. You need to show him around and ask for his preferences during the on-boarding process;
- You have updated your app adding new features or sections. Explain to your users what happened and bring them up to prevent them from jumping ship (yes, there’s a chance that an improvement brings to that!);
- You have released a new version of the app and revamped either the user interface or the user experience (usually both). Same as above, bring your user up to speed and introduce him to all the new things going on with your app.
2) Engage your user
Another important goal that you can achieve through a well-designed on-boarding process is to stimulate user interaction. Understandably, if you inform your user about the benefits of using your app, it’s easier for him to try them right away.
Furthermore, if you create a design and a user interface close to your ideal audience’s taste, you’ll most likely attract their attention and convince them to try your app. According to many studies, people are heavily influenced by the design and the aesthetics of your app, and they will tend to download and stick with apps that are in line with their taste and their canons of beauty. Use your on-boarding process to show users what you’re all about (including your design style) and nudge them toward taking action.
Different on-boarding techniques
To craft a well-thought-out on-boarding process, you can rely on a multitude of principles and tricks. All of them though belong to one of these below categories:
- Feature-oriented on-boarding: aims to educate users on how to use your app, showing them how it works. Generally, it is used to show the most important actions your user can perform on your app. For example, if your app’s goal is to bring users to scan a QR code to participate in a giveaway, it is vital that the action of scanning the code is shown to the user during the on-boarding phase.
- Benefit-oriented on-boarding: in this instance, on-boarding is designed to clearly state the benefits your user would access to by using your app. Unlike functionality-oriented on-boarding, which describes how to use the app, this technique describes why your user should use the app. Focus on the reason why a user should user your app. Returning to the example above, on-boarding would not focus on how to scan the code, but on the benefits the user would receive if he decided to entered the competition.
- Progressive on-boarding: as the term suggests, progressive on-boarding accompanies the user while he explores the app. For example, while the user access a specific view, the on-boarding process will highlight hidden gems or advices related to that portion of the app.
1) Don’t Try This At Home: Long and Complex On-boarding processes
Let’s start with the basics: the only thing you user wants when he decides to download the app is – well, start using the app as soon as possible. I know your app is super cool, you can do a bunch of things with it and you want to tell everyone about it. The problem is: your user doesn’t care. For this reason, if your on-boarding is too long and detailed, there’s a pretty big chance the user sees it as unnecessarily complicated. Alway keep in mind your first objective is to prevent your user from clicking the “skip” button so try to find the sweet spot.
Another thing you need to consider is that people’s cognitive capacity is limited. You should avoid overloading new users with information, especially during the tutorial. Same as above, you could obtain the opposite effect: uncertainty and confusion.
For example, let’s watch at this 7-page tutorial below. Apart from the number of pages, each page contains many detailed steps. It’s pretty clear that this tutorial is flooding the user with information, explaining each functionality and gesture before they can even see the app and understand if it feels the right one for them. There is no way a new user can assimilate all this information. In the best possible scenario, he will forget 99% of what you taught him; the worst case though is that he closes the app and deletes it. After all, you’ve basically told him your app is too complex and articulated to be explained in a few simple steps. As I told you before, you have to find the right balance.
2) Do this instead: Clear and Concise On-boarding Process
Yep, nothing special. You just need to do the opposite of what we’ve seen in the example above. Keep your on-boarding process short and laser focused on a handful of key features that a user needs to know right off the bat.
Remember the mantra: your tutorial should be useful and, most of all, it should not wear down the user. Find a way to clearly and concisely describe the app’s main features and, if possible, recall with icons, images or screen-shots taken from the actual UI of the app. This trick will help users to remember these few tidbits thanks to their visual memory.
Even though you don’t want users to skip the tutorial, always offer them the chance to do so. They might be returning users who just changed device or reinstalled the app after having deleted it. They might also feel they don’t need a tutorial, in which case it’s always good to give them the chance to skip it and respect their mindset.
Let’s take Slack’s iOS on-boarding process as a reference point. As you see in the three screenshots below (I pasted 3 out of 4 cause the last one is a “get started” call to action), Slack sums up each and every feature of the app in just three screens. Three titles and seven rows of content. Slide 1 is the value proposition, slide 2 introduces the Channel feature and slide 3 talks about Direct Messages. One of the key things here is that, while Slack describes their features, they always focus on what the user can do with them.
3) A Different Approach: Progressive On-boarding
I introduced this technique at the beginning of this post, so let’s get back to it and try to understand how it works. Progressive on-boarding is a pretty straightforward way of explaining to your user how your app works; instead of presenting a bunch of educational views right after opening the app, it educates the user while he actually uses the app.
The tutorial is split into sections, each one related to a specific section. In this way, when the user visits a section of the app for the first time, the on-boarding process will trigger. This type of on-boarding is a sort of interactive tour that shows the user around and introduces him to the main functionalities when they are accessible to him on the screen.
As an example of this progressive tutorial, we can look at Duolingo, one of the most famous language learning app. Whenever you visit a new section, the app guides you through each feature, prompting you to take a test to gauge your language level and creating a sense of personalization. The user feels the app is taking care of him individually (versus a generic tutorial) and is a more engaging way to communicate the app’s value.
4) BONUS: Visual cues / tooltips
This on-boarding strategy is not common for mobile apps, but it is used for tablet and desktop apps. When the user accesses the app for the first time, the actual UI of the app presents a darker overlay which guides the users to look at tooltips highlighting the features of the app.
It can either be a “forced” on-boarding or a passive one, meaning you can make the tooltip appear by default or you can employ hotspots / pulsating elements that show the tooltip when the user hovers or clicks on them.
Synthetic: use a few and very clear terms to describe the functionality or the benefit reported by that specific section of your app. You have a specific section of your documentation that explains it further? Link it here and give users a chance to decide if they want to know more.
Essential: don’t try to explain each and every feature or benefit of your app; you need to stick with main ones and leave the user a choice to learn more or not based on his needs.
One of the few mobile apps that use contextual on-boarding is YouTube for Android (in case you want to check it out AND it’s still the same when you’re reading this). The app touches on the least number of features possible, focusing the user’s attention on a few primary actions.
Same as above, you should give the user a chance to skip the tutorial. If he feels trapped, he’ll probably bolt and leave the app once and for all.
Be carefult not to use more than one visual element at once. Same as in all the other instances, the tutorial should show the user around and introduce him to the core features of the app. Do not try to overload him with information showing more than one visual element because he will likely ignore every single one of them.
Another caveat: carefully determine the frequency at which these messages pop up. If the user receives these messages too often, he will surely find a way to ignore them and tune them out.
If possible, always insert a “do not show this again” checkbox to give the user a chance to opt out of the on-boarding series. Remember: if you try to trick you user into learning about your app, he will likely delete it in a heartbeat.
Here below a good example of how a good tutorial should NOT look like. Too many bits of information, too many visual cues, different actions, many related to different functionalities of the app. Take it one step at a time, make it easy to understand and digest and your users will thank you!
5) Empty States
It’s quite common for mobile apps (as well as websites and other applications) to have an empty state, which is nothing different from an empty container. It might be the page where you haven’t yet saved your favorites or a wishlist; or it could even be the last stage of a step-by-step tutorial (what do you show when the user has completed all the steps?). Hey, it’s the same exact thing as a 404 page at the end of the day, isn’t it?
But while we’ve all been obsessing over 404 pages – it’s been a hip trend for quite some time – other empty pages have been neglected. If you build a step-by-step tutorial, a sort of checklist to complete, find a way to exploit that last blank page; push your user to perform an action, educate him further, talk about other channel he might be interested in joining, etc.
For sure, the thing you need to avoid is leaving a blank page. I know what you’re thinking – who would leave a blank page on their app? – but it’s not that uncommon. Do your best to avoid this kind of hiccups because the user gets easily disoriented and might be tempted to leave the app.
6) Prompt your user to take action
If your app is designed to show in the home page all your favorite sections, you need to prompt the user to pick some favorites as soon as you open it up the first time. In this way, you are letting the user know he can customize his experience and you gently nudge him to take action, creating a sort of snowballing effect which should push him to do it again in the near future.
7) Create a welcoming environment
Instead of leaving a blank page, you could build a fake view that lets the user imagine how the app will look like once he has taken action and selected favorites, added products, whatever it is that he needs to do.
While a prompt is always the best possible option, this can be a viable route nonetheless. Especially in extremely design-oriented apps, it could actually be a chance to attract your user and invite him to discover more of its core features.
8) Reward the user and create an emotional connection
A.k.a. “never underestimate the power of a shot of endorphin”. If you have a checklist the user needs to complete, or a series of steps, why don’t you take the time to congratulate with him? Ticking off todo elements and swiping to mark an email as read are rewards in and of itself, but a congratulations message can be very powerful to create a connection with your user.
Some of you might remember the flying unicorn flying across the screen when you completed a task in Asana. Or the “Woohoo! You’ve read all the messages in your inbox” from GMail. I could go on and on but just keep in mind that these little endorphin shots are a great way to keep your user coming back and make your app part of his routine.