plus logo

Navigation

What Is the Purpose of Navigation?

  • A guide to move through information
  • How you find things
  • How you teach your visitors to use your site
  • Gives feedback about where your visitor is within the context of your site
  • Gives feedback about how to travel forward and backward through the information
  • Lets visitors know what you offer
  • Lets visitors know how to reach you

What Visitors Want

  • To find their way
  • To not feel lost
  • To know how to go back
  • To cross-reference information

What Is Information Architecture?

  • The organization of informaiton
  • Determining how many levels deep
  • Making the complex clear
  • Determining the structure of the site
  • Organization, labeling, navigation, and searching systems

Different Organizational Systems

  • Alphabetical
  • Geographical
  • Chronological
  • Audience-specific
  • By metaphor
  • By topic
  • By importance to developer
  • By importance to user
  • Custom

Before your Design Your Navigation

Think about what to "label" your categories

  • Avoid ambiguous terms
  • Be aware of unrelated items
  • Be aware of politics
  • Create labels that make sense to your visitor; avoid "insider" terminology or cutesy verbiage that can potentially confuse outsiders.

Navigation Terms

Buttons

  • Need to look different from other graphics
  • Can be rollovers
  • Can use bevels, drop shadows, movement, color
  • Icons should have text callouts
Site Maps

  • Help visitors find their way
  • Show the scope of what you offer
  • Are a good adjunct to navigation, not a substitute for navigation itself
Bread Crumbs

  • Show where you've been as well as where you are
  • Give the confidence that you can get "back to where you came from"
  • Offer an alternative navigation approach
Hub and Spokes

  • Work well with presentations and linear information
  • Can be annoying if you want to hyperlink or jump from place to place
Persistent Navigation

  • Lets visitors know the depth of your site regardless of where they are
  • Promotes non-linear movement through the site
  • Supports back-door or bookmarked entries into your site

Valid XHTML 1.0 Transitional

Valid CSS!