Dec
12

Site Map 2.0

December 12th, 2007 | Uncategorized

Website Site Map 2.0As I mentioned before, I’ve adopted a wonderful open source tool called Dia into my work flow. Many months ago, I was working with a team to develop a community based web application. Part of my job was consuming our discussions and creating documentation that embodied a cohesive view of all that we talked about. One of my tasks was to produce site maps and wire frames. Please note, I’m talking about pre-production site maps and not what you might expect to find under a “site map” link on the footer of a page.

A quick search for site maps on google image search shows the typical site map layout. Be it top down or branching from the center, they’re usually a tree based architecture. This relates well to the old way of building websites, where we always started with a home page and drilled down. On the modern web, this does not work nearly as well.

In our Web 2.0 world, websites are often more like applications. Thanks to AJAX, a single small section of a webpage can be purely dynamic and disconnected from other sections of the same page. Also, the use of standard navigation and interface widgets often links every page to every other page. This can break the conceptual information architecture that the tree model provides. Instead of a tree, you have a much more complicated graph.

In response to this, I went out on a limb and created a new style of site map. I started diagramming on paper and brought it into Dia. The end result is extremely information dense and looks more like what you’d expect to find on a white board after a meeting. While the document doesn’t communicate as quickly and easily as a traditional site map, it does provide a level of detail well beyond. I’ve continued to diagram in this way for a while, with extremely positive results. Here are some basic guidelines I typically use:

  • Start with a key page. This may be the “home” page of the site, but it can also be another primary page. In the example attached to this post, the primary page is the user’s view once they’ve logged into the site. The “home” page was added after the primary user portal view was spec’d out.
  • Use arrows for links. If two sections or pages link back and forth, use double arrows. For primary links, use dark angled lines. For more abstracted links, use lighter curved lines.
  • Put actions such as user choices or server side functions in smaller dialogs along an arrow path.
  • When part of your information architecture is extremely similar to an existing site, reference the other site with a screen grab. Pictures are worth a thousand words and all.
  • When possible, mock/draw an interface instead of describing it.
  • Try to stay consistent with your level of detail. As you progress into more distant pages within the site, reduce your level of detail. If need be, you can spec those pages out more in another diagram.
  • Use background colors to give sections and blocks a “connected” feeling. Don’t leave all the backgrounds as white. This helps break the information architecture into visual “chunks”.
  • Be creative; while this is a technical process, it borders on the edge of being design work. Enjoy it.

When I presented this new style of diagram to a co-worker, he called it “Site Map 2.0″. It stuck in my mind. The project itself was completely re-evaluated when the company purchased an existing community. We moved from a raw development strategy to an integration strategy, rendering my diagram obsolete. Thus, I feel comfortable sharing it with the world. A few bits of key information have been blotted out, just in case. Keep in mind, as you view the diagram, that the concepts and sections were discussed among the team. I’m sure from a “first look” point of view that there’s some ambiguity.

Comments, thoughts, and suggestions are more than welcome.

Leave a Reply

test