In the design of games for learning, graphics and communication elements can be part of the game’s virtual interface, standing as a core element for players' experience. Through a game's visual graphics, the design team can articulate intuitive and engaging gameplay, as well as explore ways to facilitate and improve content learning. Clark & Lyons identified some psychological events that can enhance content learning (2011). Below we present these events, showing some examples on how our team articulated these strategies in educational games.
Enhance learning with visual representation
Developers can use visual and graphic elements in educational games to direct the learner's attention to important information in game content and facilitate their understanding of concepts, theories and procedures.
For example, in our Math Snacks game Monster School Bus the player's goal is to fill up the school bus with monster kids from various neighborhoods and to deliver them to the school in as few busloads as possible. The player is the driver of the bus and must decide on the best route to use to pick up the children in order to make full bus loads (for example, pick up seven kids from one bus stop and three from another bus stop to complete a full load). To support learners' understanding of the base ten concept, the game uses visual representations. When players pick up monster kids, the interface represents with simple geometric shapes how many seats were used by each group of monsters. Players can also see an overhead view of the bus with monster kids seated in the bus (Figure 1). As the game progresses, new monster kids are introduced into the gameplay signifying different values and representations (fractions and decimals). The graphic elements from Monster School Bus allow players to visualize grouping, specifically in groups of ten, with whole numbers and decimals.
In this game, graphics do more than set a theme; they visually express multiple ways to think about the number “10,” including representations using numerals, fractions, and individual parts. When half size aliens are shown, they are half the size, reinforcing the concept of what the fraction means.
Stimulate content learning
Game mechanics and graphic expression can help players to build new mental models, stimulating the connection between their existing knowledge and new content encountered during gameplay. For example, in our game Curse Reverse the goal is to help players to explore fundamental algebraic expressions. Players need to return stolen treasures to archeological sites to end a curse. The game graphically expresses the role of variables by incorporating them into players' ability to move platforms horizontally and vertically, using the values of the variables and the least number of moves. Players have multiple ways to view variables: in a grid and across platforms (Figure 2).
At the end of each game world, players have the opportunity to build algebraic expressions, using knowledge and skills learned during the game levels. This bonus activity allows players to practice and transfer the content learned in the game into a different context (Figure 3).
Reduce learners’ mental load during processing
Developers can also use visual and graphic elements in educational games to reduce learners’ mental load during the learning process. For example, in our game Pearl Diver, we use a plain interface to allow players to focus on the game number line, which is central to the learning objective for the game (Figure 4). However, if the game had shown only the number line and the indication of the numbers that the player should select in the line, this could have made the game experience tedious and visually uninteresting. Instead, we used decorative visual elements to build a narrative and game experience, as well as to make the activity more challenging (e.g., electric fish that the player needs to avoid). In the game, the player is a diver in search of precious pearls that are hidden at the bottom of the sea. To find the pearls, player needs to use the number line. A shadow is used to show at which location along the number line a player has chosen to dive. The visual elements of the game's graphic expression are simple so as not to overwhelm the learner. In addition, its composition is as a frame that directs the learner's attention to the number line in the center of the interface.
Motivating learners in learning activities
We can use visual elements in educational games to stimulate and motivate the learner's interest so they initiate and stay engaged in game activities. Motivation is an essential element for learning to happen (Wittrock, 1989) and is part of active processing (Mayer, 2009), which happens when the learner is cognitive engaged in processing the information, pays attention to relevant information, organizes information into coherent mental representations, and integrates this new information with their previous knowledge.
For an activity to foster and sustain intrinsic motivation (when the individual is engaged in the activity on their own), as well as promote an individual's development, it needs to satisfy three basic psychological needs: Autonomy, Competence, and Relatedness (Ryan and Deci, 2019). As part of the gaming experience, these needs can be stimulated via the game's graphic expression and its visual elements.
The learner's autonomy can be stimulated in educational games when the system offers a wide range of choices, for example, character customization and other game graphics to pick from (e.g., scenarios, vehicles, objects), as well as when it gives a choice of challenges to be performed among a long list of possibilities. For example, in our game Ratio Rumble, in addition to offering different levels, the game system allows the learner to select a character from a long list of graphic possibilities, which increases the opportunity to stimulate an identification and connection between the learner and the game character (Figure 5).
The need for competence is connected with the development of the learner's self-efficacy and mastery in the activity. Effective educational games provide learners opportunities for action and success, while stimulating progressive challenges based on learners' skills. One way to foster competence is to present the learner with clear objectives, while providing immediate and cumulative feedback during gameplay. For example, in Monster School Bus, at the end of each level, players receive a visual summary of their performance in the level, as well as in the level selection screen. Players can visualize their performance for each level, based on the number of stars received (Figure 6).
Finally, educational games can foster an emotional connection between the learner and the narrative and game characters (including playable characters, non-playable characters, and other players). This emotional connection fulfills the learner's need for relatedness, to feel part of a community, and to be important to other players and/or characters. For example, in Monster School Bus, the game narrative stimulates a connection between the player and the boss (non-playable character who guides the player), through colloquial, humorous language and feedback on the player's progress in the game.
This post is a summary (in translation) of the published, peer-reviewed article, "Graphic Expression in Educational Games: Experiences from the Math Snacks project" (Cezarotto, 2021), by the author.
For more in-depth discussion of graphics for learning, we highly recommend the book: Graphics for Learning: Proven guidelines for Planning, Designing, and Evaluating Visuals in Training Materials, by Ruth Clark and Chipeta Lyons.
References
Cezarotto, M. (2021). Graphic Expression in Educational Games: Experiences from the Math Snacks project (in Portuguese). Educação Gráfica, 25 (2021), 112-122.
Clark, R. C.; Lyons, C. (2011). Graphics for learning: proven guidelines for planning, designing, and evaluating visuals in training materials. 2nd ed. USA: Pfeiffer.
Mayer, R. E. (2009). Multimedia Learning. United Kingdom: Cambridge University Press.
Wittrock, M. C. (1989). Generative processes of comprehension. Educational psychologist, 24(4), 345-376.
Written by: Matheus Cezarotto, Post Doctoral Researcher