Foundations of Affordances

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

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.

Resources

About the Author

Andrew Maier

Andrew is a lifelong student of the design community, who co-founded the design publication UX Booth in 2008 to share his journey. He currently serves as its Editor-in-Chief. When he's not heading user-centered design initiatives for clients, Andrew dabbles in civic design. He lives in Seattle's Capitol Hill neighborhood.

Related Articles

11 Comments

  • Peter Kahoun Reply

    One thing I miss in your description of toothbrush recognition process. It’s the user’s need calling to be fulfilled. Imagine the world where no toothbrushes of this kind exist. A) If people of that world do not need to care about their teeth, how could they indentify the object as a toothbrush and not for example as a teapot cleaner (which is a more important need for them)? I don’t think there could be a thing of design/look that expresses its purpose so precisely that there is no place left for an alternative interpretation. B) If people of that world do care about their teeth and there exists other sufficient solution, could they indentify the toothbrush as a toothbrush? I think they couldn’t, since they have no need for such a thing. (Thanks for the material to think about, it seems I really have to find some time to read Norman, he might have some answers.)

  • Lasha Reply

    I did not attend the conference, unfortunately, but I really do like this article. It is essential for designers to consider all possible affordances to achieve the best results with their creations. The statement about affordances coming down to being an invites to use the products is true. When people perceive the things that could be done with the product and actually do something in one form another (hopefully the right form), its designer has done a good job.

  • Carl Klutzke Reply

    Interesting article, thanks for providing it. (Though I don’t think there are really any signifiers for a toothbrush that indicate it is to be used on teeth.)

  • Andrew Maier Reply

    @Peter Kahoun: Thanks for the feedback. I think that in this case, and further, to the point I make in presentation on affordances, is that design is also about context. If you envision alternate realities where people don’t care about their teeth, or where teapots supersede hygiene, then yes, you’re going to have alternate interpretations of customary affordances. My point in this brief article was to share how designers communicate, indirectly, what their product or service does. Industrial design, like any other design, is meaningless without context.

  • Peter Craddock Reply

    @Andrew Maier: while I appreciate your point, I also have to agree with Peter Kahoun‘s second hypothesis: if there is another sufficient solution, will a toothbrush be recognised as such?
    I’m not sure, as the context (which you mention) will be such that people will already have a mental image of what the equivalent of a toothbrush should look like.

    This causes major problems in design, I believe: if there is already a solution, one that is widely adopted, it will be extremely hard for people to understand without any explanation that a new product (such as our toothbrush) fulfils the same need.

    In a way, the link v button debate could be linked to that: we have become so used to buttons that links, despite being able to fulfil the same function, are generally avoided for actions such as “submit” in web forms. When filling a form, one looks for a submit button, not a link.
    Links can be styled to be completely similar to a styled button, but then we are entering a case where one product emulates another.

    This leads me to ask a couple of questions:

    Can the concept of affordance exist without there being an existing product? In other words, isn’t affordance always “ex post”, something one takes into account after a product has been adopted?
    Wherein lies the difference between affordance and common standards of use? [basically the majority rule]

    I’ll definitely put Norman’s book on my reading list!

  • Amos Reply

    Good points. 2 Typos –
    2nd paragraph: “If you’ve ever through of turning” – should be thought
    Conclusion: “Thoughout my talk,” – should be throughout

  • John : Site Doublers Reply

    In practice what matters is perceived affordance. This is heavily influenced by prior experience and other personal factors.

    For example when I see an embedded video on a web page I click it once – anywhere on the image – to play. My wife will double-click the image to play the video. My daughter will carefully position the mouse over the ‘play’ triangle then click it once. My mother will just look at the image and make no attempt to play the video because she doesn’t know it’s a video.

    Same video each time.

  • Jiri Jerabek Reply

    Thanks for interesting article.

    I remember in his The Design of Everyday Things, Norman talks about ‘psychology of materials’, when speaking about affordances. I guess this is another interesting area to explore, although rather theoretical.

    Though I am not sure if I can consider the affordances of materials, as Norman describes them in DOET, as perceived affordances or not.

  • Franchise Guy Reply

    Very interesting article, but you should have added a disclaimer: “This article is intended for human beings, living on the planet earth, whom are living in the early part of the 21st century, with internet access”. ;)

Leave a Comment on This Article