Navigation Structures

Navigation is one of the most critical aspects of website design. Getting around an educational website should be easy. The challenge is to make your site as easily learned as possible, but not easier than that. This doesn't mean dumbing down content, just anticipating problems and providing them beforehand. A variety of navigational aids and web elements should help students find what they are looking for and get there quickly.

The purpose of all navigational strategy is to guide your students seamlessly through your website and thereby structuring their learning experiences. Offering a multifaceted navigation design will enhance the usability and usefulness of your site. A clear and clever organization of information provides a clear overall picture of the website as a whole, and the at-the-moment location. Don't leave students stranded with dead ends and circular directions. Offer clear ways to navigate between website levels. The designer's job is to structure the learning experience by constructing a navigational structure that follows and reveals the structure of the presented information

The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy. Reading a book is essentially a linear process. You start at the beginning and read to the end. Some books are designed to be dipped into at will. You don't have to read the whole thing, but the bits that you do read, are read in a linear fashion.

Evolution of Web site Architecture "Web site architecture is proceeding along an evolutionary path. In the pregraphical gopher era we began with the simple hierarchy. It worked well, but people wanted more flexibility. In the early Web era, we added hypertext and saw the use of navigation bars to cut across hierarchies. Search engines were employed to provide even more direct access to information. Then came the Mozilla era and the transition from hierarchies to hysteria which brought with it blinking buttons, faulty frames, and bizarre backgrounds. We are now entering the era of furious knife wielding. Users want their information now, and terrified Web masters and mistresses are pulling out every tool in their kit to satisfy the navigational needs of these angry customers" [Peter Morville, Mapping Your Site, 27.9.98].

With the advent of interactive hypertext, you can be reading a line of text on one page, and with the click of a button, be transferred to a cross referred line of text on a site on the other side of the world. Hypertext writers and researchers used to be concerned that hypertexts would enmesh readers in a confusing tangle of links. They call it the 'Navigation Problem'. To solve this problem many roads were travelled:

• keeping links simple;
• using fewer links;
• organising the links very rigidly (hierarchically);
• providing many navigational tools (navigation bars and menus everywhere).

In the early days of the internet many sites were confusing and frustrating to use. Therefore web designers adopted some rigid tools and rules. They told us that we had to organise our sites hierarchically, provide navigation bars and menus everywhere, provide identical choices on each page, and avoid complex link patterns (such as a combination of hierarchical, sequential - or lateral - and transversal links).

The highest virtue of web design was 'a consistent navigational apparatus'. Every page needs its top-banner, its side-menu, its bottom menu-strip, and every part of a subsite offers identical navigational choices.

"The structural rigidity that makes navigation simple and ubiquitous, though it gives a hypertext the appearance of efficiency, can make that hypertext seem sterile, inert, and distant" [Bernstein 1988].

A rigid web design seems very efficient and cost-effective, particularly for large web sites. However, as Bernstein says, excessive rigidity can be costly. The most important cost is that you can lose the attention of the visitors. The repeated appearance of navigation centres (such as the home page and other navigational landmarks) can send the wrong message.

"Each time readers finish an article, the navigational apparatus returns them to a central page. Revisiting a landmark always suggests closure, prematurely inviting the reader to leave the hypertext and do something else" [Bernstein].

But the development of the Web has increased in the last years and readers nowadays are more experienced reading actual hypertext. It might well be that the Navigation Problem is less forbidding than it had seemed. Readers/learners weren't getting lost in cyberspace. Occasional disorientation is common in all kinds of serious writing, reading and learning. Disorientation does not only have negative effects upon learning.

"Disorientation, even though it has been found that it reduces motivation, may be an important aspect of learning. Reflective learning theory does for example emphasise the importance of disorientation and suggests that it is a natural and 'healthy' aspect of learning" [Marsli 1999].

Bernstein argues against rigid designers who consider irregularity a mistake to be corrected.

"Each place should behave exactly as expected, each path should be clearly marked, and a few familiar paths should suffice for all."

Bernstein emphasises the virtue of irregularity.

"Today's Web designers are taught to avoid irregularity, but in a hypertext, as in a garden, it is the artful combination of regularity and irregularity that awakens interest and maintains attention."

