Great examples of user onboarding in app design
De Nederlandse versie van dit artikel is onlangs verschenen op Emerce.
There’s also a Slideshare version available of this article.
Research showed that 22% of downloaded apps are only used once. So a good first time use experience is of crucial importance for the viability of an app or website. This is increasingly important since apps and services are becoming more versatile and complex. As a result, we’ve seen an increase in the number of “onboardings” in the last few years. Onboarding is the process of turning a first-time user into a repeat customer during the user’s first interaction with your product. In this post we will show good examples of onboarding in 5 different approaches and conclude with some guidelines for design. There is no such thing as ‘the best approach’ since every app or website is different, but considering these guidelines will definitely ensure a better experience. And of course the approaches described below can be combined in order to achieve the ideal onboarding.
1. Explain the value-proposition
AirBnB, Nike+ Running, Pocket, Feedly and Path are only a few of the huge amount of apps that explain their value-proposition when opening the app for the first time. They all use a slide show-like opening sequence with limited content per slide, which makes the information easy to digest. And they provide users with the number of steps, so they know what to expect. A simpel, easy and effective way to explain what the app can be used for.
Skip it!
Some new users expect you to welcome them and show them around the place, while others prefer you to get out of their way as soon as possible and let them figure things out for themselves. A simple ‘Skip-button’, like in the preview of AirBnB, ensures both groups get what they want.
Don’t force registration
Path uses beautiful pictures which make the onboarding very attractive. This makes up a little bit for their forcing users to log in or register to experience content or features. Letting the customer experience the app before registration will increase the chance that the user will register and become a repeat customer.
2. Explain functionalities
Apps like 500px, Clear and Kobo use a different approach. They focus on explaining the functionalities. This approach works best when the app has a lot of (hidden) functionalities which are crucial for the operation of the app.
500px also lets users create an account with pre-existing social profiles like Facebook, Twitter or Google. If users don’t have or don’t want to use their social account, they offer an option alongside to create an account with an e-mail address and password.
User-friendly approach
And look at the sentence “If you are new to 500px we will create an account for you”. Very user-friendly: they don’t let you choose between ‘login’ and ‘register’, but based on your e-mail address you login if you have an account, or they create an account for you if you’re new.
Clear app’s onboarding is very clear and explains the functionalities very well. Unfortunately, they do not provide the opportunity to skip the onboarding process but force the user to swipe through all 7 (!) screens. Clear app also uses approach 4 ‘Onboarding during use’, please see below.
3. Explain interactively
Mailbox and Weathercube are two great examples of how to explain the functionalities interactively. This approach works well because it puts learning into context and provides the user with feedback as they interact with the elements. This way the users will better understand and remember how things work. But from a design and development perspective, this is of course a time-consuming approach.
Motivation
Mailbox is motivating the user by giving positive feedback like ‘Great job!’. This makes the learning experience fun and emotionally engaging, as it should be. See our blog about emotional design.
Know where to find it
Weathercube lets the user know where the onboarding can be found after skipping or finishing it. This way the user is able to choose if and when s/he wants to do the onboarding.
4. Onboarding during use
Another very interesting approach is to explain functionalities during use. This is a huge advantage because the user doesn’t have to go through the information before using the app itself.
Cut the Rope, the lovely game where you have to deliver the candy to Om Nom, was one of the first great examples. Simple gestures explain how the game works. Nowadays a lot of apps, like Spotify, Flipboard, iMovie and Feedly use the same approach to guide the user through the app.
Next-step instructions
After onboarding, the Clear app provides the user with some next-step instructions. A number of example to-do’s explains clearly how the app should be used.
5. Blank slate
Often forgotten, but very important is the ‘blank slate’. Take for example Dropbox — if a user hasn’t specified any favourites yet, the app doesn’t show a blank page, but it explains what will happen when the user stars it’s favourite files. A simple explanation that gives just that finishing touch.
iMovie uses the blank slate to explain what the user has to do: ‘Tap + to start a new movie or trailer’. Vine describes the user has no activities yet in a fun way, but unfortunately doesn’t explain what to do.
Guidelines for onboarding
To conclude, consider these 11 guidelines for designing an onboarding process. Every app or website is different and needs its own approach, but considering these guidelines will definitely ensure a better experience.
- Explain the proposition — what is the added value for the user?
- Explain hidden and crucial functionalities — how does the app work?
- Explain them interactively — this puts learning into context and provides the user with feedback
- Keep it informative, don’t explain obvious features
- Try to insert a fun and emotionally engaging element
- Limit content per panel, this makes the information easy to digest
- Provide a way to skip the onboarding process
- And let the user know where the onboarding can be found after skipping or finishing it
- Communicate the number of steps so the user knows what to expect
- Don’t force people to log in or register to experience content or features
- Ensure the user moves to a logical page after the onboarding where s/he knows what to do and give next-step instructions if necessary
