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

  Scene from a mall

  Picture this: It’s Saturday afternoon and you’re headed for the mall to buy a chainsaw.

  As you walk through the door at Sears, you’re thinking, “Hmmm. Where do they keep chainsaws?” As soon as you’re inside, you start looking at the department names, high up on the walls. (They’re big enough that you can read them from all the way across the store.)

  “Hmmm,” you think, “Tools? Or Lawn and Garden?” It could be either one, but you’ve got to start somewhere so you head in the direction of Tools.

  When you reach the Tools department, you start looking at the signs at the end of each aisle.

  When you think you’ve got the right aisle, you start looking at the individual products.

  If it turns out you’ve guessed wrong, you try another aisle, or you may back up and start over again in the Lawn and Garden department. By the time you’re done, the process looks something like this:

  Basically, you use the store’s navigation systems (the signs and the organizing hierarchy that the signs embody) and your ability to scan shelves full of products to find what you’re looking for.

  Of course, the actual process is a little more complex. For one thing, as you walk in the door you usually devote a few microseconds to a crucial decision: Are you going to start by looking for chainsaws on your own or are you going to ask someone where they are?

  It’s a decision based on a number of variables—how familiar you are with the store, how much you trust their ability to organize things sensibly, how much of a hurry you’re in, and even how sociable you are.

  When we factor this decision in, the process looks something like this:

  Note that even if you start looking on your own, if things don’t pan out there’s a good chance that eventually you’ll end up asking someone for directions anyway.

  Web Navigation 101

  In many ways, you go through the same process when you enter a Web site.

  You’re usually trying to find something. In the “real” world it might be the emergency room or a family-size bottle of ketchup. On the Web, it might be a pair of headphones or the name of the actor in Casablanca who played the headwaiter at Rick’s.1

  1 S. Z. “Cuddles” Sakall, born Eugene Sakall in Budapest in 1884. Ironically, most of the character actors who played the Nazi-hating denizens of Rick’s Café were actually famous European stage and screen actors who landed in Hollywood after fleeing the Nazis.

  You decide whether to ask first or browse first. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching—typing a description of what you’re looking for in a search box and getting back a list of links to places where it might be.

  Some people (Jakob Nielsen calls them “search-dominant” users) will almost always look for a search box as soon as they enter a site. (These may be the same people who look for the nearest clerk as soon as they enter a store.)

  Other people (Nielsen’s “link-dominant” users) will almost always browse first, searching only when they’ve run out of likely links to click or when they have gotten sufficiently frustrated by the site.

  For everyone else, the decision whether to start by browsing or searching depends on their current frame of mind, how much of a hurry they’re in, and whether the site appears to have decent browsable navigation.

  If you choose to browse, you make your way through a hierarchy, using signs to guide you. Typically, you’ll look around on the Home page for a list of the site’s main sections (like the store’s department signs) and click on the one that seems right.

  Then you’ll choose from the list of subsections.

  With any luck, after another click or two you’ll end up with a list of the kind of thing you’re looking for.

  Then you can click on the individual links to examine them in detail, the same way you’d take products off the shelf and read the labels.

  Eventually, if you can’t find what you’re looking for, you’ll leave. This is as true on a Web site as it is at Sears. You’ll leave when you’re convinced they haven’t got it or when you’re just too frustrated to keep looking.

  Here’s what the process looks like:

  The unbearable lightness of browsing

  Looking for things on a Web site and looking for them in the “real” world have a lot of similarities. When we’re exploring the Web, in some ways it even feels like we’re moving around in a physical space. Think of the words we use to describe the experience—like “cruising,” “browsing,” and “surfing.” And clicking a link doesn’t “load” or “display” another page—it “takes you to” a page.

  But the Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. Consider these oddities of Web space:

  No sense of scale. Even after we’ve used a Web site extensively, unless it’s a very small site we tend to have very little sense of how big it is (50 pages? 1,000? 17,000?).2 For all we know, there could be huge corners we’ve never explored. Compare this to a magazine, a museum, or a department store, where you always have at least a rough sense of the seen/unseen ratio.

  2 Even the people who manage Web sites often have very little idea how big their sites really are.

  The practical result is that it’s very hard to know whether you’ve seen everything of interest to you in a site, which means it’s hard to know when to stop looking.3

  3 This is one reason why it’s useful for links that we’ve already clicked on to display in a different color. It gives us some small sense of how much ground we’ve covered.

  No sense of direction. In a Web site, there’s no left and right, no up and down. We may talk about moving up and down, but we mean up and down in the hierarchy—to a more general or more specific level.

  No sense of location. In physical spaces, as we move around we accumulate knowledge about the space. We develop a sense of where things are and can take shortcuts to get to them.

  We may get to the chainsaws the first time by following the signs, but the next time we’re just as likely to think,

  “Chainsaws? Oh, yeah, I remember where they were: right rear corner, near the refrigerators.”

  And then head straight to them.

  But on the Web, your feet never touch the ground; instead, you make your way around by clicking on links. Click on “Power Tools” and you’re suddenly teleported to the Power Tools aisle with no traversal of space, no glancing at things along the way.

  When we want to return to something on a Web site, instead of relying on a physical sense of where it is we have to remember where it is in the conceptual hierarchy and retrace our steps.

  This is one reason why bookmarks—stored personal shortcuts—are so important, and why the Back button is the most used button in Web browsers.

  It also explains why the concept of Home pages is so important. Home pages are—comparatively—fixed places. When you’re in a site, the Home page is like the North Star. Being able to click Home gives you a fresh start.

  This lack of physicality is both good and bad. On the plus side, the sense of weightlessness can be exhilarating and partly explains why it’s so easy to lose track of time on the Web—the same as when we’re “lost” in a good book.

  On the negative side, I think it explains why we use the term “Web navigation” even though we never talk about “department store navigation” or “library navigation.” If you look up navigation in a dictionary, it’s about doing two things: getting from one place to another, and figuring out where you are.

  I think we talk about Web navigation because “figuring out where you are” is a much more pervasive problem on the Web than in physical spaces. We’re inherently lost when we’re on the Web, and we can’t peek over the aisles to see where we are. Web navigation compensates for this missing sense of place by embodying the site’s hierarchy, creating a sense of “there.”

  Naviga
