A Gamified Tutorial for Mobile App
Literature Research and Conceptual Design
Affiliated Course
HCI 596
Research Capstone
Instructor
Adam Steele
Date
April - May 2018
Abstract
The tutorial, also known as an on-boarding page, has been widely applied in most mobile applications. Unfortunately, users always consider it as a useless design and not willing to spend time on the tutorial. This literature research summarized the common-used mobile app tutorial and introduced a new perspective of gamified design to improve the tutorial's engagement. A mid-fi prototype was presented to illustrate the concept.
Introduction of Tutorial
Analytics research by Localytics shows that 26% mobile users will not be back to the app after the first time and another 26% users will become loyal customers using the app for more than ten times [1]. Therefore, the first-time user experience has been considered more valued recently in the design of mobile apps. Moreover, people use their phones in short time sessions generally, the function must be bite-sized to let users jump into [2].
The tutorial not only tells users how to use functions at the first time but also undertakes the responsibility of attracting users' attention. However, most designers devoted much effort to the functional design and ignored the tutorial. Novick et al.'s study shows that people do not like read the manual [3], new users usually skip the tutorial just repeatedly clicking the next button without hesitation. For these reasons, how to improve users' engagement in tutorial instead of roughly skipping it, thus making it truly useful is what we discussed in this study.
Classification of Tutorial
It’s consisted of many mini-tutorials which are hovered on UI elements to let users know what functions these bear.
Advantages
-
Immediately enter the homepage
-
Directly experience the full product
-
Easy to remember
-
Disappeared after responding
Disadvantages
-
Heavily rely on the path of exploration
-
Un-skippable
It’s embedded into surrounding environments on the user interface allowing users to explore the app without pop-up guidance.
Advantages
-
Seamlessly, peaceful, lightweight guidance
-
Widely applied on sketching and note-taking app
Disadvantages
-
Too gentle and too quiet
-
Cannot make all of new users noticed
Also known as coach-marks, a translucent overlay over the interface using arrows and text to explain functions.
Disadvantages
-
Too many coach-marks increase users’ cognitive load
-
The overlay prevents users from entering the homepage, users usually skip.
It creates a closed safe environment to instruct users how to interact with the app, users may enter the homepage once finishing the tutorial, it’s widely used in mobile games.
Disadvantages
-
Time-consuming, un-skippable
The most frequently used tutorial in mobile apps, it contains a set of static pictures to guide users interact with the app or a series of interactive steps to assist users in initializing the app. Easy to design.
Disadvantages
-
Users easily get overwhelmed with too many steps
Introduction of Gamification
Gamification is the use of game design elements in non-game contexts, these elements are characteristics to games [4]. Any applications, tasks, and process can theoretically be gamified [5]. The goal of gamification in digital products is to increase engagement and have a better user experience.
Gamified Design Examples
Pain Squad is a mobile app which has been designed for kids to fight with cancer, it allows kids to act as police officers to conquer missions and get rewards in a virtual environment by keeping record their pains twice a day for two weeks [6].
GamiCAD designed by Li et al., a gamified tutorial system to guide new users to learn basic tools and commands in AutoCAD with real-time feedback and intensive background music. The result shows that the gamified tutorial can significantly increase the learning engagement, users who have been trained by gamified tutorial can finish the evaluation test more quickly and precisely compared to the original one [7].
Gaming Elements
Deterding et al. elaborated that the gamification can be implemented into five aspects, interface design patterns, design mechanics, design principles, design methods, and game models. Traditionally, what we thought of gaming elements are concrete figures such as badges, leaderboard, and level bar. However, based on Deterding's statement, gaming elements also contain abstract presentations included time constraint, challenges, and charity [4].
Furthermore, Malone outlined the general heuristics framework of enjoyable computer games’ interfaces’ design are based on three categories, challenge, fantasy, and curiosity, each category has two gaming elements. Goal and uncertain outcome for challenge, emotionally appeal and metaphor for fantasy, optimal complexity and knowledge structure for curiosity [8]. This study adopted Malone’s framework and selected some gaming elements into the mobile app tutorial which included:
Goal
The goal in the mobile app is for letting new users immerse in the tutorial and attracting them to complete the whole steps without any frustration.
Metaphor
Integrating some visual presentations such as badges or stars in the tutorial to enhance the gaming emotional appeal
Time Pressure
Timing is a critical gaming element in competitive games, which is used for enhancing the intensive feeling, creating an immersive environment, evaluating users’ mastery of the task.
Stimuli
Using the vibrating system and built-in loudspeaker in smartphones keeps users engaged in the tutorial.
Feedback
It can be immediately conveyed by audio and visual signals to make users alter actions.
Rewards
A virtual reward can give users the motivation to complete the tutorial.
Limitation
The gamification example GamiCAD was designed highly visually and comprehensively which aims to make tedious learning steps more enjoyable with appealing fantasy. However, due to inherent constraints, people usually use a mobile phone in short sessions with one single window visible at one time, the app tutorial cannot hold too many gaming elements. If applying gamified design into an app tutorial, it should be a bite-sized task, easy to cognize.
Methodology
Subject Selection
This study selected the Clear, a task management app on the iOS platform, as an experimental subject. Its’ user interface is extremely simple, there is no icons or buttons, all functions can only be achieved by 7 gestures included tap and hold, pinch together, pinch apart, swipe left, swipe right, drag down, tap to edit. This kind of minimalist design dedicates to create a highly productive and noiseless working environment for the user. However, the Clear used 8 screens' pictures with brief text to guide users on how using gestures to interact with the app. As mentioned above, users do not like reading the manual. Most users want to experience the app's functions as soon as possible and get tired of reading the textbook-like tutorial from one app to the other.
If users skip the Clear’s tutorial and directly jump into the homepage, they could be confused and do not know what to do, because there is no buttons or icons which users are familiar with. In other words, suddenly exposing in the unknown environment significantly increases users’ a sense of frustration, the result of this situation is that most users will never come back to the Clear.
Game Mechanism
Here is the list of the Clear’s tutorial. 8 guidance has been dissembled into two categories, commands and outcomes. Commands can be referred to as specific gestures for achieving functions, Outcomes can be referred to as relevant functions achieved by gestures. This study adopted “Quiz” as the game mechanism, quiz’s questions are from outcomes, answers are from commands. When new users start with the gamified tutorial, the short animation will demonstrate the gesture, users have to select the correct answer represented the demo from three options to continue the quiz until the end. This study selected 4 questions in the gamified tutorial.
In each of the questions, users watch the animation to learn how to interact with the interface by a specific gesture. Then, they have to translate the animation in their mind for selecting the right answer. These processes enhance the short-term memory, users will interact with the UI more easily at the first time after entering the homepage.
Gamified Design
Welcome Page
With the purpose of motivating new users to be engaged with the gamified tutorial, the reward must be told to new users on the welcome page. The reward has been designed as a free one-month membership. However, the Clear is a one-time-payment app, even though a free one-month membership could be an inappropriate example, the design is just for highlighting the reward as a kind of important external stimulus.
The welcome page did not use any words like “tutorial”, “guidance” or “manual” BUT “tutorial game”, which aims to intrigue new users’ the interest to get involved. Also, users can skip the quiz anytime.
Quiz Page
Scoring
Three starts have been added on the top of quiz page alone with a score. Stars are considered as an iconic visual gaming element in computer games and represent a kind of achievement. This design can motivate new users to keep going with the goal and get the final reward.
Timing
Time pressure is an essential part of creating an immersive environment as well as urge users to concentrate on the game. Information processing is very fast in the human brain, too much time for each question cannot attract users' attention, as well as, too many questions can increase the length of the tutorial, users may lose patience. Therefore, each question is given 3 seconds to respond. Total quiz’s length is 12 seconds.
Feedback
Feedback has never been integrated into the mobile app tutorial but widely used in video games. In this study, real-time feedback indicates users select a wrong answer by vibrating the phone. however, it is totally a concept and cannot be shown on the lo-fi prototype.
Ending Page
Badge continually enhances the gamified design of the tutorial. It also represents an achievement or an honor but greater than a star. A badge shown at the end can be regarded as a spiritual reward to appreciate users’ patience for finishing the tutorial. Meanwhile, “the game trophy” also be recalled.
Conclusion
This study took the Clear - a task management app - as the example shown a new conceptual method of designing a mobile app tutorial to enhance the first-time experience and improve the utilization of tutorial. In the further study, the gamified tutorial will be implemented for conducting usability tests. A quantitative research should be involved to indicate whether there is a statistical difference between two tutorials.
References
[1] Bernd Leger. Localytics Blog. 26% of Mobile Application Users are Fickle — or Loyal. 2011. Retrieved from http://info.localytics.com/blog/26percent-of-mobile-app-users-are-either-fickle-or-loyal
[2] Krystal Higgins. First time user experiences in mobile apps. 2012. Retrieved from http://www.kryshiggins.com/first-time-user-experiences-in-mobile-apps/
[3] David G. Novick and Karen Ward. 2006. Why don't people read the manual? In Proceedings of the 24th annual ACM international conference on Design of communication (SIGDOC '06). ACM, New York, NY, USA, 11-18.
[4] Sebastian Deterding, Dan Dixon, Rilla Khaled, and Lennart Nacke. 2011. From game design elements to gamefulness: defining "gamification". In Proceedings of the 15th International Academic MindTrek Conference: Envisioning Future Media Environments (MindTrek '11). ACM, New York, NY, USA, 9-15.
[5] Cristina Ioana Muntean. 2011. Raising engagement in e-learning through gamification. Proceedings of the 6th International Conference on Virtual Learning ICVL 2011.
[6] Yu-kai Chou. The 10 best social products that use Gamification to literally save the world. Retrieved from http://yukaichou.com/gamification-examples/top-10-gamification-examples-human-race/#.WvynLdPwYmI
[7] Wei Li, Tovi Grossman, and George Fitzmaurice. 2012. GamiCAD: a gamified tutorial system for first time autocad users. In Proceedings of the 25th annual ACM symposium on User interface software and technology (UIST '12). ACM, New York, NY, USA, 103-112.
[8] Thomas W. Malone. 1982. Heuristics for designing enjoyable user interfaces: Lessons from computer games. In Proceedings of the 1982 Conference on Human Factors in Computing Systems (CHI '82). ACM, New York, NY, USA, 63-68.
Reflection
This paper was written in April 2018, a final project of a 500-level course. For establishing the portfolio, I rephrased the paper making it concise and comprehensive. While rephrasing, many problems came to my mind and I realized that my work was far from the real research, no enough theoretical basis, references which been selected tend to the benefit of this work, no interview for inquiring users’ attitude toward the app tutorial. This project is only a simply try of doing literature research, but it gives me a lesson “I must not act on assumptions, I should be rigorous and consider every detail of the research. Making it truly valuable for the UX area.”
