User Moments

UX tip 3.

Back to UX app checklist

Onboarding experience done right,
be surprisingly good

539acef64535daef7c3f3a00_mobile-onboarding-experience-interactive.png

What is an onboarding experience?

Onboarding is the first try that a user has with your app, service or new feature. It will influence his /her opinion, so it is important in order to make this as smooth & intuitive as possible. A good on boarding experience in combination with an intuitive ui should create a fluid experience for your user.

How are we going to do this? Below you will find examples and points to take into consideration when creating your onboarding experience.

Onboarding basics

Keep it simple, only the most used (important) features first

If your app has a lot of features, it will take too long to introduce and explain them all to the user. Doing so could cause the user to skip the onboarding process and miss the whole point of it.

So it is important to find out what the most used & important features. Then sort them on the ones users like to use first. If you can get them to use your app by showing these, they will discover all the cool extra features later on.

Keep your text short & sweet

Besides the overall onboarding experience it is key to not go overboard with the text. I have seen some introductions that felt like I needed to read a chapter of out a book for each feature. Although in some cases you can get away with it, usually it is a bad user experience. It could be that it is the time to make your app easier to work with instead? It shouldn’t be so complicated you know!

Have a skip button

Remember the introduction is to increase the user experience and should be given to your users as an option, don't force them to follow it. Make it clear how to skip the on boarding experience. A reason for skipping could be that they are already familiar with the service from a different account and don’t want to follow it again.

The different onboarding types

Onboarding slideshow

Used most on mobile apps with a slider containing around 4-6 slides to create the onboarding experience. Giving the user the necessary information to start smoothly. Sometimes also include a video, but mostly with text and (animated) screenshots. You will see this a lot with introduction of new features too.

Onboarding video

A short onboarding video to highlight the apps functionality and usually also the idea behind it. It takes less programming time and can create a bit more impact if done right. Beware that some apps focus too much on introducing the app like a trailer instead of creating an onboarding experience (explaining how you use it). These trailers are ment for introduction, on the website or before login/ use.

Interactive in app

A third option is to use in app onboarding, mostly done with a transparent overlay and popup message taking you through important features on each individual screen. Mostly seen on online web apps and services, but also in a more simplified version on mobile apps. These usually look like scribbled notes on top of the design with arrows pointing on the interface.

Simple start image

If your app has simple functionality like drag and drop or doesn’t need to much explaining. You can use the empty space (usually the background) when you first start, as an introduction opportunity.

Slideshow onboarding examples

539ad2704535daef7c3f3a1a_onboarding-experience-12.png
539ad0834a6edaf17ceb2cdf_onboarding-experience-01.png
539ad10a4a6edaf17ceb2ce7_onboarding-experience-07.png
539ad138de9f60d26776212f_onboarding-experience-08.png
539ad13ede9f60d267762131_onboarding-experience-09.png
539ad2444a6edaf17ceb2d21_onboarding-experience-06.png

Interactive in app onboarding examples

539ae1fc4a6edaf17ceb2e36_onboarding-experience-15.png
539ae24f33c21fd4674027f5_onboarding-experience-13.png
539ae35f4535daef7c3f3b8c_onboarding-experience-03.png
539ae3bf4a6edaf17ceb2e82_onboarding-experience-17.png

Simple start image onboarding

539ae28c4a6edaf17ceb2e47_onboarding-experience-02.png
539ae276de9f60d26776221e_onboarding-experience-14.png
539ae4944a6edaf17ceb2e92_onboarding-experience-11.png
539ae4a7de9f60d26776223a_onboarding-experience-16.png

Conclusion

Try to find an onboarding experience that fits your app or sevice and can communicate with its users. Always track your users interactions and how long it takes them to complete it. Don't forget to track the skip button and if they use it track when they do. Tracking everything will help you improve the overall experience. 

Do you know especially good examples or have made great onboarding solutions? Share them with me on twitter @eyenoxmedia.

Learn something? Help other too!

About me

The idea is to create a checklist over time with suggestions on how to improve your apps & it’s user experience. Creating happy app user & taking the extra step, helping each other by learning from others.
I started speaking about users moments in Oslo, Norway at a meetup beginning this year (2014).

If you have good suggestions for a topic or examples, you can share them with me on twitter @eyenoxmedia.

5379c70a8fa1ea4e1cba8321_icon-linkedin%402x.png 5379c7113413be4c1c3e84e7_icon-behance%402x.png 5379c71797d54fce793b0dbf_icon-twitter%402x.png