Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Rethinking Mobile Tutorials: Which Patterns Really Work?

Pattern libraries are a great source of inspiration and education for designers. But common practice doesn’t always equal best practice. In this post, we’ll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement.

After the release of the first edition of Mobile Design Pattern Gallery, Intuit asked me to speak with its mobile team. I spoke at a high level about the value of patterns across industries (fashion, architecture, software and others) and how they are a useful teaching tool.

Further Reading on SmashingMag: Link

Alissa Briggs, a senior UX manager at Intuit, followed my talk with a case study from Snap Payroll. Imagine my surprise when she walked through each of the “invitation” patterns from my book Dialog, How It Works, Tour and Transparency, and showed how they failed to onboard users effectively. Users were confused or frustrated (or both) by these extra “helpful” screens.

Test examples from Intuit's Snap Payroll product5
Some of the test concepts from Intuit’s Snap Payroll tutorial (from “Dialog, How It Works, Transparency and Tour”) (Large preview6)

Shortly thereafter, I was working with RetailMeNot, tasked with designing its iOS and Android app tutorial. The product team wanted to make sure that users were clear about the value proposition of the tool and knew where to access certain actions (favoriting a store, saving a coupon, etc).

We thought that a very short tour (three steps) or a video demo might work. Some of the stakeholders really liked the idea of a transparency, so we tested that as well. But instead of engaging users, these designs just frustrated them.

One of the RetailMeNot test participants said:

“I just want to get in the app and start exploring.”

In summary, user testing showed that users skip or otherwise ignore dialogs, tours, video demos and transparencies. At best, users find them a minor inconvenience. At worst, the patterns significantly aggravate new users who are trying to get into the app.

Test examples from RetailMeNot7
Some of the test concepts for RetailMeNot’s tutorial: transparency, video demo, three-step tour (Large preview8)

Why Do These Patterns Fail? Link

So, why don’t these patterns work? I turned to the field of game design for answers. Game designers have always known that you can’t drop new players into the middle of a firefight and expect them to enjoy the experience. Most players would be dead before figuring out how to fire their weapons and fight back.

In game design, some methods of driving deep engagement are much more effective than others. The same holds true for mobile apps. While the stakes might not be (virtual) life or death, the frustration that users experience when they don’t know how or what to do is the same. And when that happens to too many of your users, it’s game over for your app.

Screenshots of the onboarding experience for Portal9
Portal offers a safe environment for players to figure out the controls while advancing in the game. (Large preview10)

Extra Credits’ online video series thoughtfully looks at various aspects of the gaming world from an insider’s perspective. “Tutorials 10111” is one fantastic video in particular that every app designer would do well to watch. (Get past the annoying chipmunk voice narration — it’s worth it.)

“Tutorials 101” lays out some basic rules for crafting an effective game tutorial that we can extend to the world of mobile design:

  1. Use less text.
  2. Don’t frontload.
  3. Make it fun.
  4. Reinforce learning through play.
  5. Listen to your players.

Rule Number 1: Use Less Text Link

When we want to explain something, words often seem like the easiest tool to use. But when we want the user to learn something, the written word is often a turn-off. According to “Tutorials 101,” we should avoid relying only on text because “it kills pacing, it destroys immersion, and it will often be skipped by the players who need the tutorial the most.”

Too much text makes for a “tell, don’t show” approach, which works against the strengths of mobile apps. Instead, tutorials should “show, not tell”; they should be interactive, so that users learn by doing. When someone practices an action beforehand, they’re more likely to remember how to do it when they need to than if they’d merely been told how to do it.

Here are some examples:

Boomerang vs. Mailbox Link

Boomerang for Android12
Boomerang13 for Android has too much text (see also rule 2: “No Frontloading”). (Large preview14)

Mailbox for iOS15
Mailbox16 for iOS’ tutorial text encourages the user to learn by doing. (See video17) (Large preview18)

DigiCal vs. Fantastical Link

DigiCal for Android19
In DigiCal20 for Android, the text is abstracted from the activities it describes. (Large preview21)

Fantastical for iOS22
In Fantastical23 for iOS, the tutorial invites the user to work through the gestures that they need to learn. (See video24) (Large preview25)

Catch (2013) vs. Clear Link

Catch for Android26
Catch for Android’s tour describes features and actions but doesn’t let the user try them. (Large preview27)

Clear for iOS28
In Clear for iOS29, the default view is preloaded with tasks that the user learns by doing. (See video30) (Large preview31)

Resist the urge to use text if there are ways to show rather than tell. Use text to prompt the “cause,” and let the user observe the “effect” by doing.

Rule Number 2: No Frontloading Link

“If you frontload your tutorial and teach the player everything at the beginning,” Extra Credits says in “Tutorials 101,” “they’ll be overwhelmed with information and undersupplied with engagement.” Replace the word “player” with “user” in that sentence, and its relevance will be obvious to app designers.

Rather than overwhelm users with information that they will probably forget by the time they need it, provide the information in short, easily digestible chunks precisely when they need it. Remember that you’re making a first impression here. Wouldn’t you rather make a first impression that leaves users wanting more rather than less?

Dooo vs. Todoist Link

Dooo32
Dooo33 for iOS’ frontloaded information goes on and on for an overwhelming 11 pages. (Large preview34)

Todoist35
In Todoist36 for iOS, a tip invites the user to add a first task; then, another prompt introduces the options menu. (Large preview37)

UserTesting’s recent post “Six UX Lessons Learned From the New Facebook App, Paper38” affirms that “users love a guided tour” — “guided tour” meaning a series of interactive tips during the user’s first experience.

Facebook Paper39
Facebook’s Paper app uses interactive tips in the context of a flow. (Large preview40)

Don’t overload users up front with all of the information they will ever need. Give it to them in bite-sized chunks, just where and when they need it.

Rule Number 3: Make It Rewarding Link

Actually, you may recall that the rule from “Tutorials 101” is “Make it fun.” Of course, “fun” is not appropriate for all apps. But when the video’s narrator says, “Your tutorial should be as engaging as any other part of your game,” we can see that in every other sense, this rule applies to our world.

Even if we can’t make learning our apps fun, there are certainly ways to make it rewarding and flow seamlessly into the app’s overall experience. And a good way to do that is with interactivity that enables the user to actually accomplish things. This imparts a sense of agency that reinforces what the user learns.

Even when “fun” is not the right tone to strike, instilling a sense of playfulness is still sometimes appropriate. Let’s look at two apps that take different approaches to this, NBC News and Flipboard, the latter of which exemplifies the right approach. Despite its “playful” font on the five transparency screens, NBC’s tutorial still feels like a lecture. Flipboard, on the other hand, feels dramatically different on first being opened.

There is no instructional text, and the bottom half of the screen playfully flips up a bit, teasing you with a peek at some content before flipping down again. After it does this once more, you’ll probably get the hint that you need to swipe up to reveal the underlying content. But if by then you still haven’t swiped, you’ll get an embedded invitation that says “Swipe up to continue.”

Every subsequent flip transition reinforces the swipe gestures that a new user needs to make in order to explore the content in their Flipboard. Playful and rewarding.

NBC News vs. Flipboard (2013) Link

NBC News41
NBC News42 for iOS has a playful font, but the long lecture isn’t rewarding. (Large preview43)

Flipboard44
Flipboard for Android45 and iOS46 embeds playful prompts to engage the user and reinforce the key gestures needed to navigate the app. (See video47) (Large preview48)

Make deeper engagement with your app rewarding. Consider adding elements of playfulness where appropriate, and create a sense of urgency by enabling users to learn by doing.

Rule Number 4: Reinforce Learning Through Use Link

Remember those “A-ha!” moments in science class when you came to understand a concept by testing it in a simple experiment? That’s what we’re talking about here. Of course, the teacher had explained the concept to you, but it was by performing the experiment that you actually learned it.

The same idea applies with tutorials. And if you follow the first three rules, this reinforcement will largely take care of itself. It could be as simple as accompanying an action demonstrated in a tutorial with a very subtle bit of visual or aural feedback.

Then, when the user subsequently performs the action, the same feedback would reinforce what they have learned. (If you do use audio feedback, provide a way to turn it off so that it doesn’t become annoying once the user is familiar with the app.)

This rule complements the “No frontloading” rule. Rather than trying to show off everything in your app at once, craft an experience that invites the user progressively deeper into the app. By revealing more advanced features over time or by giving unexpected “rewards” as they progress, you’ll reinforce what the user learns as they use the app.

Polar and Duolingo49
Polar50 offers a tip to power users after a few polls have been answered. Duolingo51 users earn rewards and level-ups by mastering skills. (Large preview52)

Any.do53
Any.do54 puts a widget on Android’s home screen to encourage engagement and offer spontaneous rewards. (Large preview55)

Learning isn’t a one-time thing. Using an app should reinforce what the tutorials have helped the user learn.

Rule Number 5: Listen To Your Users Link

Considering that you’ve been deep inside your app, building and refining it for months, who is the best person to explain how it works? Probably not you, according to “Tutorials 101,” whose narrator says:

“When you’re a designer who’s been working on a project for a year or two, it’s very easy to think things are intuitive or obvious that are actually totally incomprehensible.”

Simple, properly conducted user testing will reveal any stumbling blocks. Observe your users to see where they get stuck and where they have problems. Listen to their comments as they interact with the app. Don’t question them until later; if you question them as they are using the app, you will likely lead them unconsciously to the answers you want to hear.

The designers of Snap Payroll ultimately discovered through user testing that a guided experience, or contextual tips, yields the best results. And after four rounds of testing at RetailMeNot, we arrived at the same findings.

Contextual Tips in SnapPayroll and RetailMeNot56
Snap Payroll’s contextual tips tested very well with users, as did RetailMeNot’s. (Large preview57)

Familiarity blinds you to what users need to learn. Let users show you themselves through unbiased user testing.

Dive Deeper… Link

(al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/05/smart-responsive-design-patterns-or-when-off-canvas-isnt-good-enough/
  2. 2 https://www.smashingmagazine.com/2012/06/design-patterns-when-breaking-rules-ok/
  3. 3 https://www.smashingmagazine.com/2012/12/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/
  4. 4 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2014/04/1-intuit-test-large-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/04/1-intuit-test-large-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2014/04/2-RetailMeNot-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2014/04/2-RetailMeNot-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2014/04/3-Figure-Portal-large-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/04/3-Figure-Portal-large-opt.jpg
  11. 11 https://www.youtube.com/watch?v=BCPcn-Q5nKE
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/04/4-Figure-Boomerang-large-opt.jpg
  13. 13 https://play.google.com/store/apps/details?id=com.baydin.boomerang&hl=en
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/04/4-Figure-Boomerang-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2014/04/5-Figure-Mailbox-large-opt.png
  16. 16 https://itunes.apple.com/us/app/mailbox/id576502633?mt=8
  17. 17 https://www.youtube.com/watch?v=URd0j5vEsHE
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/04/5-Figure-Mailbox-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2014/04/6-Figure-DigiCal-large-opt.jpg
  20. 20 https://play.google.com/store/apps/details?id=com.digibites.calendar&hl=en
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2014/04/6-Figure-DigiCal-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2014/04/7-Figure-Fantastical-large-opt.png
  23. 23 https://itunes.apple.com/us/app/fantastical-2-calendar-reminders/id718043190?mt=8
  24. 24 https://www.youtube.com/watch?v=e6Q8FbuNwiQ
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2014/04/7-Figure-Fantastical-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2014/04/8-Figure-Catch-large-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2014/04/8-Figure-Catch-large-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2014/04/9-Figure-Clear-preview-opt.jpg
  29. 29 https://itunes.apple.com/us/app/clear-tasks-to-do-list/id493136154?mt=8
  30. 30 https://www.youtube.com/watch?v=v3gGTG003_A
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2014/04/9-Figure-Clear-preview-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2014/04/10-Figure-Dooo-large-opt.png
  33. 33 https://itunes.apple.com/us/app/dooo-to-do-idea-note-christmas/id423785695?mt=8
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2014/04/10-Figure-Dooo-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2014/04/11-Figure-ToDoList-large-opt.png
  36. 36 https://itunes.apple.com/us/app/todoist-to-do-list-task-list/id572688855?mt=8
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2014/04/11-Figure-ToDoList-large-opt.png
  38. 38 http://www.usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2014/04/12-Facebook_paper-large-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2014/04/12-Facebook_paper-large-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2014/04/13-Figure-NBCNews-large-opt.jpg
  42. 42 https://itunes.apple.com/us/app/nbc-news/id319740707?mt=8
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2014/04/13-Figure-NBCNews-large-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2014/04/14-Figure-Flipboard-large-opt.jpg
  45. 45 https://play.google.com/store/apps/details?id=flipboard.app&hl=en
  46. 46 https://itunes.apple.com/us/app/flipboard-your-social-news/id358801284?mt=8
  47. 47 https://www.youtube.com/watch?v=rQASZtuvBCs&feature=youtu.be
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2014/04/14-Figure-Flipboard-large-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2014/04/15-Figure-Polar-DuoLingo-large-opt.jpg
  50. 50 https://itunes.apple.com/us/app/polar/id563322683?mt=8
  51. 51 https://itunes.apple.com/us/app/duolingo-learn-languages-for/id570060128?mt=8
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2014/04/15-Figure-Polar-DuoLingo-large-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2014/04/16-Figure-AnyDo-large-opt.jpg
  54. 54 https://play.google.com/store/apps/details?id=com.anydo
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2014/04/16-Figure-AnyDo-large-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2014/04/17-SnapTax-RMN-contextual-tips-large-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2014/04/17-SnapTax-RMN-contextual-tips-large-opt.jpg
  58. 58 http://shop.oreilly.com/product/0636920029311.do
  59. 59 http://www.yukaichou.com/gamification-examples/experience-phases-game/#.Uzwi0q1dW3s
  60. 60 http://www.yukaichou.com/gamification-study/4-experience-phases-gamification-2-onboarding-phase/
  61. 61 http://www.igamify.com/category/toolkit-gamification-game-mechanics-onboarding-design-game-mechanics
  62. 62 http://www.kryshiggins.com/first-time-user-experiences-in-mobile-apps/

↑ Back to top Tweet itShare on Facebook

Theresa Neil is an internationally recognized UX designer, author and speaker. Her most recent book is the second edition of the Mobile Design Pattern Gallery, O'Reilly Media 2014. Theresa and her team are currently working on a series of sensor based apps. Rich Malley is a freelance interactive writer, humorist and musician living in Austin, TX. A creator of online content for over 15 years, he has been a tireless advocate for users through his work. His client practice focuses on collaborating with UX designers to develop great experiences that meld quality design with smarter semiotics.

  1. 1

    Nice article! If my limited experience in game design has taught me one thing, it is to avoid the use of tutorials whenever possible. My belief is that the highest goal for your application learning curve is to make it intuitive enough to avoid the need for an explicit tutorial or help menu. The application should speak for itself, and if it doesn’t, in many cases this implies that you missed out on a pattern, or made something too complex.

    It can be pretty hard to reach that point, and in many cases the budget will not allow this. At that point, applying your guidelines can be pretty useful to at least reduce the annoyance. After all, the goal of the user tends to be the actual use of the application, not to follow a course on how to use it.

    18
    • 2

      “intuitive” aka “assuming that the user has experience with a pattern that you’re using without you needing to explain your interface.”

      Honestly, all of the best practices outlined in this article are obvious if you design based on experience maps and benefit the user, not your own agenda of what you want the user to do.

      The best designs realize that simplicity encourage use and use encourages loyalty.

      “Use less text” as a rule is silly. How about “use the appropriate amount of text?”

      All of the others are different ways of saying “do the least amount so that the user gets what they want.”

      -11
  2. 5

    Mark F. Simchock

    April 22, 2014 1:11 pm

    re: “When you’re a designer who’s been working on a project for a year or two, it’s very easy to think things are intuitive or obvious that are actually totally incomprehensible.”

    Ooh. Wow. Nice one. Consider it pinned ;)

    Whether we are designers, developers, product managers or marketeers: more of us need to be more aware of this more often.

    And not only does time fatigue better judgement, but it undermines empathy as well. For example, testing something in a calm and distraction-free office is not the same as being the guy / gal (literally) on the street trying to get an app to live up to expectations.

    In short, when you think you have it all figured out, stop and give it to someone who knows nothing. Then shut, step back and start taking notes.

    16
    • 6

      Everyone should adhere to this mindset, well said. This applies to well more than apps, games, and so on. This applies to something even as simple as general business practice. You are not your consumer.

      5
  3. 7

    Andrej Galuf

    April 22, 2014 2:49 pm

    Frankly, if users need a tutorial for an app, then perhaps it`s the app that needs rethinking. Every app – and not just app – should aim for no tutorial needed at all.

    In general, I`d always aim to make the experience as comprehensible as possible, then include a help section for those special cases – not as a lead-in, but as something you can call if and when needed.

    2
    • 8

      I completely agree. I sometimes think that these tutorials on starting a new app (whether it’s simple slides or a ‘game-ified’ version) are almost trying to hard to show how simple their app is. It’s almost a fake chumminess that I generally find unappealing from people, and certainly from software.

      2
    • 10

      Mark F. Simchock

      April 22, 2014 10:27 pm

      Sure, that’s the goal but sometimes it’s not really that simple.

      That aside, it would have nice / helpful if the article touched upon the ill effect of a uber-active development cycle. For example, if the average user uses once a week-ish and updates are daily then that’s seven steps they might have missed. That’s certainly not the same progression the dev team is experiencing.

      1
  4. 11

    Loved your article, user testing is definitely very important.

    However I disagreed on one point:
    “Game designers have always known that you can’t drop new players into the middle of a firefight and expect them to enjoy the experience. Most players would be dead before figuring out how to fire their weapons and fight back.”

    Gamers love being dropped in the middle of a firefight and hate any sort of tutorial. If you have a look at most of the modern shooters this is exactly what they do, drop you into the middle of a firefight. Most shooters have similar controls so you usually pick it up pretty quickly and if you don’t the game will figure out that you aren’t progressing and will offer you unobtrusive tips. There are also always help screens that the user can choose to go to if they so desire.

    1
  5. 12

    Really informative and interesting article and couldn’t have been published at a more relevant time for me.

    2
  6. 13

    Max Abella

    May 1, 2014 5:25 pm

    Smashing people:
    You should add a real SHARE button. I was trying to share this post on twitter, and I was looking for a button on the top of the article.. I dind’t find it. Finally, i found the “button” (an almost invisible text saying “Share on Twitter”). The content is really good, but you should improve sharing so ti can reach more people.
    Suggestions:
    -Add TOP buttons for sharing.. the same at the end of the articles (take a look of how mashable does it)
    -The “Leave a comment” box, should be BEFORE (I had to scroll till the end to find it!)

    Just suggestions, feel free to contact me!
    @max_abella

    0
  7. 14

    rohitkulthia

    May 20, 2014 8:15 am

    Apparently whenever I follow less text, more action gestures(swipe fingers, tap action), I’ve been told to add texts.. more texts.. texts that arrives in excel sheets.

    I agree with Theresa Neils blog post.

    1
  8. 15

    Robin Schwartz

    November 2, 2014 12:24 pm

    I just thought readers of this article might find it helpful to learn about Appsee.com (where I work,) which offers visual analytics for apps so you can actually watch user recordings and see what’s working and what’s not. It’s an incredible opportunity for insight into user behavior so you can know, without a doubt, which patterns work for you.

    2
  9. 17

    Love this article! I agree that user testing is one of the most significant parts of the whole testing process. I’ve read something similar to that article before on the Ubertesters blog. Unlike current article telling us what we SHOULD do, Ubertesters’ article describes three things you should NEVER do. Take a look: http://blog.ubertesters.com/three-deadly-sins-ux-bugs-better-avoid/

    2
  10. 18

    I find this article extremely useful especially for mobile app newbies like me :) I just finished my first mobile app “Crystal Ball Mobile App” with AngularJS and Ionic. Here is a quick tutorial that I wrote:
    http://www.coding-dude.com/wp/mobile-apps/building-a-crystal-ball-mobile-app-with-angularjs-and-ionic/

    1
  11. 19

    Thanks for the read! I liked it, but imo you’re treading on dangerous paths here. You try to steal a pattern from gaming. Coming from the gaming branche I can tell you with 100% confidence that tutorials are the worst thing you can do.

    Someone in the comments already stated that its better to make you’re product intuitive then forcing the user on ‘your’ intended path.

    I also want to note that implementing gamification solutions is something you would want to stay away from.. .like really far. Why? Have you ever heard of a successful gamification implementation, where more than 1% of the exposed audience is actually using it and eventually convert better?

    1

↑ Back to top