Affordances on the web

2 minute read

Reading the latest edition of The Design of Everyday Things, I came across the terms affordance for the first time. I realise I’m a couple of decades late on this on but for some reason it took me a while to get around to reading this book.

Affordances are the possible interactions between people and the environment.

As a product manager enveloped in the development of internet products for his entire career, I of course started thinking about these concepts in terms of web-based interactions.

But before we get to that, let’s consider a simple physical button. I consider the affordances of a simple button to be something like the following list (it’s difficult to describe this with words so you’ll have to use your imagination a little or perhaps create your own list):

  1. Press down and release quickly. This is a standard button pressing interaction.
  2. Press down and hold. Imagine a button which controls the height of a crane. Hold down to keep your hook going higher.
  3. Press twice quickly. Not used commonly in the real world but within the realms of usualness.
  4. Press down like a button which makes a lamp switch on. Often the button sticks in the depressed state.
  5. Release up. In the hook example above, the hook would start descending.

Next let’s consider consider a typical HTML button.

It has a much larger number of possible affordances. Here’s a non-exhaustive list:

  1. It’s clickable by a user using a mouse.
  2. It’s double-clickable by a user with a mouse.
  3. It’s tapable with a finger if the user is using a touch enabled device.
  4. It’s holdable by clicking the mouse on it and not letting go.
  5. It’s auxiliary clickable by a user using a mouse with a middle button.
  6. It’s mouseoverabe by a user using a mouse.
  7. It’s keydownable by a user with a keyboard.
  8. It’s focusable by a user.
  9. many many more (see keyboard and mouse events sections)

You can play with some of them with a few lines of JavaScript.

Therein lies one of the problems which makes the web difficult to use. The affordances of a HTML button are not specified only by it’s physical appearance.

Furthermore, without experimenting, these affordances are discoverable only by reading in a bunch of JS code that the user has no access to and likely couldn’t understand even if they did.

For example, mousing over a button could cause some unpredictable change in a web application but when was the last time you waved your hand over a button in the real world and caused an effect?

With web design there’s also the multiplying effect of numerous possible input devices to consider. I’m not likely to encounter a physical button which reacts differently depending on whether I press it with my finger or with the end of a banana but on the web the mouse, keyboard and touch events are separate and can have different effects. This increases the number of affordances.