What are "affordances" in game design?

Question

I keep hearing the word "affordance" in terms of game design, most recently in the movie Indie Game: Life After. I also vaguely remember it from a UX class in undergrad. But I have no idea what it means.

What is an affordance in the context of game design?

Answer 1

An Affordance in general is an action a person perceives as possible. Adding a handle to a desk drawer generates an affordance to open it. Without the handle it just looks like a panel and someone would not get the idea that opening it is even possible.

Or notice the link I posted as the second word of the answer. It is displayed in a different color and your cursor changes into a hand when you move to it. This implies that something will happen when you click on it. That's an affordance. It would be possible for Stackexchange to use some CSS to make the link the same color as the rest of the text and even suppress the cursor change when hovering on it. This would technically not prevent you from clicking on it, but it would remove the affordance to do so, so you likely won't do it.

In the context of game design, this means that when you want the player to do something, just making it possible to do it is not enough. The player must be made aware that they can interact with something in some way. So you need to give them a cue that interaction is possible. For example:

• When you want the player to realize they can push an object, make it look pushable.
• When there is a button the player needs to press to progress in the game, place it in a prominent location, make it large and visible and make it look like a button.
• When it is important that the player collects powerups, make sure they stand out from the environment so they are noticed as important.
• When the player needs to use a menu to levelup their character, make sure it is opened with a very large and obvious button which is always visible on the screen and becomes even more visible when there are skill points to distribute. Even better, open the levelup menu automatically so the player is forced to interact with it.

A common beginner mistake in game design is to add a really interesting feature to a game, but then neglect to also add an affordance which enables players to even find that feature or when they find it pay as much attention to it as it deserves.

But professionals are not immune to it either. Anyone who played Sonic 3 on the Sega Mega Drive might remember this frustrating moment:

For those who don't remember it or didn't play it: The player got locked in that room. The affordance to progress was obvious: get that drum out of the way. But what wasn't obvious was how to do that. The player could jump on it, and it started to bounce up and down. This created an affordance: Jump on it to make it move further. But that was a misleading affordance. Jumping did move it, but it didn't move it enough to allow progress.

What the player actually had to do was press up and down while on it. This made the drum bounce much more than through jumping. With that knowledge, that room was no challenge at all. But there was no affordance whatsoever that pressing up or down would do anything. During the whole Sonic series, pressing up and down never did anything to the environment. So most players got stuck in that room for ages.

How would it have been possible to improve this?

1. remove the false affordance. Don't have the barrel bounce that much on jumping to remove the implication that this would be the way to progress.
2. add a visual cue that pressing up and down would do something, for example by placing up-and-down arrows on the drum and have them light up when the player pressed up or down on their joypad.

Answer 2

Teaching without words. Essentially, allowing common sense and simple reasoning to do the teach the player how to use the mechanics of the game.

Allow me to give you a real world example. When approaching this door, do you push or do you pull?

Without words, it's not really clear. You either need to try and get lucky or they need to put up a sign, with words. Now, how about this door?

Only one option right? It's pretty clear you can only push, so that's what you do.

The second design shows people how to open the door, in the moment it takes to walk toward it.

This can be applied to games too.

• Levers are used to open doors. Early in the game, the player is trapped in a room with a door and a lever which are very close together. The next level moves the lever farther away. Quickly, players learn that if they find a door that's locked, they should be looking for a lever. This uses limited choice and proximity to teach the player that these two things are connected.

• There's a really hard enemy, every bullet you shoot at them just bounces off. Sometimes, that enemy will turn around, and you spot a small tank on their back that's a completely different color than anything else on their body. Shooting that tank makes them explode. This uses limited choice and object highlighting to teach the player that the highlighted object is important.

Games that do this well are fantastic. They don't need tutorials or wikis. Utilizing incremental introduction of new features and mechanics allows you to teach the player how to play the game, without saying a word.

Answer 3

"Affordance, to put it simply, is the quality of an object that communicates a way to use it."

Good affordances in game design will mean that the players know how to interact with items without significant instruction. An example of a good affordance is seeing a lock after you've already found a key.

Here's an example from Activision's Mindshadow of one of the most horrible misleading affordances I've ever seen:

This is a text adventure, so you have to type something. At this point, you know you need to drop the anchor to stop the ship. In the picture you see a spool with a rope attached to a chain. You have a cleaver. I tried "CUT ROPE" and "CUT ROPE WITH CLEAVER" etc, it just said "I can't see any rope here." The answer to this puzzle is "CUT CHAIN WITH CLEAVER".

WHAT CLEAVER CAN CUT A GIGANTIC THICK STEEL CHAIN

See this article for more discussion: http://www.gamasutra.com/blogs/MichelMcBrideCharpentier/20110102/88710/Affordance_Design_in_HalfLife_2.php

Answer 4

Just as a reminder/inspiration, let me mention that a common affordance is also the set of ridges for gripping something that you find on real-world objects:

There are three aspects to this affordance:

1. The ridges provide grip for your finger, but since they are horizontal bars, they only do so vertically. As such, it is obvious to most people you wouldn't have more grip if you slid horizontally.

2. The thinning of the ridges towards the bottom produces an arrow shape, indicating that the expected movement is down (to open ... once it is open, you've usually opened it, and you can look inside to see the arresting mechanism, so you don't really need the affordance for that, you'll remember/be able to tell how to re-assemble it).

3. The affordance is about the size of a finger, so you will naturally tend towards placing one finger and sliding/pushing a little, which will release the little hook behind the affordance that keeps the lid in place.

You will see many such affordances in the world, some even dotted. They are so common, they even made it into some computer user interfaces to e.g. indicate draggable surfaces or separators.