Better Site Maps: Some Different Perspectives

Sep 16

We often conduct a site audit or heuristic evaluation of a client’s website to identify possible usability issues and establish next steps for both short- and long-term site improvements. There are a number of guidelines and best practices to help us conduct this heuristic evaluation (see Nielsen, et al). However, the final report for this type of audit has traditionally been filled with flat screenshots coupled with (verbose) text explanations of findings and recommendations.

Although individual screenshots can be powerful, we have begun to include in our reports some other compelling images that help our clients “see the forest for the trees” and internalize some of the changes needed for their website. Visual representations of sitemaps not only engage client stakeholders and executives, they also improve communication among the user experience design team by helping each team member form a consistent mental model of the site’s hierarchy. This “as built” visual sitemap can also be used for checking links and paths and user traffic and interaction analysis. We know what a typical sitemap looks like:

The question is: how can we tell a better story with our sitemaps?

Non-linear, Radial Site Maps

When documenting and visualizing content from large websites, site maps that span multiple pages tend to give a distorted view of the content hierarchy. This problem can easily be resolved by combining all content onto a single page and using a non-linear or radial organization. Here, navigation content and categories from the home page are shown in close proximity to a central home node and lead to subsequent levels just like the serrations in a leaf. All the content clusters are depicted in different colors and all levels are shown by reducing the font size as one moves farther from the central node. This layout makes even the most complex content organizations relatively easy to read and understand.

Isometric Site Maps

Also, in mapping larger websites, two-dimensional site trees are commonly too wide and broad to be contained in one screen. Isometric sitemaps tighten these relationships by showing how the pages connect and display the hierarchy of the website in a compact and manageable way. Each page, application, or link within the website can be shown, which helps communicate the full experience, and allows for more information to be shown on a page.

Instead of focusing on the specific title and information found on each page, as a flat two-dimensional site tree does, the Isometric sitemap allows the researcher and client to see where the bulk of information falls, what the different entry points for the site are, and how the site might need to be restructured to accommodate large buckets of information. Isometric sitemaps also have the advantage of displaying click depth, page type, logical grouping, major navigation path, link relationships within the site or out to other sites, access rights, media types, user tasks, flows and scenarios.

Isometric site maps can be created in many web development applications, including Visio and Omnigraffle. Online isometric tools are also available through Powermapper and Wonder Web Ware.

Three Dimensional Site Maps

Further improving upon the richness of information provided by isometric site maps are 3D visual representations. Considering web sites are dimensional information spaces, they are severely limited when represented in only two-dimensions. 3D site maps, or skyscraper site maps, provide further ease in understanding how a website is organized and how the pages are connected.

Primarily, 3D site maps are more adept at showing which URLs are dependent on other URLs, or have several parent links, and similarly, which pages have unnecessary children URLs. A 3D representation can also locate excessive dependencies, illuminating where URLs are linked without purpose. Most importantly, 3D imaging helps determine which aspects of the website should be the focus of continued detailed testing. Oftentimes, the most central pages, with the most dependencies, have the greatest impact on quality because they are likely used most. 3D sitemaps make those dependencies even clearer than isometric sitemaps by generating a more distinct representation of information pockets.

Powermapper provides an easy to use program that generates an attractive and engaging skyscraper image (seen above).

Hyperbolic Browsers

The most dynamic representation of site maps is delivered through a hyperbolic browser that provides relational information not available through isometric or 3D site maps. Specifically, hyperbolic browsers demonstrate the type of relationship between entities: both the strength of the relationship and how closely they are related.

Additionally, for non-printed deliverables, hyperbolic browsers offer hover effects, the ability to zoom in to specific areas and extract certain content information. As a printed deliverable, the hyperbolic browser illustrates the breadth, depth, and type of connections between two entities.

Thinkmap and SAP offer exceptional models of hyperbolic browser applications.

Posted by: David Richard
No Comment
  1. Heather McDonald-Aveyard

    Apr 4, 2010 - 11:55 AM

    Thank you for sharing! Do you happen to have higher resolution images for these figures? It would be fabulous to be able to read the (currently too-fine) print to grok how the hierarchy is organized in each example as well as how it looks.

  1. Christine Alfredson

    Apr 4, 2010 - 09:45 AM

    Heather, the hyperbolic browser example was taken from a screen shot, but here is the link to the image:

  1. Jay

    Feb 2, 2011 - 10:10 AM

    Awesome post 🙂

Leave a Comment