Web 210 Chapter 4 Lecture Notes

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, etc.)
  • 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 navigation systems

• navigation bar with or without JavaScript rollovers (i.e. buttons)
  • create as one Fireworks graphic and use the Slice tool to export slices with or without the exported HTML (<table> and <a href> tags) to Dreamweaver
    • 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 to Dreamweaver
• 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 Dreamweaver
  • cannot add JavaScript rollovers to an image map though
• 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, and mms.com.

Objective #3: Discuss advantages and disadvantages of a text-based navigation system.

• 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 navigation system.

• 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
• icons
  • 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