Chapter 6. Street signs and Breadcrumbs

DESIGNING NAVIGATION

And you may find yourself | in a beautiful house | with a beautiful wife And you may ask yourself | Well... | How did I get here?!

—TALKING HEADS, “ONCE IN A LIFETIME”

It’s a fact:

People won’t use your Web site if they can’t find their way around it.

You know this from your own experience as a Web user. If you go to a site and can’t find what you’re looking for or figure out how the site is organized, you’re not likely to stay long—or come back. So how do you create the proverbial “clear, simple, and consistent” navigation?

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.)

Stroked out text “needless” is displayed.

“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.

Sketch of a person looking at 3 boxes: POWER TOOLS, HAND TOOLS, and SANDING AND GRINDING is shown.

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

Sketch shows a person looking at the individual products in a rack.

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:

Flowchart explains the process of finding a product.

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:

Flowchart explains the process of finding a product with the decision factor involved.

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.

Image 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.

Image 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.

A search box with “gas chainsaws” entered is shown on the left. On the right, search results window, different gas chainsaws within Lawn, and Garden section are displayed.

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.

Image 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.

Screenshot of a section of a webpage with 3 tabs “Housewares, Tools, and Yard and Garden” is shown with hand cursor pointing to Tools.

Then you’ll choose from the list of subsections.

Screenshot of a section of a webpage with 3 tabs “Housewares, Tools, and Yard and Garden” is shown. Upon clicking Tools, a popup menu displays 3 tabs: “Power Tools, Hand Tools, and Grinding/Sanding” and a hand cursor points to Power Tools.

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.

Image 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:

Flowchart explains the process of browsing to find a product.

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:

Image 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.

Image 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.

Image 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.

Picture titled “FIRST TIME” shows a random zigzag path ending at an X marked location. Picture titled “SUBSEQUENT VISITS” shows an inverted L-shaped path ending at an X marked location.

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.”

Navigation 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:

Image 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.

Image 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.)

Image 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).

2 illustrations are shown. In the first illustration, a person looks at a horizontal street sign at a street corner. In the second illustration, a person looks at a vertical street sign present at a street side, a little away from the corner.

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:

An online newsletter is shown.

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.

3 webpages of the same website are shown. All the pages have ‘Quick Tools’ and major categories of the site at the top, the search box at the top right, and website ID at the top left.

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:

Top section of a webpage is shown.

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.

3 webpages are shown.

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.

Sketch shows a box representing a webpage with a label “Everything else” in the content and a frame enclosing the content with a label “Site ID” at the top.

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.

3 different icons of Site ID are shown.

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.

Top section of a webpage with the links to the major sections in the site labeled “Sections” is shown.

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

Top section of a webpage is shown with a major section selected, it opens a subsection list labeled “Subsections.”

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.

Top section of a webpage is shown with a search box, sign in, and contact links highlighted and labeled “Utilities.”

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.

Webpage section shows Men’s Shoes section in a large font size and links for Restrooms, Telephones, Customer Service, and Gift Wrapping in a small font size.

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 in 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:

Three formats of search box are shown.

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

Image 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.)

Image 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.

Image 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.

Two search boxes are shown named “Search THIS SITE” and “Search for a Book” respectively.

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...

Flowchart shows a site with four levels.

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

Sample Home page is displayed.

Home

Second-level page is displayed.

Second-level page

Subsection page is displayed.

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.,

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

Image 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.

Two street signs shown are titled “Los Angeles” and “Boston” respectively. The first street sign shows a text: “Covington Road.” The second street sign shows a text: “Russett Rd.”

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:

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

Screenshot of a webpage shows “Bikes on the T” highlighted in the navigations listed on the left. In the content, title shown reads “Bikes on the T.”

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.

Image 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.)

3 boxes representing webpages with a frame titled “Page Name” enclosing content “Unique page content.”

Image 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.

Image 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.

Screenshot with 4 boxes are shown.

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.

Cartoon shows a bear in a national park looking at a “You are here” indicator in a map.

©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.

Screenshot of the top section of a webpage shows “Bedroom” (selected) in the sections listed. Within the subsections menu of "Bedroom," “Lighting” subsection is highlighted. An observer looks at it and thinks “Looks like I’m in bedroom lighting.”

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:

4 Screenshots show the following list of sections: “Sports, Business, Entertainment, and Politics.”

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.

Screenshot shows a webpage.

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:

Image 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.

Image 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.

Image 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:

Image 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?”

Image 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.

Image 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.

3 sketches of tabs in a webpage are displayed.

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:

Image What site is this? (Site ID)

Image What page am I on? (Page name)

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

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

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

Image 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:

Image Site ID

Image Page name

Image Sections (Primary navigation)

Image Local navigation

Image “You are here” indicator(s)

Image 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset