Many of us don't even think twice about slapping together some
graphic buttons or making a list of links and calling it our navigation bar.
However, I think we should all look twice at our navigation, because finding
what they're looking for is probably the second most important thing to a
visitor (after load time).
Navigation between web pages is accomplished through graphical
and text based hyperlinks. When we talk about intra-site navigation, we really
mean the design and implementation of the navigation bar which is usually placed
either at the top, bottom or left side of a web page (sometimes all three).
Let's talk about the advantages and disadvantages of both
graphical and text links and advantages and disadvantages of nav bar placement.
Link
Types
1) Text links - This is the simplest form of
navigation. It is usually accomplished through 1-3 word description of where the
link goes. Examples: Home, Contact Us, Links, FAQ, Order, Sign Guestbook, Read
Guestbook, etc.
Advantages:
Loads fast. Viewable in all browsers. Easily scalable. Easily
changed. Can help improve search engine ranking.
Disadvantages:
Limited in its communication. Can be misinterpreted. Not
flashy. Not possible to make an exact size (i.e. fonts are viewed differently in
different browsers).
Thoughts:
It is possible to add additional information to text
hyperlinks using the JavaScript command OnMouseOver; however, a word of caution
is that some web surfers do not like not seeing the URL. Also, MS Internet
Explorer 4.0 allows the user to shut off the status bar.
2) Graphics - Let's break this down into two sub
categories: Image maps and buttons.
a) Image maps - This are a single graphic which is
divided into "hot spots" for navigation.
Advantages:
It can be pretty cool. Convenient to setup for one graphic
instead of many little ones. Can be very powerful in communication.
Disadvantages:
Biggest disadvantage is if users have their graphics turned
off - the image map is useless. Image load time is a factor. Hard to update or
add to (you have to start over for the most part). Users sometimes have to play
"find the link" with their mouse pointer. To a search engine spider,
and image is worth nothing.
Thoughts:
If done correctly, images maps can make a visitor sit up and
say "Wow!". However, you CANNOT rely upon image maps as the sole means
of navigation for a web page/site. On more than one site, I've become frustrated
playing find the link and left. Also, waiting for a 100K image map to download
is traffic suicide.
b) Graphic buttons
Advantages:
Eye catching (potentially ;-). Can be more descriptive
(visually) than text. Possible to give visitor visual cue of what page they are
on (i.e. button for current page is slightly different from other buttons). More
flexible than image maps. Individually faster loading than image maps. No need
to hunt for links.
Disadvantages:
Load time. Often, picture-only buttons are less descriptive
than text only. New button must be made for any additional sections to a site.
Does not work well for large sites. Without ALT= tags, non-loaded buttons are
not easily navigable. Not very helpful in achieving a high ranking in the search
engines.
Thoughts:
Graphic buttons with nothing but text should probably be
replaced with less bandwidth hogging text links. Remember that if you're going
to use OnMouseOver with your buttons that it DOUBLES button download time. If
your site needs 20 buttons for navigation, forget it - use text links instead.
Using ALT= tags for describing your buttons in text should be mandatory!
Take advantage of our free resources,
knowledge and experience in the