Home   Articles We've Written   Web Navigation

Seven Steps To Easier Web Navigation

By Constance J. Petersen for Enterprise Development Magazine
Copyright 2000 Fawcette Technical Publications

Even with great content, a hard-to-navigate website won't get used. Here's how to fix that.

It's all about the navigation. You'd think this would be obvious--until you try to get somewhere in the average website. For example, last fall I found myself shopping for tulip bulbs on the Web. I'd procrastinated planting until the first snows were falling, and the local stores were out. So I went to Garden.com and found the bulbs I wanted. I clicked the order now button, then browsed the site a few minutes longer.

When I was ready to check out, I looked expectantly at the top of the page for a shopping cart or basket icon. No such luck. I hunted the page for a link to something familiar: check out, your account, or complete your order. No go. I had no clue how to navigate to the page that would let me place my order. If I hadn't been desperate to buy those tulip bulbs, I would have left the site (and never returned). After combing the site for another 10 minutes, I finally learned that Garden.com's term for shopping cart is wheelbarrow and that there is in fact a wheelbarrow text link on each page.

Figure 1. No guessing games. Garden.com hides its order check-out process behind an unexplained text link labeled wheelbarrow. Most shopping websites use a shopping cart or basket icon (or a checkout link), placed prominently at the top of the page. Yours should, too.

Obvious? Definitely not.

Some suggestions

Here are seven suggestions for making navigation easier:

1. Use standard icons, conventions.

I was a motivated buyer and a veteran Web shopper to boot, so I hung in there and figured it out. But how many sales has Garden.com lost to this nonstandard, less-than-obvious design?

Creative Good Inc. recently published a research paper reviewing 10 leading Web shopping sites. In the study, 39 percent of test shoppers failed in their buying attempts because sites were too difficult to navigate. The potential benefit to be reaped by improving a website's usability is staggering. This same research report indicated that $1 spent on advertising during the 1998 holiday season produced $5 in total revenue, while $1 spent on customer experience improvements yielded more than $60.

On the Garden.com site I'd noticed the wheelbarrow link, all right. But it meant nothing to me. Nor should I have had to click on this link—or any other—in order to find out its purpose.

One- or two-word links will seldom be clear on their own. Try not to make your users read an entire surrounding sentence or paragraph in order to decipher a link. Make the link text itself explicit if you can. But don't over explain either. If your link wraps to two lines, it will look like two links, which will confuse some people. Instead, clarify such a link's meaning with a description on the line or lines immediately following the link.

2. Avoid irrelevant links.

Screen real estate is precious. Yet conventional wisdom has you stuffing every Web page with links to every section of your site. Why? If I'm shopping in the Books section of Amazon.com for a book about Web navigation, why would I want a link to Amazon's Toys & Video Games section? And in the rare times I do want this, I can use the search tool provided on every page. Or I can click once for the home page and navigate to another section from there. If Amazon were to recognize this, its designers could recover a solid half-inch-high swath of prime screen real estate at the top of each page.

Figure 2. Too much of a good thing. Amazon.com detail pages waste screen real estate by retaining the full header from the home page. It provides links to other parts of Amazon.com that are irrelevant to someone who’s drilled down this far. On the plus side, the rest of the page provides numerous links to relevant information about each book.

On the other hand, Amazon also provides a vast array of relevant links for each book, including table of contents, an author interview, editorial reviews, and customer reviews. It also smartly cross-sells by including links to other books by the author, similar books by subject, and associated customer purchases.

3. Reveal structure.

I trade stocks and mutual funds on Dljdirect.com, whose three-tiered navigation toolbar structures the website's pages effectively. When I click Trading, my choices are immediately clear: I can trade stocks, options, mutual funds, and bonds. I can also deal with existing orders or get information on commissions. The site reflects the way its users think, rather than the way it's organized internally.

Figure 3. Tiers for clear navigation. A three-tiered navigation toolbar lets Dljdirect.com provide fast, organized access to its entire site. First-level navigation runs across the top of every page; second and third-level navigation runs down the left side. You can easily jump from task to task, researching information as needed.

Navigation toolbars can reveal structure. It's fine to design the toolbar to reveal the contents of an entire site when the site has focused content. But for diverse sites like Amazon's you should design unique toolbars for each section.

