Onboarding

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. AirBnB

AirBnB.

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. Path

Path.


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. 500px

500px.

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. Clear

Clear.


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. Mailbox

Mailbox.

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. Weathercube

Weathercube.


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.

Cut the Rope

Cut the Rope.

Spotify & Flipboard

Spotify & Flipboard.

iMovie & Feedly

iMovie & Feedly.


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.

Clear

Clear.


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.

Dropbox & 500px

Dropbox & 500px.

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. iMovie & Vine

iMovie & Vine.


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

Anything to add or ask? Mail me at


Header image credit: Mustang Monthly

Slideshare version

Volg ons voor een Soda refill: