Rethinking Mobile Tutorials: Which Patterns Really Work?

Advertisement

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.

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 product1
Some of the test concepts from Intuit’s Snap Payroll tutorial (from “Dialog, How It Works, Transparency and Tour”) (Large preview2)

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 RetailMeNot3
Some of the test concepts for RetailMeNot’s tutorial: transparency, video demo, three-step tour (Large preview4)

Why Do These Patterns Fail?

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 Portal5
Portal offers a safe environment for players to figure out the controls while advancing in the game. (Large preview6)

Extra Credits’ online video series thoughtfully looks at various aspects of the gaming world from an insider’s perspective. “Tutorials 1017” 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

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

Boomerang for Android8
Boomerang9 for Android has too much text (see also rule 2: “No Frontloading”). (Large preview10)

Mailbox for iOS11
Mailbox12 for iOS’ tutorial text encourages the user to learn by doing. (See video13) (Large preview14)

DigiCal vs. Fantastical

DigiCal for Android15
In DigiCal16 for Android, the text is abstracted from the activities it describes. (Large preview17)

Fantastical for iOS18
In Fantastical19 for iOS, the tutorial invites the user to work through the gestures that they need to learn. (See video20) (Large preview21)

Catch (2013) vs. Clear

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

Clear for iOS24
In Clear for iOS25, the default view is preloaded with tasks that the user learns by doing. (See video26) (Large preview27)

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

“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

Dooo28
Dooo29 for iOS’ frontloaded information goes on and on for an overwhelming 11 pages. (Large preview30)

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

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

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

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

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)

NBC News37
NBC News38 for iOS has a playful font, but the long lecture isn’t rewarding. (Large preview39)

Flipboard40
Flipboard for Android41 and iOS42 embeds playful prompts to engage the user and reinforce the key gestures needed to navigate the app. (See video43) (Large preview44)

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

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 Duolingo45
Polar46 offers a tip to power users after a few polls have been answered. Duolingo47 users earn rewards and level-ups by mastering skills. (Large preview48)

Any.do49
Any.do50 puts a widget on Android’s home screen to encourage engagement and offer spontaneous rewards. (Large preview51)

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

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 RetailMeNot52
Snap Payroll’s contextual tips tested very well with users, as did RetailMeNot’s. (Large preview53)

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

Dive Deeper…

(al, il)

Footnotes

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

↑ Back to topShare on Twitter

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.

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

    16
    • 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.”

      -7
  2. 4

    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.

    13
    • 5

      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.

      3
  3. 6

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

      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
    • 9

      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.

      0
  4. 10

    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.

    3
  5. 11

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

    2
  6. 12

    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

    -1
  7. 13

    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.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top