HWG-News Tips Early September 2002.

Effective Web Navigation

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 10 September 2002. newsletter, for the following category:

Effective Web Navigation

It seems like everyone is trying to make new methods of site navigation. What are the best ways to make an easy to use, friendly, site navigation, and still 'stand out' from the crowd?

This issue's winner!

Cruising a site should be enjoyable and not require a degree. Therefore, keep your visitor abreast of his/her location in relation to the structure of the site. When possible, have more than one way to reach most pages (section, etc.). Consistency is very important: colors, placement, font, etc. Require the visitor to scroll only when absolutely necessary (i.e., have side and top (and bottom links, too) when appropriate). Inform them where a link will take them. Yes, graphics are pretty, but do you really NEED a graphical navigation layout? Hope these help, they are some of the things I consider.

-- Submitted by George Allen Spencern <bgi-site@mail.com>

Other Tips for Effective Web Navigation

I don't know if you would class this as a tip but it is one thing I try to stress and use when I design commercial sites and is a trap many budding designers fall into.

When designing a commercial site I often hear people say "it must be easy to learn" - garbage - why should a customer have to LEARN a site to BUY YOUR PRODUCT - a clever designer will make a site that is easy to navigate WITHOUT the user having to learn it!

It is a tough compromise when the graphic artist is wanting a graphic intensive site which will make it pretty, but slow (goodbye impatient customer), the programmer is trying to impress his peers with how clever he is with his fancy animated menus (goodbye confused customer) and the business is wanting loads of boring text (goodbye bored customer) - Gee it's great being a Webmaster!

And a few more 'traps' I've fallen into or seen others fall into!

1. Always give your user a way out - don't let him navigate to a dead end - the back key is a solution but not a good one - not all users know it even exists!
2. Use a 'theme' with navigation - i.e. keep it the same or similar throughout - some sites I have been to suddenly change navigation style and you end up with a very confused user - he may even think he is on another site.
3. If you are changing your navigation technique/style try and offer the existing users a chance to revert back to the one they know.
4. If you have changed because of additional (new) features on your site - tell your users that it is for that reason and they will be able to do more. - (obviously they should be able to do more or they will feel conned!)
5. Make sure your navigation is browser independent - there is nothing worse than arriving on an internet site and getting 'script debugging' windows popping up! (or worse still not getting any navigation at all! - Goodbye customer)
6. KISS - (keep it simple stupid!) - not everyone is an internet 'guru' and however clever you think your navigation design is don't do something that impresses only other designers - they will be the only one who will visit - design it for the level of most users!
7. ALWAYS check that your navigation pointers don't 404 - especially after a 'make over'!

-- Submitted by Glyn Hall <glynhall@iafrica.com>

1. List all the main sections or chapters of your web site.
2. List all the  sub-sections or sub-chapters of each  main-section or chapter.
3. Create a vertical main menu of all the main sections or chapters at left margin of every web page.
4. Be consistent with the main menu contents arragement. You may opt to either not include the menu item which corresponds to a  web page or simply change its color and disable it as a hyperlink.
5. Create a horizontal menu at the top of sub-sections or sub-chapters corresponding to each web page. Only do this if the web page has many sub-sections or sub-chapters.
6. For long web pages, create at bottom the following links: | Home | Top |

-- Submitted by Serafin Mogarte Jr. < moray@globe.com.ph>

Look at the navigation from the point of view of the portion of your audience that has the least familiarity with the company or industry you are designing for.  For example, high school students and older students returning to college for a career change don't always see the difference between Student Services and Academic Services when searching for a list of courses or financial aid information.

A second tip is to avoid putting too many links in the main navigation or on the front page.  Too many options can get cluttered and can be confusing.  Set up 5-8 sections and let links to all other pages go from those pages.  That way you only have the 5-8 links reappearing on each page and you have more space for actual content!

-- Submitted by Kathy Davies <kdavies@mac.com>

While it is always best to keep each document short, longer pages require anchor tags and a navigation bar on the top of the page. I utilize a javascript remote control which allows users to easy get to any page of my site. I also include "tour buttons" on top and bottom of every page so users can easily go forward or back within my site. All internal links (Links to other pages of my site) open in the same browser window. External links open in a new window so after browsing an external site, the user can close the window and still be in my site.

-- Submitted by Howie <hmmd@erols.com>

I like to have a iron-triangle where I give access to full navigation on top of page, left column and at bottom of page also. I usually make my navigation in *.txt because some folk have all text reading browsers.

Navigation should include attributes that support accessable controls such as summary, title, longdesc, title, alt, and proper tag/attribute sets that recognize accessibility according to WAI.

-- Submitted by Michael DeFeo <michaeldefeojr@hotmail.com>

Effective navigation is reflected by the ease by which a visitor may find the information they are looking for. Therefore it is best to organise things in places where they are best found. With this in mind it seems illogical to attempt to stand out from the crowd, for it is the crowd for whom you are attempting to satisfy!

-- Submitted by David Grant <dj_grant1978@hotmail.com>

I like to keep navigation simple, I have a frame site with side bar navigation and each page has independent direction buttons, Back, Home, Next. I also use the same buttons on every page to avoid confusion. Viewers are given the option of viewing the site without Frames. I have had a lot of positive feedback from viewers saying that they liked the ease of navigation.

-- Submitted by John Lyon <mrjohn@pop3.connect.ab.ca>

We all are sometimes faced with the "dead-end" page - one which contains essential information but from which there is no logical step forward. Sometimes we end with a simple request that the user "hit the back button" on their browser.

But the page can be more user friendly, particularly to web newbies, if we provide the "back button" at the end of the page.  Try this code:

<form>
  <div align="center"><center><p>
  <input type="button" value="Back to Previous Page"
         onclick="history.go(-1)"></p>
  </center></div>
</form>

This will generate a button and label it.  You can change the value text to suit your particular needs.

-- Submitted by Jim Peden <jim@middlebury.net>