If I had a penny for every time I dropped the word “affordance” when pleading a case to a client to a peer I’d be pretty well off. But, If you are like me you’re probably using it wrong…
Can you identify which elements are affordances?
The answer is none. I will get to why in a bit.
The term affordance is thrown around so much nowadays it doesn’t land with the same thud it used too. I remember the first time I heard someone drop that word I was like damn, I’m stealing it!. The word affordance gave me a sort of superpower whenever I needed to explain a thing that I could not explain before… why that button needed to be in that place “it’s an ‘affordance’” why it needs to be that color “ it’s an ‘affordance’”.
Turns out I’ve been incorrectly using this term for a long time. Ouch…So then, what is an affordance?
“An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.”
These are the words of Don Norman from his book The Design of Everyday Things( Revised). In fact, this article is basically ripping directly from the book I suggest you read it. It is important to read the revised edition because it accounts for the fact the world of product design is very different after the advent of the iPhone. I “read” (skimmed) the original a few years back but just recently decided to buy my own copy and really read it.
As I read I had one of those “uh oh” moments where you realize that you are guilty of doing something bad bad bad. As Don Norman explains it most of the things I called affordances are actually signifiers.
“Any mark or sound , any perceivable indicator that communicates appropriate behavior to a person.”
I had no clue, all these years I’ve been riding hotshot on the term. As a matter of vocabulary hygiene, I’m determined to right my wrongs and hopefully help you along the way. Norman does a great job of illustrating the concepts in words and real word examples in his book but he doesn’t tackle my indiscretions head on that’s why I wrote this article. Here is how to correctly use the terminology based on the theory when it comes to interface design.
As shown the “add to cart” button is not the affordance, it is the signifier of the website’s affordance that allows you to “add to cart”. Let’s dig into an example that is a little bit trickier.
The drop-down and the bar toggle are an affordance because they allow you to manipulate a value, however, the arrows, the gradient, and the hint text are all signifiers of that affordance.
I know this may seem like an insignificant distinction but it can be immensely helpful when having conversations about your designs. Thinking this way can help you isolate the things your products can do for users from the signals you give your users about them. I have found that I often miss opportunities to improve signifiers because I equate them with the affordances.
So there you have it! don’t be a heathen like me. Use the term affordance correctly and use the new silver bullet word signifiers in its place.