tion isn’t just a feature of a Web site; it is the Web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.

  The moral? Web navigation had better be good.

  The overlooked purposes of navigation

  Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for and to tell us where we are.

  But navigation has some other equally important—and easily overlooked—functions:

  It tells us what’s here. By making the hierarchy visible, navigation tells us what the site contains. Navigation reveals content! And revealing the site may be even more important than guiding or situating us.

  It tells us how to use the site. If the navigation is doing its job, it tells you implicitly where to begin and what your options are. Done correctly, it should be all the instructions you need. (Which is good, since most users will ignore any other instructions anyway.)

  It gives us confidence in the people who built it. Every moment we’re in a Web site, we’re keeping a mental running tally: “Do these guys know what they’re doing?” It’s one of the main factors we use in deciding whether to bail out and deciding whether to ever come back. Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression.

  Web navigation conventions

  Physical spaces like cities and buildings (and even information spaces like books and magazines) have their own navigation systems, with conventions that have evolved over time like street signs, page numbers, and chapter titles. The conventions specify (loosely) the appearance and location of the navigation elements so we know what to look for and where to look when we need them.

  Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else.

  For instance, we expect to find street signs at street corners, we expect to find them by looking up (not down), and we expect them to look like street signs (horizontal, not vertical).

  We also take it for granted that the name of a building will be above or next to its front door. In a grocery store, we expect to find signs near the ends of each aisle. In a magazine, we know there will be a table of contents somewhere in the first few pages and page numbers somewhere in the margin of each page—and that they’ll look like a table of contents and page numbers.

  Think of how frustrating it is when one of these conventions is broken (when magazines don’t put page numbers on advertising pages, for instance).

  Although their appearance can vary significantly, these are the basic navigation conventions for the Web:

  Don’t look now, but I think it’s following us

  Web designers use the term persistent navigation (or global navigation) to describe the set of navigation elements that appear on every page of a site.

  Done right, persistent navigation should say—preferably in a calm, comforting voice:

  “The navigation is over here. Some parts will change a little depending on where you are, but it will always be here, and it will always work the same way.”

  Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site—which is more important than you might think. And keeping it the same throughout the site means that (hopefully) you only have to figure out how it works once.

  Persistent navigation should include the four elements you most need to have on hand at all times:

  We’ll look at each of them in a minute. But first...

  Did I say every page?

  I lied. There is one exception to the “follow me everywhere” rule: forms.

  On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction. For instance, when I’m paying for my purchases on an e-commerce site, you don’t really want me to do anything but finish filling in the forms. The same is true when I’m registering, subscribing, giving feedback, or checking off personalization preferences.

  For these pages, it’s useful to have a minimal version of the persistent navigation with just the Site ID, a link to Home, and any Utilities that might help me fill out the form.

  Now I know we’re not in Kansas

  The Site ID or logo is like the building name for a Web site. At Sears, I really only need to see the name on my way in; once I’m inside, I know I’m still in Sears until I leave. But on the Web—where my primary mode of travel is teleportation—I need to see it on every page.

  In the same way that we expect to see the name of a building over the front entrance, we expect to see the Site ID at the top of the page—usually in (or at least near) the upper left corner.4

  4 ... on Web pages written for left-to-right reading languages.

  Why? Because the Site ID represents the whole site, which means it’s the highest thing in the logical hierarchy of the site.

  This site

  Sections of this site

  Subsections

  Sub-subsections, etc.

  This page

  Areas of this page

  Items on this page

  And there are two ways to get this primacy across in the visual hierarchy of the page: either make it the most prominent thing on the page, or make it frame everything else.

  Since you don’t want the ID to be the most prominent element on the page (except, perhaps, on the Home page), the best place for it—the place that is least likely to make me think—is at the top, where it frames the entire page.

  And in addition to being where we would expect it to be, the Site ID also needs to look like a Site ID. This means it should have the attributes we would expect to see in a brand logo or the sign outside a store: a distinctive typeface and a graphic that’s recognizable at any size from a button to a billboard.

  The Sections

  The Sections—sometimes called the primary navigation—are the links to the main sections of the site: the top level of the site’s hierarchy.

  In some designs the persistent navigation will also include space to display the secondary navigation: the list of subsections in the current section.

  In others, pointing at a section name or clicking on it reveals a dropdown menu. And in others, clicking takes you to the front page of the section, where you’ll find the secondary navigation.

  The Utilities

  Utilities are the links to important elements of the site that aren’t really part of the content hierarchy.

  These are things that either can help me use the site (like Sign in/Register, Help, a Site Map, or a Shopping Cart) or provide information about its publisher (like About Us and Contact Us).

  Like the signs for the facilities in a store, the Utilities list should be slightly less prominent than the Sections.

  Utilities will vary for different types of sites. For a corporate or e-commerce site, for example, they might include any of the following:

  About Us

  Archives

  Checkout

  Company Info

  Contact Us

  Customer Service

  Discussion Boards

  Downloads

  Directory

  Forums

  FAQs

  Help

  Home

  Investor Relations

  How to Shop

  Jobs

  My _______

  News

  Order Tracking

  Press Releases

  Privacy Policy

  Register

  Search

  Shopping Cart

  Sign in

  Site Map

  Store Locator

  Your Account

  As a rule, the persistent navigation can accommodate only four or five Utilities—the ones users are likely to need most often. If you try to squeeze in more than that, they tend to get lost in the crowd. The less frequently used leftovers belong i
n the footer: the small text links at the bottom of each page.

  Just click your heels three times and say, “There’s no place like home”

  One of the most crucial items in the persistent navigation is a button or link that takes me to the site’s Home page.

  Having a Home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a “Get out of Jail Free” card.

  Almost all Web users expect the Site ID to be a button that can take you to the Home page. I think it’s also a good idea to include Home with the main sections of the site.

  A way to search

  Given the power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to a search page. And unless there’s very little reason to search your site, it should be a search box.

  Keep in mind that for a large percentage of users their first official act when they reach a new site will be to scan the page for something that matches one of these three patterns:

  It’s a simple formula: a box, a button, and either the word “Search” or the universally recognized magnifying glass icon. Don’t make it hard for them—stick to the formula. In particular, avoid