Affordances and Metaphors

Developing a user interface where the program model matches the user model is not easy. Sometimes, your users might not have a concrete expectation of how the program works and what it’s supposed to do. In these cases, you are going to have to find ways to give the user clues about how something works. With graphical interfaces, a common way to solve this problem is with metaphors. But not all metaphors are created equal, and it’s important to understand why metaphors work so you know if you’ve got a good one.

The most famous metaphor is the “desktop metaphor” used in Windows and the Macintosh. You have these little folders with little files in them, which you can drag around. You can drag a file from one folder to another to move it. To the extent that this metaphor works, it’s because the little pictures of folders actually remind people of folders, which makes them realize that they can put documents into them.

Here’s a screenshot from Kai’s Photo Soap. Can you guess how to zoom in? 

It’s not very hard. The magnifying glass is a real world metaphor. People know what they are supposed to do. And there’s no fear that the zoom operation is actually changing the size of the underlying image, since that’s not what magnifying glasses do.

A metaphor, even an imperfect one, works a lot better than when you don’t have one at all. Can you figure out how to zoom in with Microsoft Word?

Word has two tiny magnifying glasses in their interface, but one of them is on the “Print Preview” button (for some reason), and the other is on the “Document Map” button, whatever that is. The actual way to change the zoom level here is with the dropdown box that is currently showing “100%”. There’s no attempt at a metaphor, so it’s harder for users to guess how to zoom. This is not necessarily a bad thing; zooming is probably not important enough in a word processing application to justify as much screen space as Kai gives it. But it’s a safe bet that more Kai users will be able to zoom in than Word users.

A metaphor, badly chosen, is worse than no metaphor at all. Remember the briefcase from Windows 95? This cute little icon occupied a square inch or so on everybody’s desktop for a few years until Microsoft realized that nobody wanted one. And nobody wanted one, because it was a broken metaphor. It was supposed to be a “briefcase”, where you put files to take home. But when you took the files home, you still had to put them on a floppy disk. So, do you put them in the briefcase or on a floppy disk? I’m not sure. I don’t understand the briefcase. I could never get it to work.



Other objects aren’t designed so well and you can’t tell what you’re supposed to do. The quintessential example is the CD jewel case, which requires you to place your thumbs just so and pull in a certain direction. Nothing about the design of the box would indicate how you’re supposed to open it. If you don’t know the trick, it’s very frustrating, because the box just won’t open.

The best way to create an affordance is to echo the shape of the human hand in “negative space”. Look closely at the (excellent) Kodak DC-290 digital camera, shown here front and back:



Good computer UI uses affordances, too. About ten years ago, most push buttons went “3D”. Using shades of grey, they appear to pop out of the screen. This is not just to look cool: it’s important because 3D buttons afford pushing. They look like they stick out and they look like the way to operate them is by clicking on them. Unfortunately, many web sites these days (unaware of the value of affordances) would rather have buttons that look cool rather than buttons which look pushable; as a result, you sometimes have to hunt around to figure out where to click. Look at this web banner:

The “Go” and “Login” buttons pop out and look like you can click on them. The Site Map and Help buttons don’t look so clickable, in fact, they look exactly like the QUOTES label which isn’t clickable.


Finally, one of the best examples of affordances is the famous “tabbed dialog”. Remember the old Mac control panel?

The idea was that you choose one of the icons from the (scrolling) list on the left. As you click on the icon, the right side of the screen changes. For some reason, this type of indirection was incredibly logical to the programmers who designed it, but many users didn’t understand it. Among other things, people rarely figured out how to scroll the list to get more than the first 4 control panels. But more critically, most people just didn’t understand that there was a connection between the icons and the dialog. The icons actually look like they are one of the choices.



About the author.
