1. Why Navigation is Important
2. Basic Online Navigation Conventions
3. Navigation Elements for Every Page
4. Case Study: WashingtonPost.com Design
5. Group Similar Pages Together
6. Write Meaningful Link Titles
7. Use Consistent, Persistent Navigation
8. Use Place-Holder Text in Your Navigation Bars
9. Use Multiple Navigation Bars to Organize Large Sites
10. Breadcrumb Trails: Flexible, Hierarchical Navigation

1) Why Navigation is Important

Backdoors, side doors, windows, chimneys, trapdoors. While it’s comforting to think of your front door as the place where all visitors are most likely to enter your web site, the truth is that people will use search engines that drop them anywhere — not just the home page.

Authors of traditional linear books don’t have to bother with navigation. The assumption is that the “right” way to read a book is to open the front cover and turn pages until you reach the end.

In fact, beginning web authors often divide a single document up into page-long chunks stitched together with “back” and “next” links. Such a layout barely scratches the surface of the power of hypertext (see “Hypertext Links: Whither Thou Goest, and Why“).

Think of your developing site as a collection of logical, free-standing units that can be strung together like beads, in different orders, based upon the path a particular visitor chooses to take through your site, or based upon which sections of your site that somebody else wants to link to from their own pages.

Each individual page should make sense all by itself, so that a reader who is interested in the topic can send the URL to a friend, link to it, print it, or save it to disk; yet at the same time, each separate page should help the reader figure out what the site is supposed to do, where to find pages that are similar to this one, etc

2) Basic Online Navigation Conventions

• Put a “home” link on every page — usually in the upper left corner.
• Use a consistent design scheme for each page on your site. (See a common newbie design issue: inconsistent navigation bars.)
• Group similar items into discrete sections. For each item in a section, include a link “up” to an index to an index page.
  • If your website is small, it is reasonable for every page to link to every other page.
  • By the time your site grows to have about eight or nine pages, maintaining this growing list of links becomes overwhelming.
  • If your site has more than a few sections and levels, consider a breadcrumb navigation bar.
• Forget about “Back” and “Next”.
  Instead of expecting the reader to “click here to continue” along a path that only you can see, consider offering the titles and/or descriptions of several documents that you think might be helpful.
• Place useful navigation at the top and bottom of each page.
  • Readers prefer navigation at the bottom of each page (so they don’t have to scroll up in order to decide where to go after they’ve finished reading).
  • Browsers want the navigation at the top (so they won’t have to scroll down past content that they’ve already decided doesn’t interest them).
• Interface Tips for “Newbies”
  • If you have more than about 8 pages, you probably need to organize your site into 2 or 3 groups.
  • No page should have a link to itself.
  • When you click on a menu option, that option should somehow stand out on the destination page.
  • There are fancy ways to automate the process of creating menus, but if your site is small you can hand-code the menus on each page, highlighting the current page. (It often takes far more time to find and fiddle with a fancy JavaScript-based or CSS menu system than it would take just to code the navigation manually. You’ll learn more, and you’ll have more control over your site, if you handle the navigation yourself.)

3) Navigation Elements for Every Page

For every page on your site, ask yourself: What would a visitor need to know about the rest of my site, if this was the only page he or she had seen so far? Some basic navigation conventions can help your visitors feel more comfortable on your site.

	Provide a “Home” link in the upper left corner (on every page) (Rather than simply calling that link “Home,” call it “Sally’s Spinach Resource Center” or something else informative.)
	Link “up” to the first page in each subsection (on every page)
	Put the author and date on every page (to help users determine how current and credible the information is)
	Add links to related pages (use meaningful titles, not just “back” and “next” buttons)

4) Case Study: WashingtonPost.com

Major news sites like The Washington Post have a stable, consistent header and footer on each page. Multiple panels and areas can be rather confusing, so beginners who use multiple panels can easily get themselves into trouble. Readers tend to ignore navigation and anything else in the margins of the page.

Content: the reason people came to the site in the first place; here marked in blue. Users typically look directly at the content area of the page; they have trained themselves to ignore most of the surrounding information, since it is typically full of advertisements. In this example,  the “content” fills up only about half of the first screen — this is bad for the user, who must spend more time clicking and scrolling. Commercial web sites do need to reserve some space for marketing, and even non-commercial pages need to reserve space for navigation and announcements. In fact, 50% is fairly generous, compared to some web sites. Navigation bars: typically horizontal (here marked in red). This page shows two: the overall site bar (at the very top) and a local navigation bar (just above the content area). The main site navigation should be constant — every page should have the same options available. Menu bar: typically on the left (here marked in green). I think of a navigation bar as horizontal and a menu as vertical, but there’s little functional difference between them. But I would use the term “menu” to describe a navigation unit that changes to reflect specific options available to the user. For instance, when you’re reading a “News” article, the menu offers many different kinds of news (National, World, Washington, etc.), and just a single link to “Style”.  If you click on “Style”, the menu appears to open up, offering links to “Television,” “Movies,” etc.  Meanwhile, the many varieties of “News” options disappear, leaving only a single link to “News”. “But I don’t know how to make the menu bar change like that!” You don’t need to! Just write a customized menu for each individual page. If the menu bar is located in the same place on both pages, and the pages load fast enough, clicking on a link to load a new page will create the optical illusion that the contents of the menu are changing. Marketing: the typical advertising regions are marked in yellow. If you put bright graphics or “Click Here!” text in these areas, users will ignore them. If you put important information here, you are burying it. As it happens, this web site includes a “search” box in the “marketing” area — I think that’s poor usability, but probably good business sense — people hunting for the search box will probably end up noticing more advertisements.

