Navigation Systems
Upcoming SlideShare
Loading in...5

Navigation Systems






Total Views
Views on SlideShare
Embed Views



1 Embed 4 4



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Navigation Systems Navigation Systems Presentation Transcript

  • Navigation Systems
  • Embedded Navigation Systems
      • provide context and flexibility
      • Help users to understand where they are and where can they go.
    Contextual navigation Global Navigation Local navigation
  • Supplemental Navigation Systems
      • Provide different ways of accessing Information.
    Site map Category 1 SubCat1 , SubCat2 Category 2 SubCat1 , SubCat2 Category 3 SubCat1 , SubCat2 Index A ______ B C Guide Step 1 Step 2
  • Navigation Systems
    • Browsers support many navigation features
    • Users are familiar with these features
    • Designers should avoid :
      • Cluelessly modifying the visited/unvisited link colors
      • Killing the back button
      • Crippling the bookmark feature
  • Navigation Systems
    • Since users can “parachute” to any page in your web site, building context is key.
      • Rules of thumb for building context clues
        • Users should always know where they are in. Include the organization logo in every page.
        • Present the structure of the information hierarchy in a clearly and consistently.
  • Navigation Systems
    • Example
  • Navigation Systems
    • To test context you can try a “Navigation Stress Test”
      • Ignore the home page and jump directly into the middle of the site.
      • For each random page, Can you figure out where you are in relation to the rest of the site
      • Can you tell where the page will lead you next?
  • Improving Flexibility
    • You can allow users to move laterally in the hierarchy of navigation to allow more flexible navigation.
    • You have to balance between the advantages of flexibility and clutter.
    Hierarchical navigation Hypertext navigation
  • Embedded Navigation Systems
    • Global Navigation Systems (GNS) or site wide navigation
      • Intended to be present in every page.
      • Allows direct access to the site’s hierarchy
      • Examples:
  • Embedded Navigation Systems
    • Local Navigation Systems (LNS)
      • Global navigation systems can be complemented by one or more local navigation systems.
        • Tightly controlled and integrated to GNS and LNS (example )
        • Multiple LNS with very little in common( also called sub-sites ). Example:
  • Embedded Navigation Systems
  • Embedded Navigation Systems
    • Contextual Navigation
      • Navigation links specific to a particular page, document, or object
      • Supports associative learning
      • Allows you to create connectivity links that benefits users and navigations
  • Embedded Navigation Systems
    • Examples:
      • Links embedded in contents
      • Contextual navigation embedded in the layout of the page
  • Implementing Embedded Navigation
    • Balance between flexibility of navigation and the danger of overwhelming the user with too many options.
    • Global, local and contextual elements exists together on most pages
    Contextual Navigation Content Contextual Navigation Global Navigation Local navigation
  • Implementing Embedded Navigation
    • When combined all three types of navigation may overwhelm the user
      • Ex:
    • There is no absolute correct place to position navigation just general rules
      • Where do you look for navigation?
  • Implementing Embedded Navigation
    • How to implement navigation bars:
      • Text or Graphics
      • Pull-downs
      • Pop-up
      • Cascading menus
  • Implementing Embedded Navigation
    • Icons combined with textual labels
      • Example
  • Implementing Embedded Navigation
    • A final note on implementation:
      • NO FRAMES:
        • Confuse the user by slicing pages into independent panes of content.
        • Tend to cripple usability
          • Problems with back button
          • Reloading and printing a page
  • Supplemental Navigation Systems
    • External to the basic hierarchy of the site
    • Sitemaps:
      • Equivalent to the table of contents of books
      • Usually present a few levels of the information hierarchy
      • Provides broad contents access
  • Supplemental Navigation Systems
    • Sitemaps rules of thumb:
      • Reinforce hierarchy
      • Facilitate fast and direct access to the contents
      • Avoid overwhelming the user with too much information
    • Example: Intel’s sitemap
  • Supplemental Navigation Systems
    • Site Indexes
      • Similar to back of book index
      • Presents keywords or phrases in alphabetical order
      • Link within the index lead directly to destination pages
    • Example:
  • Supplemental Navigation Systems
    • Guides
      • Guided tours
      • Tutorials
      • Micro-portals focused around a specific audience, topic, or task
      • Keep short and to the point
      • Meant to answer questions
      • Example: Google docs/spreadsheets
  • Supplemental Navigation Systems
    • Wizards and Configurators
      • =
      • – build your own computer
  • Supplemental Navigation Systems
    • Search
      • Is part of the supplemental navigation system (will talk about it later)
  • Advanced Navigation Approaches
    • Personalization and Customization
      • Tailoring pages based on user preferences
      • Be aware that:
        • Typically plays important but limited roles
        • Require a solid foundation or structure ans organization
        • Are really difficult to do well
        • Google, Yahoo, Amazon, etc….Direction of the web today
  • Advanced Navigation Approaches
    • Visualization
      • Cool but still haven’t prove their usefulness
      • Still under development
      • Example:
  • Advanced Navigation Approaches
    • Social Navigation
      • “ Recommender systems”
      • Build on other users actions.
      • Example Amazon’s recommended books
      • Flickr, Blogs
      • Becoming very popular