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?

Read "The Design of Everyday Things" for a fun, short book about this very subject. Written by the guy who designed the original iPod. — Almo, Aug 18 '16 at 15:58
I too found bit confusion between variety of meanings to the word. — Harshal Benake, Aug 18 '16 at 16:06
@SpartanDonut Welcome to the Ten Thousand... enjoy your stay :) — WernerCD, Aug 18 '16 at 23:21
A power plug creates an affordance for children to put fingers into it. that's why power plugs should be out of children reach. — CoffeDeveloper, Aug 22 '16 at 13:39

Philipp · Answer 1 · 2016-08-18T15:24:09.270

165

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?

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.
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.

edited Aug 18 '16 at 15:24

answered Aug 18 '16 at 15:01

Philipp

119,250
27
256
336

59

Things get awkward when you can burn pretty much anything that looks halfway wooden or plant-like, but you still need to find the keys to get through that wooden door. – Nolonar Aug 18 '16 at 15:42
1

Impressive answer. – Harshal Benake Aug 18 '16 at 16:05
4

Image explained a lot clearly. – Harshal Benake Aug 18 '16 at 16:05
38

This is a wonderful example, as a 9 year old I enlisted my 7 year old sister to help me as Tails by coordinating our jumps on that infernal barrel. The level designer clearly thought of this and made the ledge above just high enough and the channel below just deep enough that just jumping and flying in coordination with a second player couldn't move that barrell enough - but only barely, we spent hours thinking we weren't timing our jumps optimally. – nwellcome Aug 18 '16 at 16:53
2

@nwellcome I bet your parents were happy to have a few hours with you two completely occupied! – Chris Cirefice Aug 18 '16 at 18:09
12

that goddamn barrel. – congusbongus Aug 19 '16 at 01:41
4

I love how you included the barrel from sonic 3. – Bradman175 Aug 19 '16 at 02:51
1

Heh, reminds me of the first level of the original splinter cell. You had to shoot out a skylight in a dark room. It was hinted at with comms talking about smoke in the room, but the skylight was more or less impossible to see and not directly mentioned iirc – CobaltHex Aug 19 '16 at 21:56
This is the best example for a question I read on the entire SO network. I had brick-shi***ng moments in that damn barrel as well. Perhaps NOT putting the affordance was the intended behavior. – Luis Masuelli Aug 20 '16 at 04:44
1

Woa... the barrel DOES have arrows on it! They just look like a decorative pattern. – Almo Aug 20 '16 at 10:47
@Almo not really, it's a very standard design for something I'd call a 'circus barrel' https://s-media-cache-ak0.pinimg.com/236x/59/43/b2/5943b297147eb8fd6e898008237d6f7d.jpg It seems like these are arrows but that's a triangle pattern, do notice that both the red and the white sections form the pattern. – Maurycy Aug 21 '16 at 06:59
Make that drum bounce slightly when step over it, but not react to jumps.

André LFS Bacci

Aug 21 '16 at 16:53

That drum was my first rage quit ever :D – Songo Aug 22 '16 at 12:38

The most grokkable definition of affordance I've ever read. Nice! – crisis.sheep Jul 22 '17 at 17:57

There's a confusion about affordance and signifier, concepts from the book 'design of everyday things': Affordance is what is possible to do, it's a relationship, like player moving the barrel in sonic. Signifier is something that aids in understanding what is possible to do, like the ridges in a remote control or the type of handle in a door. – Johnny Bigoode Dec 29 '19 at 12:33

House · Answer 2 · 2016-08-18T16:04:52.780

41

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.

edited Aug 18 '16 at 16:04

answered Aug 18 '16 at 15:56

House

73,224
17
184
273

14

The Design of Everyday Things – Almo Aug 18 '16 at 15:57
1

@Almo Exactly that. Design like this is more important than some people think. – House Aug 18 '16 at 16:19
1

This door is immune to being installed wrong, though. A handle that can only be pushed has a nonzero risk of being incorrectly installed on the side of the door that needs to be pulled. – Random832 Aug 18 '16 at 17:00
1

@Random832 Yep, an excellent design can be poorly implemented. It's always a risk. – House Aug 18 '16 at 17:02
8

Oh, look, Norman Doors. – tomsseisums Aug 18 '16 at 17:32
1

Also, those pushable doors sometimes fall to indicate clearly, which side has the hinges. So you know to push, but you are left to guess whether to push the left or right side of the door... – ZeroOne Aug 21 '16 at 01:13
In a game, the interesting question is: If there is a monster in the next room, which one of the doors can be closed again safely after my hurried retreat? – O. R. Mapper Aug 21 '16 at 22:05
2

Also a good example of an afgordance not being universal. I doubt many people in Germany would get this. Here, doors without handles are usually no-longer-used doors or doors leading to private areas in public spaces. Apart from in some very new hospitals, We don't really have the "horizontal bar is pull, plate is push". – uliwitness Jun 07 '17 at 10:06

Almo · Answer 3 · 2016-08-18T16:51:14.790

36

"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

edited Aug 18 '16 at 16:51

answered Aug 18 '16 at 14:55

Almo

6,678
6
36
65

Great answer. Doing game development at uni, this only actually came up in Human Computer Interaction, and stumped a lot of students. Our lecturer put it best in describing conventional computer controllers. A mouse gives you the affordance of moving and clicking. With that analogy, it became a lot clearer. It was still so ambiguous that it was effectively excluded from requirements in both assignments and the final exam. – Gnemlock Aug 18 '16 at 15:24
23

Also noteworthy, if you cut the chain how will the anchor stop the ship? – David Starkey Aug 18 '16 at 17:47
1

Agreed! I just thought of that while making this post. :) – Almo Aug 18 '16 at 17:50
6

That's even worse than the KQ4 rowboat. If your character is outside the rowboat and you type "look in rowboat", you'll be told there's nothing there. If you're inside the rowboat and you type "look", you'll get the same room description as outside the rowboat. Only if you're inside the rowboat and type "look in rowboat" will you see the bridle that's needed to progress in the game. – supercat Aug 18 '16 at 19:14
2

@supercat I've always thought that this was likely sierras hope for calls into their hint line. They seemed to have two or three per game. Sheesh – Neal Davis Aug 26 '16 at 23:57

score 12 · Answer 4 · answered Jan 28 '17 at 17:48

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:

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.
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).
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.

What are "affordances" in game design?

4 Answers4

Linked