Types of Navigation – Organization is Key
There are three basic types of navigation: hierarchical, site wide, and locally determined. Each of these types of navigation can be represented in a tree structure (see figures). The navigation trees can be traversed vertically or horizontally by following the links (lines) between the elements. In an earlier post, I offered Tips for Simple Navigation. Here I'll describe the three types of navigation. Note on the figures: If no connection exists between two elements, a direct link is not available between those elements in that navigation structure. Hierarchical Navigation [caption id="attachment_521" align="alignright" width="300" caption="Hierarchical Navigation Tree "][/caption] Hierarchical navigation is based on a strong organizational structure that forces a choice between elements at each level of the tree. In a hierarchical system, it is only possible to traverse the tree vertically as there are no direct links between elements that reside on the same level. For example, in our figure, it is not possible to move from one product element directly to another product element. In order to move between product elements, you would need to return to the category (or even the home, in some cases) element and then move to the desired product element. Hierarchical systems are excellent for large sites that contain vast quantities of detailed information that need to be sifted through to find specific information. They make traversing the tree easy and intuitive by successively narrowing down the relevant choices as the user moves down the tree. Think about storing papers in increasingly specific sub folders within file folders – this is hierarchical organization. However, pure hierarchical systems break down in real-life situations where a person would like to traverse horizontally as well – from one category element to another or one product element to another without retracing steps. Site Wide Navigation [caption id="attachment_531" align="alignright" width="300" caption="Site Wide Navigation"][/caption] Site wide navigation is based on an organizational structure that places primary emphasis on interconnecting most, if not all, elements in a site. The goal with site wide navigation is to remove any unnecessary traversing of the tree when looking for a specific element – to reduce the number of clicks to find a particular element. Think about the papers sitting in a stack on your desk, unfiled and all within easy reach, regardless of their categorization – this is similar to the site wide organizational structure. The most extreme example of a piece of site wide navigation is the sitemap page that many sites have. Imagine the sitemap page as the homepage of a website; you have easy access to every single page on a website – in just one click! So, why don’t all sites employ this tactic on their homepage? Site wide navigational systems are very good at reducing the number of clicks that it takes to reach the desired element, but run into problems when people are unable (or unwilling to spend the necessary time) to find the particular link they are looking for. Confusion can easily be the result of a pure site wide navigational system. Offering too many choices in one place makes the decision much harder to make. [Take a look at Barry Schwartz’s “Paradox of Choice” talk for a more in-depth look at the fascinating subject of complex decision making.] Local Navigation / Locally Determined Navigation (recommended) [caption id="attachment_525" align="alignright" width="300" caption="Local Navigation"][/caption] Local navigation is a combination of hierarchical and site wide structures applied on a case by case basis at the local level. This navigational system uses the strong points of both previous navigation types, while eliminating many of the problems that can be associated with using a ‘pure’ hierarchical or site wide system. Going back to our desk analogy - think about your desk with those unfiled commonly used papers on the desk and the filing cabinet next to it filled with categorized files - combining your different organizational schemes acts just like localy determined navigation. For a web example, a site that has a store, a forum, and a blog probably doesn’t want or need direct links between particular forum posts and individual products in most cases, but might want to connect specific elements that contain relevant information. Separate and unique navigational structures would exist within the store, forum, and blog sections of the site based upon what navigational system would work best in each specific situation. A well designed local navigation system builds flexibility into the navigational system that allows people to intuitively traverse the tree while avoiding any extraneous or confusing links. As with most things, with navigation, moderation is key.