In the recent years, there has been quite a heated debate about, whether or not apps should have on-boarding. But, the positive aspect of this scenario is - designers across the globe have come up with beautiful and very innovative on-boarding techniques.
They say, first impressions matter, and I completely second this. This article intends to take you through the current on-boarding patterns that designers are using. Apps today, use a combination of 2 or 3, which makes the on-boarding process quite educative, interactive and playful.
Why do you need on-boarding?
On-boarding is like your first date with your users. Nail it if you want to have a relationship with them in the future! On-boarding is badly required for apps that are innovative and do not have the regular gestures and transitions that the user is accustomed to. This might happen a lot when you are trying to introduced some kind of fun element or innovative flow in your app.
#1. “Tutor screens” on-boarding
These are the opening screens stitched together that appear mostly after the splash screen moves away. It walks you through the features and highlights of the app. It’s great, because it gives a clear understanding of the core proposition right from the word GO.
Why designers use tutor screens?
- To guide users about the benefits they might not be aware of
- Introduce the users to the core objective or functionality of the app
Here is a beautiful example of tutor screen on-boarding
Tips for tutor on-boarding screens -
- Try not to speak about everything in the tutor screens. Have 3-4 key propositions(/benefits) of the app, you want users to know.
- Make it visually more dominant rather than more copy on it. Usually when a user is walking through your on-boarding, he/she is not very attentive, So, try capturing the mind with visual content.
#2.”Learning by doing” on-boarding
This is another very smart way of on-boarding; it overlays the cons of tutor on-boarding, that is - users tend to forget what they glanced at, a minute back. Waiting for the users to make their first move gets the users engaged right away! They learn and remember by action.
Pinterest is an excellent example of “learning by doing” on-boarding -
(“learning by doing” on-boarding)
Tips for learning by doing on-boarding -
- Give an option to escape from this. Probably a skip option is good enough. Maybe the user is well-acquainted with the flow so he might just want to avoid this on-boarding.
- There should be an undo or/and a confirmation of the action. This helps user to try the indication and then return to the same point again if that’s not what he intended.
#3. Tool tips for on-boarding
Once the user starts performing actions on the app, he would have almost forgotten the on-boarding tutorials. This is when tool tips are super helpful. These are overlays or call-outs that appear as hints while the user is using the tool.
Tool tips aims to get the attention of the user to the menu item or mostly answers a FAQ.
Some apps like Vine have done it beautifully - personalized in-app messages delivered at the right time and in the right place.
(Overlays or call outs for on-boarding)
Tips for tool tips on-boarding -
- Show the right message at exactly the right time to help users to on-board, based on their behavior.
- Make sure you are showing one message/hint at a time
- As before, make sure a way to skip the on-boarding - Vine has a link below that says - “Already know how? Skip the tutorial. This is exactly how it is to be done.
#4. Progress bars
Progress bars are visual indicators that keeps the user motivated to complete the on-boarding process. It promises a reward or indicates the user how close he is to completing the on-boarding process.
Checkout the Wealthfront on-boarding screens. The progress bar in blue and pink, on the top of screens keeps the users informed about their progress. And keeps them motivated to achieve 100%.
(Progress bar used for on-boarding)
Tips for progress bar on-boarding -
- Show prominent jumps. 20% to 22% is not encouraging enough, but 20% to 40% is highly motivating!
- Have ideal time frame for completion
#5. Emails series for on-boarding
Recently, emails too have managed to squeeze in a place in the on-boarding techniques. Companies send a series of emails to new users to help them learn and explore more about the product.
But while you adopt to this technique, you cannot completely rely on them. Some users never read emails, some of those who read do not remember most of it. This can be clubbed with some other technique but cannot be executed singly.
Tips for email series on-boarding -
- Resonate with the email frequency and time
- Manually executing this would be a very tedious and in-efficient idea..
- Keep a back-up plan to help users on-board.
#6. Intro videos on-boarding
Dropbox was an incredibly novel idea — back in 2009. And explaining the concept of photos on cloud was a BIGGGG task at hand. So Dropbox, took to the idea of video on their website. Upon putting up the video, Dropbox’s conversion rate jumped up by 10%, resulting in 5 million new customers and $24 million in revenue.
(Dropbox’s on-boarded their users with the help of videos)
A beautiful example of an on-boarding video i recently came across was - PATH. I am not sure if I could call this an on-boarding video, but it explains the product beautifully.
(On-boarding video of path app)
Hope this article was helpful. What are some of the best on-boarding experiences you have seen? I would love to hear about them as well
CanvasFlip has a rich collection of on-boarding prototypes on “INSPIRE“