In the past when I’ve spoken about Web Applications and Navigation systems in particular, I have mentioned hub & spoke diagramming and even shown a few simple hub & spoke diagrams that I’ve created. I’ve started calling these diagrams Application Maps, rather than Hub & Spoke diagram. Today I wanted to show a video of an actual application map as I build it.

The application in question is the Windows Address Book and the product I’m using to make the map is OmniGraffle Professional. First, the video (you’ll probably want to watch in full screen or on YouTube to be able to read the descriptive text which shows up on the right side of the screen):

Making an Application Map with OmniGraffle Pro

Before I made this video, I went through the Windows Address Book and took a screen shot of every window (you can download the screen shots as a PDF here), and also added my own classifications (external, system, hub, spoke, link, etc.) That way when it was time to actually create the Application Map, it was easy to just type in the names of the screens, classify them and finish the Application Map quickly.

Why do I make these maps? When I look at an application I look for it’s hubs. The hubs are the work areas – the place where the user creates things and does things to them. In this application the main hub is the List of Addresses and Groups. From there the user can add an address, edit an address, add a group, export – a whole host of activities. In the end, though, he always returns to the hub when he’s done. In complex applications (one with hundreds of screens, for example) there may be dozens of hubs and their relationships may be complicated. I use the Application Map to help me visualize these applications more clearly and to act as a foundation for the design of the navigation system.

I’m going to talk more about this when I talk about Escaping Navigation Hell at the UIE Web Masters Tour in San Diego (March), Minneapolis (April), Philadelphia (June) and Seattle (July). If you’re thinking about going you can use the promotion code HAGAN when you sign up and save $100. Hope to see you there!

[—- Added this on March 18, 2010 —-]

If you’re interested in more examples, you can download a ZIP file that contains the following files:

  • Screen shots from Windows Contacts (PDF)
  • Application Map for Windows Contacts (OmniGraffle file)
  • Application Map for Firefox (OmniGraffle file)
  • Application Map for Photoshop (OmniGraffle file)
  • Application Map for Quickbooks (OmniGraffle file)
  • Stencils for Application Map (to add to OmniGraffle)
  • Diagram Styles for Application Map (to add toOmniGraffle)