Visual Affordance

When playing a new game on your console or mobile device, do you ever take a moment to think of how much is explained to you? We might complain about lengthy tutorials or long dialog boxes, but we may not recognize there are smaller details that aid us in our comprehension of the game world itself. In this post I’d like to spend some time exploring this, and a concept referred to as “Visual Affordance.” What’s Visual Affordance? Well wikipedia would suggest the following :

“An affordance is a relation between an object or an environment and an organism that, through a collection of stimuli, affords the opportunity for that organism to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. As a relation, an affordance exhibits the possibility of some action, and is not a property of either an organism or its environment alone.”
​

Okay, so that can be a bit confusing… Affordance, or Visual Affordance in how we’re referring to it here, is our implicit understanding of how something works due to it’s visual ques.An easy example of this would be a “lock.” When I, as a user, see a lock I immediately understand that I’m unable to access something… that something is essentially “locked.” In the same vein, if I see or find a “key,” I understand that I can now access something I couldn’t access before. These are more examples of recognizable symbols or shapes that have meaning to us. Using symbols or colors isn’t always the best thing to rely on. Depending on the out reach of your audience, some may not have the same background for understanding as others. These types of inferences are based heavily on cultural and life experiences, and therefore may not mean the same things to people living in different geographical locations.

There are other types of Visual Affordance clues that are more subtle than something like a color or a symbol. There are those that rely more on either the user’s subconscious or looking and thinking of how things work… The Room is an excellent example of this. Many of it’s puzzles feature little clues about how elements work and interact with each other. In the example, you can see there’s an area that seems to have been rubbed or filed down by an element dragging itself across it. It’s kind of like the cliche spy movies where you see the rub mark on the ground and know that there’s a hidden door in the bookcase. The best way to describe this type of Visual Affordance is it’s perception based, and relies heavily on observation. ​

There’s really one last kind of Visual Affordance that I really want to discuss and it’s based off of learned behaviors. In this category I’m really talking about things that are slowly introduced to the player and then become second nature. “I know how to interact with something, because of something else I was introduced to earlier.” In this example from Dead Space, the players are introduced to an object early in the game (the blue circle) that they have to “Spin” to power objects. Later in the game the player is exposed to elements that look similar, and the player must interact with them to solve puzzles in different ways… due to the player’s earlier experiences in the game, they already understand how these items function.

What got me thinking so much about Visual Affordance? Recently I’ve been playing Firewatch and The Witness, and couldn’t help but think about how these games are utilizing this concept. WARNING continuing forward I may talk about spoilers related to Firewatch and The Witness, if you’re worried about this… TURN BACK NOW and call it quits! Otherwise please continue.​

​Firewatch makes use of Visual Affordance through objects that we already understand or are familiar with. We know how to engage with Walkie Talkies, Maps, Compasses, etc. So in this regard the game feels like a very familiar environment (to some) though it’s use of real life objects. In a more subtle way, Firewatch also guides the user through it’s environment and visual ques. The way flora are placed, depressions in the ground, we instinctively know what a trail feels like and can be guided by it. Either intentionally or not, the lighting and composition usually draws the player’s eye outward and towards the objective, whereas shadowed areas and dense composition makes it easy for me to understand that I shouldn’t go that way. Also…. why is it whenever I see rocks with that bit of white on top of in a video game, I understand that I can climb it? Is it now just a video game norm that we all know about, or is it something else? ​​

The Witness is literally all about Visual Affordance… it might as well be it’s tag line. The way the game is structured helps guide users on the initial onset of the game to explore the island and interact with it’s puzzles. There are clues meant to provide hints to the player as to how to proceed, some more cryptic than others. I really have to applaud some of the uses of visual affordance in The Witness’ puzzle design. When engaging with these puzzles that feature different colored swatches, the player can understand pretty quickly that they have to isolate the different colors from one another. Other puzzles feature this tetris styled pieces. We can quickly recognize these shapes, and after some trial and error, can also understand how it fits within the puzzle.

​I find the most interesting use of Visual Affordance in The Witness, that I’ve seen thus far, is it’s use of the hidden “World Puzzles.” In every puzzle that you’re exposed to (that I’m aware of) you have to start at a large circle, make a path, and end on a rounded point. That’s the very basis of The Witness’ puzzle design. The players know these shapes and can understand how to interact with them… and if they are observant enough, they might begin to recognize them in the world itself. This was very well done and a really cool use of Visual Affordance.
​​

The Witness certainly isn’t without it’s faults. I’ve found that several of its puzzles are not user friendly, don’t provide enough information to the players, and are cryptic for the sake of being cryptic. That being said, I completely recognize that I haven’t finished the game and perhaps the way I’ve explored the world has removed me from experiencing elements in the proper order…. but that in of itself could be seen as a fault to the design of the game. The example that I’ll use here are these colored star puzzles that I’ve found in the game. Having found them after the color swatch puzzles, I would assume that it may act in a similar way. i.e. I have to isolate the different colored stars from one another. Yet that isn’t the case at all,and my previous learning experiences in the game didn’t help to further my understanding of this puzzle.

​Evaluating how games make use of Visual Affordance, is also in some ways evaluating our own understanding and how we take in/interact with specific stimuli. In any case both Firewatch and The Witness make some very interesting uses of Visual Affordance, in very different ways. I look forward to continuing to discover ways that the Witness is hiding things for it’s players… and me.