How to represent user progress visually in games [TATT #30]

the acagamic tip tuesday Sep 13, 2022
A screenshot of the world map of angry birds compared with a screenshot of the Starbucks rewards app.

In today's issue, I'll show you how to design engagement in video games so you can create a more engaging UX for your game under development.

In today's newsletter, we will break down how to represent user progress in games and gameful apps visually.

Visualizing how much progress you make in anything can be highly motivating. Without visualization, your brain has a hard time processing the achievements you have made within parameters. You can expect that visualizing your progress will accelerate your engagement.

Unfortunately, many junior game designers are unaware of the power of visualizing player progress because they are used to measuring progress in points and stats.

Represent user progress in games or gameful apps visually: World maps or sequence overviews with clear thresholds of what has been achieved and what can be achieved are essential to visually player progress.

Visualizing user progress in games has the power to strongly motivate people to achieve goals and continue to make progress

If you are not visualizing player progress, it becomes difficult to keep track of

  • current status/unlocks/privileges
  • future status/unlocks/privileges
  • comparing different paths to adjacent goals
  • understanding the underlying game rules

All of this can be overcome by visualizing player progress accurately for your players.

Here are the steps you should follow.

Draw a visual path that connects the past progress of the player to future achievements

Knowing where you've been is as important as knowing where you can go. This can be a topographic map as in the image above. Or a simple linear progression we find in my many loyalty apps with the steps of getting rewards outlined.

Take, for example, the Starbucks app that precisely maps your spending to how many stars you have in their loyalty program. You know how many stars you have and how many stars you need for possible future purchases.

Highlight the taken path, the you-are-here point, and the path ahead

Many game designers only visualize the past progress of a player with unknown future unlocks (sometimes only locks that players can see). This has a diminishing effect. It is more powerful to show players where they are and what future rewards and locations are available to them.

Provide clues to players so that they know what actions they need to take to achieve the next level or reach the next stage in your world or your tier system.

A long path represents a lasting relationship between your game and the player

When you put it all together, visualizing progress along a path for your player/user is highly motivational because it makes them feel positive about their achievements and helps them set goals for achieving other things in the game. This works the same way for fitness trackers and loyalty programs.

Besides the increased motivation, the visualization also serves as a reminder of time spent with the game or application. Over time, it can become a representation of the relationship players have with the game and shows that the game cares about visualizing this relationship.

Finally, this allows players to discover the hidden paths and additional progression rules embedded in the game within an informal user interface element.

UX Research App of the Week: UXTweak

UXTweak is a user research platform that allows you to run the following types of tests: Card Sorting, Tree Testing, Preference Test, Five-Second Test, Survey, Session Recording, Mobile Testing, First-Click Test, Prototype Testing, and general Website Testing. While they have different plans that scale differently, I like that they have a free tier available as well.

Games Research Find of the Week

 In this study of casual games, the authors conducted a content analysis of 22 most popular and top-ranked games' mechanics to find the ones best suited for brief daily play session (game snacking). Their analysis included play testing, watching play videos online, and analyzing critic's and player's reviews. They identified 5 single-player game mechanics: Instant Rewards, Novelty, Mission Completion, Waiting, and Blocking. Here are the definition of those 5 mechanics:

  • Instant rewards: rewards or achievements given to the player immediately after completing a game action
  • Novelty: Introducing new in-game elements like items, mechanics, assets, environments, or goals.
  • Mission completion: Completing, for example, explicitly assigned tasks, quests, or goals, players receive in-game rewards and feel achievement and positive about the game.
  • Waiting: Requiring time to pass for producing or harvesting game resources.
  • Blocking: Passively regenerating resources that players need to continue playing.

They also developed a game (Game of Cannons) to test out these 5 mechanics and identified that novelty and waiting might be most suited for game snacking. 

Read the full study: Dmitry Alexandrovsky, Maximilian Achim Friehs, Max V. Birk, Rowan K. Yates, and Regan L. Mandryk. 2019. Game Dynamics that Support Snacking, not Feasting. In Proceedings of the Annual Symposium on Computer-Human Interaction in Play (CHI PLAY '19). Association for Computing Machinery, New York, NY, USA, 573–588. 

Join UX rockstars learning about games, research, and writing

Each Tuesday, I will send you tips for UX in game research and design. And once a month, I will send you emails about academic writing.

No hassle, no selling your information, no spam. You can unsubscribe anytime.