UI Designs PC Web PDA TV Cell phone Camera Voice
 UI Designs
 Table Of Contents
 Excerpts
   On Being a Butler
   Don't Impose
   UI Structure
   Initial Development
 Reviews
 Design Examples
 Related Readings
 Example UI Spec
 About Us
 
 Contact Us opens your email program
 
Link to Amazon
Designing From Both Sides of the Screen
Buy it now!
Don't Impose: Respect Physical Effort
Excerpted from Designing From Both Sides of the Screen
By Ellen Isaacs and Alan Walendowski

You may wonder why we would start out by worrying about physical effort. How hard is it to click a mouse, press a key, push a button, or tap a screen? For most people, not very. But we're not worried about wearing out people's muscles. Instead, we're asking you to think of physical effort as a measure of the effort required to use your technology. The more you ask people to click, type, or tap to accomplish the same task, the more you're imposing on them. Each click represents another step in the process, and after a short while, those steps add up so that using your technology feels burdensome rather than pleasant. It's best to think of your customers' physical effort as a limited commodity to be carefully conserved.

Unfortunately, much of our technology requires so much clicking, you'd think technology developers were getting paid by the number of clicks per session. The positive side of this is that it's relatively easy for you to distinguish your product by removing clicks. The single best thing you can do to distinguish your technology from the rest is to completely shift your attitude about making the user click. In other words, treat clicks as sacred.

Treat Clicks as Sacred

We use the term "click" as a shortcut to refer to any type of user input, including keyboard presses, taps on a touch screen, button presses on a physical device, and voice commands in a speech system. Every one of these is precious and should be asked for cautiously.

Earlier, we raved about the Palm Personal Digital Assistant (PDA) as one of the easiest to use devices on the market. What makes it so good? Consider this quote from Rob Haitani, a product manager who worked on the design of the original Palm applications, from an interview in Eric Bergman's Information Appliances and Beyond:

Well, someone would say, "That's just one more tap," or "That would only take another second." I would respond that it is analogous to the way you organize your desk in your office, your physical desk, in that you have some things on top of your desk and you have some things in drawers or file cabinets. Why is that? Well, if you look at the things on top of your desk, those are the things you use very frequently and they need to be easily within your grasp; whereas things in your drawer you don't use as frequently. So I would say, imagine taking something you use all the time like your mouse or the phone and put it in a drawer. It's just one extra step to pull it out. It just takes a second. But if you use it that frequently, the cumulative effect of that one extra step is excruciatingly annoying. On the other hand, one more tap does not matter for features you use infrequently.

Later in the interview he said:

I say if you only read one book to understand handheld user interface, it should be Strunk and White's Elements of Style. It's a classic college reference book that talks about how to edit extraneous words. The gist is that the fewer words you can communicate the same sentence in, the more powerful your writing is. For example, if you clean up a sentence that's in passive voice and it's 14 words, and restate it in 9 words, it's a much stronger sentence. It's very easy to be verbose, as I'm doing now just babbling on. It's easier to write a 20-page paper than it is to write a 5-page paper because it doesn't require any discipline. UI design is like an editing process — you start with a screen and one by one start ripping things out. But the key is you still have to communicate that point — you don't want to throw that out.

This is a powerful concept. The more you eliminate while keeping the essence of a feature, the better your design. Every click you remove improves the feature, saves people time and effort, and makes your technology more pleasant to use. (Haitani also talks about making tradeoffs in favor of frequently used features, which we discuss later.)

This conservative philosophy shows in the Palm software. For example, to start the Address Book you tap one button — the hardware Address Book button that also turns on the device. There's no booting up or waiting for the application to load. On the main screen, there is a single button: New. That's all you need to get started creating contacts (see Figure 2.1). To view an existing contact, you tap it. That's it: two taps to view a contact — one to turn on the Palm and one to tap the name. Even if that contact is scrolled below the screen, you can write the first letter of the name and the display scrolls down to the first person with that name. (You don't have to tap the Look Up field first; it's the only field that accepts text entry so any text is assumed to apply to that field, saving a tap.) Also, the main screen shows the phone number for each person, so if you're looking up someone's phone number, you don't even need to tap their name, you just look at their entry. So really, looking up a phone number requires just one or two clicks, one to turn on the Palm and possibly one more to enter a letter.

Palm Address Book Figure 2.1. Palm's Address Book main screen.
The user has typed a T and the screen has
scrolled down to the first entry beginning with T.

