Navigation schemes in web site design

keckdonkeyInternet and Web Development

Nov 18, 2013 (3 years and 7 months ago)

101 views

Navigation schemes in web site design

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 easil
y. 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.




D
ynamically 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 lin
k 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 emphasize
d 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 clic
king 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 sc
heme 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 throu
ghout 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
sideb
ar, 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. (For tips on writing the HTML for graphic imag
es, click
here
.)

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 butt
ons. 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 th
e 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 you
r
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 t
he
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."


G
raphic 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. Read more details on how to use
im
age maps
.



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 creati
vity 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 down
load.

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, etc.

JavaScript

is a scripting lan
guage 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
al
so 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 b
rowsers 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.

Effective Navigation 1


How to Create an Effective Web Site Navigation Structure
-

Part 1

Copyright 2002 Herman Drost


A ship captain traversing the open seas without a good navigation system will surely ge
t
lost. Maybe he’ll strike sharp rocks and his ship will sink. A visitor who arrives at your
site and can’t navigate it for the information they seek, will surely get lost also and leave
in frustration. Your ship (your web site) will also sink if this cont
inues to happen.


Good site design means a good navigation structure for your web site. This means the
visitor can find the information with ease.


Put yourself in the shoes of your Grandmother. Would she quickly and effortlessly be
able to find the info
rmation she wants, or know what to click on to make the purchase?
Don’t think that just because it is easy for you, it will be easy for others.


Visitors should not need to click more than three times during their navigation, to find the
information they
are searching for. 1. Navigation Styles These can range from navigation
buttons, navigation bars, plain text links, fancy animated graphics or drop
-
down select
menus. You can also use illustrations, photographs or graphic images to show your
visitor around
. For example, an image map contains one graphic with different “hot
spots”(invisible buttons) that link to other pages.


2. Primary and Secondary Navigation Primary navigation consists of the navigation
elements that are accessible from most locations wi
thin the site.


Secondary navigation elements allow the user to navigate within a specific location. For
example, many sites have a page that offers information about the company. The primary
navigation element may be an About Us link. Subscribe FREE to M
arketing Tips
Newsletter


Receive your FREE trial download of this ebook for subscribing:


Name


Email


Hosting Plans from $30/Year


Once the user arrives on the About Us page, there will be other links (secondary links),
which navigate within the Abo
ut Us page.


These could be links to Press Releases, Corporate Locations, Investor Information and so
on. These links are secondary navigation elements because they are relevant to the About
Us page but not the other pages of the site. Therefore, these li
nks will not be found in
other areas of the site.


3. Guided Navigation This is a popular technique, in which you guide the visitor through
your site. Links are provided for the next step and establishing links that keep the users
on track continues the p
rocess. These links should supply the necessary information, as
well as an alternate course clearly marked to allow the visitor to exit. For example, an
online purchase should lead the user through shipping information, then on to payment
information, then

to receipt information.


4. Creating a Navigation Action Plan Determine goals and needs of your audience Decide
what the purpose of your site is and who your target audience will be. For more in
-
depth
information on this subject visit: “How to Target You
r Customers and Put Them in a
Buying Mood” (www.isitebuild.com/target.htm)


Learn from navigation that works Visit several successful sites that show good navigation
e.g., Fedex.com. These sites show good navigation planning.


Generally, good navigation
includes several characteristics:


Offers easy to learn elements

Remains consistent

Provides feedback

Appears in context

Offers alternatives

Provides clear visual messages

Offers clear and understandable labels

Remains appropriate to the site’s purpos
e

Supports visitors goals and behaviors


Providing feedback has the biggest impact on users. Navigation should tell people, where
they are and if possible, where they have been. Visitors should also be able to easily
determine linked or clickable material
.


They need to know whether they successfully made a purchase, conducted a search, or
completed some other task.


Navigation that allows visitors to find information easily and quickly will contribute to
your web site’s success. Ask your grandmother (or

someone who is not familiar with the
Web) to navigate your site. If they can find the information they want within 3 clicks,
your navigation structure must be a success. Congratulations!


