Effective Navigation

Site navigation is an extremely important aspect of any Web site. After all, what good is a nice looking, information-packed Web site if visitors can't find the information they're looking for?

With effective site navigation, site visitors can find the information they need quickly and easily. They don't even have to think about where the information is or what they need to do to find it. By organizing information logically and including links to that information in appropriate places, site visitors should be able to intuitively navigate from one page to another to learn what they want to learn.

Consider Usability

Usability refers to how effectively site visitors can access your site's information. It deals with concepts such as page design, element placement, and navigation.

Usability is part of what makes a Web site useful. It assures that information can be found without a lot of frustrating, time consuming site exploration. It also assures that when a user clicks a link (or something he thinks is a link), he won't be surprised or annoyed by what happens or appears.

Usability is often ignored when designing Web sites. More Web designers seem concerned with creating a work of art than creating an effective, interactive way to present information. Don't fall into that trap. Remember who you are designing the Web site for ”site visitors.

Tip

Want to learn more about usability and how it relates to Web sites? Check out Designing Web Usability , a New Riders Publishing book by Jakob Nielsen. Written primarily for Web design professionals, the book includes a wealth of information about how Web sites and pages can be designed to make them most effective. If all Web designers read this book, the Web would be a far more useful ”and far less frustrating ”place to get information.

The Three Click Rule

The Three Click Rule states that all content on your Web site should be within three clicks of the Home page. The idea is that site visitors shouldn't have to go digging for the information they need; it should be near the surface.

Here's how it works. Imagine a Web site for a florist who offers a wide variety of arrangements, including plants and flower baskets . A "Get Well Soon" arrangement is one of the products. A visitor might find that product by clicking a "Flowers" link on the Home page, then an "Arrangements" link on the Flowers page, and finally a "Get Well Soon" link on the Arrangements page. There's a logical flow of information there, created by a logical hierarchy.

A logical hierarchy of information is, by far, the best way to organize a Web site.

Practicing What I Preach

I can't remember where I first heard the Three Click Rule, but it stuck in my mind and I have made it a part of every Web site I've designed since then. But when I tried to think of an example from one of my sites for this book, I couldn't come up with one. I must use a Two Click Rule, because none of the pages on any of my sites are more than two clicks from the home page.

I used to believe that there was an exception to this rule, that it was okay to ignore it if you wanted to "force" site visitors to explore your site. I don't believe that anymore. There are two reasons:

• It's impossible to "force" a site visitor to do anything. If you annoy someone enough, he'll just leave your site.

• Your site should be built to serve the people who visit it by providing the information they expect to find. Making them wade through a lot of irrelevant information is selfish and shows no consideration for the people you're trying to serve.

Just Say No to Splash Screens

I don't know about you, but when I arrive at a site's Home page, I expect to find information and navigation tools to help me find the data I need. I certainly don't expect to have my time wasted with some fancy graphic-filled page with a link labeled "Click Here to Enter."

That fancy page is called a splash screen and it's the biggest blight to hit the Web. Some Web designers think these pages are useful for providing a welcome message or introduction to the site. The only thing they're good for is wasting the visitor's time. Studies have shown that as soon as a visitor realizes a splash screen is appearing, they click to move on. If the page takes a long time to load and the "Click to Enter" link doesn't appear right away, the visitor is likely to go elsewhere. (I do it regularly.) Forcing a visitor to look at a useless page is downright inconsiderate.

Navigation Bars

Navigation bars, or simply navbars, are a great way to incorporate intuitive navigation into a Web site. A navbar is a row of buttons or textual links that offer access to Web pages.

Using Navbars

On a large site, the main navbar might offer access to major areas of the site, while secondary navbars appear on the pages within each area, offering access to individual pages. The Quicken.com Web site (http://www.quicken.com/) is a good example. As shown in Figure 7.2, the main navbar appears as tabs near the top of the page. Another navbar below it displays links to pages for the current "channel."

Figure 7.2. The Quicken.com Investing channel page includes two horizontal navbars at the top of the page.

On a small site, a single navbar might offer access to all (or almost all) site pages. For example, the wickenburg-az.com Web site (http://www.wickenburg-az.com/) displays the same navbar, which offers access to most site pages, on every Web page (see Figure 7.3).

Figure 7.3. The wickenburg-az.com Web site includes a vertical navbar that offers access to most pages.

Navbar Orientation

Navbars can be oriented horizonally or vertically. When oriented horizontally, they usually appear at the top of the Web page (see Figure 7.2), but can appear at the bottom or both at the bottom and top. When oriented vertically, they almost always appear on the left side of the page (see Figure 7.3).

Positioning Navbars: Tables vs. Frames

To position a navbar vertically, it is usually included in either a table or a frame. Both of these structures are created within HTML.

A table is a structure built within a single page. Tables are used in many Web pages to create columns of information. In most cases, tables are borderless, so it isn't obvious that a table is used. Including a navbar in a table is a bit more work for the Web designer because it requires that he consistently create the navbar in every page that requires it.

A frame is created with a frameset ”an arrangement of multiple Web pages within a single Web browser window. The navbar page is placed in its own frame of the frameset so it always appears in that position. Figure 7.3 shows an example of a navbar in a narrow vertical frame with frame borders disabled. If the navbar didn't fit in the frame, scroll bars could appear to enable the site visitor to scroll navbar contents. Although this is a handy way to display the same navbar on every page, framesets are a bit more difficult to set up properly in HTML and frames are not as widely supported as tables.

Image Map Navbars

Navbars can also be created using single images that are divided into multiple links. This uses the image map feature of HTML, where each clickable area is mapped to a specific URL. The main navbar in Figure 7.2 (the one with the tabs) was created with an image map.

The only drawback to using an image map is the size of the image and its download time. An image map should have a simple design and its image should be optimized so it loads quickly. Otherwise, the visitor has to wait for the links to appear.

Breadcrumbs

Remember the story of Hansel and Gretel? They dropped breadcrumbs as they were led into the woods so they could find their way back home.

Breadcrumbs navigation on the Web works much the same way. It displays a path to the current page, with links to previous pages. This offers two benefits to site visitors:

• Visitors can see where they are in relation to the site's hierarchy.

• Visitors can quickly backtrack to any page along the path to the current page.

Figure 7.4 shows an example from one of my sites, wickenburg-az.com (http://www.wickenburg-az.com/). The breadcrumbs navigation feature appears at the top of the page, clearly showing the path to the current page. When viewed with the navbar along the left side of the page, it's clear how the current page fits into the site's hierarchy of information.

Figure 7.4. Breadcrumbs navigation usually appears at or near the top of a Web page, like it does on this one.