|
|
| Back to the Index of
Articles |
| |
| Priority One:
Navigation |
| Reprinted from
MyComputer.com |
Note:
Links to examples denoted with (EXAMPLE) will open in a new
window |
| |
In good Web design there are three key words you need to know; Navigation,
Navigation, Navigation. Remember the cardinal rule of Web design, "One click
and they are history." If people are frustrated navigating your site they may
never return.
There are two types of navigation to be considered; the
entire site, and the individual page. You need only concern yourself with a
single page if it contains enough text that it requires repeated scrolling. In
that case, consider putting a mini index at the top of the page with bookmarks
to the sections below. This can be as few as one bookmark to allow people to
bypass some introductory boilerplate, but it allows the viewer quick access to
the section of interest without scrolling.
EXAMPLE
This is particularly
helpful if the page contains a calendar of events with boilerplate at the top
of the page. A bookmark allows repeated site visitors to click directly to the
listings. Remember to always put a bookmark back to the top of the page. Put
the Top Of Page bookmarks every second scroll to make it convenient for your
reader to stay on the page. If there are additional links off this page, be
sure to link back. For instance, the calendar may have a link to a full
description of the event. Be sure the visitor can easily get back to the
calendar with only one click.EXAMPLE
|
| TOP OF PAGE |
Whole site navigation requires preliminary organization.
| 1. |
Start with an outline of all the pages. The first level in the
outline contains the main sections of the site, things like Our Services and
Our Products, etc. This should also include boilerplate pages like About Us,
Contact Us and Site Index. These are the links that will appear on every page.
This is your Main Table of Contents to the site, or your Top Level Links. |
| 2. |
Develop your list of content pages. Below each top level are the
pages relative to the specific section. For instance, when visitors click on
Our Services they will see an overview of your services with another set of
links to an individual page for each individual service. The same can be done
for Our Products.
EXAMPLE
Consider also using teaser
paragraphs of text on the main page with a MORE button that takes the visitor
to another page containing all the text.
EXAMPLE |
| 3. |
Create Back and Cross Links. Once you have your visitor in one of
these sections, make it easy to navigate around. If you have several sub pages
of services or products, create a mini table of contents index of all these
services that will appear on each of the service pages. Both near the top of
each page and at the bottom, provide a link back to the Our Services page. With
these cross links and your Main Table of Contents on every page, your visitor
can easily navigate through the various services, but at any time can quickly
go directly to your Products page without having to click all the way back to
the home page. |
| 4. |
Always create a Site Map. Think of your Top Level of page links as
your Table of Contents and the Site Map as your index. This should be a simple
recreation of your original site outline with links to every page on the site.
Since the link to the Site Map appears on every page, visitors can easily go to
the Site Index if they feel confused. |
|
| TOP OF PAGE |
Since most developers use some sort of JavaScript navigation bar or
rollover navigation graphics for links at the top or to the left of each page,
be sure to include a set of text only links at the bottom of every page. This
set of links can include more than the Main Table of Contents and should also
appear on every page.
If you create sub-directories that include HTML
pages, you will use the same navigation tools and graphics for consistency, but
be sure to change the relative pointers to go up one directory. Where you would
normally use a link such as (<a HREF="index.htm"a>Index></a>),
your link to the index page from a page in a lower sub directory would look
like <a HREF="../index.htm"a>Index></a>.
One very annoying message to any site visitor is the dreaded 404
error, or "page not found." Be sure to test your site for broken links to
graphics and pages. You can use a Web based tool for this, like
LinkPolice and Sitemechanic on
MyComputer.com or
HTM Toolbox from
NetMechanic. |
| |
| Back to the Index of
Articles |
|