In 'Seven Lessons from Gardening' he explains how we can offer the promise of the unexpected without the threat of the wilderness.

Good navigation is mostly a matter of common sense. Yet, although it varies somewhat for different types of sites, there is at least one basic principle that applies to almost all sites, or at least almost all educational sites: well-designed web sites tend to have similar navigational layouts. Good navigation starts with the very first page that students see.

How should hypermedia documents be structured and what navigation mechanisms should be provided such that students can orient themselves in large information spaces?

A menu or image map, a site map, arrow and buttons can all work together to provide direction to its visitors. Website components provide a rich mixture of content and navigation mechanisms. There are different types of navigation mechanisms that have to be identified. So we are looking for a usable classification of navigation tools for hypertext documents. Most classifications are too coarse. Many authors operate with this triple taxonomy: (a) graphical mechanism, (b) spatial mechanism, (c) textual mechanism [see for instance: Memex and Beyond].

For our purposes the existing taxonomies need further refinement. We are suggesting a more elaborate classification of navigation tools into seven categories. These seven categories can serve as design principles for designing usable hypermedia documents.

1. Linking
   The linking structure is the most distinguishing feature of a hypertext document. Links allow direct access to a designated location within the information space through markers that are embedded into the documents. We distinguish between straightforward "static" links, and context specific, automatically generated "dynamic" links. All links within your site should provide clues to content, or be accompanied by descriptions. There are several link types and attempts to classify them.
   
   
2. Searching
   Providing searching capabilities is an obvious means for locating information. In hypertext documents, this is mostly done using full-text search, although there are also systems that provide additional databases for searching.
   
   
3. Sequentialization
   The complexity of the n-dimensional hypertext document can be reduced to one dimension by offering first-time users a sequential path or guided tour through the hyperdocument. Guided tours or paths offer a simple mechanism for quickly providing an overview of a hypermedia document to a first-time reader. These tools hide the complexity of hypertext by constraining the user to a sequential path.
   
   
4. Hierarchy
   A hierarchical document structure is very well understood by humans. There are some special tools that compute a hierarchical map from already existing documents. The hierarchical information structure is then made obvious to the users and put at their disposal as principal navigation aid. There are five ways to lay out trees: "graph tree", "indentation", "nested set notation", "tree-map" and "multitrees" [Knuth 1973, Gloor 1997]. These visualisations of trees will be discussed more in detail.
   
   
5. Similarity
   Similarity links connect nodes that have similar contents, but might not yet be linked. An index is a very simple means to discover similarities between different nodes, because pages that have common index entries might exhibit some sort of similarity. One of the main problems of this approach is that the measure of similarity (or proximity, alikeness, affinity, association) needs to be defined.
   
   
6. Mapping
   

   Geographical maps are a well-know means for orientation in the local or physical world. Their purpose is at least threefold: (1) they show readers where they are, (2) they show readers where they can go from here, and (3) they give readers an overview over their environment. Overview maps of hyperdocuments serve exactly the same purpose. They try to impart the document structure in graphical form to the user. A straightforward application of this idea can be seen on the site of the travel information system Excite Travel, and on the clickable map of social science data archives in Europe of the CESSDA. For general use, i.e. for non-geographical applications, it is much harder to find a suitable graphical representation for the overview map. Usually, concepts, topics or subjects are graphically linked by relations to give readers an idea of the content of the document.

   Mapping is a technology to structure, visualize, and manage webs of information. Similar to real maps, graphical maps show readers where they are, where they can go from here, and give them an overview of their local and global context. They are thus one of the most flexible, versatile, and user friendly means for navigation in cyberspace. Mapping is orthogonal to the previous concepts, in that maps can be used to visualise links, search results, sequential paths, hierarchies, and similarities.
   
   
7. Agents
   The concept of the intelligent agent is a very popular one not only for navigation. The agent metaphor is well understood by humans, because agents simulate human assistants. The systems in this category incorporate artificial intelligence-based techniques derived from the metaphor of agents assisting human readers in their complex orientation tasks. The agents are implemented in different ways ranging from simple, hardwired guides to rule-based agents that are able to react more flexibly to different needs of different users. Agents can use any of the previously discussed six concepts to assist users in their navigation task: agent based concepts can be used to assist the reader in following links, conducting searches, construct sequential paths, navigate in hierarchies and recognise similarities.

