FIT3084: Navigation


In the previous lecture:

In this lecture:


Browser Navigation Features

These features have been carefully researched!

Make the most of them.
Avoid corrupting or over-riding them for aesthetic or other reasons.


Building Context

map of timbuktu

Timbuktu - Town Map

Ensure the user always knows their location including:

  • Which site they are looking at
  • Where in the site they are located

You can use page headers & footers, the page title and consistent sensorial design to achieve these goals.

The site navigation system should consistently present the paths which may be taken and indicate the current location in the site.

Book 7
The Story of Medea and Jason

The Argonauts now stemm'd the foaming tide,
And to Arcadia's shore their course apply'd;
Where sightless Phineus spent his age in grief,
But Boreas' sons engage in his relief;
And those unwelcome guests, the odious race
Of Harpyes, from the monarch's table chase.
214

What features does a map have to assist the reader in this regard?

What navigation features does an ordinary novel have to do the same?

A breadcrumb trail and highlighted navigation icons can show users their current location.  
Apple Breadcrumb trail Apple website breadcrumbs and navigation bar.
   
Cycling breadcrum trail CyclingNews website breadcrumbs and navigation bars.

Types of Navigation System

Hierarchical Navigation Systems

The information hierarchy (see the lecture on Site Design) is usually the primary way of moving through data.

It can also be restricting...

hierarchy no cross links

hierarchy cross linked

How would you move through this hierarchy from the red cell to the blue cell?

Use the benefits of hypertext but be wary of adding too much complexity.

 

Global Navigation Systems

These allow movement to locations which may otherwise require several jumps in the hierarchy.

Appropriate destinations are context dependent.

A simple example which often appears on a page footer...

basic navigation bar

What might the shades of this footer's icons indicate?

sample navigation bar

What about this one?

sample navigation bar

Local Navigation Systems

Sometimes an area within a large site (or other data collection) may be viewed as a sub-site.
(E.g. the purchasing section of an online shop, the lecture notes on the CEMA site)

Local navigation systems can be introduced to navigate within sub-sites.

Local navigation systems should complement (not replace) the global navigation system for the site.

Bill's e-Boutique*

Place your order...

sample navigation bar

*e-Boutique is not a registered trademark of e-Monash

Ad Hoc Navigation Systems

The in-line hyperlinks within the text here are examples of an ad hoc navigation system. These links are easily missed by users and so should be included with care. Don't bury vital links like this within slabs/sentences of text as they will often go unnoticed making your website frustrating to move through. Nevertheless, embedded links are indeed elegant and may be used for non-essential information or when you are certain that they will only be of relevance to people reading the text.

Sometimes making a list of links to replace or complement embedded hyperlinks may be beneficial...


Navigation bars

Hyperlinked navigation bar

home | contact details | purchase | about us

Image map navigation bar

 

nav bar

Tabulated image navigation bar

home
contact
purchase
about us

What are the drawbacks of this navigation bar?

home
contact
purchase
about us

...and the advantages of this one?

home
contact
purchase
about us

home

contact us

purchase

about


Frames and Navigation Bars

Take care!


Pull Down Menus

Select location:


The Table of Contents

A hierarchical list of major topics and sub-topics (useful if the website is hierarchical in form).

Should re-inforce (not conflict with) the information hierarchy.

Facilitate fast, direct access for users who know what they are looking for.

Table of Contents

Introduction
Polygon representation
Coordinate systems
Pixel-level processes

  • Chapter 2 - Theory and Practice of Lighting

Introduction
Intensity and energy
Aspects of reflection
Reflection models

 


The Index

An alphabetical list of keywords and phrases from a site.

Useful for sites which aren't hierarchical (index is usually relatively flat).

Ensure keywords are selected to assist a user in their queries.

Index

  • Coordinate Systems

Cartesian
Cylindrical
Spherical

  • Potatoes

Brown
Mouldy
Sweet

  • Reflection

Introduction to
Models
Rendering


The Site Map

A geographical representation of the information on a site.

Site map generated live from http://www.sgml.net/

Map generated by Dreamweaver of the CEMA site.



Guided Tour

What are the advantages of a guided tour for assisting a new user?

How would you implement a guided tour of a web site?

What kind of navigation system would you employ?



This lecture's key point(s):


Courseware | Lecture notes

©Copyright Alan Dorin 2009