Affordances on the web

Reading the latest edition of The Design of Everyday Things, I came across the terms affordance for the first time. I realize I'm a couple of decades late on this one 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 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 tappable 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 mouseoverable 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 make the web difficult to use. The affordances of an HTML button are not specified only by its 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.