Taxes done? Awesome! Take a tax break – everything’s 15% off!
  • Part 1 (Contracts, Site Requirements,Information Architecture)
  • Part 2 (Hosting and Security)
  • Part 3 (Navigation, Scent)
  • Part 4 (Semantics, Structure vs. Design, Universal design)
  • Part 5 (Interaction, Errors, and Administration)

You could say that this part of the series is really breaking the concepts of information architecture down into components immediately relevant to web development. Practically speaking, I’m going to cover the necessities of navigation design, the concept of “scent of information” and the question of design “noise.” (Canonicalization was supposed to be covered in this part of the series, as well, but I’ve moved it.)

Navigation design is obvious: the primary organization of all aspects of site navigation. This is an area of web design and development where it’s very easy to go massively and devastatingly wrong — like most best practice concepts, avoiding the pitfalls is 90% of the battle.

“Scent” refers to information design which provides “clues” to help show the user where they are, where they’ve been, and how to get where they need to go. Planning your site should include careful planning to think about these processes.

“Noise” is a term I’m using to describe the opposite of “scent.” Noisy elements of design are those elements which detract or distract from a user’s needs. They may generate confusion or prevent users from following the path of action they need.

Navigation design has two parts: organizing the documents and sections of your site into links, and generating the visual and interactive method which will be used to access that navigation. It’s important to do this in the correct order — and this is the point in the development process where you simply need to know the scope of content on the web site.

It’s neither necessary nor desirable to actually know every single item which will be on the site. In fact, it’s usually not even possible. A website should grow after it’s initial development, so you should always provision for the addition of future documents. What you need to know now is as much as possible about the documents which will definitely be on the site.

To get started, ask your clients for this information:

  • A list of content categories,
  • A list of representative content titles and summaries,
  • A list of additional features which will require access.

Ideally, you’ve already got a lot of this information from the contract phase. But, if not, now is the time to get it.

For the first steps in navigation design, you’re going to focus exclusively on the content and features.

The organizational needs will be different from site to site. Obviously, a site which is focused primarily around a specific tool will need to primarily concentrate on getting people to that tool. Text content, such as help files or related articles, will automatically be relegated to a secondary position in the navigation. In general, however, this article is dealing with text and content oriented sites: sites which need to communicate certain types of information to users.

A classic method for categorizing documents is to perform a simple card sort. You can perform this test with as large or as small a test group as you feel comfortable with. Restrict users to people who have a reasonable chance of being able to use the information — you may not want to use your grandmother to sort documents on structural engineering. (Depends on your grandmother, naturally.)

Ultimately, you may want to perform two separate card sorts: an open sort (with no established groupings) and a closed sort (using the client’s requested groupings.) For the sake of brevity, I’m assuming that you’ve worked with the client to refine the requested categories.

The guidelines for the process are simple: write the document titles (and brief descriptions, if the title is ambiguous) on index cards. Give people a pile of cards (usually between 30 and 100), and ask them to sort them into groups of like items. This is an excellent way to gain insight into how potential users of the site might expect to find information.

A card sort certainly shouldn’t be your only method to find a logical navigation structure, but it will provide valuable clues concerning what might be expected by visitors. You should also realize that disagreement between sorters doesn’t mean that you need to pick one option: it may simply mean that additional lists of information using different sorting mechanisms may need to be available.

Your ultimate goal in sorting information is to avoid requiring users to look in more than one place: the apparent likelihood that a given document will be found in one category should always lean in one direction.

The second step is relatively simple: building and designing the navigation. Best practices pretty much insist on accessibility and the use of web standards to construct navigation. I’ve written an extensive article on accessible navigation design already, so I’m simply going to refer you to that article for this section.

Scent of Information

Providing a strong scent of information is a good follow up to categorizing your information. Having spent all this time filing information away, I’m sure you noticed that some information just flat out belongs in more than one place. A classic example (for almost everything, actually) is the iPod. Is it computer equipment? Is it audio equipment? What about entertainment equipment?

Ideally, you want to provide enough information about your categories to help users visit the right category first — and not by using the site-cluttering cop-out of putting your items in all relevant categories.

Seed your navigation with extra information

When there’s a possibility of doubt, one of the first steps you can take is to add information which describes your category. Instead of just listing “Computers” in the navigation, say “Computer: Laptops, monitors, mice, keyboards.” You can’t (and shouldn’t) list everything in the category, but providing a representative sample can help users target their navigation more accurately.

Provide navigation to related information

A second method you can use it to provide links to related information. When you have a site set up where there’s a possibility of confusion, you should be able to identify most of these potential problems in advance. Using the same example, you may want to provide a link to iPods and digital music players if somebody is browsing under sound cards or audio software.

Use descriptive linking

A link which tells you precisely what it links to is far more valuable than a generic link text. It’s more likely to attract the eye, more likely to result in an action by the user, and will help your users quickly target the right document.

It’s not just for accessibility that you want to avoid repetitive or meaningless link texts. From a usability or marketing perspective, the right words can make all the difference.

Use meaningful trigger words

What behavior do you want to encourage? When somebody writes “Click here,” they are obviously interested in the short term: they want a click. If somebody writes “Read ‘The biography of a whale’ Now” they’re asking you to read the document. Similarly, using words like “Buy,” “Explore,” or “Hire,” you’re providing a specific, task-oriented clue within the text of the link. Because of this, the user knows better what to expect when they follow the link — and are more likely to follow the link they really want first.

Or, thinking persuasively, are more likely to want what you’re trying to offer. It goes both ways.

Design Noise

On the opposite side of the coin from scent, we find noise. Bad information, information pollution, stink — whatever you might want to call it, the end result is the same. This is information which leads the user the wrong way.

Identify your primary goal

If you’re a sales-oriented site, the strongest scent should be provided to guide users to products and along the purchase path. You may want to provide a lot of essential and valuable information about your products, about your business, or about the industry you’re working in — but if information isn’t your primary business, you should let these parts of your site take somewhat of a back seat.

Link to your documents accurately and understandably

Make sure that whatever you’ve used to link to a page is accurate. If you’ve stated that an article contains certain information, or has a certain product on it — it bloody well better! This seems like it should be obvious, yet I can’t even begin to count the number of times I’ve found myself following a seemingly valuable link just to be stymied by the document itself.

Following a related logic, you should be careful to link the document in a manner which is readily understood. If you’re providing a tool for people to estimate what the salary for their desired job should be, don’t link it using “Proximal Salary/Earnings Indices by Region.” Instead, link to it saying “What should you earn where you live? Find out here!”

Using easy language may sometimes be less precise, but will almost always be more useful.

Don’t try to give everybody everything at once!

Too much information crammed into a finite space means only one thing: you don’t know what your users need. And as a result, your visitors probably only need one link — the back button in their browser.

The reason for information organization, at heart, is to reduce the problem of information overload. It’s certainly possible for people to find information given a page of 700 links, but is it an efficient way of working? No. Ultimately, it’s far faster to follow two or three links with a strong scent than to have the possibility of offering a single-click path to information.

Additional Resources

Web Development Best Practices: Part 4 (published on Wednesday, September 3rd) covers semantics, separation of structure from content, and the fundamentals of universal design for the web.