Part 2 of this article will show “How to Design Your Navigation St
ructure and Common
Navigation Mistakes to Avoid”.

Effective Navigation 2


How to Create an Effective Web Site Navigation Structure
-
Part 2

Copyright 2002 Herman Drost


Searching for information on the Web has recently become like a mine field. You find th
e
site you want, only to be greeted by pop
-
ups when you enter, pop
-
ups when you are on
the site and pop
-
ups when you leave. Other sites use a flash introduction, make you wait
several minutes (which feels like hours), until the page finishes loading. Heck,

you just
want to find the information as swiftly as possible without having to watch out for these
mine fields.


A fast and simple navigation structure is essential for a successful web site. Visitors must
have a good experience at your site, if you want

them to return.


How to Design Your Navigation Structure 1. Sketching it out. Part 1 of this article
(www.isitebuild.com/navigation), discussed the different navigation styles and a
navigation action plan. Now let’s begin sketching out your site. Take on
e sheet of paper,
draw a circle in the middle


this is the subject of your homepage. From there, draw
branches, which have more ideas about your topic. If any topics are related in a more
definitive way, create another branch off the current idea branch.
Within minutes, you
will see your web site develop into a dynamic sketch. You might find that a standard
sheet of paper is not enough to contain all your thoughts. Use more paper, create more
branches, and keep the ideas flowing.


Once you have sketched o
ut your site, use separate sheets of paper for each web page.
Make sure you define a heading for each page and decide how it links to the other pages.
This exercise will help you to decide how you want visitors to navigate through your web
site.


2. What
navigation style to use Decide on which navigation style you will use. This could
be a navigation bar across the top, a navigation bar on the left (the two most common
styles), or an image map (an image divided into separate links to other pages).


If you

use graphical icons or other graphics instead of text, then include the text links
elsewhere on your site. This is because some people browse with their graphics turned off
and this technique allows them to still see and use the links. Subscribe FREE to
M
arketing Tips Newsletter


Receive your FREE trial download of this ebook for subscribing:


Name


Email


Hosting Plans from $30/Year


3. What colors should you use? If you have a dark background, with dark graphical icons
or text, your links will be in
visible. When using rollovers (links that change color when
you move the mouse over them), be careful that the color of the changed link will not
disappear, in case your visitor wishes to return to that link.


4. Navigation alignment Some sites have the n
avigation icons or text links lined up
against the side or top of the page. Leave an equal amount of space on either side of your
navigational links and make sure they are aligned with each other.


5. Repetition and consistency If the visitor has to searc
h for the buttons on every page, or
if the links have different words, techniques or icons, they get annoyed. Don’t you?
Navigation elements from page to page should be repeated and consistent throughout
your site. If a visitor sees a navigation system on
every page, it will add to familiarity and
orientation.


6. Check your links Have you ever followed a navigation link, only to find you can’t get
back to the home page? You may have clicked on a link, only to get a page error


the
page does not exist! Pa
rticularly if you have linked to a web site outside of your own.
With time that site may have disappeared or changed its address.


Make it easy for your visitor to find their way around your site, by testing out where your
links go and that each of them w
ork. You should do this periodically to avoid the
problem of dead or broken links.


7. Testing your navigation structure You’re overjoyed that your site is finally finished, so
you tell all your friends and family about it. They politely say it is great,
but ask you what
it is about and how can they find their way around.


Once completed, you need to step back (go outside of the box you have been in) and get
others to navigate your site


preferably your Grandmother or someone that has never
been on the N
et. This is called a usability test. If they have no problem to discern the
purpose of your site and can navigate it with ease, you are ready to publish it for all the
world to see.


Design your navigation structure with the visitor in mind. Eliminate any

obstacles
(minefields) that will annoy and frustrate them, causing them to leave and never wish to
return. If you make it easy for them to find the information they seek, you will gain many
happy customers.