1.3.2. Thematic Navigation for Web Pages
Thematic navigation is the most important navigation type for Internet
applications and has become a must-have for web pages.
As we already
told you, sequential navigation is hardly used anymore for web pages. Therefore,
we want to deepen the non-sequential navigation structure.
The non-sequential structure can be subdivided into two subgroups. Basically, one can distinguish between:
- Hierarchic Structure
- Network Structure
Hierarchic Navigation Structure
"Hierarchic tree structures are collections of
items, in which each item (except the root) has a link to one parent item." (Plaisant 2005)
According to (2005) we distinguish between two hierarchical trees:
- Top-Down Hierarchical
Tree
The main topics are at the top, and other topics below. There is a single direction to browse through the tree (top-down). The main feature for this form of structure is that either the graph has no cycles, or that nodes participating in cycles are ordered (Rodgers 2005). The right image below shows such an ordered cycle. Important is, that it is NOT possible to reach node 3 by starting at 1 and passing the nodes 2 and 4. We only reach node 3 from node 1.
Top-Down Hierarchical Tree | Ordered cycle (going back is not allowed) |
- Radial Hierarchical Tree
The tree is rooted at the focus node (center of interest/focus of attention) and the other nodes are layed around this node. Lines are drawn to show the parent-child relationships between the nodes. (Yee et al. 2001)
In contrast to the top-down hierarchical tree, you are able to jump directly from one child node to another child node without passing the focus node. You will see that in the example we show you below.
Radial Hierarchical Tree
Hierarchic thematic navigation is often visualised using interactive trees where one interactively opens and collapses sub-hierarchies.
Examples of Top-Down Hierarchical
Trees
A typical example for a hierarchical
top-down tree structure is the file-browser (Neumann 2005).
The navigation of the Cartouche e-learning lessons have the same hierarchy as the mentioned file-browser. The navigation on the left, which you can explore by your own, allows you to open and collapse sub-hierarchies (in our case the different units with their learning objects). |
Hierarchic Navigation of Cartouche Lessons (Cartouche) |
Another example that features a hierarchic navigation was the old Cartouche Web Page. When moving the mouse cursor over the thematic topics, the sub themes (if there are some) appeared.
Old Cartouche Web Page (Cartouche)We will not list more applications with hierarchical top-down tree structure, because the Internet is full of them. This method is often used, because persons who work with the computer are already used to this method since they all use the standard file-browser which has the same hierarchic structure.
Example of Radial Hierarchical Tree
An example of a radial hierarchic tree is the hyperbolic browser developed and propagated by the company Inxight (Neumann 2005). The software enables you to link files, documents and Web pages. It provides a visual context for information, showing at-a-glance hierarchical relationships (Inxight). Within the tree, items can be interactively moved to the center of the visualisation. Objects farther away from the visualisation center are perspectively scaled down and later hidden (Neumann 2005). |
Hyperbolic browser of the Inxight Company (Inxight) |
There are a few examples on the JIT Blog which
demonstrate the use of a hierarchical radial tree. Explore one of the following
examples by clicking on the thumbnails:
JIT Hyperbolic Tree (Belmonte) | JIT Radial Graph (Belmonte) |
Network
When relationships among items cannot be captured conveniently with a regular tree structure, items are linked to an arbitrary number of other items in a network. Network visualisation is an old but still imperfect art because of the complexity of relationships (Plaisant 2005). In contrast to hierarchic trees networks have cycles. These cycles are not ordered as in the hierarchical tree. The right image below shows such a cycle. You can reach node 3 either from node 1 OR node 4.
Network | Cycle in a network |
The search engine MapStan visualises the search results in an interactive network. As soon as you launch a search, the search engine analyses your request, questions the search engine Google, selects the best sites and places them on a map." MapStan Search displays your search results on a "district map" where the pages are grouped by site. Squares represent sites and are linked by streets that indicate their similarity. When several sites are always linked in the same searches, they are grouped within a single square. In this way, you get a visual synthesis of your results and of the proximity between pages. " (MapStan Search)
MapStan Search Engine (MapStan Search) | Street representing the relationship between the sites that it joins (MapStan Search) |
Explore the Relation Browser made by (2006). Click on the different countries and note how the visualisation of the relations changes.
Exercise
Study the navigation structure of five of your most preferred web pages that you visit very often. Define the structure of their thematic navigation and give reasons about your decision. Put the links to these sites and your results on the discussion board "Navigation Structure". Pick five of the web pages that your colleagues put on the discussion board (mustn't be the same as your web pages) and study their navigation structure. Comment on five entries of your colleagues. Do you agree with the result of your colleague or do you have another opinion of the web page's navigation structure?