Web 210 Chapter 4
In addition to reading Ch. 4 of our main textbook,
read Ch. 2 (Interface
Design) of "The Web Style Guide"
Objective #1: Explain the importance of a Web site's navigation system
and related issues.
- The navigation system should not only help the user move through the site
but it should also help the user "understand" the site. In other
words, the navigation system should reveal the content of the site. The navigation
system should also serve as handrails through the site. In this sense, users
should be able to answer the following navigation questions from any page
of your site.
- Where am I?
- Where can I go?
- How do I get there?
- How do I get back to where I started?
- Navigation Information
- page titles (within the page - not the <title> tag), headings,
and subheadings that serve as a "you are here" kind of reference.
- "bread crumbs" such as Home > Education
> RACC > WEB 210 > Class #5 Bread
crumbs show how the user has traveled to the current page.
- highlighted buttons, tabs, etc.
- colored navbar or background
- give evidence of depth of page or location within web site
- use easy-to-understand and consistent links whether they are navbar
buttons, icons, or text links
- Limit Information Overload
- break up your content into information segments that are manageable
to design and surf
- control page lengths to minimize scrolling and give a more pleasant
experience surfing the site
- use embedded or associative "contextual" hypertext links to
connect user with appropriate facts, relationships, and concepts. However,
limit the length of your underlined hyperlink and don't link every word
on your page.
- Other Issues Regarding Navigation
- once in a while it is appropriate for the navigation system on the home
page to be a bit different from the secondary pages' navigation system
(bigger logo, design of the home page may be a bit different than the
secondary pages, doesn't link to itself, total breakdown of sections,
- it may be required to have the user click hyperlinks to move backward
and forward through a site without the Back and Forward browser buttons
in order to provide CGI interactivity
- consider a secondary navigation system such as a navbar in the upper-right
corner with links to the site map, advanced search page, etc.
Objective #2: Identify & be able to use various methods to build
- create as one Fireworks graphic and use the Slice tool to export slices
with or without the exported HTML (<table> and <a href> tags)
- create separate words or button-looking icons
- create a sliced navigation bar that simulates notebook tab dividers
- create Button symbols and an official navbar in Fireworks and export
- navigation bar with drop-down menus
- can be text or graphics
- can be created in Fireworks and exported to Dreamweaver
- can be created using layers in Dreamweaver
- image map
- create as one Fireworks graphic and use Hotspot tool in Fireworks or
- text-based navbar using cells in a table
- top or left frame in a frameset
- Activity: Can you think of or find any other examples of
navigation systems in existing Web sites?
- Activity: As a class identify examples of each of the navigation
systems above. Here are some examples to classify:
- racc.edu, farmers.com, oldnavy.com, guess.com, usps.com, paypal.com,
Objective #3: Discuss advantages and disadvantages of a text-based
- advantages: easy to create, no download time, easy to interpret, will work
on text only devices such as some cell phones
- disadvantages: boring to look at, visual metaphors can't be used
- don't overlook good, old-fashioned text navbars as your primary navigation
system or at least an alternate system
- if images are turned off in the browser or the user is handicapped, this
may be the only navigation available to the user
- study the example of text-based navigation on pp. 92-102. Note that this
could effectively be implemented as frames pages as well. This example allows
for linear and hierarchical navigation simultaneously
- can easily be tied to bread crumbs by hyperlinking each subdivision of the
site, for example
Home > Education
> RACC > WEB
210 > Chapter 4 Lecture Notes
Objective #4: Discuss advantages and disadvantages of a graphic-based
- advantages: increased variety, better aesthetic look, can increase usability
by adding consistency
- disadvantages: increased download time, could confuse user if not consistent
or culturally appropriate, more difficult to design and create
- consider providing text along with the icons in case the user does not
understand the icons
- be sure to provide <alt> text for usability and accessibility