5) Group Similar Pages Together

For example, if three pages on your website have to do with tennis, you should pick one page on your site that will be a repository for tennis links. Every tennis page should have a prominent link “up” to the index of tennis pages.  If visitors find themselves following a search engine or a link directly to one of your individual tennis pages, and that page doesn’t tell them where they can find more of your tennis pages, then you’re hiding useful content from a reader.

As your website grows, if you realize that several pages on your site all have to do with the same subject, group those pages together.  If your site features three tennis stories, add to each of them a link “up” to a new “Tennis Stories” page. On that new page, add links to every tennis story on your site. (See
the box that explains Breadcrumb Trails.)

6) Write Meaningful Link Titles that Describe Page Relationships

Blind Navigation Links	Helpful Navigation Links
Home | Back | Next Page 2	Up: Dennis G. Jerz Personal Prev: The Jerz Family Name Next: Newborn Peter Dennis Jerz
“Back” is an uninformative link title. The author has no idea where each reader has really come from. Besides, everyone’s browsers already have a “go back” button. If your pages are organized sequentially, far more useful than the bare words “Back” or “Next” or the equally vague “Page 2” would be a brief description of what you will actually find on the next page in the sequence.

Each of the hyperlinks below will take the reader to the same page… but consider the multiple different ways that an author can introduce that link.

	Back
	Click here for more info.
The linked words jump out at you, but they carry no meaning. You’d have to click on it to find out where they go. Busy readers don’t want to be forced to explore your site blindly. But what does “back” mean on the Internet? How do you know what page your reader has just visited? He or she may have followed a search engine directly to one of your internal pages. Every page should stand on its own, providing the reader with enough information to determine whether there is an obvious “start” page or where else to go from here.
	I tell my students they should know what to expect from an online web project before they commit themselves.
	Next: Online Projects — What You Should Know First
Much better — especially when used together on the same page; you give the reader two ways to get to the information.
	Online Projects — What You Should Know First You do not have to be a computer programmer in order to create a good, useful web page.  But you need to account for the needs of strangers who might follow a search engine to your pages, which means writing in a slightly different way.
The above link is annotated. The short description (“blurb“) provides a sample of what you can expect on that page. Obviously you can’t annotate every single link — just the ones you think are most important.

7) Use Consistent, Persistent Navigation Bars

Navigation works best when it is consistent.

• Keep the “home” link in the same place on each page.
• Keep the menu items in the same place.

When following the above guidelines, avoid creating pages that link to themselves.

	Home Page Home | Current | About Us | Archive
A visitor who is already on the home page, but who sees a link that says “Home,” will be needlessly confused. It’s a simple matter to remove the self-referencing link, but doing so introduces a new problem: inconsistent navigation.
	Home Page Current | About Us | Archive
	About Us Home | Current | Archive
	Current Page Home | About Us | Archive
Since the self-referencing link will be in different places on different pages within the site, the order of the items in the menu won’t always be the same.

8) Use Place-holder Text in Your Menus

Unpredictable, inconsistent navigation is worse than useless — it makes the user even more confused. If the table above represents three pages on the same website, clicking the second item on the menu bar will usually take you to the “About Us” page, but sometimes it won’t.

Fortunately, that problem is easily fixed — the solution is to use place-holding text to preserve the overall structure of the navigation bar.

	Home Page [ Home | About | Contact | Archive ]
	Contact Page [ Home | About | Contact | Archive ]
You might use color or some other design scheme to make the connection between the link and the page title even more direct.
	Home Page MySite Home [ About | Contact | Archive ]
	Contact Page MySite Home [ About | Contact | Archive ]
The above revision uses bold text to identify “MyPage Home” as more important, and groups the three following links together with square brackets. It also uses color to highlight the current link.

9) Use Multiple Navigation Bars to Organize Large Sites

After you’ve created more than about 8 pages, you should think about moving to a multi-level navigation system.

	MySite Home [ About | Contact | Archive ] Archives Available Archives: [ Articles | Reviews | Downloads | Events ]
In the above example, a main menu at the very top of the page includes permanent links to all the major sections that make up the website. Beneath the page title, a local menu shows additional choices. In this case, after the user clicks the “Archive” link, a new page with a submenu is displayed, showing further choices in the “Archive” category.

10) Breadcrumb Trails: Flexible, Hierarchical Navigation

A breadcrumb trail is a special kind of navigation bar, featuring a hierarchical
row of links (like the ones at the top of this page), each of which represents a “node” (a point at which the reader makes a decision).  As the user moves deeper into the site, the breadcrumb trail shows the closest direct path back to the home page.  As the user clicks through the site, each time moving to a site with narrower categories, the navigation bar changes, adding a new link marking the most recent node.

Here is what the breadcrumb trail might look like on a food web site:

Food Home Page > Desserts > Ice Cream > Vanilla

Vanilla: Deserves More Respect

We drown it in melted fudge… we make it play second banana in a classic split. Trustworthy, dependable vanilla deserves more respect.