2014-10-07

Affordance

When the characteristics of an object or device invite interaction, this is called “affordance.”

For example, this lacks the appropriate affordance:

What’s missing is something like this:

The lever of the door handle “invites” the hand to take hold of it and push or pull on it.

A door can be built to invite specific kinds of affordance. A vertical bar invites pulling and a metal panel invites pushing.

The same is true in software UI.

Text doesn’t invite interaction. Did you just have an urge to click on this text? HOW ABOUT NOW? Now? What about now? I bet your tempted to click on this. A button, like , has affordance when it looks like a button in the physical world. Look at the buttons on your monitor, your keyboard, your smartphone, or any device nearby. Each of those offers affordance and they offer a specific kind of affordance: push. When building UIs, make sure interaction is invited with appropriate affordance for the kind of interaction that the user is expected to do.