[ home ]

Hypertext navigation patterns


Screen grab of the first slide in the powerPoint with edge navigation

Before you read any further, try this.

You should have a kind of star pattern, the home slide links to six other slides (the ones with the 'home' icon on them) and each of these links to 8 other slides. 48 + 6 plus 1 makes 55 slides in all.

Web sites and other hypertext documents have a link structure of some kind. I think I can define five unique structures (possibly 6)

  1. Linear
  2. Tree
  3. Spoke and hub
  4. Rose
  5. Web with meaning based links
  6. Spreadsheet with 'pages' connected in a grid. Not sure if this would be a good page linking structure.

Linear linking

Linear link diagram showing a string of slides, each with a link to its two neighbours

Often compared to pages in a book. You start reading at page 1 and you read until page 1144. At least you might if the book is a novel or another kind of continuous narrative.

The point is that a Web site or PowerPoint that really followed a linear structure would be very constraining for the reader. Real books allow 'random' access, I often pick a chapter in the middle and just start reading a few pages to see how the author's story telling is conveyed. Most academic texts and textbooks have additional navigation aids such as analytical contents, indexes, boxed detail, footnotes, references, lists of tables and illustrations, tabbed pages and so on. Unless you provide these alternative structures, your Web site readers will be trapped.

To add an extra page to the middle of a linear sequence involves re-making two links.

Simple additional navigational aids could be a link to the contents or starting page on each page, and also a keyword search (Google can provide a customised search for any public Web site).

Tree

Tree linking diagram showing the root at the top with a series of links to pages lower in the tree - computational trees are upside down

Trees grow upside down in the computer world. The 'root' is at the top and the branches and leaves grow downwards. The files and folders on the hard drive of your computer follow a tree structure. Suppose you look at a branch some way down. The reader can only follow links to the page 'above' the current page, or pages that 'grow' from the current page. The reader can't see the pages at the same level as the current page. You need to consider the 'breadth' and 'depth' of your tree. Negotiating a structure that has two branches per page and reaches 10 levels of depth is much harder work than a tree with 8 branches per page and 3 or 4 levels deep.

Most computer operating systems have a 'shortcut' or 'symbolic link' or 'alias' to allow a file in one folder to appear to be in another folder at the same or different level. Hyperlinks can do the same thing of course, but the danger is that following a hyperlink to (say) a related page with a different parent branch means that your context has changed completely. As Kolb says, trees need to be kept pruned.

The great advantage of the tree structure is the ease of adding new content. A new page can be located in the tree structure by making one link. Wrap around 'home' links and search can be used to help flatten the tree.

Spoke and Hub

Spoke and hub is like a truncated tree with only one level. Easy for small sites. Can also be used within the other structures

The spoke and hub is really a tree with just one level. This pattern is often used with small Web sites and is effective and easy to understand. In order to move from one content page to another, the reader has to return to the 'home' page. The 'home' page often has a navigation list of all pages. This new Bodmas site has a spoke and hub structure, but with flattening provided by the search function. Adding a new page requires only one new link to be made. Bodmas will have a very wide tree, as the tree is only one level deep.

Rose

Rose is a development of the spoke and hub with cross links. This structure is often used for small web sites

The mystic rose is a development of the spoke and hub with cross links between the content pages. This structure is common for small sites, you will see the same navigation menu at the top or side of the page, with the currently viewed page unlinked but still in the list. This structure helps for the readers who find your pages using a search engine. Most people use search engines as a kind of graphical front end to the Web anyway.

Adding a new page to the rose is time consuming, you need to remake n(n-1)/2 links, so when the number of pages n becomes large, you have a lot of work to do. Best left for scripted solutions.

Web

The meaning driven web structure was very popular in the early days of the Web but is less common now. The number of links to and from pages depends on the content of the pages. Terms that need definition or that relate closely to the topic of another page are linked. Wikis follow this linking structure.

Web structures depend on the meaning of the information being presented. Typically, there is a start page, with some top level information, and a series of inline hyperlinks to other pages that expand on the information given. Glossaries and references are the most obvious kinds of link. David Kolb's essay about the parallel production of a hypertext and a book is a really good example of a Web - but notice how there is also a tree with a navigation menu!

Maintenance cost is high as a knowledge domain expert is needed to add new content as well as write the content in the first place.

Moral

Plan your hypertext or plan to fail. Especially if you are producing a Skinner teaching machine in electronic form.


Keith Burnett, Last update: Sun Aug 28 2011