Navigation schemes in web site design
This article discusses the pros and cons of text links, graphic images, drop-down menus and dynamically generated URLs in web site navigation schemes.
by Grantastic Designs
As web site designers, we always try to create a web site navigation
scheme that (a) is consistent throughout the entire web site and (b) allows
the site's visitors to find what they are searching for quickly and easily.
A consistent site navigation scheme shows your potential customers that
you are thinking about their ease of finding your products or services
on your web site.
The following list shows some basic web site navigation schemes:
- Text links
- Graphic images - navigation buttons
- Graphic images - image maps
- Drop-down Menus - Javascript, CGI, etc.
- Dynamically generated URLs
Text Links
Many web newbies understand that blue, underlined text is a hyperlink.
For this reason, we think that it's generally a good idea to include text
links in your web site design along with other graphic images.
The link colors in your text should be familiar to your visitor, if possible.
Blue text usually indicates an unvisited link and purple or maroon text
usually indicates a visited link. If you elect not to use the default
colors, your text links should be emphasized in some other way: boldfaced,
a larger font size, set between small vertical lines or square brackets,
or a combination of these. Text links should be unique — they should
not look the same as any other text in your web pages. You do not want
people clicking on your headings because they think the headings are links.
Advantages
The biggest advantage of using text links is the quick download time.
If you are using large (in K) graphic images on your web pages, then it
might be best to have a navigation scheme of text links. The other advantage
of text links is that some of the text can be keywords.
Disadvantages
The biggest disadvantage of text links is that they can be boring to
look at, especially if you have a large amount of blue links sprinkled
throughout your web pages. People like simplicity and ease of navigation.
Thus, if there is a way to make your text links more visually appealing
and easy to discern from other sections of content, such as placing them
in a colored table cell or a colored sidebar, then we recommend you do
this.
Graphic images - navigation buttons
Graphic images add uniqueness, color, and personality to a web site.
Most web sites we see use web graphics (buttons) as a navigation scheme.
Advantages
Graphic images have visual appeal. Peoples' eyes are naturally drawn
to a splash of color and a change in dimension. The biggest advantage
to using navigation buttons is that they give your visitors a visual representation
of how to navigate your site right away, especially if the navigation
buttons are visible on the top part of a computer screen.
Another advantage of using graphic images/navigation buttons is that
as long as the navigation buttons have alternative text in the HTML code,
your web site can still be navigated even if your visitors turn off the
graphic images.
If navigation buttons are used in conjunction with text links, you have
multiple places to put keywords: both within the text link and the alternative
text of the navigation buttons. Many search engine optimization specialists
recommend this combination for good search engine indexing.
Disadvantages
Download time is a big consideration in determining whether or not you
should use navigation buttons. In general, you should keep the navigation
buttons' file size to between 1K-5K in file size and dimensions between
60-165 pixels in width and 25-60 pixels in height. You don't want the
main message of your site to be the navigation buttons, and you don't
want people clicking off of your site waiting for all of your navigation
buttons to download.
Many sites are getting away from using a beveled effect on navigation
buttons to show variety in web site design. The disadvantage of this idea
is that many visitors might not understand that the graphic image is a
hyperlink. One of the main reasons beveled buttons are so popular is that
people believe that a "buttony" image is "clickable." The following shows
two sets of navigation buttons - the beveled buttons appear to be more
"clickable."
Graphic images - image maps
An image map is a single graphic image that allow users to access
different web pages by clicking on different areas of that image.
Advantages
Sometimes a single image map is quicker to download than multiple navigation
buttons, as is the case with our web site. Another advantage for using
image maps for site navigation is that graphic designers can show a bit
more creativity in designing an image map compared to designing a set
of navigation buttons.
Alternative text can also be placed inside the HTML of an image map.
Disadvantages
Many graphic designers who specialize in print design like to show off
their design talent by creating beautiful image maps that are slow to
download. Having a beautiful image map can increase sales and show creativity
and uniqueness, but there is a good chance of having potential customers
click off your web site before a page has time to download.
Also, many search engines will not follow the links inside of an image
map, so it is very important an alternative means of navigation for the
search engines on your web pages.
Drop-down Menus - Javascript, CGI, tc.
JavaScript is a scripting language supported in Netscape Navigator
since version 2.0, and in Microsoft Internet Explorer since version 3.01.
You can program with JavaScript directly into your HTML pages, making
it a very popular means to navigate a web site. A navigation scheme can
also be coded using a CGI script.
Here is what a drop-down menu looks like (JavaScript not coded here):
Advantages
The main advantage of drop-down menus is web page real estate. Drop-down
menus don't take up as much screen space as multiple graphic images.
As long as you know that the majority of your site visitors use browsers
that support JavaScript, this is a very useful navigation tool.
Disadvantages
The main disadvantage of this type of navigation scheme is that many
early browsers do not support JavaScript. If you know that many of your
site visitors and customers use browsers that don't support JavaScript,
then it would be best to use alternative forms of site navigation.
If your site navigation uses a CGI script, you must have a web server
support your type of script.
Dynamically generated URLs
A dynamically generated navigation scheme, such as pages generated in
a search function, is best used for web sites that have databases. For
example, online stores with a large inventory can create a search function
for their users to find the products they are looking for.
Advantages
Dynamically generated URLs, particularly for online stores, help potential
customers find the product or services very quickly. Site visitors can
type in a search term and find what they are looking for within three
clicks.
Search functions also don't take up much screen space.
Disadvantages
The main disadvantage with this navigation scheme is that many search
engines will not index dynamically generated URLs. Thus, in order to get
your web site indexed, it is best to submit non-dynamically generated
web pages to the search engines.
Maintaining both a database that generates web pages (i.e. dynamically
generated) and static (HTML) pages can be both expensive and time consuming.
© Grantastic Designs, all rights reserved.
| 
(1 votes)