Site hosted by Angelfire.com: Build your free website today!
Navigation 101 - The Web Developer's Journal
The Premier Business Event for Blogs

Back to the Web Developer's Journal Main Page
internet.com
side nav bar

The Premier Business Event for Blogs
Navigation is a critical aspect of good Web site design.
Related Articles:

HOW DID THEY DO THAT???

Find out in:
Amazing HTML



Site Map

Jobs at webdeveloper.com


Check out our Web-based
Discussion Groups:

Check out and join our email-based Mailing Lists for Web developers.


Developer Channel
FlashKit
Gif.com
Jobs.webdeveloper
JavaBoutique
JavaScript.com
JavaScriptSource
JustSMIL
ScriptSearch
Streaming Media World
VoiceXML Planet
WDVL
WebDeveloper.com
WebReference
XML101
Discussion GroupsBook ReviewsSoftware ReviewsDownload Web Tools

Navigation 101

Basic Principles of Web Site Navigation

by Charlie Morris

Navigation is one of the most critical aspects of Web site design - arguably the most important. No matter how good a site looks, and no matter how much useful information it offers, if it doesn't have a sensible navigation scheme, it will confuse visitors and chase them away. A simple, logical, understandable navigation scheme can increase your number of page impressions, boost return visits, and improve your "conversion rate" (the number of visitors who are "converted" into customers). It's a critical aspect of site design that has a direct effect on the bottom line.
April 2, 1999

Charlie Morris This Web site navigation tutorial is in three parts:
  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.
Most business home pages will have the following links:
  • About the Company
  • Our Products and Services
  • How to Contact Us
Any site that also sells products online should have another: Order Here! The fewer clicks required to get to your ordering page, the more orders you'll get - it's a statistical fact. Put your ordering page one click away from the home page (and perhaps from every other page as well). Actually, it's probably better to call the link "How to Order" or some such, and make it clear to the user that they have not committed themselves to ordering anything until the credit card number is submitted. A certain well-known (and well-designed) site offers the following no-pressure button:

"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
Is also perfectly alright, but I wouldn't go much farther out than that. Again, the purpose of your site is to provide information, not to entertain with word games. A certain other (less well-designed) site belonged to a company that sold computers, but used cows as a theme. Their home page (at one time) sported two choices like these:
  • Cow Country
  • Cow Corner
What the heck's the difference, and why would I want to click on either one? Do your users a favor and make it clear what they'll get when they click on a link. If your site features downloadable files, audio or video links, or other bandwidth hogs, list the file size next to each link so users will know what they're getting into. Inform.

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"

etc. You may also wish to include a "Top of Page" link here and there.

This Web site navigation tutorial is in three parts:

  1. Basic Principles of Web Site Navigation

  2. Using Navbars, Frames and Site Maps

  3. Contact Pages and Off-site Links
The Premier Business Event for Blogs
Back to the Web Developer's Journal
Contact WDJ   •    Suits!   •    Propheads!   •    Ponytails!
Discuss   •    Subscribe   •    Search

The Premier Business Event for Blogs
[an error occurred while processing this directive]

internet.com
Internet News   Internet Investing   Internet Technology   Windows Internet Tech.   Linux/Open Source   Web Developer   ECommerce/Marketing   ISP Resources   ASP Resources   Wireless Internet   Downloads   Internet Resources   Internet Lists   International   EarthWeb   Career Resources   Search internet.com   Advertising Info   Corporate Info   Newsletters   E-mail Offers  
internet.commerce
Be a Commerce Partner   Web Hosting Specials    Best Deals on PDAs!    Send a Press Release    Website Monitoring    Track Defects Online    Tech Magazines - FREE    Reach IT Professionals            
  

Copyright 2003 Jupitermedia Group, Inc. All Rights Reserved. Legal Notices,  Licensing, Reprints, & Permissions,  Privacy Policy.

internet.com