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):
- Press down and release quickly. This is a standard button pressing interaction.
- Press down and hold. Imagine a button which controls the height of a crane. Hold down to keep your hook going higher.
- Press twice quickly. Not used commonly in the real world but within the realms of usualness.
- Press down like a button which makes a lamp switch on. Often the button sticks in the depressed state.
- 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:
- It’s clickable by a user using a mouse.
- It’s double-clickable by a user with a mouse.
- It’s tapable with a finger if the user is using a touch enabled device.
- It’s holdable by clicking the mouse on it and not letting go.
- It’s auxiliary clickable by a user using a mouse with a middle button.
- It’s mouseoverabe by a user using a mouse.
- It’s keydownable by a user with a keyboard.
- It’s focusable by a user.
- many many more (see keyboard and mouse events sections)
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.