INFO DINER
FEATURES ARCHIVE SAMPLES SAMPLES DOCSTRATS.COM
fishInformation Design for the Internet Ocean
 
        Page 1 — Not a Boat, a Net
      Page 2 — The Buzzworld at Work
      Page 3 — Navigation is Information
      Page 4 — Links to Sample Sites

 
Page 3 — Navigation is Information
 
 

How readers connect to content on your site is determined by the way they navigate the site. Navigation is information. At all times on your site you need to tell a visitor:

  • Where am I going?
  • Where did I come from?
  • Where am I in the process?

The last of these three is crucial and the least often addressed. If visitors cannot find information quickly, they will leave — unless they know it is coming soon. The shopping cart metaphor used at retail sites is a navigational device. It tells people where they are in the process — the fact that they can make a selection but still change their minds before purchasing the product.

Yet the majority of online shopping carts are not checked out. One reason for this is that people still get lost in the process. A site that asks for credit card information before it gives shipping and handling costs will lose customers who want a total before taking what appears to be the purchasing step.

Do not take visitors captive. Do not rely on them to use their back button. If visitors encounter dead ends, they will not start over; they will simply quit on your site and go someplace easier to get around in.

Menu Tree or Search Engine?

The two most common navigational tools used on the web are the menu tree and the search engine. The menu tree projects a vertical structure. The search engine projects a horizontal structure. Menus must be informative. Many sites bury content behind vague one-word menu options. Others present too many options. Visitors will not read a list of 15 menu options to find number 11.

On the GAP's home page, a combination of color-coded graphical and textual menus presents over a dozen options on the same page without creating confusion. The continuity of the site with the GAP's traditional branding efforts enhance the meaning of such options as "gapkids," "babygap," "men's," "women's," "jeans," "khakis."

Note that these options work because they coincide with the mission of the site. Options such as "men's" and "women's" would be confusing — perhaps insulting — at CNN. In contrast, the menu options with less specific meanings use two or more words: "your info" instead of "info;" "store locator" instead of "locator" or "store."

For search engines the first priority is immediacy. Amazon.com puts its keyword search form at the top or bottom of every page. The Thomas Register devotes its entire home page to a search form with an immense "search" button.

Search engines must return relevant hits. This can be a very difficult programming job, especially for sites with a combination of vertical and horizontal content. A keyword search is often less usable than a carefully constructed search form that forces certain decisions upon the user. For example, the search form at Virtual Vineyards provides seven drop-down lists to help visitors choose meaningful search terms. Even a simple breakdown of search terms into two or three categories can greatly increase the usability of a search engine.

Back to Top and Other Cues

A menu tree or search form only begins a successful navigational scheme. Visitors need many cues to get around within a page — the ubiquitous "back to top" link, for example. Different sections of a site must be clearly differentiated to keep visitors from traveling in circles. Long articles broken into chunks must have a navigational scheme that gives visitors a sense of the whole.

Visitors need the ability to browse, to skip ahead, to circle back, to know what they are skipping and where they have been. A good example of a web site that does this effectively is Hotwired's Webmonkey site. Webmonkey tutorials are broken up by lesson and page with the lesson and page choice repeated in each chunk.

Some sites create a navigational scheme unique to their own content. The product design firm Ideo has a web site that looks unlike any other, but works beautifully. The site presents product design examples using a single grid of images. Other information is easy to find, but doesn't detract from the core mission of the site: Show the firm's expertise by showcasing its product designs.

A Bottomless Pond

While, in its entirety, the Internet is an ocean, an individual web site can seem more like a pond.

The visible real estate of every web site is limited by its visitors' screen dimensions. And this real estate is quickly subdivided. The buttons, menus and scroll bars of a browser take up 30% of the screen. Banners and menus may use another 20%, leaving 50% of a tiny 15" or 17" video display for content. In terms of the density of information possible, this is a fraction of the communication power of a single piece of paper.

What to do?

Build in layers. The pond is bottomless. You can direct your fish through layer after layer of content. As long as you chunk and have a capable navigation system, there is room for everything — the popular and the arcane, the current and the archived.

Know that web users do not travel in straight lines. If you want visitors to explore, give them real content to follow. Put real content up front and get them to more content quickly.

If you can interest your fish, then your information design — chunking, branding, navigation — gets its chance to make the fish come back again.

        Next: Page 4 — Links to Sample Sites
 


FEATURES | ARCHIVE | SAMPLES | ABOUT | DOCSTRATS.COM || BACK TO TOP
 
© 2001 Documentation Strategies, Inc. All rights reserved.
Phone: 518-432-1233. Email: infodiner@docstrats.com