2. USER ONBOARDING
User onboarding is the users first date with your app.
Delight them and this will lead you to the second date; confuse them,
ignore them, ask too much from them and you will never hear from
them again.
www.uxcam.com @uxcamhello@uxcam.com
3. ONBOARDING IS THE MOST
CRUCIAL ELEMENT OF UX
• Out of the 2.5 million apps out there, only 25% of them are used more
than once 1.
• Samuel Hullick, through his observation2, points out that “40-60% of
the free trial users will never see a second sign-in”.
User onboarding on most apps is broken, users are not
getting to the “aha moment” early enough to invest
further time.
www.uxcam.com @uxcamhello@uxcam.com
4. USER ONBOARDING IS NOT
A FIX FOR CRAPPY UX
Example: Clear app
• App’s unique user interface has set itself
apart with gesture-driven interaction.
• The app uses ‘walkthrough user onboarding’
technique to introduce these non standard
interactions to the new users apart from the
rest
The lesson here is, onboarding is not a substitute for poor
design, it is there to be used to enhance the user experience.
www.uxcam.com @uxcamhello@uxcam.com
6. BENEFITS ORIENTED ONBOARDING
In this technique, the benefits and value of the app, to the user’s life is communicated.
When to use: This onboarding technique is used when you want to show what the app does
and how the user can use it to their advantage.
For example: Instagram Hyperlapse communicates the benefit of using the app in
first few screens..
www.uxcam.com @uxcamhello@uxcam.com
7. FUNCTION ORIENTED ONBOARDING
In this technique, the key functionality of the app is communicated
When to use: This onboarding technique is used when the app is complex with large number
of feature set.
For example: Clear app uses functional oriented onboarding to communicate non-
standard interaction and app’s functionality
www.uxcam.com @uxcamhello@uxcam.com
8. PROGRESSIVE ONBOARDING
In this technique, a user is onboarded as they progress through to that part of the app.
When to use: This onboarding technique is used when the app uses complex workflows
allowing to onboard users in small baby-steps.
For example: YouTube Capture app progressively onboards the user giving limited set of
instructions at a time ensuring users are not over-whelmed.
www.uxcam.com @uxcamhello@uxcam.com
10. www.uxcam.com @uxcamhello@uxcam.com
1.WELCOME THE USER
A warm welcome to your guest sets the tone for the whole evening. It's
similar with your app.
The welcome is important as it is usually the first point of contact between a
user and your app. It sets the tone of the relationship the user will have with
your app.
11. www.uxcam.com @uxcamhello@uxcam.com
2. HAVE A CONVERSATIONAL TONE
“Welcome to our system. We will help you toggle the ASCII strings into
Floating num using our python script and Node.js”
Do not do this. On the other side of your app, there is a human with emotions
and feelings, express to them as a human through your app
12. www.uxcam.com @uxcamhello@uxcam.com
3. SHOW BENEFITS NOT FEATURES
People do not want a bed, they are looking for a good night sleep.
Phrase your copy to sell the benefit they get from using your app, not the
features in your app.
13. www.uxcam.com @uxcamhello@uxcam.com
4. SIMPLIFY LOGIN AND ASK FOR A
LOGIN ONLY AT THE RIGHT MOMENT
Most apps these days use a social login to reduce friction. It’s a good practice as it
offers one click login, helping users deal with sign-up fatigue. Note that lot of users
are concerned about privacy so allow them to create a separate account.
Some companies (for example: Groupon) have gone a step ahead by introducing frictionless onboarding, i.e.
you can use the product straight away without having to sign up.
15. www.uxcam.com @uxcamhello@uxcam.com
6. EXPLICITLY SHOW ADVANCEMENT TO USER
When people feel they have made some
progress towards a goal then they will become
more committed towards continued effort and
likely to complete their journey (“Endowed
Progress Effect”).
Show how far a user has advanced on the
journey and how many screens/tutorials/
steps are remaining to decrease
abandonment.
16. www.uxcam.com @uxcamhello@uxcam.com
7. ONBOARD PROGRESSIVELY
Focus on only one benefit at at time, start with the core benefit. As a user advances to the
next page, onboard them there to the next benefit.
Image source: Smashing Magazine
19. www.uxcam.com @uxcamhello@uxcam.com
9. USE IMAGES INSTEAD OF TEXT
Visual content reaches people’s brain faster and in a more understandable
way than textual information.
According to research, it takes a human brain 0.25 seconds to process
visual content, 60,000 times faster than textual content 4.
20. www.uxcam.com @uxcamhello@uxcam.com
10. REMOVE TOOLTIPS WHERE POSSIBLE
Your product must be self explanatory and easy to walk through, remove
tooltips where possible.
Samuel Hullick in User Onboarding puts it, “Companies have come to
believe that this UI technique (tooltips) is onboarding. This is flat-out
incorrect. It is also, ironically, a strong indicator that the onboarding
experience was tacked on as an afterthought."
21. www.uxcam.com @uxcamhello@uxcam.com
11. PERSONALIZE ONBOARDING
WHERE POSSIBLE
Personalize onboarding by reminding users who
recommended the app or which other friends are on the
app.
AirBnB personalizes onboarding a new user when
they install the app via a referral link.
Image source: AirBnB Nerd
22. www.uxcam.com @uxcamhello@uxcam.com
12. ALLOW USERS TO COME BACK
TO ONBOARDING LATER
For functional oriented onboarding, allow a user to come back to it later.
Collect this data to work on simplifying this functionality.
23. www.uxcam.com @uxcamhello@uxcam.com
13. GIVE USERS QUICK WINS
Give wins as early as possible even if it’s small. These wins should be
easily achievable by the user.
Example: YouTube app allows you to watch and search videos right away
when you launch the app.
24. www.uxcam.com @uxcamhello@uxcam.com
14. SOCIAL PROOF
People reference the behavior of others to guide their own behavior.
Use social proof for your product such as testimonials, number of
downloads, etc where possible.
26. www.uxcam.com @uxcamhello@uxcam.com
16. REACH OUT TO USERS PROACTIVELY
Onboarding starts before a user downloads your app and continues after they
close the app. Reach out to users proactively and allow them to get in touch via
emails, sms, push notification, others tools and always keep iterating.
27. www.uxcam.com @uxcamhello@uxcam.com
17. EXPLAIN INTERACTIVELY:
Use animations and interactivity for onboarding and attention instead
of just text and images.
A good example is how “Slide to Unlock” animates when an iPhone is locked to show how to unlock
and if the password is incorrect, “Try again” shakes grabbing your attention.
28. www.uxcam.com @uxcamhello@uxcam.com
18. EMPTY STATES
Empty states: i.e. places in app without content, data,
results shouldn’t be empty. It should be used to educate
the user and/or prompt them to take an action to fill it
up.
A good example is Buffer app which leverages
the empty state for getting user to compose an
update.
Image source: EmptyStates
29. www.uxcam.com @uxcamhello@uxcam.com
19. CONTEXT BEFORE ASKING PERMISSION
Don’t ask a user for access (such as camera, push notification) until you need them.
When you do, educate users on the benefit of the permission before asking for
permission.
Image source: Techcrunch
31. www.uxcam.com @uxcamhello@uxcam.com
21. USE VISUAL ANALYTICS TO TEST
AND ITERATE
User Onboarding is an iterative process, it changes as your product and
business evolves and there is always room for improvement.
Use qualitative UX analysis tool such as UXCam for mobile or Crazyegg and Clicktale
for web to test, iterate and improve the onboarding process.
33. www.uxcam.com @uxcamhello@uxcam.com
TOUCH HEATMAPS
Heat Maps allows you to understand how users are interacting on each
screens by aggregating all user gestures (taps, swipe, scrolls).
This allow you to see which part of your screen is being used the most and which
needs rework, enabling you to redesign and optimize the UI for conversion.
35. www.uxcam.com @uxcamhello@uxcam.com
THE FINAL WORD
You don’t get a second chance for making a great first impression.
What happens after a user lands on your product is the delicate opportunity to
make or break a relationship. Every app brings a unique set of challenges. Use
the tools and techniques learned above to measure, test and validate
onboarding ideas.
References
1) http://info.localytics.com/blog/app-user-retention-improves-in-the-us
2) Samuel Hullick: The elements of user onboarding
3) https://www.eyeqinsights.com/power-visual-content-images-vs-text/