Last week I was honored to give a talk at the Front End Design Conference titled “Affordances in Modern Web Design.” In preparation for the talk, I did plenty of research; and while the slides are available for download, I’d like to provide readers with a written overview of the history and application of affordances in web design.
One of the most influential American psychologists, J. J. Gibson (January 27, 1904 — December 11, 1979) coined the word “affordance” in the late 1970s to describe the fundamental part of his theory of visual psychology. Gison envisioned affordances as the (myriad) relationships between an environment and an actor. It’s worth noting that affordances do not have to be visible, known, or physically possible to the actor.
Don’t be silly, wrestlers don’t sit in chairs.
Affordances represent the multitude of possibilities available to any person or animal in their environment. Affordances help organisms suss out threats and promises available in their environments. If you’ve ever thought of turning a folding chair into a blunt weapon (and what self-respecting pro wrestler hasn’t?) then you’ll understand that these curious relationships are omnipresent.
Next, fast–forward to Donald Norman. Norman is a partner at Nielsen Norman group (NNG), the same NNG that brought the concept of usability to the Internet. He is famously known as the author of the landmark book, The Design of Everyday Things.
In the Design of Everyday Things, Norman argued for perceived affordances, essentially translating a term that may have never left the realm of psychology. Perceived affordances describe the relationships that actors perceive within an environment. This is an important disctinction. Perceived affordances would soon become a tool that designers of (everyday) products would use to invite users to use them.
In the end, however, Norman realized that perceived affordances were never used the way he intended. He says: “…the term has been widely used and misused. The result has been confusions and a goldmine for academic scholars who get to write learned articles about the true meaning of the term.” To combat this, Norman introduced the concept of signifiers.
We are all detectives, searching for clues to enable us to function in this complex world. Whether it is flags waving in the wind, the difference between empty or crowded train platforms, or the desire lines illustrated by footprints in the fields that suggest paths to follow, we search for significant signs in the world that offer guidance. In the social world comprised of people and technology, these cues are social signifiers.
The curious case of the toothbrush
Imagine that you’ve never seen nor heard of a toothbrush before, you’re just given an image on one. Now imagine that I ask you to tell me what it is used for. How do you get from looking an object to deciding how it’s used? This is where the magic happens. We perceive a lot of things based on the size, shape and texture of objects.
An everyday thing, a toothbrush.
On the toothbrush you might notice that the handle is long, and thin: something that could fit in the palm of your hand. Next, you might notice that the handle has a grip, one that looks like it would stimulate your palm when you held it and provide resistance if necessary. You might then look to what that handle is designed to resist. Scanning the top of the toothbrush, you might notice there are bristles arranged in a very small and compact fashion.
Bristles, by their very definition, are typically “used to make a brush.” Accordingly, to brush means “an implement to scrub with.” Then it dawns on you, a toothbrush is an implement to scrub teeth with. It fits the bill: this object is small enough to insert into your mouth and long enough to provide you with control while you’re doing the cleaning.
Is this how most people would have deduced it? I imagine so. But if it isn’t, what leads them astray? Is it a lack of perceived affordance?
Our brains are very adept at looking at a wide range of possibilities and acting accordingly. It may be the case that you perceived ways of implementing this device (for example: a toothbrush is also good at scrubbing tiny crevices) that don’t fall into the general use case of toothbrushes. However, that’s unlikely; the product design of toothbrushes (their colors and their packaging) dissuades us to implement toothbrushes in this fashion.
Conclusion
As designers, it is our job to take the range of possibilities available throughout our products and tell people, implicitly, when they ask “should I use it for this?” (“this” being something outside of how it was designed) “of course not, it’s meant to do this.“
Throughout my talk, I give numerous examples of good and bad design as well as ways in which you can take the concepts of affordances and signifiers and bring them into your projects. In a previous post, I detailed the Link vs. Button debate. Look over your projects and take a survey, asking yourself: does my interface afford its options?
Was this article helpful? If you attended my talk, what did you think? Please do let me know in the comments. I’m happy to keep reading new research as it becomes available and I’d love to hear from the community.