Designing at a Click: Provide Context

Purpose: Organization of information within a web page must be clear to the user. Use of graphics and text to provide context clues will ensure that your users can easily navigate through the site. The principle addressed on our web page will be the use of consistent layout of graphics and text to aid navigation.

A good web site is easy to navigate. Designers should use navigation bars or consistent text and symbols that allow a user to go to any page in the site or return to the main page without using the web browser back key. By designing clear navigation aids, the user will be in control and not feel lost or trapped in the web site. On long web pages, users can use anchors to navigate the web site without relying on scroll bars.

This is a navigation bar which has internal links to the top of this page and to the Activity section of the page.

Top

Activity

Look for these characteristics in a navigation bar.

• Links to all pages on the web sites
• Locate navigation bar on same place on each page
• Use the same bar for each page

Other navigation aids include drop down menus, graphics arrows and text, and clearly identified links.

Examples:

• PBS
  

This site uses a consistent black bar across the top of each web page that acted as the directory for the site.

• Steve Marsden’s Chemistry Page

This site applies the principle of consistent and predictable placement of its navigation bar across the bottom of each page.

• Skidmore-Tynan Independent School District

This site was chosen for its consistent use of a drop down menu for easy navigation. It is consistently located in the same place on all pages in the site.

• Pettus Independent School District
  

This site does not consistently use a navigation bar and has dead ends.

• Ms. G's Science Files

This site has few navigations aids at all.

• Windsor Park Elementary

This site demonstrates inconsistent use of a navigations aids.

Activity: Evaluation of Web Page Navigation Aids

Look for these characteristics in a navigation bar.

• Links to all pages on the web sites
• Locate navigation bar on same place on each page
• Use the same bar for each page

Other navigations aids include drop down menus, graphics arrows and text, and clearly identified links.

Select the example and evaluate the ease of navigation. You will need to use the browser back key to return to this page. Select good example if the web page evaluated demonstrated the principle of consistent layout of graphics and text to aid navigation. Select poor example if the web page lacked clear navigation aids

Example

Good Example

Poor Example

Top

Activity

Feed Back
Good Example:

Sorry, this site was chosen as an example of a poor demonstration of the principle of consistent layout of graphics and text to aid navigation. Notice that after the home page of the site, no graphics or text allowed for navigation. Each page was a dead end.

Top

Activity

Poor Example:

Congratulations! Your evaluation is correct. This is a poor example. Notice that after the home page of the site, no graphics or text allowed for navigation. Each page was a dead end.

Top

Activity