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
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
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 <firstname.lastname@example.org>
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!
- 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!
- 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
- If you are changing your navigation technique/style try and offer the
existing users a chance to revert back to the one they know.
- 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
- 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! -
- 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!
- ALWAYS check that your navigation pointers don't 404 - especially
after a 'make over'!
-- Submitted by Glyn Hall <email@example.com>
- List all the main sections or chapters of your web site.
- List all the sub-sections or sub-chapters of each main-section or chapter.
- Create a vertical main menu of all the main sections or chapters at left margin
of every web page.
- 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.
- 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.
- For long web pages, create at bottom the following links: | Home | Top |
-- Submitted by Serafin Mogarte Jr. < firstname.lastname@example.org>
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 <email@example.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
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
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 <firstname.lastname@example.org>
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 <email@example.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 <firstname.lastname@example.org>
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 <email@example.com>
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:
<input type="button" value="Back to Previous Page"
This will generate a button and label it. You can change the value text to
suit your particular needs.
-- Submitted by Jim Peden <firstname.lastname@example.org>