Go to previous pageGo to next page

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 TreeTop-Down Hierarchical Tree Ordered cycle (going back is not allowed)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 TreeRadial 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 termfile-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 LessonsHierarchic 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 PageOld 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 CompanyHyperbolic browser of the Inxight Company (Inxight)
act

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 TreeJIT Hyperbolic Tree (Belmonte) JIT Radial GraphJIT 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.

NetworkNetwork Cycle in a networkCycle 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 EngineMapStan Search Engine (MapStan Search) Street representing the relationship between the sites that it joinsStreet representing the relationship between the sites that it joins (MapStan Search)
act

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?



Go to previous page
Go to next page