CHAPTER 5: Broken Metaphors – User Interface Design for Programmers

Broken Metaphors

Remember the briefcase from Windows 95? (See Figure 5-1.) That cute little icon that occupied a square inch or so on everybody's desktop for a few years until Microsoft realized that nobody wanted one? 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 never could get it to work.


Windows' unloved briefcase

A metaphor badly chosen is worse than no metaphor at all. Unfortunately, desktop user interface designers feel that they're breaking some kind of law if they don't use metaphors, so they would rather pick a wrong metaphor than go without.

When you use metaphors, try to make
them behave in predictable ways like
objects in the real world. Violating reality
is just confusing.

What's the purpose of a metaphor in the first place? To teach users what the program model is so that the program model and the user model come into agreement. If you use the wrong metaphor, you are actually teaching the user the wrong thing about how the program works, so you're creating more trouble than you're solving. There's some historical evidence that the Windows 95 briefcase metaphor just didn't work: later versions of Windows have tried to compensate for the bad metaphor by forcing you to read a screen full of instructions whenever you drag files into that dang doohickey.

Guess what? Nobody reads instructions. My new Cuisinart food processor must have three hundred stickers on it that say "Do Not Even Think of Operating This Device without Reading the Instructions, and That Means You!" Which, we know as anthropologists, actually means that millions of people use Cuisinarts without reading the instructions. I'll go into that more soon. For now, I'd like to talk about broken metaphors like the briefcase and what a doggone nuisance they can be.

Obeying Physics

In Chapter 4, I talked about how nifty tabbed dialogs are. Microsoft Excel uses tabs to store multiple sheets in a workbook as shown in Figure 5-2.


Microsoft Excel uses tabs to show multiple pages.

Tabs are kind of small, so people don't necessarily notice them there, but everyone knows how they are expected to work and nobody has trouble using them. For example, in Figure 5-2 it's obvious that the "Income" sheet doesn't live in its own file. It's also obvious that there is no sheet called "Wombats." And it's obvious that the way to see the "Income" sheet is to click on the tab that says "Income." Am I boring you with obvious facts? The great thing about metaphors is that they allow you to "borrow" a part of the user's mental model of the nature of physical objects in the real world.

When you're using metaphors, it's very helpful if the computer program obeys the physical laws of the real world object. Many broken metaphors are the result of a failure to adhere to the "laws of nature," that is, the laws of the real world object that they are emulating.

Consider the ruler in Microsoft Word for Windows—specifically, the three small doohickeys on the left side which control the left indent, the hanging indent, and the first line indent, as circled in Figure 5-3.


Microsoft Word for Windows has three small, adjustable doohickeys that can be dragged to adjust the paragraph indenting.

People find these a bit hard to use. Here's why: if you drag the top doohickey, which represents the first line indent (as shown in Figure 5-4), only the top doohickey moves. That's what you would expect. But if you drag the bottom doohickey, representing the overall indent, all three doohickeys move, as shown in Figure 5-5. It's not just an inconsistency—it's a violation of the laws of nature! In nature, things are either connected or they're not. If I move my fork, I don't expect the knife and spoon to move, too!


Dragging the top doohickey moves it. So far so good.


Dragging the bottom doohickey moves all three, thus violating a "law of nature."

Multiple Rows of Tabs

When I first posted Chapter 4 on the Web, many readers emailed me to say that tabbed dialogs are all well and fine, but they're terrible as soon as you have more than one row of tabs. Indeed, they're right. The biggest problem has to do with the way multiple rows of tabs always seem to violate physics: when you click on a tab from another row, the tabs all shuffle around like restless schoolchildren on Class Photo Day, as shown in Figures 5-6a and 5-6b.


(a) Click on a tab from the back row... (b)...and the tabs move around, in a confusing way

This violation of realism is distressing enough that the designers of Microsoft's Visual C++ IDE went to a great deal of trouble to implement scrolling tabs. These have tiny arrows to control which tabs are visible and a neat "torn tab" effect so you notice that there are tabs missing to the right (see Figure 5-7).


Another way to deal with too many tabs

The real solution to this problem, I think, is to figure out why you have so many options and eliminate a whole bunch, as discussed in Chapter 3. Nobody likes a dialog with a couple dozen tabs, all with cryptic monikers full of complicated options. But if you simply must have multiple rows of tabs, at the very least, try not to make them violate physics. With today's faster processors and graphics cards, it's easy to create a simple animation effect so that the front batch of tabs slides down when you click on the back row. For an illustration of this, see Figures 5-8a through 5-8d.


