You’ve probably had the experience of encountering a door handle that doesn’t work the way it should – for example, it has a handle that 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, some door knobs invite you to grab and turn them; other door knobs invite you to grab and pull; the curved 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. Psychologists call these cues “affordances”.
When the cues go wrong — If an item is missing cues, or gives you incorrect cues, you get annoyed and frustrated. If the cues inherent in the object itself aren’t enough to convey its use, then we resort to putting labels on to fix the cue mismatch, as in the door handle above.
The equivalent of door handles online –– Have you ever thought about what makes people want to click on a button on a computer screen? If you use certain cues in the shadow of a button it looks like it can be pushed in, the way a button on an actual device, like a remote control, can be pushed.
If the shadows are reversed then the button looks like it is already pushed in.
Websites are losing affordance cues – Have you noticed that we are starting to lose affordance cues? When graphical user interfaces first came out, almost all the buttons had these shading cues. They were built into the button widgets that came with the Windows or Mac styles. When everything moved to the web there weren’t required interface widgets. Everyone could create their own buttons. Many buttons don’t have the cues anymore.
We’re even losing the hyperlink cues — Most people have figured out the affordance cue on websites 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/if you hover, as in the example below from the New York Times Reader application. In the app, you don’t get the hyperlink until you hover.
Even fewer cues on an iPad — And if you are reading on your iPad all of these cues are missing. You can’t hover on an iPad with your finger. By the time you’ve touched the screen with your finger you’ve clicked on the link. There is no hover on an iPad.
What do you think? Are we going to lose all affordance cues?
And if you like to read:
- James J. Gibson (1979), The Ecological Approach to Visual Perception.
- Donald Norman (1988), The Design of Everyday Things.
Leave a Reply