The Acagamic Tip Tuesday #19: Demonstrate Player Actions with UI Animations

This is republished from my newsletter on my homepage.

In today’s issue of The Acagamic Tip Tuesday, we learn that UI animation can trigger player behaviour through the chameleon effect. You do what you see. And an easy way to trigger action is through the animation of interface elements. This will only take a few minutes to read.

Game UX Tip of the Week

Demonstrate Player Actions with UI Animations: When you want the player to take a specific action (pressing a button or moving the controller), demonstrate the action you wish the player to take with a brief UI animation.

Often games feature moments when they need to instruct the player to take certain actions that the player has either not taken before or does not take very often. To indicate the action necessary, games often use UI elements like button icons and arrows to indicate direction and button presses for the player.

The new Apple Arcade game Cooking Mama: Cuisine provides detailed interaction instructions to the player whenever new or different player actions are necessary. The actions are usually button clicks (or taps) and mouse moves (or swipes) in a certain direction.

In my other example, in Uncharted 4, the designers want players to take rapid button pressing actions, so they play a triangle button press animation until the player takes action, at which stage the triangle-button-press-animation begins to accelerate to indicate quicker presses. The player dynamically adapts to the animation.

Both of these are great examples of games providing visual cues and animations to incentivize players to take action on their controllers that they might not be sure about or aware of yet. This is even more effective if the game manages to demonstrate the required action (e.g., controller shake) so that users can tap into the chameleon effect (see below) and just imitate the action for the first time.

UX Links

• UX Design Psychology Tricks for Design Excellence
• The Role of Animation and Motion in UX
• Animation Principles for UX and UI designers

Focus: Cognitive Psychology

There are 1,000+ theories in psychology. But 99.9% of them don’t make you a better UX designer, researcher, and strategist. The following 5 theories will be highly useful to your UX work:

Retention Theory

Your ability to remember things later in the same way it was presented during instruction.

Use to identify:

• How much information can be consumed
• How long it takes to consume it
• What obstructs retention

Google Ebbinghaus forgetting curve as well.

Serial-Position Effect

People tend to recollect only the first (primacy effect) and last items (recency effect) in a sequence of similar items.

Use to:

• Choose the right item progression
• Highlight unnoticed items by moving them first or last
• Provide optional information in the middle of a sequence

Hick–Hyman Law

The more choices are available for a person, the longer it will take them to make a decision. Progressive disclosure makes use of this by only presenting relevant choice items at a time.

Use to:

• Build easier menu navigation
• Keep it short and simple
• Simplify not eliminate decisions

Schema Theory

Our brain organizes knowledge into meaningful units or schemata. They develop and grow throughout your life to help you organize actions and solve problems.

Use to:

• Understand mental models
• Create event sequences and scripts
• Improve recall and responses

Chameleon Effect

You unknowingly mimic other people’s behaviour, imitating physical and speech expressions. It helps you adapt and build rapport.

Use to:

• Encourage user actions
• Contextualize error messages
• Onboard and teach interactions

Summary of these 5 cognitive psychology theories useful for UX

1. Retention Theory → Remember what’s repeated/meaningful
2. Serial-Position Effect → Recall the first & last item
3. Hick–Hyman Law → Less is more
4. Schema Theory → Build mental models
5. Chameleon Effect → You do what you see

Both UX and cognitive psychology try to reveal human cognition patterns, decision-making processes, and people’s needs. Knowing a little bit about people’s minds will make you a better designer.

UX Research App of the Week: G*Power

We (the HCI Games Group at the University of Waterloo) recently did a little research tutorial within our research group about hypothesis testing and how important it is to conduct a power analysis so that your statistical tests are valid. Here is the excellent presentation from our postdoc Dr. Max Altmeyer about hypothesis testing if you are interested in the full tutorial for free.

The UX tool I want to highlight this week is called G*Power though. It is a free tool that you can use to determine the sample size you need for your research, given your desired significance level and effect size (and inferential statistical approach). For people doing academic research in UX, it is becoming much more common to pre-determine the sample size using this approach. I would recommend the same for quantitative UX industry studies.

Games Research Find of the Week

In this CHI 2011 paper, Harrison et al. formalized the scope and utility of an approach called Kineticons, which introduced motion patterns (change in form and location over time) to identify different icon utilities, which they evaluated in a study with 200 people.

Kineticons are versatile because they can be applied to almost all different graphical styles and work in harmony with other dynamic elements of an interface. We also naturally understand motion concepts like mass, rigidity, and inertia.

The paper introduced 3 interaction classes: (1) the GUI element state, (2) state changes, and (3) fail/success events. They designed 39 different animations (for a full list, see Figure 5 in the paper and check the video below).

Two iconic motions that they found (among others with connotations) were the “heartbeat” animation for a “needs attention” state and the “running” animation to indicate that an icon is movable.

Read the full study:

Chris Harrison, Gary Hsieh, Karl D.D. Willis, Jodi Forlizzi, and Scott E. Hudson. 2011. Kineticons: using iconographic motion in graphical user interface design. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ‘11). Association for Computing Machinery, New York, NY, USA, 1999–2008. https://doi.org/10.1145/1978942.1979232