Linking: Types of Links

There have been many attempts to classify links. Designers of hypermedia documents need to decide about the main linking structure of their documents as well as about what additional linking facilities to supply to the user. To limit cognitive overload, it can be helpful to only provide a subset of different link types. The following link classification closely fits the first 4 concepts for navigation in cyberspace.

1. Page Links - Sequentialization
   Page links rebuild the original ordering sequence of the nodes and thus reflect the primary sequential reading order as intended by the hypermedia author. They connect a particular page with its predecessor and successor and thus recreate a locally sequential context for the node.
   
   
2. Hierarchical Links
   Hierarchical links reflect the logical ordering between the original sections of the document. As most of the documents are inherently hierarchically structured, hierarchical links are the most powerful means for achieving easily navigable and user friendly hyperdocuments.
   
   
3. Similarity Links
   Similarity links connect nodes that have similar contents, but are not yet connected by page or hierarchical links.
   
   
4. Search Links
   Search links are generated automatically in answer to a query that was made by the retrieval system.
   
   
5. Reference Links
   Reference links are embedded into the original text and refer to other nodes or text passages within the original text, 'see section 9', or [Anderson 1999]. Reference links are therefore a special case of similarity links.

Navigation Structures

Well-built educational sites tend to have a complex navigational structure. This is not only due to the complexity of the subject matter of the course itself, but also to the multi-functionality of the communicative and collaborative facilities that are built into online learning environments (see the implementation of these functionalities in BlackBoard). In general, educational sites can be structured in the following ways:

Linear

Students navigate sequentially from one page or frame to another. Many students like this sort of straight-line exploration because they have spent years reading books. Today this might be a a good reason to use a simple linear navigation structure. However, it is a rather lazy and non-creative use of the hypertextual repertoire that is available to present educational content on the Internet. And we can be sure that in the years to come many students will no longer be familiar with the "monk" practice of reading a book page after page.



Hierarchical

Students navigate along branches of a tree structure ('hypertree') that is shaped by the natural logic of the content of the course. Hypertrees are easily understood. Hierarchies are an archetypical organisation form of information (the archetype is embedded in the universal fact that all human beings step into this life as little children).



Non-linear

Students navigate freely through the content of the course. This might occasionally generate some disorientation, but as we've said before, occasional disorientation is common in all kinds of serious learning. Just like finding your way in a new city always brings you to a point where you don't know how to proceed (or how to get back to the point of departure). Disorientation is a natural and positive aspect of reflective learning processes.



Composite

Students may navigate freely (non-linearly) but are occasionally constrained to linear or hierarchical presentations. The secret of the structuring of the learning experience lies in a skilful combination of linear, hierarchical and non-linear navigation structures. It is always the balance between regularity and irregularity that arouses interest and keeps the attention of students. A composite navigation structure can help to determine the boundaries in which learning behaviour can vary, and within these boundaries the chance that specific learning trajectories are actually followed.

Visualisation of Hypertrees (hierarchies)

1. Graph Tree
   One of the standard graphical notations for displaying trees is the graph tree. Although this is a very popular and flexible way of representing hierarchical structures, it has its limits. As soon as the number of nodes and hierarchy levels becomes too large, this representation gets too tangled and messed up.

   
   Figure 2: Graph Tree

2. Indentation
   Figure 3 displays the same graph in the indentation view. This eliminates the need for explicit tree arcs, and it also provides a clearer distinction between the hierarchical and the arbitrary graph structure. However, the indentation view suggests a sequential ordering of the children of each node [example]

   
   Figure 3: Indentation View

