Creating Web Pages Unit


 

Navigation Schemes: Issues and Concerns

By Margarita Figueroa, Earth Council
May 2001

After reading this article, the reader should:
• have a list of elements that can help in the navigation of their Web site; and
• be able to create a navigation scheme that fits their organization's needs.

After the goals and structure have been decided upon, you are ready to take this information and build your Web site. A well-designed structure makes it easy to define the navigation system and, combined with an effective visual design, enables the users to construct a mental map of the site.

To begin, you must decide on clear labels for each section and concise and explanatory wording for each button. This will give the user an overall picture of the content, as well as help the user know the destination of each link.

It is a good idea to draw sketches of the possible layouts of your Web site as it would show up on the first screen, keep a mental note of some of the following issues:

How will users get from one place to another?

Provide different alternatives for the user to find what they are looking for. Following are some of the most common solutions:

A navigation bar: you have already defined the major sections of your content that you can use for the "global navigation system". The navigation bar should be repeated on every page to help the user go from one major section to another, and keep them oriented throughout the site.

Some tips:
• The global navigation bar should be one of the first elements to upload; the user should have the tools to navigate on hand.
• It should be in a prominent position (not all users have the same monitor size so the most important information should go on the top).
• It is important for the global navigation bar to be as legible as possible (there is nothing more frustrating than not being able to read the buttons).
• Multi-language sites: if the site will be translated into different languages, it is important for the user to clearly see the buttons for their respective language. The top section of the site should allow users to transfer between languages.
• Local navigation: some major topics might need local navigation. This might be handled by creating a list of topics, a menu of choices, or a side annotation of a few related items. The key here is to make sure that there is a difference in hierarchy between the "global navigation bar" and the "local navigation bar."

Hyperlinks: Hyperlinks can take the user to a specific section on the same page or they can take them to a completely different page. Be consistent in the use of hyperlinks, the user should be able to tell which parts of your site are interactive and which are not.

Some tips:
• Target Navigation: when the documents are too big, it is a good idea to have a list of topics at the top of the page and link them to the section where the topic is developed.
• It is useful to remind users where they've been by having the links change colour after being visited.
• Avoid making entire sentences links. It's cleaner and simpler to link off one word or a short phrase.

Search engines: a search engine is a useful tool when you have an archive of documents, publications, speeches, videos, etc., on the site. It will allow the user to find information quickly with key words or phrases. The search feature should also be easily seen on the first screen. There are different companies that offer search features for free, try:
• http://www.atomz.com
• http://www.google.com/services/
• http://www.freefind.com/

Sitemaps: these are useful when the Web site has many levels to give the user an overall picture of the site and help them locate where they want to go. Options for the sitemap include a flow chart, a graph or an outlined list. Whichever you use, think about the clarity for the user and maintenance for the administrator. If you decide to use a sitemap, make it easily accessible in your layout and place it consistently on all pages.

How do you prevent them from getting lost?

Consistency is a key component in helping the user stay oriented on your site. Reusing architecture elements (navigation bars, sitemaps, etc.), design elements (logos, colours, etc.) and naming conventions throughout the site, allows the user to concentrate on the content.

Use the "convention buttons": some buttons have become widespread practice in Web sites which can be useful for navigating the site.

Some tips:
• It should be easy to return to the home page. The logo of your organization is an element that can be included in your global navigation and can be the link back to the initial page.
• Some icons are easily understood: the magnifying glass is for searching the site, envelopes are for e-mailing, a shopping cart is for a list of products the user has selected, etc. Browse other sites and take a note of what icons others use to make their navigation clearer.
• Arrows: arrows are for linear links. These can direct the user to the previous page, next page or top of the page.

Three click rule: simplifying the Web site is a way to help the user find their way and keep them at your site. It is good practice to make information no more than three clicks away. The more levels your site has, the harder it will be to get to that information.

Keep the user oriented: display the path the user has gone through. There are many Web sites that use this as local navigation. This also helps the user relate the section they are in with the rest of the content on your site:

Thinking about the user

The design of the site should be thought out carefully. When you decide on what colours and graphics to use, keep in mind that the design should reflect the original goals and that the visual aids (photographs, diagrams, buttons, headings, etc.) help communicate the message of each section of your site.

 

 

 

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 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. (For tips on writing the HTML for graphic images, 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 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. Read more details on how to use image 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 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, etc.

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.

Top Of Page

 

Designing web pages with Contribute

Step One -  Getting Started

Step Two -   The Basics

Step Three -Thinking about design

Step Four - Evaluate your page/ rubric

Before you begin:

  1. Things to consider before your begin
  2. Phase I-Student website
  3. Phase II- 5 more pages-Tech 2
  4. Website design rubric

Creating the basics :

  1. Getting started
  2. Text
  3. Links
  4. Pictures
  5. Creating graphs
  6. Things to remember
Design tips:
  1. Uniformity
  2. Getting permission
  3. Basics and design quiz
On your own:
  1. Your own Web Page
  2. Website design rubric
Designing Web Pages Handouts - Use only if you don't have a printed copy from Mr. Hurt

Handouts:

 

 

 

All pages created by Brock Hurt.
Last Modified -