checklist for bulletproof mobile user onboarding

Post on 15-Jan-2017

551 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

www.uxcam.com @uxcamhello@uxcam.com

Introduction to Mobile User Onboarding

and a checklist for getting it right

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

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

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

www.uxcam.com @uxcamhello@uxcam.com

THREE ONBOARDING TECHNIQUES

• Benefits oriented

• Function oriented

• Progressive oriented

BENEFITS ORIENTED ONBOARDING

In this technique, the benefits and value of the app, to the user’s life is communicated.

Whentouse:Thisonboardingtechniqueisusedwhenyouwanttoshowwhattheappdoesandhowtheusercanuseittotheiradvantage.

For example: Instagram Hyperlapse communicates the benefit of using the app in first few screens..

www.uxcam.com @uxcamhello@uxcam.com

FUNCTION ORIENTED ONBOARDING

In this technique, the key functionality of the app is communicated

Whentouse:Thisonboardingtechniqueisusedwhentheappiscomplexwithlargenumberoffeatureset.

For example: Clear app uses functional oriented onboarding to communicate non-standard interaction and app’s functionality

www.uxcam.com @uxcamhello@uxcam.com

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 workflowsallowingtoonboardusersinsmallbaby-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

CHECKLIST OF TECHNIQUES

for effective user onboarding

www.uxcam.com @uxcamhello@uxcam.com

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.

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

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.

www.uxcam.com @uxcamhello@uxcam.com

4. SIMPLIFY LOGIN AND ASK FOR A LOGIN ONLY AT THE RIGHT MOMENT

Mostappsthesedaysuseasociallogintoreducefriction.It’sagoodpracticeasitoffersoneclicklogin,helpingusersdealwithsign-upfatigue.Notethatlotofusersareconcernedaboutprivacysoallowthemtocreateaseparateaccount.

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.

www.uxcam.com @uxcamhello@uxcam.com

5. SHOW ONE IDEA PER SCREEN

Don't overwhelm the user with multiple ideas on one screen. A screen should communicate only one idea.

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.

www.uxcam.com @uxcamhello@uxcam.com

7. ONBOARD PROGRESSIVELY

Focusononlyonebenefit at at time, start with the core benefit. As a user advances to the next page, onboard them there to the next benefit.

Imagesource:SmashingMagazine

www.uxcam.com @uxcamhello@uxcam.com

8. ALLOW USERS TO SKIP

Some users like to be guided while others like to explore. For explorers, allow the tutorial to be skipped.

www.uxcam.com @uxcamhello@uxcam.com

8. ALLOW USERS TO SKIP

Some users like to be guided while others like to explore. For explorers, allow the tutorial to be skipped.

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.

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

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.

Imagesource:AirBnBNerd

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.

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.

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.

www.uxcam.com @uxcamhello@uxcam.com

15. DON'T SHOW USERS ARE FAILURES

Besensitivewithyourwording.Insteadofsaying“Youhavezerofriends”,showhowtoadd/invitefriends.

www.uxcam.com @uxcamhello@uxcam.com

16. REACH OUT TO USERS PROACTIVELY

Onboardingstartsbeforeauserdownloadsyourappandcontinuesaftertheyclosetheapp.Reachouttousersproactivelyandallowthemtogetintouchviaemails,sms,pushnotification,otherstoolsandalwayskeepiterating.

www.uxcam.com @uxcamhello@uxcam.com

17. EXPLAIN INTERACTIVELY:

Use animations and interactivity for onboarding and attention instead of just text and images.

Agoodexampleishow“SlidetoUnlock”animateswhenaniPhoneislockedtoshowhowtounlockandifthepasswordisincorrect,“Tryagain”shakesgrabbingyourattention.

www.uxcam.com @uxcamhello@uxcam.com

18. EMPTY STATES

Emptystates:i.e.placesinappwithoutcontent,data,resultsshouldn’tbeempty.Itshouldbeusedtoeducatetheuserand/orpromptthemtotakeanactiontofillitup.

AgoodexampleisBufferappwhichleveragestheemptystateforgettingusertocomposeanupdate.

Imagesource:EmptyStates

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.

Imagesource:Techcrunch

www.uxcam.com @uxcamhello@uxcam.com

20. CONGRATULATE USERS ON SUCCESS

Congratulate them when they have achieved an onboarding or finished a certain goal.

www.uxcam.com @uxcamhello@uxcam.com

21. USE VISUAL ANALYTICS TO TEST AND ITERATE

UserOnboardingisaniterativeprocess,itchangesasyourproductandbusinessevolvesandthereisalwaysroomforimprovement.

UsequalitativeUXanalysistoolsuchasUXCamformobileorCrazyeggandClicktaleforwebtotest,iterateandimprovetheonboardingprocess.

KEY FEATURES OF

VISUAL ANALYSIS TOOLS

www.uxcam.com @uxcamhello@uxcam.com

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.

www.uxcam.com @uxcamhello@uxcam.com

USER RECORDING

Qualitativeanalysistoolprovideuserrecordingthatenablesyoutoseehowauserisusingyourproductalongwithalltouchinteractionsthroughsessionreplay.

Thisenablesyoutounderstandwhereintheproduct,yourusersarestruggling.

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.

References1)http://info.localytics.com/blog/app-user-retention-improves-in-the-us2)SamuelHullick:Theelementsofuseronboarding3)https://www.eyeqinsights.com/power-visual-content-images-vs-text/

www.uxcam.com @uxcamhello@uxcam.com

TryUXCAMforFREE

top related