By Benjamin L. – TheExpert UX/UI Designer at Squad
You are standing in front of a door. Instead of a doorknob, there is a horizontal bar. Instinctively and without thinking, you will push this door (rather than pull it). The shape of the handle prompted you to take the correct action; this is called affordance. In other words, affordance is an object’s ability to suggest its own use. To return to the example of the door, a vertical handle would have prompted you to pull the door. Similarly, a handle that lacks affordance (you don’t instinctively know whether to pull or push the door) leads to many mistakes and frustration for everyone using that door.
An object’s affordance allows it to be used naturally in the right way
Affordance is also present in software. If you see a floppy disk icon, for example, you know even before clicking it that it’s used to save a file. Generally speaking, the shape and color of buttons and other elements suggest their function and subtly guide you through the software.
What about video games?
Video games are no exception when it comes to affordance. If you ever find yourself completely unsure of where to go in a game, that game lacks affordance. The same is true if, upon seeing an object, you have no immediate idea what it does. Bad examples are more memorable because they’re much more noticeable and frustrating. But there are many best practices, which we’ll explore in three categories: navigational affordance, environmental affordance, and systemic affordance.
Navigational affordance
As the name suggests, navigational affordance refers to all the elements that help you orient yourself within a space. This guidance or encouragement to explore can take the form of a visual, auditory, or sensory cue, among others. For example, many game screens are designed according to the rule of thirds—just like certain paintings or photographs—to draw your attention to specific elements within the scene. Similarly, light plays a crucial role in guiding you. A light source, even from a distance, will draw us in as if we were moths to a flame. In some games, a specific element of the environment or texture is repeated multiple times and serves as an implicit guide. In the latest Tomb Raider games, for example, all white elements in the environment are part of the path you should take. Thus, a section of white wall will catch your eye and signal, “This way!” Other examples of navigational affordance can be found in The Legend of Zelda: Breath of the Wild, which seeks to pique your curiosity through large structures, mountains, and columns, rather than cluttering the map or environment with giant arrows or other markers.
Environmental affordance
Environmental affordance taps into your imagination. Colored rectangles and yellow circles won’t mean anything to you, but place those same shapes next to a cash register and you’ll immediately picture bills and coins. The environment provides context and gives meaning to the various elements of the game. Thus, blue squares can be seen as rain in some games, or as jewels in others, depending on their environment.
This type of affordance is particularly useful for older games or indie titles, where graphics are less detailed because they’re costly or hinder performance. Metroid 2, released in 1992 on the Game Boy, uses fragmented textures, for example. The context tells you that you’re in a basement and that these textures likely represent something hostile. Fun fact: this game has had two remakes developed by two different teams, and each team interpreted the original game’s fragmented textures in its own way. In Metroid: Samus Returns, it’s toxic poison, while lava is used in AM2R.
Systemic affordance
The systems used must be clear and logical; this is known as systemic affordance. If I see an enemy with a shield, I figure it will be easier to kill him by approaching from behind. Systemic affordance also helps convey the relationships between game elements without requiring the player to think about them. For example, in any strategy game, spearmen are stronger than cavalry, who are stronger than swordsmen, who are in turn stronger than spearmen. This rock-paper-scissors principle, combined with real-world logic, allows us to formulate a strategy because we know in advance how the balance of power works. The same applies in Pokémon, where we know even before battling that Water will have a stronger effect on Fire, or that Fire will have an advantage over Grass.
The affordances used can also be simpler: "If I walk into that fire, I'll get burned," "I'd better sneak up on that archer," or "I don't think I'm strong enough to beat this enemy yet; I'll try to get some gear and gain some experience first." If the game’s elements prompt these kinds of thoughts and they’re valid, it means the designers have done a good job. The systems in place, their interactions, and the way they’re presented to you allow you to make decisions or plan an action without having to think about how things work (since you already know, intuitively).
Conclusion
The concept of affordance is therefore ubiquitous in video games. The main goal is to subtly guide the player without them even realizing it. Depending on the level of affordance, we can imagine rich worlds even with minimalist art direction. We can understand complex systems because they seem logical, and act on prior knowledge. We can find our way in vast, labyrinthine 2D or 3D environments simply by being curious about the clues the developers have left for us. Affordance should therefore be seen as invisible threads that allow us to fully appreciate the game and the experience it provides, and that will subtly put us back on track if we stray too far.
