Design Principles for Navigation

Good navigation:

• Is easy to learn
  • People are impatient.
  • Need well-chosen and well-labeled icons.
  • http://www.metadesign.com/
    
    
• Is consistent
  • In offerings
  • In placement
  • In appearance
  • home.earthlink.net/~hmartch
    
    
• Should appear in context
  • Where are you?
  • What will you do when you’re finished?
  • http://www.amazon.com/
    
    
• Includes alternatives
  • Low-end site versions
    • ALT tags, text-only http://www.amazon.com/
  • Site maps, site indices, menus
    • Multimedia menus http://www.dreamweaver.com/
  • Alternate organization schemes
    • http://www.amazon.com/
      
      
• Requires minimum effort
  • Minimize clicks.
  • Puts user in control.
  • http://www.cdw.com/
    
    
• Provides visual guidance
  • Create consistency in navigation cues.
  • Will vary depending on site audience.
  • http://www.cdw.com/
    
    
• Uses clear labeling
  • Choose vocabulary appropriate to audience.
  • Interview your users!
  • Consider context. Back --> ?
    
    
• Is appropriate for audience
  • http://www.amazon.com/
  • http://www.funschool.com/
    
    
• Recap: Good navigation
  • Is easy to learn.
  • Is consistent.
  • Should appear in context.
  • Includes alternatives.
  • Requires minimum effort.
  • Provides visual guidance.
  • Uses clear labeling.
  • Is appropriate for audience
    

Navigation Techniques

1. Built-in features

• Many features available
• Much user testing
• Don’t override them.
  

2. Building context

• “You are here.”
• Organizational name
• Indication of position in structure
• pages.ebay.com/search/items/basicsearch.html
  

3. Types of navigational schemes

• Hierarchical
• Global
• Local
• Ad hoc
  

4. Hierarchical schemes

• Main options from info hierarchy
• Extremely important
• Consider additional navigational aids.
  

5. Global Navigation

• For a simple web site:
  • Navigation bar at the bottom of each page
  • Optional on main page
• http://www.ccnyddm.com/
  

6. For complex sites:

• Main navigation bar
• Consider
  • Additional nav bar for third-level pages
  • Bread crumbs
• Relative locations of options should remain the same from one version of nav bar to another
• http://www.clearinghouse.net/
  

7. Local navigation

• Provide navigation within a “subsite”
• Complement, not replace global nav bar
• http://www.amazon.com/ book subsite

8. Ad Hoc navigation

• When relationships not nicely categorized
• Added after content place into web site
• Embedded hypertext links
• Can be difficult to find
• Make link provide sufficient context
• http://www.useit.com/

9. Navigational elements

• Navigation bars
• Frames
• Pull down menus
• Table of Contents
• Site maps
• Guided tour

10. Navigation bars

• Graphics
• Aesthetics, appeal
• Caching
• Text
• Fast
• Flexible
• Easy to update
  

11. The appeal of graphics: www.burpee.com/main.asp

12. More difficult to update: www.aladdinsys.com/support

13. Navigation bars

• Placement
• Icons
  • Complex concepts difficult to express
  • Add text
  • Consider using only common icons
  • Icon Intuitiveness test: www.useit.com/papers/sunweb
    

14. Frames

• One or more scrollable panes
• Advantages
  • Separates navigation from content
• Disadvantages
  • Screen real estate
  • Printing, book marking
  • Multiple client-server interactions
• Extreme: www.ecnet.net/users/gas52r0/Jay/
  

15. Menus

• Fill-out form and “submit” or “go”
  • Requires server-side functionality
• Java/Javascript
  • As cursor moves across word or area, a menu pops up.
• http://www.amazon.com/, http://www.cdw.com/

16. Analysis

• Advantages
  • Pack lots of options on one page
  • Reduces number of clicks
  • Compatible with exact organization schemes
• Disadvantage
  • All options not visible
  • User must act before seeing options.
    

17. Hiding options has disadvantages: http://www.architecture.yale.edu/
    
    
18. A better solution: http://www.csfbdirect.com/
    

19. Site Maps

• Graphical representation of the info architecture
• Little experience in using, designing
• Avoid depicting every link
• http://www.dynamicdiagrams.com/

20. Guided tours

• Introduce new users
• Marketing ploy
• Linear structure
• public.wsj.com/tour