Affordance
John Phillips | February 8, 2004
Affordance refers to the perceived properties of an object, specifically those properties that affect how the object can be used. It’s one of those things best understood by an example.
Ever had this happen to you? You go up to a door in a public building, the entry to a Mall or your dentist’s office, whatever. The door has protruding handle, a tube bent into a shallow “U” that your fingers wrap around. You go to pull the door open the handle and nothing happens. Nothing happens because the door opens by pushing, not by pulling. When you look there is little sign that says “Push” right above the handle. You feel a little silly and push the door open.
This is an example of affordance. (An example where the architect, or whoever picked the handles, dropped the ball.) When your fingers wrap around the handle, you sense that the way the door opens is by pulling. This is affordance. Your perception is telling you how the thing works. This message is a thousand times stronger than the tiny “Push” sign.
If the door had a metal plate instead of a handle, you would know that the door opens by pushing. You can’t pull on a metal plate, you can only push. Again, this is affordance.
There are two lessons here for user interface designers. One, make the properties of controls obvious. Two, people respond to affordance more quickly and easily than language.
Examples of Affordance in User Interface In a user interface, affordance means making buttons look clickable, resize controls look drag-able, etc. Lets look at some examples.
Here is a button from PayPal’s site:
Note the subtle but noticeable drop shadow on the bottom and right sides of the button. It makes the button look like its standing proud of the surface of the page. It looks like it affords being pressed down.
I altered this image, removing the shadow from the button to make the following image:
Now it’s just a box. You’d probably still guess its a button, but the other one looks more clickable. (As if that were a word.) That’s affordance.
One other example of affordance, the resize “handles” of windows in OS X. (Similar controls were found in previous version of the OS.) For those unfamiliar with it, the resize control is the small box in the bottom right hand corner of the window, shown below.
This works through a rather curious visual metaphor. If the window were a physical object, the ridges in the control would allow your fingers to get traction on the object. The windows are virtual, but the ridges give the control “mouse traction”, they make the control appear draggle. This is odd, because the control is virtual, friction does not apply. But none the less, the control looks like it affords dragging.
So that’s affordance, subtle visual clues that make the operation of controls obvious.