Better Designed Explains: What is an affordance
Better Designed Explained is a series that explains foundational concepts in design and product development. Some of these started on my Medium site, but the versions here are updated and expanded.
Understanding what affordances are and how they help map people’s mental models to a product is key to good design. But if you are like a lot of my students, the concept of an affordance is easier said than done to understand.
First, I would recommend you read chapter 1 of Don Norman’s Design of Everyday Things. He does a very good job of detailing what an affordance is, but even after I assign this reading and go over it myself, many students struggle to understand what an affordance is.
The proper discoverability and usability of affordances and signifiers is a key part of my guidelines for thoughtful product design. If you don’t understand what affordances are and how to utilize them, you won’t be able to design products that are usable and good. I’m going to try my best to explain what an affordance is here, but if you have further questions, send me a note on Twitter.
An affordance is not a feature
A feature may rely on an affordance to work, but a feature itself is not an affordance. Many students and beginning designers make this mistake.
Affordances are relationships between a physical object or a digital one and a person. Affordances help determine how an object can be used. The key is that affordances are relationships.
Look at the word affordances. The root is afford. Affordances help people understand what actions an object affords.
A chair, for instance, affords the ability to be sat on. People instinctively understand how this affordance works because chairs have bottoms and backrests shaped for the human body. This makes the primary affordance of sitting for a chair perceivable.
Affordances can both be affordances (to help us do something) or anti-affordances (to prevent us from doing something). They can also be visible and invisible, but for an affordance to be effective, people have to be able to perceive it.
Imagine a chair that people struggle to perceive how to use it (see below). A lot of affordances are not properly perceivable, and thus they are poorly designed.
This chair from Magis doesn’t look like a chair to most people, and thus many wouldn’t try to sit on it. We can sort of forgive this because it is meant to be a piece of art as much as anything else (as long as some other clearer, more accessible seating is nearby).
It does have an affordance for sitting, which is why this ultimately works, but the affordance is so hidden from people that I could imagine a sign near this saying, “take a seat if tired.” The affordance here is that the concave top of this magic top is roughly shaped for the human butt.
Norman is famous for the concept of Norman Doors, which are doors that people don’t know if they should push or pull. It’s incredible when you think about it. Doors are one of the most basic and foundational designs in human history.
Countless buildings have so completely f-ed up doors that an advanced, intelligent species don’t know how to use.
This is really bad design!
Doors like this often come with signs that explain to a person to push or pull, and many people incorrectly call these signs affordances. These signs are a band-aid for poorly conceived affordances.
“We put a sign on the door to give people an extra affordance to understand how to properly use the door.” This is incorrect. Signs on a door are signifiers, not affordances.
I call these band-aid signifiers. They exist simply because the affordances are poorly designed. If a product has band-aid signifiers, it is poorly designed.
The other key affordance on a door is the hinge. Being able to see the hinge tells you which side of the door swings. Some doors have hidden hinges, which can make discovering how to use that door difficult (or in some cases, can hide the fact that it is a door).
More modern and challenging examples of affordances
But doors are a really easy example to explain affordances with. How about some more challenging modern examples? Let’s walk through some examples to flesh this out.
A lot of what you may have thought are affordances are, in fact, not affordances. Icons on a phone are not affordances. The primary affordance of a smartphone is the touch system itself.
One of the reasons that smartphones have taken off so rapidly and that you see people of all ages using and enjoying them is that the affordance of a touchscreen allows for direct manipulation by a person’s finger. You just pick up the phone and start tapping and swiping away.
Icons that appear on the screen interact with that affordance. The icons and labels that go with them are signifiers that help users understand affordances. I would argue, however, that each button on a touch screen device has an invisible affordance the size of the tap target that is being taken up on the screen.
The icons, text and other stuff you see on your smartphone screen that help you understand what to do with your smartphone are actually signifiers. I’ll go more into detail on signifiers in a future post.
Touchscreen smartphones have provided an easier mental model for a person to understand than desktop computing, which relies on a mouse as the primary pointing affordance. My one-year-old can use an iPad. She is nowhere near being able to use a Mac or PC because using a keyboard and mouse requires a lot more abstraction to understand how these affordances map to the actions on the screen.
Is the touchscreen the only affordance on a smartphone? Many phones also have another primary affordance of voice interaction, which has generally been underutilized with touch devices.
This affordance would be invisible, and thus, it’s not perceivable without some training or prompting. Because voice interaction is not the main affordance of smartphones, this isn’t as big of a deal as it could be, but if smartphone makers want their voice interfaces to be more widely used, they need to make using them easier to discover and understand.
I have yet to see a smartphone that has some visual way of demonstrating that you can talk to it. I know my phone has Siri because of all of Apple’s marketing around it, but because this affordance is not perceptible in normal use, I forget to use it.
Apple doesn’t even have a signifier that shows up on the phone under most usage. Imagine how much more you would use Siri if there was at least an icon on the home screen for it.
Phones also they also have physical buttons that are shaped like the tips of human fingers, inviting users to try them (physical buttons are very discoverable when done in moderation).Below is an example from Apple’s Home app, which allows users to control smart homes features.
Smart homes can be the intersection of many kinds of affordances
This is the Apple Home app, which lets users control smartphone features.
The primary affordance for this app is the touch system of the phone. Each button is an implied affordance, but the visual representation of a button is a signifier. Some may argue that everything on this screen is a signifier, but every signifier maps to an affordance, and thus we cannot argue that a signifier is acting without an affordance.
What is a signifier? A signifier helps a person understand how to use an affordance. Signifiers are a way to tell people what is possible.
Apple’s Home app and Homekit (the technology that powers the Home app) is on the cutting edge of systems that have a lot of layering of affordances. With this technology, you can control the lights in your house with three primary affordances: Physical switches, touchscreen app, and voice control.
This layering of affordances is what makes smart home technology like this so much more usable and enjoyable than standard lights, for instance. If you don’t have the layering of affordances, however, it can be really frustrating. Just controlling your lights with a smartphone app would be less usable than physical wall switches.
Sometimes, in the case of a push sign on a door, signifiers are covering up for poor affordances and designs. Other times, in the Home app example, the signifiers are the main event. The signifiers are what help users understand how to use Apple’s Home app.
Phones usually have physical buttons on them (at least in 2019), which are affordance as well. iPhones, for instance, have two stacked buttons on the side for raising and lowering the volume.
These buttons are shaped to be the size of human fingers, which lets a person know that you can interact with them with their fingers. The fact that the buttons are stacked vertically also helps a person understand that the higher one is for raising the volume and the lower one is for lowering the volume.
Here is one last example. This amazingly well-designed Zojirushi travel mug has very thoughtful affordances and signifiers.
Once you hit the open button, you have an affordance for a mouth-shaped opening to drink out of.
I hope this has helped you better understand what affordances are. Well-thought-out affordances (and signifiers) will be the difference between your designs being usable or maddening.