Designing Web Navigation
Five tips for planning your space
8/31/98
by Jennifer Fleming
Navigation design is one of the trickiest areas of site development. It's tricky partly because it's so subjective—everyone seems to have a different opinion of what works. It's also tricky because it's hugely important from a usability perspective. If your site's navigation isn't doing what it should, you risk losing visitors.
When navigation works, it's like a ballet: it seems fluid and looks easy. People flow smoothly from action to action, from place to place. Like a dance, navigation has to be choreographed and tested, and this takes careful planning.
In this guide, we'll cover five broad tips to help you plan your site's navigation:
Let's start with the most important concept in navigation design: focusing on goals and needs.
Tip #1: Focus on Goals & Needs
Navigation design is about predicting the actions of your site's users and building a site that will support them. In order to do this, you have to understand your audience's goals and needs.
For example, let's say you run a bookstore. Your customers will come to buy books, but if you simply set up credit card processing and call it a day, you're missing opportunities. Talk to customers and find out how they want to find and purchase books. Do they want to find books that are similar to books they like? Do they want someone to tell them what to read, or do they want to discover new titles at random? Do they want to browse by subject, reading level, or other factors? Paying attention to users' goals can open up new directions for your business, not just new paths through your site. If you're in doubt about this, spend a few minutes on Amazon.com. They're successful because they listen to customers. Luck has very little to do with it.
Another important thing to consider is that many potential customers don't make it to the checkout. What's stopping them? What's interrupting the "flow" of their purchase? Chances are, they have some sort of need that has gone unanswered.
It might be that they have concerns about security that have not been addressed. It might be that they need to search for a particular author, but your search function doesn't support that. It might be that some technology in use on the site crashes their browser. In designing navigation, you need to consider these potential roadblocks. It doesn't mean you're being negative. It means you're road-building—you're taking the time to clear potential obstacles from your visitors' paths.
Finding out about users' goals and needs means talking to the people who will be using the site. If it's an intranet, build in a discovery phase in order to spend time talking with employees about their daily activities. If it's a commercial site, talk to potential customers. Ask them to use and rate other stores. Find out what they like and don't like, and try to get at the goals behind their comments. Not even the most brilliant developer can begin a new project with all the answers. Real solutions have to be uncovered, not constructed, and talking to your audience is the fastest way to ferret them out.
Tip #2: Look at Navigation That Works
There's a lot to be learned from looking at sites that are easy to navigate. It doesn't mean comparing who's doing frames with who's doing colored sidebars. What it does mean is looking at what successful navigation has in common, regardless of the approach that's used.
Doing research for the book I wrote on web navigation, I looked at more than a hundred sites. Of those, very few featured navigation that could be considered successful. Those that did shared certain qualities that should inform navigation planning. Generally, navigation that works should:
All of these qualities are important, but the concept of providing feedback may have the biggest impact on users. Navigation should tell people where they are, and if possible, where they've been. Users should also be able to tell easily what is linked or clickable and what is not. They need to know whether they were successful at making a purchase, running a search, or completing some other task. All of these fundamental navigation needs can be met by providing feedback.
One way of providing feedback is to highlight the user's current location. For example, you are currently in the Guides section of this site, and so the Guides icon to the left is dimmed to show your location. The section headers repeat this information, and so does the recursive navigation above each header (i.e., Anchor > Guides > Design). All of this is intended to give you a clear sense of where you are within the structure of this site.
Another example of providing feedback is Amazon.com's checkout. When you've ordered your books, you are not simply left to flounder around, hoping your order went through. Amazon.com provides a clear message saying "Thank you for your order" and confirming that it has gone through. These techniques are simple, but you might be surprised how effective they can be. They help users to orient themselves and increase feelings of success in completing tasks.
Tip #3: Plan Beyond the Front Door
Even on sites with truly awful navigation design, it is usually possible to get from the front door to an interior page without incident. But planning your front door is only a small fraction of your job as a navigation designer. The deeper you can plan your site's structure and navigation, the more successful your site's navigation will be. The more detailed you are in these early planning phases, the fewer unpleasant surprises your users will need to deal with later.
Most of the navigation problems users complain about don't have to do with getting from the front door to some page inside the site. They tend to relate to being stranded inside a site (what Lycos's Doren Berge calls the "roach motel effect"—users go in, but they can't get out). Typically, this happens because great care has been given to navigation design, but only in one direction (submerging, not surfacing) or only on the top level (from the front door to a secondary page, but not from a secondary page to a tertiary page). In navigation design, it's the details that count. If you are a web firm or consultant recommending a navigation approach, play it out as far as you can, down to the deepest level you can predict. Often the biggest problems are not on the top level of a site.
One method that can help is storyboarding. If you storyboard a sequence of screens to show the flow of an action, you will usually be able to see where you need to build in navigation to support "surfacing" (returning to the top), for example. Storyboarding also helps you see what will be happening on the level of the interface as you move through a site. It's more helpful than flowcharting alone, which only shows a sequence of events.
However, storyboarding can't be effective until you've taken time to structure your site, or planned the site architecture. A skilled site architect (such as Lou Rosenfeld of Argus Associates) will map a site far beyond the top level, treating the whole site as a cohesive space—not as a messy collection of pages hidden by a well-planned veneer. This "wholistic" approach to design helps you to define your space and maintain consistency, an important concept in navigation design.
Tip #4: Use Shortcuts
Once you've taken the time to consider the structure of the site as a whole, spend some time thinking about shortcuts through this structure. On this site, for example, we offer content teasers on the front door. We also offer rotating tips at the top of every page. These shortcuts help to provide quick and easy access to small chunks of your content. Some of the most common shortcuts are search features, site maps, tables of contents, and pulldown menus for content sections.
The basic idea behind shortcuts is to get people to information rapidly and with ease. Design your shortcuts with this in mind. There are many examples of search screens that are unusable because of a confusing array of options, site maps that take many minutes to load, or tables of contents that require endless laborious scrolling. Shortcuts should by nature be streamlined—they should be brief, fast, and clear. They should also be convenient and close at hand. For many shortcuts (such as searchability), you might consider providing a link on every page of your site to make the most of the flexibility they can offer.
A word on pulldowns: at the moment, pulldown menus are being seriously overused. The most common pulldown blooper is having multiple warring pulldown menus on one screen. Within the context of a form, multiple pulldowns are fairly clear. As a navigation technique, multiple pulldowns leave something to be desired. Because pulldowns can't easily show a site's content relationships (and are often used as a dumping ground for random content pieces), you are better off using one focused pulldown menu than several competing ones. It's also important to know that pulldowns generally are risky when used as a site's primary navigation scheme, since many novice users don't realize there are other options available under the "Select" menu.
Tip #5: Understand That Everyone Is Different
The expression,"I'm OK, you're OK" may be something of a joke, but it's got a lot to recommend it when it comes to navigation design. One of the things that makes navigation design such an intriguing challenge is that it is so subjective. What one person thinks is terrifically usable and fun, someone else may think is difficult and cumbersome.
Icons are a very good example of this. For people who prefer to absorb new information in visual ways (maps, pictures, and so on), icons are often welcome, assuming they are reasonably clear. For people who prefer to absorb new information by reading or listening, icons are intensely frustrating. For both audiences, a simple text label on the icon can help to clarify its meaning and make it more accessible.
Another example of how personal preferences affect how we approach navigation can be found in searching and browsing behavior. Some people like to search for the exact information they need, and will not browse unless forced to. Others feel very comfortable browsing through information to find what they need. Children, for example, generally respond better to browsing than searching when it comes to finding information (that may change as current Net-savvy youth grow older).
In designing navigation, then, you need to know whether your audience might have some stylistic preferences you need to address (such as children's need to browse). In most cases, you will need to build in alternatives to support different personal styles and preferences. This might mean building in extra shortcuts—such as a search function and a site map—to please a variety of visitors.
Recap & Resources
Navigation design may be complex, but it's also well worth the effort. Remember that you're helping people to accomplish goals— whether those are finding information, purchasing a book, talking with friends, or learning a new language. If you can build a navigation system that supports users, you will ultimately reap the benefits. It may be in sales or hits, but more than likely it will be in rarer qualities like loyalty—a much bigger prize in the long term.
Jennifer Fleming is an Anchor producer and the author of the upcoming book Web Navigation: Designing the User Experience (O'Reilly, 1998). She runs Square Circle Solutions, a Boston-based web firm specializing in user experience consulting and idea generation.
© 1998-1999 Anchor Productions, Inc. All rights reserved.