Mobile Onboarding: A Beginner’s Guide

Mobile Onboarding: A Beginner’s Guide

• By Germaine Satia


• August 11th, 2014


• TechniquesUser ExperienceWorkflow


• 1 Comment

Nowadays, displaying onboarding screens to first-time users has spin a common use in mobile apps. The purpose of these onboarding screens — also referred to as walkthroughs — is to deliver a app and denote what it does.

Given that these are mostly a initial set of screens with that users interact, they also set a users’ expectations of a app. Therefore, it is essential that those concerned in formulating a product — product managers, designers, developers — take a time to weigh either onboarding is required for a app and, if so, to establish a best proceed to exercise it.

In this article, we’ll yield some good tips on how to proceed onboarding, some common implementations, choice techniques, as good as resources to assistance we yield a best knowledge for users.

To Onboard Or Not To Onboard?

In new years, we’ve seen copiousness of contention on a utility of onboarding in mobile apps. A renouned evidence against¹ onboarding is that if an app needs it, afterwards it is essentially flawed, lacking a principal elements of morality and user-friendliness. While this line of suspicion does have logic, it’s too unconditional a conclusion.

The digital pattern universe has copiousness of manners and best practices, that is good. These manners save designers and developers from carrying to reinvent a circle any time they work on a product. More importantly, they save users from stressing out whenever they use a new app; instead, they can rest certain meaningful that a modifying duty will be represented by a pencil idol and that a “thumbs up” idol means “like.” Rules are good.

But a existence is that any app is singular in what it does, how it does it and who uses it. These variations make onboarding a reliable, useful and user-friendly underline in certain instances. Let’s cruise some use cases.

Use Case 1: Unfamiliar Interaction

If we are releasing an app that supports communication methods that many users would not have been unprotected to on a unchanging basement — quite a gesture-driven app — afterwards onboarding is essential. Gesture-driven apps are still in a initial and exploratory phase. As such, developers need to beam users on how to correlate with them, clearly presenting any gesticulate and a analogous function.

For example, a alarm time Timely, indicates to a user that drumming a sold partial of a shade will supplement or subtract 5 mins from a clock.

²

Timely³ guides users to any gesticulate and a approaching result. (View vast version⁴)

Use Case 2: Empty State

An app whose default state is dull and requires users to go by one or some-more stairs to stock it with calm is also good matched to onboarding. Even if a onboarding routine consists of customarily one step, a superintendence will encourage users that they are doing a right thing.

⁵

Feedly³⁵⁶ shows users how to collect their initial collection of content. (View vast version⁷)

Use Case 3: Suite of Products

If your app is partial of a apartment of products — say, with desktop and web companions — afterwards onboarding could severely titillate a user’s experience, generally if a mobile app doesn’t have all of a functionality of a other versions. This is generally critical in formidable business apps, many of that have a accumulation of user roles, any with specific entrance rights and confidence restrictions.

Very mostly a web and desktop versions will support full functionality (such as for creating, viewing, modifying and deletion content), while a mobile app boundary it (such as observation only). In such cases, a brief display explaining what a app does would assistance existent users know how a mobile app fits into a apartment of products.

Use Case 4: Personal Information

If your app relies on personal information (such as age, weight, gender, marital status), afterwards collect and store this information around onboarding. Guide a user step by step so that they are transparent on since this information is being requested. And be certain to concede a user to change this information whenever they wish (usually from a settings screen).

⁸

Fitbit⁹ tells users since their personal information is indispensable and guides them. (View vast version¹⁰)

Even if your app doesn’t fit any of a examples above, your users competence still advantage from onboarding. Keep in mind that anyone who interacts with a product will during slightest wish to know how a product will advantage them. You can benefaction this information in onboarding, as we’ll plead after in a territory on function-oriented onboarding.

Sure, a primary shortcoming is to pattern products that are discerning and easy to use. However, we shouldn’t boot onboarding since when it provides value to a user, it creates for a many some-more pleasing experience.

Which Technique to Use?

These 3 techniques are a many common:

• benefits-oriented onboarding,


• function-oriented onboarding,


• progressive onboarding.

We’ll demeanour during any in spin and examination some ubiquitous discipline for implementing them.

Technique 1: Benefits-Oriented Onboarding

This is flattering self-explanatory. With this technique, we benefaction a advantages (i.e. a value) of a app, communicating one or some-more of a following to a user:

• What does a app do?


• How can a user confederate it into their life?


• What value will this formation provide?

¹¹

Evernote Food¹⁴¹² highlights what a user will advantage from regulating a app. (View vast version¹³)

When implementing this technique, cruise a following principles:

Present a Maximum of Three Key Benefits

This series is not formed on tough science, though since a indicate is to give a user a discerning overview of a app, 3 is a protected series (excluding a pretension screen). This way, a user gets to learn about a app though removing wearied or slowed down by too many information.

