- Use Visual Elements Sparingly
- Make Common Tasks Visible; Hide Infrequent Tasks
- Give Feedback; Show Signs of Progress
- Keep Preferences to a Minimum; Give Smart Defaults
- Follow Conventions (Even If They're Not Your Ideal Design)
- Look for "Widgetless Features"
This chapter is from the book
This chapter is from the book
This chapter is from the book
Make Common Tasks Visible; Hide Infrequent Tasks
How do you reduce visual clutter? Second to eliminating unnecessary features, the best way is to hide infrequently used features. You'd like your main screen/window to offer people quick access to the things most people do most often, while giving newcomers an easy way to get started (as mentioned earlier by Palm's Rob Haitani). If you overwhelm people with choices, you'll intimidate new users and annoy frequent users who have to wade through the clutter to get to what they want. At the same time, most people don't look hard for features unless they're very motivated to find them. So the challenge is to present the frequent tasks cleanly while suggesting further functionality without cluttering the screen. Easy, huh?
Here's a good example of making common tasks visible and hiding infrequent tasks. What are the most common things people do when contacting an airline? You'd probably agree that they plan trips (find out about flight schedules and rates, possibly booking them) and check flight status (current departure and arrival times of today's flights). Of course, there are many other things people might do: look for discount promotions, find out about lost luggage, look for a job, sign up for the frequent flyer program, and so on. But those happen far less often. So if you're building a Web site for an airline, you want to make the two main functions very easy to find, and then get people started in the right direction if they want anything else.
Now look at several airlines' Web sites. United Airlines (see Figure 3.4) does an excellent job of highlighting those two common tasks and giving a path to the less common ones. It also allows people to check frequent flyer mileage, perhaps because their information indicates that this is the third most frequent task. Because the three tasks are so cleanly presented, it's easy for your eye to find the one you want and ignore the others, and each one lets you get started on your task without having to click to another page. Less frequent tasks can be found lower down, but they're less prominent, and do require clicking. Most other airline sites have far more clutter and make it harder for people to do the two key tasks. You can check out some on your own, but Figures 3.5 and 3.6 show two more.
){kind=link}
){kind=link}
){kind=link}
Figure 3.4 United Airlines' home page makes it easy to find the most common tasks, and it lets you get started on any of those tasks from the main page. Less frequently visited pages are visually separated but easily accessible from categories below.
American Airlines' page (see Figure 3.5) is a mishmash of information. It assumes that the two most frequent tasks are to check today's news on American (high on everyone's list, no doubt) and to plan a trip, and those two tasks are not cleanly delineated. See if you can find the place to check flight status. It is buried between the two prominent tasks ("Click Here for Gates and Times Information"). The rest of the page is a clutter of pulldowns broadly named, so it's hard to know where to look for a less common task. For example, what would you click to check your frequent flyer mileage? (Answer: It's under the AAdvantage pulldown menu.)
Figure 3.5 American Airlines' home page makes it hard to find the two most common tasks: planning a trip and checking the status of today's flights. The main screen is cluttered with less frequently used information (Today's News, for instance), and different tasks are not cleanly separated.
On Lufthansa's site (see Figure 3.6), the orange border helps you find the flight planning section on the right, but the top center section features a collection of unrelated features (highlighted in gray), followed by a set of specials. Again, it's hard to find the flight status. (Arrivals/Departures is the fourth link in the left-side navigation menu.)
Figure 3.6 Lufthansa's home page is also visually cluttered and makes it difficult to find trip planning and today's flight status information (under Arrivals/Departures in the Cockpit section). Again, less commonly requested information is featured.
The importance of making common tasks more accessible than rare ones applies just as much to desktop software and especially to smaller devices. People frequently use handheld devices when they are mobile and focused on other activities. In such situations, it's especially important to help people find what they need quickly. For example, when the phone rings, the only thing you want to do (and can do) is answer it. This should be trivial to do, and on some cell phones, it is. Instead of hunting for the Talk button, you can press any button at all to answer a ringing phone. How nice! To hang up, however, you do have to find a particular button because other buttons could be used for other purposes while on a call. We like the Nokia 6162 model, which has a flap, shown in Figure 3.7. To answer the phone, you open the flap, and to hang up, you close it. At the end of the call, it's much easier to close the flap without looking than it is to find a certain button. And since you would close the flap anyway, it feels like no effort to hang up.
){kind=link}
Figure 3.7 The Nokia 6162 phone makes it easy to end a phone call without hunting for the End button-you just close the flap.
Here's another way that Nokia does a nice job of making common tasks accessible. Many cell phones have a "soft key" whose label is presented in software, so it can be modified depending on the context. Some cell phones include a Short Messaging Service (SMS), which displays text messages on the phone. Nokia does an excellent job of offering just the right option as the default. Figure 3.8 shows the process of reading new SMS messages when you already have one saved. When a message arrives, the main (left) soft key changes to Read, which takes you to a screen with a list of message headers. The first new message is already selected (not the first one in the list of saved messages) so you can press Read again to view the new message. When you're done reading it, that soft key becomes Options, and when you press it you see a list of things you might want to do, in order of likelihood. If you want to read the next message, you press OK, again the default button, and it appears. So reading new messages is a matter of pressing the same button multiple times, keeping mental and physical effort to a minimum.
){kind=link}
Figure 3.8 To read a series of text messages on this phone, you repeatedly press the left soft key as it keeps changing to the most likely next command.
Design Guideline
Determine the most common user tasks and make sure they are visible and easily accessible. Hide less common tasks that clutter the screen and make it hard to find the common tasks.
We have a friend who has complained about the controls in car dashboards. He believes you should be able to find any of the frequently used controls without taking your eyes off the road. He suggested a good idea: Provide an anchor position for the thumb on the dashboard that is easily found by feel. From there, put buttons for the frequently used controls beneath each of the other fingers. Figure 3.9 is an artist's rendering of this feature. With this design, you would be able to reach out and, for example, cycle through your preset radio stations or adjust the temperature, keeping your eyes on the road all the while. (Audio feedback would be useful here, as we'll discuss later.)
){kind=link}
Figure 3.9 A design sketch for a dashboard that lets you locate frequently used controls without looking. The thumb guide and grooves help your hand find the right position, and the buttons give tactile and auditory feedback when pressed.