Gamification: does it actually better user experience?

In recent years, the practice of applying game-design elements in non-game contexts (Gamification) has become a heated topic. It attracts many scholars and designers because the gaming industry possesses an extremely engaged audience. While gamification benefits some products’ marketing performance, the problems of its implementation are gradually appearing.

Gamification is nothing new. The term was coined early in 2002 by Nick Pelling, a computer programmer, but did not gain its popularity until the 2010s. Its rapidly-increasing popularity and massive implementation might be relevant to the publication of ‘Reality is Broken’ in 2011. When I did research on the topic, this book was mentioned in many articles as a theoretical basis for gamification. The author, Jane McGonigal, is a game designer, advocating the use of game designs to improve real life and solve real problems. Her explanation of the efficiency of game mechanisms convinced me that game-design elements can better the practices of user experience and usability by provoking positive emotions.

Figure 1. the book ‘Reality is Broken’

Take the use of rewards as an example. This is one of the most common gamification strategies applied to engage users. This method injects enjoyment into otherwise dull, difficult tasks, and gives extrinsic motivation to encourage people to complete tasks. In fact, the action of receiving rewards creates a shot of dopamine, making people feel fulfilled and happy.

Figure 2. Comic teasing about rewards system

I personally enjoy StackOverflow’s badge system. It makes me feel recognized, which encourages me to ask questions and give good answers.

Figure 3. example of StackOverflow’s badge system

Besides generating feelings of enjoyment, gamification also can improve the ease of use by enhancing feedback. Without a doubt, feedback is an important element in all kinds of design. Nevertheless, not all interfaces provide adequate or satisfactory feedback. While a game design, at least a good game design, often provides constructive and helpful feedback to our actions. As a senior video game player, I always know what to do with a strong sense of control in a game due to the instant visual feedbacks. Hence it would be useful to learn how feedback was delivered in a game.

Figure 4. Interface of game Taiko no Tatsujin, showing the combo number and accuracy

However, not all products can benefit from gamification. In a debate-style session discussing the pros and cons of gamification in 2011, panelists including game designers and developers agreed that, in some cases, the disappearance of gamification will be a good thing. Based on my personal experience, I agree that gamification is poorly implemented or overused in some cases, which negatively affects the user’s experience.

Sometimes, the game-design elements can lead to unintended behavior. The app ‘Forest’ claimed to help people stay away from their phones and stay focused on their work. The user ‘plants a tree’ in this app each time he wants to work. If he tries to use other apps and quit the ‘Forest’ app, the tree dies. But I could not focus on my work. Instead, I stared at the little virtual tree for almost the whole session because I was so distracted by it.

Figure 5. Planting a tree in Forest app

Worse still, gamification can even result in unethical behavior. ‘Keep’ is a popular fitness app in China. It is gamified using badges system and a leaderboard to encourage users to compete with each other. The rule is very simple: the more you train, the higher your rank is. My friend’s brother, however, does not want to spend that much effort. So he cheated by tying his phone to his dog during the running session!

Figure 6. The leaderboard of the app ‘Keep’, ranking according to the amount of training

It is interesting to notice that the two failure stories are about experience outside the digital interface. Maybe this type of products needs different gamification strategies, or no gamification at all. I believe that gamification as a tool should be implemented differently case by case.

In conclusion, gamification is a powerful yet not well-developed concept. It needs further exploration and improvement. Here, I sincerely invite you, dear readers, to join the discussion of gamification, to think how to better the practice, and ultimately use it in order to benefit our users.


Design Critique: Tayasui Sketches Pro (iPad app)

Tayasui Sketches is a sketching app designed for mobile devices. It allows professionals and non-professionals to create digital illustrations through traditional drawing experience. By providing a set of realistic digital drawing tools and advanced features (e.g. layers), it greatly meets basic requirements for creating illustrations while giving more capabilities to users.

Figure 1: showing layer selection

Figure 2: showing auto-save functionality

Finding #1: Auto-save while changing layer is used as an interlock to prevent users from exiting the drawing field or the app intentionally or unintentionally without saving the file. Such a feature is efficient and effective for file safety. Changing from one one to another each time is followed by a ‘save’ feedback showing in the center of the field. The feedback provides abundant information, indicating that not only is the file being saved but also that the other layer has been selected.
However, such an auto-save function can sometimes be disruptive if users keep changing layers constantly. The saving process comes along with a short but interrupting pause, during which users cannot work in the field.

Figure 3: Example of auto-save feedback

Recommendation #1: Feedback should not be disturbing or distracting but informative. “Feedback is essential, but not when it gets in the way of other things…” (Norman, 2013). So it should allow users to draw during the saving process. The ‘Save’ sign should display in the top right corner informing users that the saving process is underway without blocking the user’s view.

Figure 4: showing brush editor and previewing area

Figure 5: Showing brush editor and previewing area when zooming in the illustration field

Finding #2: The Brush Editor, a function for adjusting the size and opacity of brush tips, effectively uses natural mapping by applying vertical bars—sliding up increases tip size, and sliding down decreases tip size. While adjusting the brush sizing, a square area appears for previewing tip size as well as opacity, which gives immediate feedback of adjustment.
But the size previewing is not representative of adjusted tip size when zooming in the illustration field. The sizing preview shows the tip size relative to the default illustration field size instead of the zoomed-in screen size, which leads to an inaccurate conceptual model, as users may assume that the preview shows the effect of resizing on the screen. Even users possess the right conceptual model, they can still hardly determine if the results meet their expectations and possibly need to make adjustments for a few more times. All of these lead to increasing the gulf of evaluation.

Figure 6: Example of size previewing

Recommendation #2: While zooming in the illustration field, the size preview should also scale according to the proportions of the field. In order to cater to the need of seeing the ‘actual’ tip size relative to the whole field, a dot can be placed next to the pixel value representing the ‘actual size’.

Figure 7: Selected tools turned to red, and zigzag lines created by using the ruler

Finding #3: The graphic ruler signifies that its affordance is to draw straight lines. When selected, the graphic ruler changes to red, which is immediate and obvious feedback of tool selection. But it does not communicate its constraint that the ruler can only afford drawing horizontal, vertical, and 45-degree diagonal straight lines, which leads to frustrating errors—users may keep trying to draw a straight line in a different direction, but this effort results in either nothing or a horizontal/vertical/45-degree diagonal line. Such a wrong conceptual model is led by the convention formed when people use rulers in daily life, bringing knowledge-based mistakes and increasing the gulf of execution.

Figure 8: Example of a virtual ruler appearing on the illustration field

Recommendation #3: “One way of overcoming the fear of the new is to make it look like the old.” (Norman, 2013) Skeuomorphic can be applied to enhance the ease of use by using existing conceptual model. So a virtual ruler could appear on the screen, and can be rotated 360 degrees freely. Drawing a straight line would be performed by drawing along the edge of the ruler. The degree of angle would be displayed on the ruler, giving precise feedback on rotating.