In most PC-based address book applications, looking up a person's phone number takes far more clicks, even assuming the computer is already on. Here are the steps it would take:

Action Clicks
Double-click to start up the application (which usually takes several seconds) 1
One click to open a menu and another to choose Find 2
One click to enter the name of the person, after switching from the mouse to the keyboard (which we count as a half-click) 1.5
One click to press the Enter key to initiate the Find, plus a half-click to go back to the mouse 1.5
Double-click to open that person's entry, where we'll assume their phone number is easily visible, although that may be a generous assumption 1
Total 7

Seven clicks versus two. Clearly, Palm cares about clicks.

Even technology critics worry about clicks. Walter Mossberg frequently dings products for requiring extra steps. In his February 22, 2001 Wall Street Journal column evaluating Personal Video Recorders (PVRs), for example, he praised UltimateTV's remote because it "has a button that takes you right to a list of your recorded shows. With TiVo, you have to first go through a menu." On TiVo, it takes two clicks to get to the list of recorded shows; on UltimateTV it takes one, but since this is such a common task, Mossberg noted it in his column.

To get a little more sophisticated about clicks, you might notice that not all clicks are the same. For example, clicking a button or check box requires aiming and clicking, but choosing a menu item on a PC or a Web page requires aiming and clicking, holding the mouse button while dragging, and then releasing the mouse. That's more physical effort, so you might consider menu items to be two clicks (as we did in the preceding table). Submenus are worse, because they require holding the mouse longer and controlling its motion that much more. Think of those as three clicks. Scrolling takes effort to hold and release at just the right point, so think of it as 1.5 clicks. Drag-and-drop can be challenging to accomplish and should also be considered two clicks (plus the clicking involved in getting the source and destination in view at the same time, if necessary). Keyboard-mouse combinations require coordinating two hands, so should be considered at least 1.5 clicks. Again, these motions are not that difficult, but they take effort. Keep in mind, not everyone is in the ideal situation when using a computer. People using laptops usually don't have a mouse, and it's harder to click and hold while moving the cursor with a trackball, touch pad, or joystick. Those with a physical impairment also have a hard time with complex motions, and at one time or another we all have impairments (for example, when you cut your index finger, when you're borrowing your lefty/righty friend's computer, when you're using a cheap mouse, when your fingers are cold). On mobile devices, people are often distracted or in motion, which makes it harder for them to click.

Design Guideline
Agonize over every click you ask of your user. Every click you remove improves the feature, saves your user time and effort, and makes your technology more pleasant to use. Be especially sparing with "complex clicks," such as menus, drag-and-drop, scrolling, and keyboard-mouse combinations.

Some Examples
Here are some examples of conservative and extravagant uses of clicks in real products. They will help you start to get a sense of "what a difference a click makes."

Web

