Basic Principles of Web Site Navigation

1. Basic Principles of Web Site Navigation
   
   
2. Using Navbars, Frames and Site Maps
   
   
3. Contact Pages and Off-site Links

Good navigation is mostly a matter of common sense (a commodity in short supply in cyberspace), and although it varies somewhat for different types of sites, there are certain basic principles that apply to almost all sites, or at least almost all business sites. Well-designed Web sites tend to have similar navigational layouts, for the same reasons that most books have a table of contents and an index. However, there are differing opinions about some navigational issues, and of course every site is different, so if something off the beaten path works for you, go for it. Just be sure that your navigation scheme is well thought-out and logical.

This article pretty much assumes that the purpose of your site is to inform people about a product or service, to actually sell the product or service online, or both. If your site is of a more artistic nature, then the normal layout rules may not apply. For example, an online exhibition of photos may require the visitor to view the photos in sequential order, or a site may wish to cultivate an aura of mystery, and make the visitors work a little to figure out where to go. For most sites, however, the basic rules are clear:

1. Tell people exactly what is available on your site.
2. Help them get to the parts they want quickly.
3. Make it easy to request additional information.

The Front Porch

Good navigation starts with the very first page that visitors see. This may be either the home page itself, a "splash" page, or (unfortunately) something that for want of a better term I'll call a "utility page."

Some Web designers are obsessed with the fact that a Web page cannot appear the same to every visitor. In an attempt to get around this fact of life, they design parallel Web sites, each designed to look good to a particular subset of Web surfers. This is a fine thing to do, as long as the selection of different sites is transparent to the user. You can have two versions of your site, one designed for Netscape and one for Explorer, or perhaps one designed for those with newer browsers, and one for the Luddites. A bit of Javascript ascertains which browser a particular visitor has, and directs them to the appropriate version. If done properly, this can be quite nice.

Some designers, however, opt to give visitors a choice, perhaps between framed and non-framed versions, or between "high-bandwidth" and "text-only" versions. There's nothing wrong with this either, as long as the choice is integrated into your site design.

The abomination that I call a "utility page" works this way: When a visitor arrives at your main URL, they are presented with an unattractive plain-text page that offers a choice of different versions of the site. Sometimes such pages recommend one browser over the other. Some designers carry this to ridiculous extremes, like the one who instructed users to ensure that they have a particular browser version, make their window full size, and adjust their screen resolution before entering the site. It ain't gonna happen, dudes.

The first page that visitors see is your front door, and it should look good. If you want to offer a choice of different versions of a site, those choices should be made from the home page. It's silly to spend time and money making your whole site look good, and then set it up so that the first impression visitors get is a plain white page with plain text, requiring them to click. It looks amateurish, and it will drive away a certain percentage of visitors.

So will a "splash" or "entry" page, but some designers feel that it's worth it for the chance to make a flashy entrance. Many designers want that priceless first impression to be a big flashy graphic. It's impractical to put it on the home page, so they put the flash on a page by itself. This page is the first thing a visitor sees, and leads to the actual home page. A properly-designed splash page automatically loads the home page after a few seconds (using the META REFRESH tag), and also has a clickable element that will take a visitor to the home page if he or she chooses to click before the few seconds have elapsed.

Think long and hard before you include a splash page in your site. If your business is graphic design, animation, or something else that requires you to show off your graphic chops, then a splash page is appropriate. For most business sites, it isn't. Some visitors will bail, and others will resent the delay. Remember that most people don't go to a business site to be entertained - they go for information.

The Foyer

Okay, we've finally made it to the home page. A well-designed home page has the following characteristics:

1. It provides an overview of what is available on the site, and every section of the site can be reached from the home page, either directly or with no more than 2 or 3 clicks.
2. It looks attractive and projects the right image for the company, but it still loads in a reasonably short amount of time. A balance must be reached between whizzy graphics and fast page loading.
3. It reinforces the branding of the company or product, so visitors instantly know what site they have landed on.
4. It shares certain elements with all the other pages of the site, so that the pages all fit together, and visitors get a sense of the pages belonging to one site, rather than being a bunch of unrelated pages.
5. A home page usually includes a small amount of content, even if only a brief description of the company, but its main purpose is as a list of links to other pages where the real content resides. A home page is much like the table of contents in a book or magazine.

• About the Company
• Our Products and Services
• How to Contact Us

"Add to Shopping Cart (You can always remove it later.)"

Most sites, of course, will have more than the above-mentioned four navigational items on their home page. What you have there depends on the purpose of your site. Whatever's important, whatever you want people to see, should be right there, not buried several levels down.

Resist the temptation to give your navigational titles clever but ambiguous names. Of course you don't have to stick to the plain vanilla examples above.

• Who We Are
• What We Do
• Where to Find Us

• Cow Country
• Cow Corner

Pyramid Scheme

Most sites use a hierarchical arrangement. In other words, users can "drill down" to greater and greater levels of detail. A hierarchy may be thought of as a triangle, with the home page at the top corner, and the lowest level of detail as the bottom edge of the triangle. Hierarchies only make sense when they are reasonably close to an equilateral (equal-sided) triangle. If your home page links to twenty pages, you should add another level. If your home page links to only two pages, each of which links to only two pages, etc., then you have too many levels. Smaller sites usually need only two levels, while medium-sized sites may have a secondary level of "hub" pages between the home page and the lower level containing the actual content. Of course, some sections of your site may have more levels than others.

How long should each page be? This is partly a matter of opinion, and varies greatly from one site to another. Some people believe that lengthy content, which if placed on a single page would require readers to scroll down several screens to see it all, should be broken up into several pages. Others argue that it's less hassle to scroll down a lengthy page than it is to click through to another page and wait for it to load. Sites designed for geeks (programming and network stuff) almost always seem to go for the long-page model, while more "consumer-oriented" sites more often choose the lots-of-short-pages design. Some online magazines, or "content-based" sites, do this for financial reasons. They sell ads based on the number of page impressions delivered, so breaking an article up into five pages means that they will score five page impressions instead of one (assuming that the article holds the reader's interest). It may also improve search engine findability, and make articles easier to maintain. The author prefers to avoid breaking content up into too many pages. There's nothing wrong with a page that scrolls down for miles, as long as it's designed properly.

A long page should have a table of contents at the top, with hyperlinks to each section of the page. This is done by inserting NAME hyperlink tags at appropriate points, and using the "#" to link to the different sections, for example:

A HREF = "long_page.html#section1"
A HREF = "long_page.html#section2"