Apply a “One Slide, One Concept” Rule

Think behind to presentations from that we defended a many information. The slides with a clear, focused summary substantially had a biggest impact on we and were a many memorable. The same goes for onboarding screens. The “one slide, one concept” sequence helps a user to concentration on and digest any tiny square of information. Presenting all during once would be visually loud and confuse a user from your pivotal message.

Prioritize, Prioritize, Prioritize

Resist a titillate to uncover off all cold about your app. Always lapse to your user information and remind yourself of a problem that a user is confronting and what they need. Then, figure out how to encourage them by onboarding that a app does indeed answer their need.

Use Consistent Vocabulary

Evernote Food¹⁴¹², mentioned above, uses verbs to fast squeeze courtesy and promulgate a pivotal benefits. The proceed is effective, fit and succinct. If we can’t boil things down to a few high-impact verbs or adjectives, afterwards a brief word or dual would suffice. Just be certain to hang with it all a proceed through. A agreeable and awake presentation, both in visuals and terminology, will assistance to flog off a user’s knowledge on a certain note.

¹⁵

NYT Now¹⁶ uses clear, brief descriptions to promulgate a advantages and value. (View vast version¹⁷)

Onboard Before Registration

Because onboarding is meant to be an overview, benefaction it before a user signs adult for or logs into a service. Once they confirm to record in, a user will be prepared to try a app and should not be interrupted by reminders on a advantages of a app.

Keep It Brief

Perhaps you’re wondering either onboarding unequivocally is necessary. After all, doesn’t it customarily repeat a outline in a app store? Not during all. App store descriptions come in all shapes and sizes, since onboarding has to be laconic and, as such, focus on a comprehensive essentials. In addition, many people skip a app store description, preferring instead to dive right into a experience. So, a brief display once they’re intent with a app could assistance them know what a app does.

What Not to Do

Readability¹⁸ is a splendidly unsentimental app that, unfortunately, is unsuitable opposite platforms. This is quite clear in a onboarding in a Android version, that creates several missteps:

• The user has to digest a sum of 7 slides and analogous messages.


• The calm for some slides runs a bit long. For example, a slip about pity could have been simplified by display icons of a amicable networks on that calm competence be shared.


• One slip encourages a user to implement a Firefox plugin, that seems unnoticed given that it’s a mobile platform. Plus, a prior slip already tells a user that “Readability is a web and mobile app.” Onboarding in a mobile app should not offer as a catch-all for selling a full apartment of products, though rather should be applicable to a mobile platform.

¹⁹

Avoid many slides, and keep a calm applicable to a platform. (View vast version²⁰)

Technique 2: Function-Oriented Onboarding

Another choice is to abandon a display on advantages and to concentration instead on a app’s pivotal functionality. This is infrequently referred to as manager marks²¹. If we take this approach, promulgate a following:

• What is a pivotal functionality (for example, how to get started or what actions are many common);


• When to use a functionality (for example, when observation hunt results);


• How to use a functionality (for example, drumming or swiping left).

²²

Carousel²³ introduces pivotal functionality immediately. (View vast version²⁴)

When putting together function-oriented onboarding, keep a following in mind:

Don’t Explain a Obvious

Since a emergence of a Internet, from desktop apps to a web to mobile apps, a “x” has consistently represented closing, exiting or cancelling. So, unless that idol has a opposite purpose in your app, including it in your onboarding won’t yield any value to users.

²⁵

Adobe Kuler²⁶ doesn’t uncover apparent actions. (View vast version²⁷)

Three Slides, One Function Per Slide

If we are explaining a functionality in a slideshow, afterwards follow a same element that we lonesome with benefits-oriented onboarding: a limit of 3 slides (excluding a pretension slide), presenting one duty per slide.

Help a User Get Started

If your app is dull by default, concentration on this in your onboarding. Don’t let a user face a vacant shade a initial time they open a app. Include a discerning note to uncover them how to get started, so that they don’t consternation — even if customarily for a second — either a vacant shade is a bug or a feature.

Spendee²⁸ reassures users by revelation them how to get started. (View vast version²⁹)

Onboard Before Log-In or Sign-Up

As with a final technique, onboard users before they pointer adult for or record into your service.

What Not to Do

Photography showcase app 500px³²³⁰ boasts some extraordinary calm and a abounding set of functionality to go along with it. However, a onboarding routine for a iPhone app commits some faux-pas:

• The navigation bar and a functionality are showcased. Telling users that they can navigate around a navigation bar falls underneath a difficulty of obvious.