On Delta Airlines' flight status Web page (www.delta.com), if you enter a flight that doesn't exist, it presents a page that politely explains that it has no information on that flight, along with a set of alternatives for finding the flight (Figure 2.2). Under the explanation is a New Search button, indicating that Delta expects you to try again. But to do so, Delta asks you to waste an extra click and extra time as the browser makes another trip to the server to reload the flight entry page. Instead, it would have been more polite to repeat the flight form on this page, including the data you already entered, so you can try again from here. (We checked a number of international airlines' sites, and all of them require you to click to try again.)

Delta's 'no such flight' page
Figure 2.2. On Delta's Web site, if you enter a nonxexistent flight, you see this page, which forces you to click again to go back to the flight entry page. Delta could have allowed you to retype your flight number on this page and try again to save a click. This page should also tell you what flight number you entered so you can better diagnose the problem. [www.delta.com]

Web

On Barnes and Noble's Web site (www.barnesandnoble.com), if you search for something that results in a single match, it presents you with a results page indicating that it found a single match. You have to click on that option to see that page, costing you an extra click and page load. This happens because the software is designed to respond to every search by showing a page of results, since most searches find many matches. On the other hand, Amazon.com and IMDB.com (a movie database site) behave more like a butler. If you search for an item that has a single match, it goes directly to the page for that match. With this small amount of extra work, Amazon and IMDB have probably saved their customers millions of clicks.

Copier

The Xerox copier in our office is a high-end machine that serves as both a printer and a copier, a nice enhancement. It has a touch screen display in addition to its hardware buttons (Figure 2.3). If you press the green hardware Start button when the copier hasn't finished copying the previous page, a window pops up on the touch screen telling you it's busy. Once it finishes, the Busy pop-up stays there. If you press Start again (as the pop-up suggests), nothing happens. You have to tap the Close button on the touch screen and then go back to the hardware button to request the next copy. Less fancy machines queue the copy request and start as soon as the machine is ready (one click), but this enhanced machine requires three clicks and two shifts in hand position (click to request the copy, shift and tap Close to the busy message, wait until it is really done, shift back and click to request the copy again). We usually walk to a different machine.

Copier with poor hardware and software integration
Figure 2.3. The Xerox Document Centre 200ST. The software display is not well integrated with the hardware buttons. You must tap Close on the touch display before pressing the green Start button. Instead, the machine should automatically dismiss the pop-up and start copying as soon as it has finished the last job.

Car

The Corvette key remote has the ultimate in Clicks Are Sacred features: no clicks. When you approach the car with the remote, the car automatically unlocks. When you leave, it automatically locks and gives a short beep to let you know it locked. You don't even have to have the key out — it can be in a purse, pocket, or fanny pack. This is our favorite feature in this car (well, okay, next to its performance). When approaching the car with a load of packages, you don't have to shift the bags awkwardly to get your keys out and press a button; you just open the door. It's almost as good as having your butler open the door for you.

PC

Quicken, Netscape Navigator, Eudora, and Outlook, among others, have a "name suggestion" feature, one of our favorite ideas for reducing clicks. As you start typing a Web address in Netscape, for example, the text field automatically fills in the first previously visited Web address that matches those letters, updating with each character typed. As soon as the name you want appears in the field, you can stop typing and press Enter. If you're typing a new address, the name suggestion feature causes no harm. You just finish typing the full address, just as you would if there had been no such feature. This is a wonderful idea, often more helpful than browsers' bookmark feature, which requires several clicks to save a Web site and several more clicks to retrieve (if you can find it in your mess of bookmarks). In e-mail programs, name suggestion reduces the number of addresses you need to save in the address list, since the names of all your correspondents are remembered for you. In Quicken, once you enter a payee, all the other details associated with that entry are filled in (as in Figure 2.4). So if you're paying your cable TV bill, you type the first few letters of the cable provider's name and press enter, since the amount and category information will be the same (unless, of course, they raised the rates again).

Quicken's name suggestion feature
Figure 2.4. As you type, Quicken pops up a menu of previous transactions and fills in the first one that matches (Step 1). When you press Tab, the rest of the information is filled in to the checkbook entry (Step 2). To enter the transaction, you press Enter.

Voice

Pacific Bell's customer service number greets you and asks you to enter your phone number. Already you have to wonder: The company sells caller ID but doesn't know your number when you call? After you enter your number, you're given some options. If you choose to speak to a person, the first thing that person asks is your phone number. If you tell them you already entered it, they explain that their system doesn't transfer that information to the customer support people, it's used only for automated information. However, the menu doesn't give the option to speak to a person until after you've entered your phone number. Pacific Bell spends tolerance capital each time you call for assistance. On the other hand, if you call Schwab, you enter your account number and the person who picks up the phone has your information available. They confirm your name and you're on your way.

In most of these examples, the programming effort to reduce clicks is low relative to the customer effort saved. It would be trivial for the Delta Airlines Web site programmer to repeat the flight entry form on the response page, and this effort would likely pay off in just one day of customers typing incorrect flight numbers. We're guessing it took a few extra lines of code for Amazon and IMDB to skip the search results page when only one match was found. Most likely it would not be hard for Xerox to queue copy requests or at least automatically remove the pop-up when a job is done. It would be trivial for Pacific Bell to offer the customer support option before asking for your telephone number. However, if the company wants to discourage people from talking to agents because that costs more money, it should at least be able to transfer the phone number to customer support. (If not, the phone company that sells such equipment has bigger problems to solve.) The name completion feature and the Corvette auto-unlock feature probably require more effort to implement. But at least both of those can be treated as real features that can be promoted in marketing materials, whereas the others remove annoyances.

Design Guideline
If the effort required to implement a feature is significantly lower
than the cumulative effort saved by your customers, build it. Apply extra implementation effort to smoothing out flow breaks in features that many customers encounter frequently.

(continued...)

< Previous excerpt Next excerpt >

(c) 2002 Ellen Isaacs and Alan Walendowski