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.

1. O’Reilly Webcast by Theresa Neil
!!
Rethinking Mobile Tutorials
!
Which Patterns Really Work
strategy + design

2. Mobile Design Pattern Gallery | First Edition 2012
strategy + design
70 patterns across 10 chapters
One chapter was devoted to Invitations, or, patterns for driving deeper
engagement with your application.
strategy + design

3. Mobile Design Pattern Gallery | Speaking at Intuit

4. Mobile Design Pattern Gallery | Speaking at Intuit

5. Mobile Patterns | Speaking at Intuit
strategy + design
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

6. Mobile Patterns | Speaking at Intuit
strategy + design
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

7. Mobile Patterns | Speaking at Intuit
strategy + design
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

8. Mobile Patterns | Speaking at Intuit
strategy + design
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

9. Mobile Patterns | Designing at RetailMeNot
strategy + design
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

10. Mobile Patterns | Designing at RetailMeNot
strategy + design
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

11. Mobile Patterns | Designing at RetailMeNot
strategy + design
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

12. Mobile Tutorials | Pattern Failure
strategy + design

13. Mobile Tutorials | Pattern Failure
strategy + design

14. common practice = best practice

15. Mobile Tutorials | What Does Work?
ssttrraatteeggyy ++ ddeessiiggnn
Let’s look at game design for best
practices in designing tutorials to
increase engagement.
!
Extra Credits’ “Tutorials 101” gives
us some basic guidelines.

16. Rule #1 | Use Less Text
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!
strategy + design

17. Rule #1 | Use Less Text
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.
strategy + design
https://www.youtube.com/watch?v=URd0j5vEsHE

18. Rule #1 | Use Less Text
strategy + design
Show, don’t tell
Tutorials should be interactive so that users learn by doing. Digical could learn
from Fantastical’s interactive tutorial.
strategy + design

19. Rule #1 | Use Less Text
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.
strategy + design
https://www.youtube.com/watch?v=e6Q8FbuNwiQ

20. Rule #2 | No Frontloading
strategy + design
Overwhelmed, Under Engaged
Provide information in short, easily digestible chunks. Doo has 11 pages of front
loaded instructions!
strategy + design

21. Rule #2 | No Frontloading
strategy + design
Overwhelmed, Under Engaged
Provide information in short, easily digestible chunks. ToDoList just gives you
tips in the context of a normal workflow.
strategy + design

22. Rule #3 | Make It Fun
strategy + design
Make deeper engagement rewarding
Handwritten font on a transparent overlay is is not actually fun.
strategy + design

23. Rule #3 | Make It Fun
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.
strategy + design

24. Rule #3 | Make It Fun
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.
strategy + design

25. Rule #4 | Reinforce Learning
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).
strategy + design

26. Rule #4 | Reinforce Learning
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.
strategy + design

27. Rule #5 | Listen to Your Users
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,
strategy + design

28. Mobile Tutorials | What Worked for Intuit and RetailMeNot?
strategy + design
Contextual Tips
User testing showed that providing tips at the right time drove deeper user
engagement with their applications.
strategy + design

29. Frequently Asked Questions

30. FAQ | Tutorials vs Onboarding
strategy + design
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

31. FAQ | Tutorials vs Product Tours
strategy + design
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

32. FAQ | Tutorials vs Product Tours
strategy + design
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

33. FAQ | Tutorials vs Help
strategy + design
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

34. FAQ | Tutorials vs Guided Experience
strategy + design
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

35. Follow me on twitter @theresaneil
Buy my new book
!
50% off eBook
40% off book
!
Use code AUTHD