Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability Page 6

  Fancy wording. They’ll be looking for the word “Search,” so use the word Search, not Find, Quick Find, Quick Search, or Keyword Search. (If you use “Search” as the label for the box, use the word “Go” as the button name.)

  Instructions. If you stick to the formula, anyone who has used the Web for more than a few days will know what to do. Adding “Type a keyword” is like saying, “Leave a message at the beep” on your voice mail message: There was a time when it was necessary, but now it just makes you sound clueless.

  Options. If there is any possibility of confusion about the scope of the search (what’s being searched: the site, part of the site, or the whole Web), by all means spell it out.

  But think very carefully before giving me options to limit the scope (to search just the current section of the site, for instance). And also be wary of providing options for how I specify what I’m searching for (search by title or by author, for instance, or search by part number or by product name).

  I seldom see a case where the potential payoff for adding options to the persistent search box is worth the cost of making me figure out what the options are and whether I need to use them (i.e., making me think).

  If you want to give me the option to scope the search, give it to me when it’s useful—when I get to the search results page and discover that searching everything turned up far too many hits, so I need to limit the scope.

  Secondary, tertiary, and whatever comes after tertiary

  It’s happened so often I’ve come to expect it: When designers I haven’t worked with before send me preliminary page designs so I can check for usability issues, I almost inevitably get a flowchart that shows a site four levels deep...

  ...and sample pages for the Home page and the top two levels.

  Home

  Second-level page

  Subsection page

  I keep flipping the pages looking for more, or at least for the place where they’ve scrawled “Some magic happens here,” but I never find even that. I think this is one of the most common problems in Web design (especially in larger sites): failing to give the lower-level navigation the same attention as the top. In so many sites, as soon as you get past the second level, the navigation breaks down and becomes ad hoc. The problem is so common that it’s actually hard to find good examples of third-level navigation.

  Why does this happen?

  Partly, I think, because good multi-level navigation is just plain hard to design—given the limited amount of space on the page and the number of elements that have to be squeezed in.

  Partly because designers usually don’t even have enough time to figure out the first two levels.

  Partly because it just doesn’t seem that important. (After all, how important can it be? It’s not primary. It’s not even secondary.) And there’s a tendency to think that by the time people get that far into the site, they’ll understand how it works.

  And then there’s the problem of getting sample content and hierarchy examples for lower-level pages. Even if designers ask, they probably won’t get them, because the people responsible for the content usually haven’t thought things through that far, either.

  But the reality is that users usually end up spending as much time on lower-level pages as they do at the top. And unless you’ve worked out top-to-bottom navigation from the beginning, it’s very hard to graft it on later and come up with something consistent.

  The moral? It’s vital to have sample pages that show the navigation for all the potential levels of the site before you start arguing about the color scheme.

  Page names, or Why I love to drive in L.A.

  If you’ve ever spent time in Los Angeles, you understand that it’s not just a song lyric—L.A. really is a great big freeway. And because people in L.A. take driving seriously, they have the best street signs I’ve ever seen. In L.A.,

  Street signs are big. When you’re stopped at an intersection, you can read the sign for the next cross street.

  They’re in the right place—hanging over the street you’re driving on, so all you have to do is glance up.

  Now, I’ll admit I’m a sucker for this kind of treatment because I come from Boston, where you consider yourself lucky if you can manage to read the street sign while there’s still time to make the turn.

  The result? When I’m driving in L.A., I devote less energy and attention to dealing with where I am and more to traffic, conversation, and listening to All Things Considered. I love driving in L.A.

  Page names are the street signs of the Web. Just as with street signs, when things are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings.

  There are four things you need to know about page names:

  Every page needs a name. Just as every corner should have a street sign, every page should have a name.

  Designers sometimes think, “Well, we’ve highlighted the page name in the navigation. That’s good enough.” It’s a tempting idea because it can save space, and it’s one less element to work into the page layout, but it’s not enough. You need a page name, too.

  The name needs to be in the right place. In the visual hierarchy of the page, the page name should appear to be framing the content that is unique to this page. (After all, that’s what it’s naming—not the navigation or the ads, which are just the infrastructure.)

  The name needs to be prominent. You want the combination of position, size, color, and typeface to make the name say “This is the heading for the entire page.” In most cases, it will be the largest text on the page.

  The name needs to match what I clicked. Even though nobody ever mentions it, every site makes an implicit social contract with its visitors:

  The name of the page will match the words I clicked to get there.

  In other words, if I click on a link or button that says “Hot mashed potatoes,” the site will take me to a page named “Hot mashed potatoes.”

  It may seem trivial, but it’s actually a crucial agreement. Each time a site violates it, I’m forced to think, even if only for milliseconds, “Why are those two things different?” And if there’s a major discrepancy between the link name and the page name or a lot of minor discrepancies, my trust in the site—and the competence of the people who publish it—will be diminished.

  Of course, sometimes you have to compromise, usually because of space limitations. If the words I click on and the page name don’t match exactly, the important thing is that (a) they match as closely as possible, and (b) the reason for the difference is obvious. For instance, if I click buttons labeled “Gifts for Him” and “Gifts for Her” and get pages titled “Gifts for Men” and “Gifts for Women,” even though the wording isn’t identical they feel so equivalent that I’m not going to think about the difference.

  “You are here”

  One of the ways navigation can counteract the Web’s inherent “lost in space” feeling is by showing me where I am in the scheme of things, the same way that a “You are here” indicator does on the map in a shopping mall—or a National Park.

  ©2000. The New Yorker Collection from cartoonbank.com. All Rights Reserved.

  On the Web, this is accomplished by highlighting my current location in whatever navigation bars, lists, or menus appear on the page.

  In this example, the current section (Bedroom) and subsection (Lighting) have both been “marked.”

  There are a number of ways to make the current location stand out:

  The most common failing of “You are here” indicators is that they’re too subtle. They need to stand out; if they don’t, they lose their value as visual cues and end up just adding more noise to the page. One way to ensure that they stand out is to apply more than one visual distinction—for instance, a different color and bold text.

  Too-subtle visual cues are actually a very common problem. Designers love subtle cues,
