CSE3325: Organization and 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're 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.

Chapter 2
The Day of the Wind

Blah, blah, blah and it was very windy and blah, blah, blah. So Mary and I went for a walk. Blah, blah oh how the trees swayed, creaked and groaned as their leaves were whipped into a frenzy.

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?

Types of Navigation System

Hierarchical Navigation Systems

The information hierarchy (see the previous lecture) 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

This allows the user to move 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 nav. bar

home | contact details | purchase | about us

Image map nav. bar


nav bar

Tabulated image nav. bar

about us

What are the drawbacks of this navigation bar?

about us

What are the advantages of this one?

about us


contact us



In this new light how do the navigation bars used in the examples of the previous lecture rate?

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

Polygon representation
Coordinate systems
Pixel-level processes

  • Chapter 2 - Theory and Practice of Lighting

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.


  • Coordinate Systems


  • Potatoes


  • Reflection

Introduction to

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):

CSE3325 courseware | CSE3325 lecture notes

©Copyright Alan Dorin 2005