Site Navigation

Site Navigation - Obvious Not Gaudy

Site navigation should be obvious. This doesn’t mean it needs to be an eyesore but it should be consistent and easy to locate. I started thinking about site navigation because I wanted a method that would allow the site to expand without having to recreate the site. This meant the navigation system had to be flexible and easy to add links as pages were added to the site.

My first attempt involved frames. Now, frames have search problems but being able to have separate navigation panels based on the site section or division had a lot going for it. But what frames offered in navigation expandability was not enough to offset the problems of bookmarking and search engine listings.

While trying to rethink the possibilities of navigation, I looked into DHTML menus, JavaScript, and other off-the-shelf adaptable menu systems. Each had its good points but each also had its drawbacks. Some were limited to the major browsers, some were not search engine friendly, and others were not user friendly.

The best answer appeared to be in using text links instead of graphic links and in using CSS to define the look and feel of the links. I realized the location of the navigation links and navigation panels not only effected the page layout but also what viewers perceived.

Here are some of my observations:

Top Of Page Navigation:
This is a popular location for site navigation. That is, links to site sections or divisions (some refer to these links as global) are placed at the top of the page. While a good system, I didn’t want to use it because it decreased the area above-the-fold, regardless of monitor size or resolution. (Above-the-fold refers to that part of the page you can see without clicking the scroll bar. It comes from the newspaper world because most fold their paper horizontally.)

Because the first glance is very important to new site visitors, I wanted as much room for content above-the-fold as possible. The first few sentences and paragraphs are all most viewers will look at and if the information they want isn’t there - click their gone.

However, the top of the page should be used to identify the business, the web site and to provide a short, terse catch phrase. The top of the page should be identical throughout the site to provide uniformity and consistency.

Left Column Navigation:
Left column or left side navigation is often provided in conjunction with top navigation because links to major sections or divisions are insufficient. You also need links to sub-sections or sub-divisions and the left navigation panel provides that. However, because I didn’t want to use top navigation, the left column was perfect for my main navigation links.

Now where to put my sub-section or sub-division links?

Right Column Navigation:
I concluded the use of a right navigation column or panel had multiple benefits.

It gave me room to add the sub links I needed.
It framed my page and made it look more appealing and more distinct.
It provided an excellent method of limiting the content line length. (Shorter lines are easier to read than longer lines.)

So while the left navigation links remain the same for each page, the right navigation links could change with each major section or division. Right navigation links are similar to the topic headings within a chapter while the left navigation links are similar to the chapter titles of a book.

Bottom Of The Page Navigation:
I’m not a fan of bottom of the page navigation links. Usually, most bottom of the page navigation doesn’t conform to the same rules used to define the other site navigation. Also, it isn’t that necessary unless you have used a navigation system that isn’t search engine friendly.

Some navigation should be provided, but it is extremely difficult to guess where the reader may want to go when he or she reaches the page bottom. Therefore, only a few navigation links should clutter the bottom of each page.

A Top-Of-Page link to return the reader to the top of the current page. (This is necessary only if the page is more than 3 to 4 clicks long.)
A link to the next page if there are multiple pages to the article or page content.
A previous page link for multiple-page articles or content pages.

Of course, a copyright statement at the bottom of each page may be needed although this idea appears to be on the way out. Some sites have started to remove the bottom of the page copyright statement and privacy statement links. Instead, they place a Legal heading with Copyright and Privacy as links in the left navigation column.

Conclusion:
You may not agree with these design decisions and each site has its own special requirements. I have designed small sites with only a left navigation column and they appear to function very nicely. But, I know in advance the site will not need to expand more than a few pages.

Also, If you have a huge site with thousands of articles and pages, it may be necessary to use all three sides of the page for different categories of links. If you do or don’t use the top of the page for navigation, try to keep the top panel as small as possible so as not to take up too much above-the-fold content space.

Also, use the Title attribute on all links. You can provide the viewer with a better description of where the link goes and at the same time provide more text for the search engines to collect. If you use keywords in the Title, this alone can improve your site’s ranking as well as your individual page ranking.