Understanding HCI

Navigation Maps

What is a Navigation Map?

Navigation maps represent how the user navigates through the system (not same thing as directory structure!)

  • Show pages/screens together with links and their direction
    • 1 box per page/key moment - where can you go from here
    • include backwards as well as forwards flow
  • Not just for web sites
  • Frequently, drawing them helps spot:
    • orphan pages
    • dead ends
    • structure is getting too complex and users will get lost

Why Use it?

  1. Help identify how the user might navigate
  2. Help identify how the information should flow
  3. Plan for site creation and linking

Participants Needed

The designer or design team should be involved in this phase.

Use of scenarios prior to making the navigation map can help to iron out confusion in the ordering of information.

Conditions required

  1. Information on the content to be included
    1. what it is
    2. what order it should appear in
    3. is any piece of information dependant on another?

Task List

  1. Sketch out all pages or screens by hand using simple labelled rectangles
  2. Link them with lines where it is possible for the user to directly move from one page, screen or movie to another
  3. Indicate the direction of movement throughout with arrows
  4. For complicated structures, use different colours to indicate other information, such as whether the link is static or dynamic (ie just a link or passing a variable), or whether the information is being sent to the database or recieved from it.
  5. When complete, you might like to formalise this as a digital diagram
  6. It may also be necessary to separate out user percieved navigation, from actual information flow.

Examples

Edinburgh Tourism website

  1. Proposed user navigation map for edinburgh tourism
  2. actual user navigation map for edinburgh tourism
  3. proposed information navigation map for edinburgh tourism
  4. actual information navigation map for edinburgh tourism

More

  1. http://www.ezdotcom.com/portfolio/uiflows/uiflows.asp

Limitations Of method

It is difficult to ensure that all of the pages or screens have been identified prior to building the site itself.

Exercise 1

Construct a navigation map for a website or CD-ROM from the BCFE brochure which is to be viewed using a standard PC. In doing this you will have to consider:

  1. What way will you allow the user to navigate the site or cd-rom?
  2. Will you use deep or shallow linking?
  3. Will your site or cd-rom be hierarchical, webbed or linear in structure?
  4. Will you use in-line links, navigation bars, search functions, breadcrumb trails, dropdown menus, image-maps?
  5. Have you thought about a sitemap?
  6. How will you ensure that your users know where they are and where they can go?

Exercise 2

Construct a navigation map for a website or CD-ROM from the BCFE brochure which is to be viewed using a PDA.

  1. In what way will does this differ to the previous map?
  2. Deep or shallow linking?
  3. Hierarchical, webbed or linear in structure?
  4. Link methods?
  5. Sitemap?
  6. How will you ensure that your users know where they are and where they can go?

Further Reading

  1. Multimedia Design: Navigation Maps
  2. Is Navigation Useful?
  3. Transitional Volatility in Web Navigation - Masters Thesis
  4. Navigation Accessibility 1: Menus and Links
  5. navigation guidelines