because subtlety is one of the traits of sophisticated design. But Web users are generally in such a hurry that they routinely miss subtle cues.

  In general, if you’re a designer and you think a visual cue is sticking out like a sore thumb, it probably means you need to make it twice as prominent.

  Breadcrumbs

  Like “You are here” indicators, Breadcrumbs show you where you are.

  They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.5

  5 In the original story, H & G’s stepmother persuades their father to lose them in the forest during lean times so the whole family won’t have to starve. The suspicious and resourceful H spoils the plot by dropping pebbles on the way in and following them home. But the next time (!) H is forced to use breadcrumbs instead, which prove to be a less-than-suitable substitute since birds eat them before H & G can retrace their steps. Eventually the tale devolves into attempted cannibalism, grand larceny, and immolation, but basically it’s a story about how unpleasant it is to be lost.

  Breadcrumbs show you the path from the Home page to where you are and make it easy to move back up to higher levels in the hierarchy of a site.

  For a long time, Breadcrumbs were an oddity, found only in sites that were really just enormous databases with very deep hierarchies. But these days they show up in more and more sites, sometimes in lieu of well-thought-out navigation.

  Done right, Breadcrumbs are self-explanatory, they don’t take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home. They’re most useful in a large site with a deep hierarchy.

  Here are a few best practices for implementing them:

  Put them at the top. Breadcrumbs seem to work best if they’re at the top of the page. I think this is probably because it literally marginalizes them—making them seem like an accessory, like page numbers in a book or magazine.

  Use > between levels. Trial and error seems to have shown that the best separator between levels is the “greater than” character (>), probably because it visually suggests forward motion down through the levels.

  Boldface the last item. The last item in the list should be the name of the current page, and making it bold gives it the prominence it deserves. And because it’s the page that you’re on, naturally it’s not a link.

  Three reasons why I still love tabs

  I haven’t been able to prove it (yet), but I strongly suspect that Leonardo da Vinci invented tab dividers sometime in the late 15th century. As interface devices go, they’re clearly a product of genius.

  Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. Like the tab dividers in a three-ring binder or tabs on folders in a file drawer, they divide whatever they’re sticking out of into sections. And they make it easy to open a section by reaching for its tab (or, in the case of the Web, clicking on it).

  I think they’re an excellent and underused navigation choice. Here’s why I like them:

  They’re self-evident. I’ve never seen anyone—no matter how “computer illiterate”—look at a tabbed interface and say, “Hmmm. I wonder what those do?”

  They’re hard to miss. When I do usability tests, I’m surprised at how often people can overlook horizontal navigation bars at the top of a Web page. But tabs are so visually distinctive that they’re hard to overlook. And because they’re hard to mistake for anything but navigation, they create the kind of obvious-at-a-glance division you want between navigation and content.

  They’re slick. Web designers are always struggling to make pages more visually interesting. If done correctly, tabs can add polish and serve a useful purpose.

  If you’re going to use tabs, though, you have to do them right.

  For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs. This is the main thing that makes them feel like tabs—even more than the distinctive tab shape.

  To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it. This is what makes the active tab “pop” to the front.

  Try the trunk test

  Now that you have a feeling for all of the moving parts, you’re ready to try my acid test for good Web navigation. Here’s how it goes:

  Imagine that you’ve been blindfolded and locked in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation:

  What site is this? (Site ID)

  What page am I on? (Page name)

  What are the major sections of this site? (Sections)

  What are my options at this level? (Local navigation)

  Where am I in the scheme of things? (“You are here” indicators)

  How can I search?

  Why the Goodfellas motif? Because it’s so easy to forget that the Web experience is often more like being abducted than following a garden path. When you’re designing pages, it’s tempting to think that people will reach them by starting at the Home page and following the nice, neat paths you’ve laid out. But the reality is that we’re often dropped down in the middle of a site with no idea where we are because we’ve followed a link from a search engine, a social networking site, or email from a friend, and we’ve never seen this site’s navigation scheme before.

  And the blindfold? You want your vision to be slightly blurry, because the true test isn’t whether you can figure it out given enough time and close scrutiny. The standard needs to be that these elements pop off the page so clearly that it doesn’t matter whether you’re looking closely or not. You want to be relying solely on the overall appearance of things, not the details.

  Here’s how you perform the trunk test:

  Step 1: Choose a page anywhere in the site at random, and print it.

  Step 2: Hold it at arm’s length or squint so you can’t really study it closely.

  Step 3: As quickly as possible, try to find and circle each of these items:

  Site ID

  Page name

  Sections (Primary navigation)

  Local navigation

  “You are here” indicator(s)

  Search

  Try it on your own site and see how well it works. Then ask some friends to try it, too. You may be surprised by the results.

  Chapter 7. The Big Bang Theory of Web Design

  THE IMPORTANCE OF GETTING PEOPLE OFF ON THE RIGHT FOOT

  Lucy, you got some ’splainin’ to do.

  —DESI ARNAZ, AS RICKY RICARDO

  Designing a Home page often reminds me of the classic TV game show Beat the Clock.

  Each contestant would listen patiently while emcee Bud Collyer explained the “stunt” she had to perform. For instance, “You have 45 seconds to toss five of these water balloons into the colander strapped to your head.”

  The stunt always looked tricky, but doable with a little luck.

  But then just as the contestant was ready to begin, Bud would always add, “Oh, there’s just one more thing: you have to do it...blindfolded.” Or “...under water.” Or “...in the fifth dimension.”

  Bud Collyer offers words of encouragement to a plucky contestant

  It’s that way with the Home page. Just when you think you’ve covered all the bases, there’s always just one...more...thing.

  Think about all the things the Home page has to accommodate:

  Site identity and mission. Right off the bat, the Home page has to tell me what site this is and what it’s for—and if possible, why I should be here and not at some other site.

  Site hierarchy. The Home page has to give an overview of what the site has to offer—both content (“What can I find here?”) and features (“What can
I do here?”)—and how it’s all organized. This is usually handled by the persistent navigation.

  Search. Most sites need to have a prominently displayed search box on the Home page.

  Teases. Like the cover of a magazine, the Home page needs to entice me with hints of the “good stuff” inside.

  Content promos spotlight the newest, best, or most popular pieces of content, like top stories and hot deals.

  Feature promos invite me to explore additional sections of the site or try out features.

  Timely content. If the site’s success depends on my coming back often, the Home page probably needs to have some content that gets updated frequently. And even a site that doesn’t need regular visitors needs some signs of life—even if only a link to a recent press release—to signal to me that it’s not abandoned or hopelessly outdated.

  Deals. Home page space needs to be allocated for whatever advertising, cross-promotion, and co-branding deals have been made.

  Shortcuts. The most frequently requested pieces of content (software updates, for instance) may deserve their own links on the Home page so that people don’t have to hunt for them.

  Registration. If the site uses registration, the Home page needs links or text boxes for new users to register and old users to sign in and a way to let me know that I’m signed in (“Welcome back, Steve Krug”).

  In addition to these concrete needs, the Home page also has to meet a few abstract objectives:

  Show me what I’m looking for. The Home page needs to make it obvious how to get to whatever I want—assuming it’s somewhere on the site.