3. Nested Set Notation
   The nested set notation expresses the tree structure through spatial containment by nesting each node within its parent node. This representation is superior to the two aforementioned approaches for the purpose of editing the tree structure. This method offers the best visually distinct technique for showing hierarchy and graph structure. Also the only restriction for a node's placement is the arrangement within its parent's boundaries.

   
   Figure 4: Nested Set Graph Notation

   To improve the representation of information by information hiding, we can employ three techniques:

   • Subtree Detail Suppression
     It is possible to represent selected subsections only by their bounding box. In figure 4 section "F" could be represented only by the box without showing the two nodes contained within.
   • Subtree Display Selection
     The user can walk up or down in the tree hierarchy and fill each subsection with as much enclosed information as desired.
   • Link Inheritance
     Link inheritance is the suppression of links that have no importance in a local context. It allows one to show only links connecting nodes with the same ancestor. For example, assuming that the user is focusing on section "D" in figure 4, the link between the left node in "C" and the one node in "E" would be suppressed.
     
     
4. Tree-Maps
   Tree-Maps represent a way for the space-efficient representation of hierarchical information [Johnson/Shneiderman 1991]. Tree-Maps therefore are especially well suited for the representation of very large tree-hierarchies [example]. A tree-map drawing encompasses the following properties:
   • If node_1 is an ancestor of node_2, then the bounding box of node_1 completely encloses, or is equal to, the bounding box of node_2.
   • The bounding boxes of two nodes intersect only if one node is the ancestor of the other.
   • Nodes occupy a display area strictly proportional to their weight.
   • The weight of a node is greater than or equal to the sum of the weights of its children.

   
   Figure 5: Tree-Maps

   Tree-Maps are especially useful for giving a quick overview if the hierarchy is very large and contains thousands of nodes. In particular, they allow the easy transmission of an additional dimension to the user by varying the node size depending on the weight. By using meaningful colour coding, even a third dimension can be added to the tree-map display.

   Tree-Maps offer an unorthodox approach to the information exploration problem for hierarchically structured data. By compression the whole structure on a computer screen, the user gets direct navigational clues and the problem of being lost in cyberspace/hyperspace is therefore being tackled from another side. The addition of zooming features to a one-level tree-map allows the user to go into arbitrary levels of detail. Tree-Maps thus offer a powerful and efficient way of representing hierarchical structures.

5. Multitree
   Multitrees are directed acyclic graphs (DAGs) that have large, identifiable substructures that are trees. In a multitree the descendants of any node form a tree. Multitrees can be perceived as unions of trees that share subtrees. Examples of a multitree you will find in genealogies ('family trees'). Multitrees offer a natural notion of context (displaying ancestors) and content (displaying descendants), and are therefore very well suited for reusing hierarchical structure.

   
   Figure 6: Multitree

Site Mapping

One of the navigational tools is the site map. A site map is a graphical representation of the architecture of the web site and it is used to complement the existing navigation system. People have used maps to navigate their way across oceans, through cities, and around shopping malls for millennia. Therefore it seems natural to use maps to navigate our way in web sites.

Maps of the physical world do not present the exact geography of an area. Accuracy and scale are sacrificed for representative contextual clues that help us find our way through the maze of highways and byways to our destination. Often, the higher the level of abstraction, the more intuitive the map.

Textual tables of content are the best tools for showing the actual geography of a web site. Graphical sitemaps are best used for conveying the higher level conceptual organisation of information. They can be useful for driving home metaphors and inviting users to think about information from a different perspective. Many university sites use the organising metaphor of a virtual campus.

Intuitive navigation is the ideal method for visitors to explore a web site. Sites which are well-structured, organised logically, and which provide clues and bread crumbs (those little helpful 'you are here' indicators and buttons which guide visitors through the website), are likely to be considered speedy and easy to use.

Providing several different navigation methods can contribute to intuitive navigation. The links have to be well-defined and clearly indicated as links. Sub-menus can help direct visitors quickly. And don't forget a site search feature and a site map or directory listing of pages.

Intuitive navigation is facilitated when you treat the top screen of the homepage as a top-level navigation hierarchy area (abbreviated site-map). People immediately see the whole structure, and can jump to the section they are interested in.

Navigation is a good area for the effective use of colour or background to provide visual differentiation between section of the website.

Do not leave navigation to chance. Test the website by watching others navigate. The navigation strategy may seem obvious to you, but your students may not grasp your concept.

dr. Albert Benschop Sociale en Gedragswetenschappen Sociologie & Antropologie Universiteit van Amsterdam Gepubliceerd: November, 2000 Laatst gewijzigd: 27 December, 2005