Following the train of thought from Browsing informal hierarchies, this post investigates visualization as navigation. When can navigation double as visualization and provide the user with visual cues reflecting the organization of content on a web site or another digital media device? Already in use on many web sites, informal hierarchies have the potential to replace the widely used static, tabular navigation and its often arbitrarily determined categories with a more flexible and adaptive device, one which not only is more effective in orienting users within a particular hierarchy, but is also an iconic representation of the web site itself, providing a distinct visual identity which people will recognize.
While there are potentially unlimited possibilities for visualizing navigation, the examples listed here are simply starting points for recognizing some of the opportunities.
A rather basic example of navigation which reflects the structure of the site is the breadcrumb. There are two types of breadcrumb which are typically used: (1) the hierarchical breadcrumb, which reflects a user’s position in the hierarchical structure of a site, and (2) the dynamic breadcrumb, which is generated based on a user’s path through a site. The first is a useful way to create orientation by relating a pathway to the hierarchy of the entire site. The second on the other hand, is by nature the most adaptive, and exists in various incarnations. For instance, Froogle uses a particular kind of dynamic breadcrumb to keep track of a user’s chosen filters, allowing the user to incrementally step back to make any modifications. Both breadcrumb types lend themselves to different use-cases, and are both examples of navigation as visualization.
Another example is the node diagram. Perhaps best exemplified by the well-known Thinkmap, it is rarely seen implemented on websites. But the advantages are aparent: it is both adaptive and can depict a variety of relationships between nodes—from both a non-hierarchical and hierarchical view, to a cluster view and timeline, it supports several visualization types that can further describe the structure of a web site. Similar to the breadcrumb, the node diagram reveals pages over time based on their relevancy to the experience.
The index is another form of navigation/visualization. Catalogtree, a Dutch information design studio, uses the index as a basic navigational device. By structurally treating every item equally, it opens the possibility to visually differentiate page types through iconography or color treatment. Unlike the node diagram or breadcrumb, the index begins with a structured or unstructured overview of every category or page on a site, yet with the ability to filter down and rearrange the view to show only relevant pages.
Google Maps has become a geographical index to web sites with a physical entity. While not often seen as primary navigation for any individual site, the geographic view has wide potential, especially for news-oriented websites for which location is one of the primary.
The tag cloud, made popular by Flickr and del.icio.us, allows navigation through a hierarchy based on tag popularity. And perhaps the most interesting visualizations doubling as navigation are currently found at Digg Labs (see top image). Designed by Stamen, these explorations further expand the realm of possibility to include animation and specific forms of user interaction to slice and depict information in a variety of compelling ways.
[...] The visualization or exposure of semantic linkages, exemplified by del.icio.us, becomes a medium through which we define our identities based on similarity and difference, in relation to the objects that surround us. The tag cloud is one method by which to visualize folksonomies. Yet while it is a literal container of meaning, it is not free of metaphoric meaning. As a targeted and mediated construction, it not only conveys identity, but also suggests on behalf of its users an interest in expressing their own identity, as well as in crafting it through careful curation of categories and objects. Involuntarily, it expresses and demonstrates aspects of social constructionism. [...]