You’ve probably had the experience of encountering a door handle that doesn’t work the way it should: the handle looks like you should pull, but in fact you need to push. In the real world, objects communicate to you about how you can, and should, interact with them. For example, by their size and shape, doorknobs invite you to grab and turn Then. The handle on a coffee mug tells you to curl a few fingers through it and lift it up. A pair of scissors invites you to put fingers through the circles and move your thumb up and down to open and close. If the item, like the door handle, gives you cues that don’t work, you get annoyed and frustrated. These cues are called affordances. James Gibson wrote about the idea of affordance in 1979. He described affordances as action possibilities in the environment. In 1988 Don Norman modified the idea of affordances in his book The Design of Everyday Things. He referred to the idea of perceived affordances: if you want people to take action on an object, whether in real life or on a computer screen, you need to make sure that they can easily perceive, figure out, and interpret what the object is and what they can and should do with it.

When you try to accomplish a task, such as opening a door to a room or ordering a book at a Website, you automatically, and largely unconsciously, look around you to find objects and tools to help you. If you are the one designing the environment for the task, make sure that the objects in the environment are easy to see, easy to find, and have clear affordances. Take a look at the door handle in Figure 7.1. Because of its shape, you’ll tend to grab it and pull down. If that’s the way it works, then you’d say that the door handle is well-designed and that it has a clear perceived affordance


When you’re designing an application or Website, think about the affordances of objects on the screen. For example, have you ever wondered what makes people want to click on a button? Cues in the button’s shadow tell people that it can be pushed in, the way a button on an actual device can be pushed in.  a button on a remote control. The shape and shadows give you cues that encourage you to press the button to activate it.

Most people have figured out the affordance cue that blue, underlined text means that
the text is hyperlinked, and if you click on it you will go to a different page. But lately
many hyperlinks are more subtle, with the only cue that they are clickable showing up
when you hover. Figure 7.7 shows what the New York Times Reader page looks like
before you hover, and Figure 7.8 shows what it looks like when you hover. It takes an
extra step to see the cues. And if you are reading on your iPad, all of these cues are
missing. You can’t hover with your finger on an iPad. By the time you’ve touched the
screen with your finger, you’ve clicked on the link.


Think about affordance cues when you design. By giving people cues about what they can do with a particular object, you make it more likely that they will take that action. Use shading to show when an object is chosen or active. Avoid providing incorrect affordance cues. Rethink hover cues if you’re designing for a device that uses touch rather than a pointing device.

Disqus Comments