• Some slides uncover buttons such as for liking, favoriting and sharing. All 3 of these functions are represented by icons that are zodiacally compared with them, so explaining them in a onboarding is unnecessary. Let’s suppose, for a consequence of argument, that a apportionment of 500px’s aim assembly is not sensitive with these icons. In this case, gradually onboarding these users by presenting a functions in context would improved offer them (for example, when a user is observation a pattern and competence wish to “like” it).


• One slip shows a “flow,” a timeline that showcases a activity of people whom a user is following. Because we can customarily advantage from a upsurge once we have followed others, gradually onboarding a user by revelation them about this underline after they’ve followed during slightest one chairman would have been better.

³¹

500px³²³⁰ could have avoided display several functions on a singular slide, saving some sum for later. (View vast version³³)

Technique 3: Progressive Onboarding

In general, people learn best by doing. This substantially explains a recognition of on-going onboarding, that is a loyal walkthrough in that it presents information to users as they use a app. For example, when a user is on a dashboard, they would see customarily dashboard-related information; when they’re observation hunt results, they would be shown customarily functions associated to hunt results.

³⁴

Feedly³⁵⁶ displays hints as users go by a app. (View vast version³⁶)

Here are a few things to keep in mind when gradually onboarding:

Save for Complex Workflows

If your app has a sincerely formidable workflow or handles formidable tasks (such as finances), afterwards on-going onboarding is a good choice. You would feed a user information customarily when it’s suitable and judicious in a workflow, giving a user time to digest it.

Use for Hidden Functionality

When building mobile apps, we’re always focused on well regulating a tiny screen, that infrequently requires menus and functions to be hidden, manifest customarily via, say, a double daub or prolonged press. In this case, travel a user by those dark functions.

For example, take a app Pocket³⁹³⁷, shown below. In it, functions are permitted for any object in a reading list, though a user has to appropriate left in sequence to entrance them. Because a user has to stock a app with content, a good hold would have been to wait until a user has combined during slightest one object to a reading list, and afterwards immediately indicate out that a left appropriate reveals a dark functions.

³⁸

Pocket³⁹³⁷ could have gradually onboarded users by indicating out dark functionality. (View vast version⁴⁰)

Ideal for Gesture-Driven Apps

If your app is quite gesture-driven, afterwards this hands-on proceed is best. Getting a user to take movement over time as functionality is introduced will assistance a information stick.

⁴¹

Solar⁴² presents any gesticulate and helps a user learn by doing. (View vast version⁴³)

Make It Persistent

For gesture-driven apps, yield a by-pass to a list of gestures and their analogous actions, maybe in a settings screen.

Remember that a some-more gestures we have, a some-more a user has to memorize. And a some-more gesture-driven apps a user has commissioned on their device, a some-more confused they can get, perplexing to remember a disproportion between a double-tap in one app and a double-tap in another. Making a information henceforth permitted adds an additional covering of comfort.

⁴⁴

Beats Music⁴⁵ provides permanent, discerning entrance to a list of gestures. (View vast version⁴⁶)

What Not to Do

Because on-going onboarding complements a user’s scrutiny of an app, a biggest risk is that continuous hints as a user moves from shade to shade will hurt a knowledge of an differently smashing app. So, take even larger caring with this technique to uncover customarily a many useful information.

Also, equivocate highlighting facilities on any screen. Give a user some respirating room so that they get some compensation from exploring your app. A walkthrough is not a surrogate for bad design. It should simply raise a experience.

Alternative Solutions

The techniques presented above are a many popular. But we do have other options to play with!

Alternative 1: Hybrid

A hybrid proceed — consistent one, dual or all 3 techniques — is infrequently viable, as Flink⁴⁷ shows:

⁴⁸

Flink combines onboarding techniques. (View vast version⁴⁹)

Alternative 2: Video

Video onboarding is used in some apps and is value looking into. This can be taken in opposite directions, with some videos being some-more practical, like a tutorial, while others are fundamentally advertisements. As with videos on websites, personification them automatically would be invasive and differing for a user. And a user competence be in a open space, where blustering sound from a mobile device would be inappropriate.

⁵⁰

Fifty-Three uses a energy of sound and visuals to benefaction a app Paper⁵¹. (View vast version⁵²)

Alternative 3: Sample Data

Providing some representation information for a user to play with competence also be worthwhile. This is quite useful in apps that hoop supportive data, such as finances and human-resources data. If a app is preloaded with representation data, a user will feel gentle experimenting, creation mistakes and training how a app works, and they will feel improved prepared to submit genuine data.

Xero⁵³ gives users representation information to learn how a app works. (View vast version⁵⁴)

Conclusion

The discipline and examples in this essay will jumpstart your onboarding project; however, as always, a user is during a heart of all of this. So, as we weigh that technique to use, remember to revisit your personas, user scenarios and any user information we have, either from analytics or marketplace research.