Since navigation toolbars let users choose the task or viewing order, they're especially good for Web apps serving diverse user needs and preferences. Use them when you can organize the information or tasks into a hierarchy with two or three levels.

Offering an analysis on navigation toolbars, David Anderson, a specialist in interaction design, discusses a UI design pattern he calls the Chessboard Layout Pattern. This full-screen presentation of a single view lets users navigate quickly to other related data, using no more than two mouse clicks, navigation choices, or selections. Named for an 8-square by 8-square chessboard, this pattern gives users 7+/-2 first-level choices, subdivided into 7+/-2 second-level choices. Navigation toolbars based on this pattern provide simple, fast, organized navigation through numerous screens. You can support even more screens by subdividing the second-level choices into a third tier.

4. Leave breadcrumbs.

If navigation toolbars don't work for your site, you can still help users find their way back up to any higher level with breadcrumb links. These are a horizontal series of text links connecting to all parent levels of the hierarchy above the current location. These links also add to users' understanding of your website by placing each page in context within the hierarchy.

Say I'm shopping at Garden.com. I go to shopping and click on seeds & seed starting. From the 10 options in that category, I choose wildflower seeds. There I find three subcategories—natives, non-natives, and blends. At blends the breadcrumb trail should show me: shopping | seeds & seed starting | wildflower seeds | blends.

If I want to see other types of wildflower seeds, I click on the wildflower seeds breadcrumb link. If I want to see other types of flower seeds (such as perennial flower seeds), I click on the seeds & seed starting breadcrumb link to see the other choices.

Actually, Garden.com's breadcrumb links fall short. In this instance they show shopping | wildflower seeds | blends. The link to seeds & seed starting is missing and blends should not be a hypertext link.

Figure 4. Crumby breadcrumbs. It’s hard to navigate using Garden.com’s breadcrumb trails. Here I show the bad breadcrumb links they provide, then the good breadcrumb links they ought to show.

5. Don't bury information.

No page on your site should be farther than three clicks away from any other page. For example, from a detail page on Amazon.com (see Figure 2 again), the shortcuts include:

• Buy the item,
• Jump to related items,
• Search for another item,
• Purchase items in your shopping cart, and
• Manage your account.

You can also provide shortcuts using site maps, tables of contents, and pulldown menus.

6. Don't be mysterious.

A section of the WebPagesThatSuck.com website is devoted to "mystery meat" navigation. This is where you don't even know that a graphic is navigational until or unless you pass the mouse over it, then hidden navigational information suddenly appears. The Gravis .com website provides one example out of dozens identified on WebPagesThatSuck.com. Here, if you happen to pass the mouse over the upper joints of the fingers in the bottom right corner of the home page, descriptive text will appear in a small, unlabeled, previously empty text box in the top right corner of the page. Even a game products page shouldn't make a game out of its navigation—especially one as dumb as this.

Figure 5. More stupid guessing games. The Gravis.com home page uses “mystery meat” navigation links. A little box in the upper right corner of the page provides the only label for each link, and that’s revealed only if you happen to move the mouse over the upper joints of the fingers in the bottom right corner. Talk about a hostile UI.

7. Provide help.

Many websites offer a search tool to help users navigate. This becomes mandatory at large sites like eBay.com. A well-designed search tool will offer navigation assistance through various useful features. It will link to a help page that explains search options. It will provide an example-based hint next to the search box to minimize trips to the search options help page. Where applicable it will include a drop-down list for searching based on common keywords. And it will let users narrow search results and find related search results.

I get all this and more on eBay. The find items search provides six custom forms covering a wide variety of ways to search for current and completed auction items. Likewise, the find members search provides four handy custom search forms for getting information on bidders and sellers. The eBay search results page lets me adjust my search criteria, narrow or expand the results, and sort my search results. You also get a search hint and link to more search tips.

Figure 6. eBay shows the way. You get to navigate eBay.com with a variety of powerful, easy-to-use search tools. This Web page shows a number of options for refining search results. Single clicks lead to several custom forms to help find auction items and other eBay members.

Home   Articles We've Written   Web Navigation