Designing better navigation menus.

Next to slow-loading pages, difficult or confusing website navigation probably accounts for the most lost customers.

  That's a shame, really, when it's so easy to build a nav menu that anybody can figure out.

  In this section we will be talking about some navigation "Conventions" that it would be best for web designers to adhere to, and why.

  Navigation Menu Conventions.
  As stated on the website design "standards" page, there are no set "standards" in website design... however, there are common design elements and conventions that the average surfer expects to find when they visit a website.

  A "No-Brainer" navigation menu is probably one of the most important design elements that a webmaster can incorporate into the website design.

  All of the tips listed below, taken together, will help a webmaster build and maintain a superior website navigation scheme. Not all will apply to every website, and a 'personal homepage' type of website (that only gets traffic from friends & family) can safely ignore most of them.

  Any webmaster building a commercial website of any type should carefully consider how easy (or difficult) it is for potential customers to find their way around.

  In consideration for your customers.
  The following list of tips are all offered with the average surfer in mind.
  You are intimately familiar with every page and every link to the pages.... your visitors are not. Make things as simple and easy as you can and your visitors will stay longer and visit more pages.

Try to get someone else to sit down and look through your website. Don't tell them how to find things, just give them some set objectives that will require some searching around.... watch carefully and you may be surprised at what you learn.

      For virtually every type of website:

  Provide a consistent navigation style on every page.
  Make your main menu the same on every page. Once a surfer has figured out the navigation, they don't want to do it again just because they're on a different page or in a different section.
  If your website is large, a sub-menu for each section can be added in that section, or build a menu that expands each section when clicked. See the example menu here or the menu tree example here for ideas.
  The tools to make those and other menus can be found on the free online tools page.

  Be perfectly clear with your link titles & descriptions.
  In other words, avoid using slang words or obscure references like 'Back'. (back to what? the last page? the last website? the last time I had a beer? what?)

  Use navigation at page top and bottom.
  Navigation links at the top and the bottom of your page will reduce scrolling and enhance the visitors experience.
  Tabs near the top of the webpage help visitors quickly see the most important sections of your site. This makes browsing easier.
  Put plain text links to major sections at the bottom of every page. Especially have a link back to your home page.
  Note: "Top" can be the left or right side links, if they are visible in the top 400 pixels of the page.

  Use a logical link hierarchy, with related items together.
  Don't mix up the links in the menu, place similar items under a theme heading, and leave some space or place a separator between sections.

  Don't change page names as your website grows.
  People can and will make 'favorites' links to any and every page of your website. Other webmasters will link to your pages - and many will not bother to tell you... Be sure not to break these links with a page name-change. If an update is needed, change the name of a menu link text if possible, but not the name of the page itself.
  If you must change page names, put a re-direct on the old page and automatically send your traffic to the new page.
  This code can do that for you:

  Use the ALT description if you use images for links.
  Some people surf with images turned off, others use browsers that may not display your image, browsers for the blind read the ALT tags.... so use them.

  Don't make "Dead-End" pages.
  A page with no menu and no way to get back to the other pages is an invitation for your visitor to leave. (If you do have pages like that, make sure that they open in a new window.)

  For further reading: see "Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus" by James Kalbach and Tim Bosenick, as published in the Journal of Digital Information, Volume 4 Issue 1.

  Design for the Search Engines.
  The following tips will help a webmaster design a navigation scheme that the search engine 'bots will be able to use. This way, all of your pages will be found and indexed.

  Use text links whenever possible.
  A search 'bot will not always follow an image or a javascript link. If you use them, provide alternate text links at the bottom or mixed in the page text for the 'bots.

  Provide a website 'Map' or 'Table of Contents' page.
  Use only plain text links on your map, and a plain text link from the home page to your map. This way a 'bot will find all of your major pages without problems.

  In consideration of YOU, the webmaster.
  The following list of tips will help a webmaster build and maintain a navigation scheme that will be easy to keep updated.

  Use software or scripts to create the menu.
  Especially if you decide to use any sort of dynamic menu, where there is some sort of mouse-over effect.

  Use some sort of an "include" function to place your main menu.
  Save time by using one menu file that is repeated on every page. Write your website in PHP, and use one included file for your menu... For HTML pages, use SSI, an iFrame, or a javascript to place your main menu. Then, when you need to change something, all you do is edit one file, not every page.

  The main nav menu on this website is 'called' with script like this:
<script type="text/javascript" language="javascript" src="/location/pagemenu.js">
</script>
  For the surfers that can't 'read' javascript, (less than 1% by most accounts), there is an included "NoScript" line:
<noscript>
Menu use requires Javascript, if you cannot view the menu, you may navigate the site by using the Site Map, the links at the bottom, or by enabling Javascripts in your browser.
</noscript>
  That code automatically inserts the javascript menu file wherever it's placed in the HTML... If a browser does not support javascript, the "NoScript" command places the alternate text in place of the menu. the Site Map, of course, does not use the javascript menu - it has plain-text links to every section.
  So - whenever I add or remove something, or just change the order of the links, I only need to edit the one "pagemenu.js" file and the site map, not every page.