Web Navigation Design

1
Web Navigation Design

• Linda Larson
• CSULB Fall 2000

2
Navigation
The art of knowing Where you are, Where you
want to go, and the most efficient way to get
there http//moon.pepperdine.edu/ techcamp2000/in
dex2.html
3
Table of Contents

• Audience
• Mental models
• Information structure
• Individual page structure
• Contextual clues
• Navigation bars
• Feedback
• Ten qualities successful Navigation

4
Audience

• Who is the audience?
• Design site for audience

5
Mental models

• When confronted with new info build mental models
• Visualize relationships of topics
• Try to see where users would put info

6
Screen Size

• 14 inch monitor
• 640 by 480 pixels
• 7 inches wide by 3.66 inches long
• 26 square inches
• Viewable screen when user arrives
• 50-80 content
• 20 or below navigation
• White space guides the eye

7
Frames or no frames

• What are frames?
• What are the advantages?
• Consistent navigation
• Consistent visual look
• What the disadvantages?
• Loss of screen real estate
• Some browsers cant view well
• Hard to bookmark individual page

8
Navigation Pull Down Menus

• Disadvantages
• Hides all options
• Use may not know they exist
• Advantages
• Include long list of items
• Can have multiple lists

9
Information Structure

• Material or content should drive the
  organization of the information

10
5 Steps to Organizing Information

• Divide content into logical units
• Establish a hierarchy of importance among the
  units
• Use hierarchy to structure relations among units
• Build a site that closely follows your
  information structure
• Analyze the functionality and aesthetic success
  of your system (Lynch and Horton 1999)

11
Types Of Hierarchies

• Alphabetical
• Least to most important
• General to specific
• Others?

12
Classifying Information

• 4 Basic Structures
• Linear
• Network
• Hierarchical (ingrained in human behavior)
• Grid

13
Individual Page Structure

• Not always enter site on home page
• Every page independent freestanding

14
What Every Page Needs

• Title user knows their location within site
• Home page ID, date, update creator
• Link to every major section within site
• Organization name on every page
• Graphic identity same throughout site
• Not more 7-9 options (top level)

15
Navigation Text vs. Iconic

• Advantages of text
• Easier to create
• Easier to revise
• Icons
• Hard to find ones to represent content
• Different in different cultures

16
Where to Place Navigation

• Towards top of bottom of the page or both
• User scans from upper left to lower right hand
  corner of the page

17
Labeling of Content

• Can be challenging
• Well design labels enhance navigation
• Poor labels do the opposite
• Should have a plan and think through how all your
  content fits together

18
Feedback

• User provided with constant visual information
  of location in site by
• Graphic design
• Navigation buttons
• Uniformly placed hyperlinks

19
How to provide visual feedback

• Rollovers buttons that highlight
• Graying out of current page local
• Do not move location of buttons in hierarchy
  confusing if used keeps mouse in same location

20
Number of clicks within a site

• Access up to 80 of the content with 5 hops or
  clicks
• No document deeper than 7 hops

21
10 Qualities of Successful Navigation

1. Be easily learned
2. Remain consistent
3. Provide feedback
4. Appear in context when needed
5. Offer alternatives
6. Require an economy of action and time
7. Provide clear visual messages
8. Offer clear understandable labels
9. Be appropriate to the sites purpose
10. Support users goals and behaviors

22
Use of Themes to Unify Site