Review eBook: Affordances and Design

Victor Kaptelinin, a Professor at the Department of Information Science and Media Studies, University of Bergen, Norway, and the Department of Informatics, Umeaa University, Sweden, just published an eBook with Interaction Design Foundation: “Affordances and Design.” I was asked to write a review of this book and provide some insights into using affordances in interaction design and HCI.

Let me start by providing the definition of affordance as given by Donald Norman:

In his eBook, Victor Kaptelinin provides the history of the idea of affordance from its initial introduction by James Gibson in 1977 to the present day. The eBook’s bibliography and reference section is a great place to start the exploration of this topic for anyone new to these ideas. Unfortunately, the book doesn’t help much if an individual is looking for some guidance on how to apply these ideas in practical situations during interaction design or HCI design.

For clarity’s sake, allow me to give a very brief explanation of affordances, from their roots to the present time.

When James Gibson first introduced the concept of affordances, he focused on physical environment — what actions are possible? And the set of these action were invariable — just because one couldn’t find an affordance, didn’t mean it didn’t exist. Here is a very clear visual story of affordances and a very smart bird.

What you just saw was a bird smart enough to figure out various actions made possible by the experiment’s environment — discover the affordances of various objects in the cage and use these actions in a correct sequence to solve the problem.

And here’s an example of kids trying to understand the affordances of an old-fashioned telephone:

The kids are smarter than the crow, and yet they all have difficulties deciphering the affordances of an old rotary phone.

What both of these videos show — the crow and the millennial kids — is that learning and culture has a huge impact on the ability to perceive affordances and to act on them to achieve the desired goal (to eat a piece of meat or to call a friend).

In 2005, Turner divided the notion of affordances into complex and simple. Simple Affordances were very much in line with the meaning given to affordances by Gibson. While Complex Affordances depend on user’s culture and education. To this I would also add environment — environment can bring a lot of confusion and hide even known-to-user affordances. Just consider buttons that are obscured by clutter or levers that are hidden from view by a mob of people — a user might know and look for affordances and not find them.

Anthropologists routinely discover pre-historic tools that have a mysterious purpose — a simple set of possible actions that could be executed with these objects is not enough to identify their purpose. In my interface design class, I ask students to identify a few artifacts that not too long ago were routine utensils everyone knew how to use. Here’s an example:

Manches a Gigots

What is it for? It clearly has a handle — one very similar to cutlery. So is it used for eating? It has a screw — is it used to secure something to its end? What? Well, this is an example of Manches a Gigots — an eating utensil for holding turkey and chicken legs. Since we no longer use such utensils, we no longer have a cultural connection to this artifact. And even though we can see its affordances, we still can’t figure out its use.

So what does this all mean to product designers?

The basic idea is that as a product designer you have to know your users — Who are they culturally? What do they know? Where are they using your product? And why are they using your product?

Cultural Differences Cartoon

Everyone enters an experience with their own baggage — everyone is different. If affordances are deeply embedded into our cultural traditions (e.g. buttons, sliders, levers), then understanding how to use them is also culturally dependent. The millennials presented with a rotary phone didn’t recognize the affordances of that product — they didn’t know how to dial or the sequence of actions necessary to make a call.

When we design the user interface, we have to understand not only what set of actions are possible in theory, but also what subset of those actions are likely to be taken by our users. What would they recognize as a valid Complex Affordance?

When you look at your desktop computer, you are looking at a remnants of user interface design based on an office metaphor — there are files and documents, desktops and trash, camera and brush icons. These are representations of real-world artifacts that help users perceive their affordances in a virtual world. But while the office metaphor “won”, it was not the only one out there (for other examples, please read my book!).

Here’s an example of skeuomorphic interface/interaction design in an app (“The Room” — a puzzle game for your iPad):

The Room screenshot

All actions in this “room” are based on affordances known to the user from experience in the real world. Is this an example of good interface/interaction design? Yes! …for this puzzle game! But it would be a total drag if Adobe’s Photoshop adapted this approach.

So it all depends — who are your users? What affordances can you imply in your virtual world to make user goals easier to accomplish?