Navigation Systems

A website navigation system refers to the overall structure used for navigation such as a linear, hierarchical or global structure. There are a range of navigation systems that can be employed on a website. Each has its own advantages and disadvantages.

Linear navigation

Linear navigation refers to a navigation system where the web pages are accessed in a sequential manner.

"A linear structure is suitable for a site that contains information that is best viewed like a book, one page after another. An example might be a site that contains a PowerPoint presentation. The logical way to view the presentation is to start at the beginning and go page by page to the end." (Excerpt from the Toolbox for Certificate IV in Web design.)

The graphic below illustrates this type of navigation

A variation on this theme is linear with side branches. For example if you want to provide more information about a particular topic, but don't want to force the user to read it, you could put the extra material on a side-path. This allows the user to follow the path or not as they choose. This is illustrated below.

Hierarchical Navigation

A hierarchical system allows a user to navigate up and down the information hierarchy from the home page to the main categories provided on the home page. Moving between categories requires the user to return to the home page and navigate down another branch. This navigation system is reasonably intuitive and easy to use - providing there is a link to the home page from all other pages. It does not however offer users much choice - it is not a very flexible system.

Global Navigation

Global navigation describes a global or site wide navigation system, that allows users to navigate vertically or laterally through the system. This is the most complex navigation system but also the most flexible.

One example of this system is a site that provides navigation to the main areas of the site on each of the web pages regardless of where in the hierarchy the page is located. This is illustrated below:

A more complex version of this, is to provide the main global navigation structure plus a "local navigation" structure in a section of the website which is connected but distinct from the main website. For example the illustration below shows the two navigation systems used in this toolbox. The top-level navigation uses the cascading menu and the resource pack uses a tree menu. Using a different navigation system for the resource pack provides a visual cue to the fact that the user is in a different part of the site.

Navigation elements

Navigation elements refers to the web page elements (such as buttons, hyperlinks etc) used to move from one part of the website to another. Navigation elements fall into two basic categories:

• Hyperlinks
• Menus

Hyperlinks

Hyperlinks provide the most basic navigational elements. A hyperlink can be a segment of text or a graphic which when "clicked" moves to another location within the website. They can be text or graphic links. The example below shows text hyperlinks.

Hyperlinks are commonly used to provide flexible, contextual navigation. An interesting use of hyperlinks is illustrated in the example below, which uses the visual metaphor of a laboratory environment. The main navigational areas are represented by the visual metaphor of a doorway - the doorways lead to different types of resource. For example:

• The resources and training room provides navigation to training resources
• The laboratory supervisor's room takes you to the assessment area
• The senior technician's room provides access to forms and manuals

The example is from a web page in the Flexible Learning Toolbox for the Diploma of Laboratory Technology.

Hyperlinks can be used to advantage to expand on a concept, allow the user choice about how they access information or to provide alternatives to more complex scripted menus. The disadvantage of hyperlinks is that the navigation can sometimes become confusing when users lose track of where in the website they are located.

Menus

Menus are groupings of navigational elements, such as buttons, which may simply be hyperlinks or more complex scripted elements. There are different types of menus, each with advantages and disadvantages. Examples include:

• Hyperlink menus
• Tree menus
• Drop down menus
• Cascading menus

Hyperlink menus

A simple menu system can be created by grouping a number of hyperlinks. An example is provided below.

Hyperlink menus can be either text or graphics (buttons). These systems are easy to implement and used for simple websites. In more complex sites, the number of links or buttons may become confusing and clutter screens.

Tree menus

A tree menu is a menu that lists the web pages as a hierarchical structure. This resource pack uses a tree menu - see the graphic below.

A tree menu is commonly used as a table of contents. The advantage of a tree menu is that it displays the structure of the website and where the user is currently located within the site. The disadvantage is that it takes a reasonable amount of space on the screen. Tree menus don't rely on frames but they are often implemented within a frame structure.

Drop down menus

With a drop down menu, the user is provided with a menu bar displaying a number of options. When one of the menu items containing a submenu is clicked, a drop down menu (submenu) is displayed.

Drop down menus provide a common technique for navigation where the range of options is relatively large. The disadvantage is that you only navigate one level at a time.

A pop-up menu is similar to the drop down menu, but is more often used as a context specific menu.

Cascading menus

A variation on the drop down menu is the cascading menu. Cascading menus open into a number of sub-menus, allowing users to navigate more than one level deep using the same menu system.

This type of menu system is most appropriate where the site is complex and there are many levels in the site hierarchy. One of the disadvantages is that it is more difficult to implement with frames (although it can be done) and it takes up more screen real estate when the menu is open.

^ top