If you’re still uncertain about that technique to go with, exam one or dual techniques on users and analyze a feedback to see what works and what doesn’t. No resolution is one-size-fits-all, so, as always, use a information on palm to make a many sensitive decision.

As we take your initial steps, guard what other developers are doing. The following websites yield a accumulation of onboarding patterns to pull impulse from:

• Pttrns⁵⁵


• Mobile Patterns⁵⁶


• UX Archive⁵⁷


• Pinterest⁵⁸

If you’re meddlesome in platform-specific guidelines, afterwards check out Apple’s⁵⁹ and Google’s⁶⁰.

(cc, ml, al, il)

Footnotes

1. 1 http://blog.maxrudberg.com/post/38958984259/if-you-see-a-ui-walkthrough-they-blew-it


2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-timely-opt.jpg


3. 3 https://play.google.com/store/apps/details?id=ch.bitspin.timely


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-timely-opt.jpg


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-feedly-umano-opt.jpg


6. 6 https://play.google.com/store/apps/details?id=com.devhd.feedlyhl=en


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-feedly-umano-opt.jpg


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-fibit-opt.jpg


9. 9 https://itunes.apple.com/en/app/fitbit/id462638897?mt=8


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-fibit-opt.jpg


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-evernote-food-opt.jpg


12. 12 https://play.google.com/store/apps/details?id=com.evernote.foodhl=en


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-evernote-food-opt.jpg


14. 14 https://play.google.com/store/apps/details?id=com.evernote.foodhl=en


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/05-nytnews-opt.jpg


16. 16 https://itunes.apple.com/us/app/nyt-now/id798993249?mt=8


17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/07/05-nytnews-opt.jpg


18. 18 https://play.google.com/store/apps/details?id=com.readabilityhl=en


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/07/06-readability-opt.jpg


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/06-readability-opt.jpg


21. 21 http://mobilepatterns.wikispaces.com/Coach+Marks


22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/07/07-carousel-opt.jpg


23. 23 https://itunes.apple.com/fr/app/carousel-by-dropbox/id825931374?mt=8


24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/07/07-carousel-opt.jpg


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/07/08-adobe-kuler-opt.jpg


26. 26 https://itunes.apple.com/app/adobe-kuler/id632313714


27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/07/08-adobe-kuler-opt.jpg


28. 28 https://play.google.com/store/apps/details?id=com.cleevio.spendeehl=en


29. 29 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/dd2cd_09-spendee-opt.jpg


30. 30 https://itunes.apple.com/en/app/500px-discover-photos-from/id471965292?mt=8


31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/07/10-single-slide-opt.jpg


32. 32 https://itunes.apple.com/en/app/500px-discover-photos-from/id471965292?mt=8


33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/07/10-single-slide-opt.jpg


34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/07/11-feedly-opt.jpg


35. 35 https://play.google.com/store/apps/details?id=com.devhd.feedlyhl=en


36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/07/11-feedly-opt.jpg


37. 37 https://itunes.apple.com/us/app/pocket-save-articles-videos/id309601447?mt=8


38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/07/12-pocket-opt.jpg


39. 39 https://itunes.apple.com/us/app/pocket-save-articles-videos/id309601447?mt=8


40. 40 http://www.smashingmagazine.com/wp-content/uploads/2014/07/12-pocket-opt.jpg


41. 41 http://www.smashingmagazine.com/wp-content/uploads/2014/07/13-solar-opt.jpg


42. 42 https://itunes.apple.com/en/app/solar-weather/id542875991?mt=8


43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/07/13-solar-opt.jpg


44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/07/14-beats-music-opt.jpg


45. 45 https://itunes.apple.com/en/app/beats-music/id781817640?mt=8


46. 46 http://www.smashingmagazine.com/wp-content/uploads/2014/07/14-beats-music-opt.jpg


47. 47 https://itunes.apple.com/en/app/flink-mode-street-des-meilleures/id798552697?mt=8


48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/07/15-flink-opt.jpg


49. 49 http://www.smashingmagazine.com/wp-content/uploads/2014/07/15-flink-opt.jpg


50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/07/16-paper-opt.jpg


51. 51 https://itunes.apple.com/en/app/paper-by-fiftythree/id506003812?mt=8


52. 52 http://www.smashingmagazine.com/wp-content/uploads/2014/07/16-paper-opt.jpg


53. 53 https://play.google.com/store/apps/details?id=com.xero.touchhl=en


54. 54 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/39a97_17-xero-opt.jpg


55. 55 http://www.pttrns.com/


56. 56 http://www.mobile-patterns.com/


57. 57 http://uxarchive.com/


58. 58 http://www.pinterest.com/


59. 59 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/StartingStopping.html


60. 60 https://developers.google.com/live/shows/6727337534029824

↑ Back to topShare on Twitter

Mobile Onboarding: A Beginner’s Guide