rethinking mobile tutorials- which patterns really work
DESCRIPTION
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.TRANSCRIPT
![Page 1: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/1.jpg)
strategy + design
O’Reilly Webcast by Theresa Neil !!Rethinking Mobile Tutorials !Which Patterns Really Work
![Page 2: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/2.jpg)
strategy + design
Mobile Design Pattern Gallery | First Edition 2012
70 patterns across 10 chapters One chapter was devoted to Invitations, or, patterns for driving deeper engagement with your application.
strategy + design
![Page 3: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/3.jpg)
Mobile Design Pattern Gallery | Speaking at Intuit
![Page 4: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/4.jpg)
Mobile Design Pattern Gallery | Speaking at Intuit
![Page 5: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/5.jpg)
strategy + design
Mobile Patterns | Speaking at Intuit
Pattern Failure Alissa stepped us through dialogs, tours, transparencies, and transparency tours for first time through… explaining how each one failed their users.
strategy + design
![Page 6: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/6.jpg)
strategy + design
Mobile Patterns | Speaking at Intuit
Pattern Failure Alissa stepped us through dialogs, tours, transparencies, and transparency tours for first time through… explaining how each one failed their users.
strategy + design
![Page 7: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/7.jpg)
strategy + design
Mobile Patterns | Speaking at Intuit
Pattern Failure Alissa stepped us through dialogs, tours, transparencies, and transparency tours for first time through… explaining how each one failed their users.
strategy + design
![Page 8: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/8.jpg)
strategy + design
Mobile Patterns | Speaking at Intuit
Pattern Failure Alissa stepped us through dialogs, tours, transparencies, and transparency tours for first time through… explaining how each one failed their users.
strategy + design
![Page 9: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/9.jpg)
strategy + design
Mobile Patterns | Designing at RetailMeNot
Pattern Failure Fast forward two years and we try these patterns again, this time including a video demo. But all of these just frustrate our users.
strategy + design
![Page 10: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/10.jpg)
strategy + design
Mobile Patterns | Designing at RetailMeNot
Pattern Failure Fast forward two years and we try these patterns again, this time including a video demo. But all of these just frustrate our users.
strategy + design
![Page 11: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/11.jpg)
strategy + design
Mobile Patterns | Designing at RetailMeNot
Pattern Failure Fast forward two years and we try these patterns again, this time including a video demo. But all of these just frustrate our users.
strategy + design
![Page 12: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/12.jpg)
strategy + design
Mobile Tutorials | Pattern Failure
![Page 13: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/13.jpg)
strategy + design
Mobile Tutorials | Pattern Failure
![Page 14: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/14.jpg)
common practice = best practice
![Page 15: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/15.jpg)
strategy + designstrategy + design
Mobile Tutorials | What Does Work?
Let’s look at game design for best practices in designing tutorials to increase engagement. !Extra Credits’ “Tutorials 101” gives us some basic guidelines.
![Page 16: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/16.jpg)
strategy + design
Show, don’t tell Tutorials should be interactive so that users learn by doing. Boomerang just keeps going and going, eight pages of copy!
Rule #1 | Use Less Text
strategy + design
![Page 17: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/17.jpg)
strategy + design
Show, don’t tell Tutorials should be interactive so that users learn by doing. Mailbox has an interactive tutorial with words of encouragement along the way.
Rule #1 | Use Less Text
strategy + design
https://www.youtube.com/watch?v=URd0j5vEsHE
![Page 18: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/18.jpg)
strategy + design
Show, don’t tell Tutorials should be interactive so that users learn by doing. Digical could learn from Fantastical’s interactive tutorial.
Rule #1 | Use Less Text
strategy + design
![Page 19: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/19.jpg)
strategy + design
Show, don’t tell Tutorials should be interactive so that users learn by doing. Like Mailbox, Fantastical requires your participation first time through.
Rule #1 | Use Less Text
strategy + design
https://www.youtube.com/watch?v=e6Q8FbuNwiQ
![Page 20: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/20.jpg)
strategy + design
Overwhelmed, Under Engaged Provide information in short, easily digestible chunks. Doo has 11 pages of front loaded instructions!
Rule #2 | No Frontloading
strategy + design
![Page 21: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/21.jpg)
strategy + design
Overwhelmed, Under Engaged Provide information in short, easily digestible chunks. ToDoList just gives you tips in the context of a normal workflow.
Rule #2 | No Frontloading
strategy + design
![Page 22: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/22.jpg)
strategy + design
Make deeper engagement rewarding Handwritten font on a transparent overlay is is not actually fun.
Rule #3 | Make It Fun
strategy + design
![Page 23: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/23.jpg)
strategy + design
Make deeper engagement rewarding Flipboard (2013) had a fun playful element on their landing screen that got users used to the swipe gesture the app relies on for navigating content.
Rule #3 | Make It Fun
strategy + design
![Page 24: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/24.jpg)
strategy + design
If not fun, at least make it rewarding Provide interactivity that enables the user to actually accomplish things. Vine helps you make your first video during the tutorial.
Rule #3 | Make It Fun
strategy + design
![Page 25: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/25.jpg)
strategy + design
Reinforcement takes care of itself… By following the first three rules. Ex. Give new tips once an action is mastered (Polar) or try an even more structured gamification model (DuoLingo).
Rule #4 | Reinforce Learning
strategy + design
![Page 26: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/26.jpg)
strategy + design
Visual Feedback & Praise AnyDo shows the tasks marked off with a strike though, just like in the tutorial. And occasionally I get a surprise for getting all my tasks done.
Rule #4 | Reinforce Learning
strategy + design
![Page 27: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/27.jpg)
strategy + design
Where do they get stuck? 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,
Rule #5 | Listen to Your Users
strategy + design
![Page 28: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/28.jpg)
strategy + design
Contextual Tips User testing showed that providing tips at the right time drove deeper user engagement with their applications.
Mobile Tutorials | What Worked for Intuit and RetailMeNot?
strategy + design
![Page 29: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/29.jpg)
Frequently Asked Questions
![Page 30: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/30.jpg)
strategy + design
FAQ | Tutorials vs Onboarding
Personalizing an experience is different than… Trying to teach someone how to use your app. This example from Beats Music is a good example of Registration + Personalization (Chapter 2:Forms).
strategy + design
![Page 31: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/31.jpg)
strategy + design
FAQ | Tutorials vs Product Tours
Highlighting your value proposition is different than… Trying to teach someone how to use your app. But, make sure to test, keep the copy brief, and offer an option to skip. Behance (good), Reporter (bad).
strategy + design
![Page 32: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/32.jpg)
strategy + design
FAQ | Tutorials vs Product Tours
Highlighting your value proposition is different than… Trying to teach someone how to use your app. But, make sure to test, keep the copy brief, and offer an option to skip. Behance (good), Reporter (bad).
strategy + design
![Page 33: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/33.jpg)
strategy + design
FAQ | Tutorials vs Help
You can still offer help Some mobile apps, specifically productivity tools and BtoB apps, may require a Help System too (see Chapter 10:Help). Flava does a nice job with theirs.
strategy + design
![Page 34: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/34.jpg)
strategy + design
FAQ | Tutorials vs Guided Experience
Same thing Just different terminology, the same rules apply to both. To read a bit more on the user testing of Facebook’s Paper app, check out this article.
strategy + design
![Page 35: Rethinking Mobile Tutorials- Which Patterns Really Work](https://reader033.vdocuments.net/reader033/viewer/2022052820/547e462fb47959c0508b4b27/html5/thumbnails/35.jpg)
Follow me on twitter @theresaneil
Buy my new book !50% off eBook 40% off book !Use code AUTHD