Navigation components

From Knowledge Kitchen
Jump to navigation Jump to search


Here are a few of the most common architectural navigation concepts and elements at your disposal:

Hierarchical Classification

This is a general term that refers to the hierarchical categorization of information. Most systems with a lot of content categorize information in this way. Thus, it is often necessary to design ways that people (or robotic systems) can navigate through the layers of information by "drilling-down" into categories and subcategories until the desired content is found.

A phylogeny of biological species - a classic example of a hierarchical classification system

With this system of classification, any given content item usually has only one parent. For web or mobile applications, this relationship of parent to child categories of contetn is often conveyed in a simplified view by a site map.

Generic site map hierarchy

Message boards and comment boards often have a hierarchical relationship between posts known as message threading. Threads are most often displayed visually using a tree structure, which clearly shows the hierarchical structure of the message board using indents to indicate the relationship of any message to its parent. For example:

Generic message board hierarchy

Faceted Classification

Unlike in a Hierarchical Classification, a Faceted Classification allows the same information to be organized, and thereby discovered, along multiple dimensions, like a diamond that has been cut to have many faces.

For example, on a blog, users may be able to browse posts by author, by date, or by category – these would all be different facets of the same information. As another example, it may be that users buying flowers online want to browse by a variety of classifications, such as by “Occasion”, “Color”, or “Price”. With Faceted Classification, any flower may be listed under any or all of these classifications. These facets are not related to each other in a clear hierarchy – they are all independent axes along which flowers can be browsed.

One bouquet of flowers could, of course match each of these facets

Folksonomy

Similar to Faceted Classification is the concept of a Folksonomy (or Tagsonomy). Tags are arbitrary keywords that users of many social networking sites attach as labels onto any piece of content. Folksonomies, in their purest state, are entirely user-generated, meaning that there is no top-down control or limit to the number or variety of tags that can be used. As a result, tags are often inconsistently applied, misspelled, redundant, and generally of little practical use for large sets of data unless there is some sort of control over the vocabulary to make it more consistent.

Poor organization of content is the natural result of open vocabularies

For example, twitter users can tag any post with arbitrary keywords of their choice. There is no fixed vocabulary or spell-checking to make the application seem under users' control.

Classic example of folksonomy tagging

Global Navigation

These are links that are available on all pages of a site that point to the top level categories of a hierarchical navigation structure. They are often displayed in the interface as Tabs at the top of the page, or as a series of links on the left navigation section of the page. For example, see the links at the very top of all pages on http://netflix.com

Generic primary navigation menu

Secondary Navigation (or Local Navigation)

These are generally links to a subcategory of a hierarchical navigation structure. They usually appear horizontally at the top, underneath the Global Navigation, as a drop-down menu that appears when a user mouses over a Global Navigation item, or vertically on along the left side of the page.

Secondary navigation drop-down menu

Nth-Level Navigation

In the New York Times World section example above, you can actually see a third level of navigation as a third row of tabs underneath the second tier. Users have come to expect categories and subcategories of content, but due to the limited amount of space and navigation tools available in a web browser, sites have difficulty displaying three or more levels of classification.

The Mac Finder offers an interesting solution to the problem of displaying many levels of hierarchy, although this is not common on the web:

One company's solution to the Nth-level navigation problem, easily viewing 6 or more levels deep

Breadcrumbs

Breadcrumbs are links that are used to show your position in a hierarchy of information, and allow users to navigate linearly back up the hierarchy. They usually appear horizontally, towards the top of a page.

For example, in the following example, you see a Breadcrumb clearly indicating where this content fits into the overall hierarchical classification system of the hierarchy of content in which it resides.

Generic breadcrumb example

Home Button

Almost all sites have a button on all pages that takes the user directly to the Home page, no matter where they are currently in the hierarchy of content on the site. Very often, the Site Logo, which is almost always found at the top left of the page, also doubles as a link to the Home page.

One of the last remaining Home buttons

Search

You may not immediately think of Search as being a navigation element, but it most certainly is. Search functionality allows users to jump directly to content that may be buried deeply in the information hierarchy of a site. Search is most commonly positioned as a text input box somewhere on the top of the page, as in the Amazon.com example below, although it does appear sometimes in the left navigation area, as is the case on Wikipedia. Where it appears is, of course, related to its importance in the application.

Amazon.com search bar
Wikipedia.org search box

Advanced Search

Faceted navigation often rears its head most clearly in advanced search or filtering applications, where users can select multiple facets at once. Sites offering such "advanced" search usually use it as a tool for browsing through a Faceted Classification system. Using Facets is a relatively obvious way for users to narrow search results.

This search form allows the user to select facets of the content they want to discover

URLs

Yes, you can think of the URL of your pages as being navigation elements. Short, cleanly formatted URLs are easy to remember, and often show clearly how the content on the current page fits into the hierarchy of the content of a site, making it easy for users to understand where they are on your site. For example, compare the following URLs:

For some reason, traditionally bureaucratic companies tend to have the worst URLs.

An example of a URL that is absolutely useless as navigation. Did they really need to inform us that the content was external not internal?!

A slightly better example:

An example of a URL with an informative and obvious easy-to-follow hierarchical structure

Text Hyperlinks

Navigation using text hyperlinks allow for arbitrary navigation from one part of your site to another. While it’s a good practice to use Global Navigation, Secondary Navigation, URL formatting, and the various other elements we’ve mentioned, sometimes the type of navigation an information architect needs to achieve doesn’t fit into any of these other navigational categories. For example, Wikipedia’s entry on Hyperlinks uses hyperlinks in the text to allow users to navigate to related topics:

Arbitrary hyperlinks in Wikipedia's page about hyperlinks

Contextual Navigation

Contextual navigation includes simple text hyperlinks, but it may also manifest itself more obviously as links from one piece of content to other “Related items”, “Recommended items”, “Most Popular items in <category name>” or “See also” links. Sometimes these links point to siblings in the information hierarchy, meaning pieces of content at the same hierarchical level as the current content. For example, a news site’s article about Finance may point to another news article about Finance. In this example, an article on NYTimes.com about Facebook has on the same page several different contextual navigation sections to sibling articles in the Technology classification:

A "More...." contextual navigation section linking to sibling articles

But often, the nature of the relationships is more editorially-controlled, or controlled by complex algorithms, and less determined so easily by simple hierarchical relationships. For these cases, the Contextual Navigation offers a chance to lead the user to more remote pieces of content on the site or to other categories besides the one they are currently viewing. For example, see Amazon.com’s personalized recommendations, which depend mostly upon user purchasing behavior, point to books of a variety of topics:

Amazon.com personalized recommendations

Sitemap

When a site has a large hierarchical navigational structure, a Sitemap can often display visually how pages on the site are grouped, and where the various content is located within a site. Sitemaps usually link to the pages displayed, as in Apple.com’s Sitemap:

Apple.com sitemap

Site Indexes

Similar to Sitemaps and Search, Site Indexes provide yet another way for users to jump directly to content that may otherwise be buried deep in the hierarchy of the site. They offer an alphabetical list of links to the content available on the site. While Sitemaps work well with hierarchical data, Site Indexes are usually more useful than Sitemaps for sites that do not have a clear hierarchical classification structure, as exemplified by the UN.org Site Index:

UN.org site index


What links here