Home Articles We've Written Web Navigation
Seven Steps To Easier Web Navigation
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
Obvious? Definitely not.
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
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
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
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
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
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
- 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
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
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
Home Articles We've Written Web Navigation