(a) Two rows of tabs. (b) When you click on a tab from the front row, it behaves as expected

Those Pesky Navigation Tabs

Tabs seem to be pretty popular on Web pages, too. Look at Figure 5-9, the Urbanfetch Web site. It's pretty obvious from the appearance of the page that the tabs represent different sections of the Web site.

There are two problems. The first is the slow speed of the Web. I know, it's pretty whiny to complain about the slow speed of the Web. After all, the Web allows you to look at detailed Lego catalogs and find that perfect, tangerine-colored, sloped Lego brick in seconds, then have it delivered to your home in twenty-four hours or less—something which used to take several months of research and a painful weeklong excursion in a covered wagon to the nearest big city. But I've gotten spoiled, and for me, the inevitable three-second delay when you click on a page is starting to get pretty annoying. There's an unwritten children's bedtime story in all of this: The Princess and the High Latency Internet Connection. In this story, Prince Webby and his mother, the Mouse Queen, convince themselves that the poor child who knocked on their door in a rainstorm is a real princess, because she's used to a personal T-1 line in the castle, and when she's forced to use a 28.8 modem, she complains and complains...

Anyway. What was I talking about? Oh, yeah. Tabs on a Web page. When you actually click on a tab in a computer program, the screen responds immediately, obeying the laws of the real world. But when you click on a tab on a Web page, even a fast Web page, you wait at least three seconds until a new page slowly comes up showing you something that is as likely as not to be completely different. When you click on the tab on the Urbanfetch Web site in Figure 5-9, five things happen that violate physics:

(c) When you click on a tab from the back row, the front row starts to drop down. (d) After a half-second animation, the front row, still in front, is now at the bottom of the dialog and the back row is fully revealed.
  1. Nothing happens for a few seconds while the new page is fetched.
  2. Then the whole page goes white for a while.
  3. Then, finally, a new page appears.
  4. But now all the tabs are in a different place (the row of tabs shifts upward due to a lack of attention to detail on the part of the site designers).
  5. The whole color scheme has changed now, including the color of the Urbanfetch logo, which is not supposed to be a part of the tab area anyway.

Some of these quirks are intrinsic to all Web sites; there's nothing that can be done about latency or the way pages refresh (short of using JavaScript and Dynamic HTML, which isn't quite standard enough yet). And some of these quirks are specific to Urbanfetch's site.

The joke here is that all of these problems with tabs are not really usability problems, despite the fact that some well-known Web usability gurus have complained a lot about them. The site is perfectly usable. Why? Go back to our rule from Chapter 4. The point of a metaphor is to show the user the program model. On a Web page, tabs show the user how the site is organized into sections. Once the user clicks, it almost doesn't matter what happens—you've accomplished your goal. (A much worse problem with the site in Figure 5-10 is the various links below the row of tabs, which don't look like links and don't look pushable. You would be forgiven if you thought that they were merely advertising slogans and failed to push them.)


Click on the Electronics tab, wait five seconds...


...and watch the whole screen shift around and change color. These minor violations of physics do not actually detract from the usability of the site.

The Program Model

Microsoft Outlook introduced a new UI concept they called the "Outlook Bar." Located on the left side of the window, it is probably the most confusing part of a rather confusing interface.

Look at Figure 5-11. Yeah, I know, you're dying to see what's in my Inbox, but ignore that for a moment and focus on the left edge of the screen where it says Outlook Shortcuts. Just by looking at it, can you figure out how to use it? What happens if you click on the button that says Outlook Shortcuts? Or the button that says My Shortcuts? Are you supposed to click on them or drag them? Nothing about the visual appearance gives you any clues about how the thing works.


The Outlook Bar. Can you figure out how it works just by looking at it?

Now look at my redesigned version in Figure 5-12. It operates exactly the same way, but it uses a metaphor that provides some subtle visual cues to show how it's supposed to work. Outlook Shortcuts looks like a physical card with some icons on it. And it's very clear that My Shortcuts and Other Shortcuts are additional cards with icons on them, tucked out of the way so that you can see Outlook Shortcuts. When you click on one of these additional cards, it slides up to show you its contents.


My redesigned version of the Outlook Bar uses a real live metaphor to convey to the user how it's supposed to work.