Habit and Behavior Engineering Toolbox: Affordances

Ever wonder why some of your users can’t find a certain download/buy/play button, even though to you, its location is clear as day? Or maybe you’ve wondered why some gamers constantly get stuck at a certain point in your game because they didn’t think a hookshot could be used there or that a certain block was movable. Well, in most cases, the reason this happens is because of an issue with something called “perceived affordance.”

So before we go any further we need to put you through a crash course in what affordances are. So bear with me here, I promise it’ll be worth your time.

Affordance Crash Course

Affordances are the qualities of an object that allow a user to perform a certain action. For example, a ball affords bouncing, coke bottles afford drinking, laptops afford opening and closing and headphones afford listening.

Perceived affordances on the other hand are what a user thinks an object can do. This button looks like it downloads this app, this door looks like it can be pushed open and this block looks like it can be moved are all examples of perceived affordances. To put it simply, affordances are what an object CAN do and perceived affordances are what an object LOOKS LIKE it can do.

So what is the relationship between perceived affordance and affordance? Well lucky for you, a man by the name of William Gaver created a very helpful framework (see figure below):

Affordance vs Perceived Affordance

As you can see in the figure, there are 4 possible “slots,” so lets run through them really fast.

  • A correct rejection is when you don’t perceive an object to afford something which it doesn’t. For example, when you don’t perceive a car as being able to fly and it doesn’t (unless it does, in which case I’d love to hitch a ride).
  • A hidden affordance occurs when an object affords something but you did not perceive it to be able to. While browsing the internet have you ever found yourself looking for the download/buy/play button when you later find out the “button” you were looking for was just some plain text? This is a case of a hidden affordance. The text afforded to download/buy/play but you did not perceive it being able to.
  • A false affordance occurs when you think an object does something when in reality… it doesn’t. Ever walk up to a door, push it to open and instantly feel stupid because you were supposed to pull? Yeah, that’s what is called a false affordance. You perceived the door to afford pushing when it actually only afforded pulling.
  • Lastly is perceptible affordance. This occurs when what you perceive an object being able to do, matches up with what it can do.

Now that you’ve had a crash course on affordances and a have a nice framework to boot, let me explain why affordances are a very important behavior and habit engineering tool.

Why they are important

From the websites we visit to the games and activities we do on Facebook, our brain is constantly on the lookout for patterns in everything we do. It’s one of the ways our brain creates habits. What does this have to do with affordances, though? Well, affordances are all about patterns. Why do you think something is clickable whenever you see underlined blue text? Why do you think a big red button activates something dangerous? It’s because you have witnessed this being an affordance of these “patterns” over and over again.

Now imagine if you completely ignore affordances while building your game, application, etc… You would be making it much harder for the users brain to find patterns and make habits within your application. So before I let you start using your new tool, I’ve put together some examples of how you can use affordances in your own games and applications.

Portal and The Legend of Zelda

These games use affordances and clever level design as a way to teach you certain elements of the game and build habits — thus avoiding the need to incessantly tell you what to do each step of the way (like most games nowadays).

Portal

Jumping Through Portals

Right when you start the game you are required to walk through these strange blue and orange portals on the wall, thus teaching you the basic properties of these portals. As you continue, the game eventually lets you place one of these portals wherever you choose. But, as users quickly find out after trying to randomly put portals everywhere, only white surfaces are “portalable” and afford portals.

The game continues in this same pattern whenever a new element is introduced. First, force the player to see the affordance (e.g., a box deflecting lasers, blue gel acting as a trampoline, etc…). Second, let them play around with the new elements in a controlled environment (e.g., only allow them to control one portal). Lastly, let ‘em loose!

The Legend of Zelda

Escaping The Room

As soon as you find a new weapon or tool in a dungeon, the game forces you to use this new tool in order to escape the room you found it in. The game then takes this opportunity to associate a certain sound or shape to the use of the tool (e.g., the hookshot and a bullseye).

After continuously associating this shape or sound with the tool, the player has now learned this shape or sound affords the use of the tool. Now whenever the player sees a bullseye, they are certain to try and use the hookshot on it.

Keep existing affordances in mind while designing

Before someone starts using your application or playing your game, they have already “learned” affordances from their past experiences (their perceptual field). They have already learned that red barrels explode when shot and a button with a floppy disk on it will download something. Underlined text with a different color is a link, red bubbly liquid is lava and will damage your character when touched and red buttons and levers trigger something important (e.g., explosions).

So before you design something, think about what previous applications and games have already taught players.

Well that’s all I have to say about affordances for now. So get out there and start using your new tool!

TL;DR

  1. Affordances are the qualities of an object that allow a user to perform a certain action (e.g., a ball affords bouncing and a chair affords sitting).
  2. Perceived affordances are what a user thinks an object can do (e.g., this button looks like it downloads this app, this door looks like it can be pushed open).
  3. Since one of the ways our brain creates habits is by constantly being on the lookout for patterns in everything we do, both affordances and perceived affordances are key tools in building habits and behaviors. Why? Well, if what an object can do and what we think it can do never align… our brain may never be able to find a pattern.

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>