Logo. Two Rivers Consulting is Hagan Rivers and David Rivers, user interface design consultants located near Boston Massachusetts specializing in web application and enterprise application designtwo rivers flowing

follow us on

    writeto [at] tworivers.com or (978) 352-2585

OmniGraffle & the Application Map

Written by Hagan on March 7, 2010    Return to Blog Home

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)

Category: Musings 7 comments »

7 Responses to “OmniGraffle & the Application Map”

  1. UI Design

    that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.

  2. Application Maps and Frameworks « Communicating Design

    [...] Masters Tour caught my eye. The speaker, Hagan Rivers, described a technique called “application maps.” From Hagan’s original blog post on it: When I look at an application I look for [...]

  3. Fitzgerald Steele

    Thanks for this, and thanks for the stencils! Looking forward to hearing more about this at UIE Web Masters in Minneapolis

  4. Michael Carlucci

    Great talk at the Seattle UIEWMT Hagan!
    Thanks for the wisdom, i am working on putting it to work.


  5. Bobby

    Great stencil and diagram style. I only have one issue, and it has to do with how long some of the line lengths become (and, generally, how ‘spread out’ the diagram becomes as a result) with larger applications. I have my “Line Length” slider at its absolute minimum, but those babies are still looooong in the app. map that I’m currently creating. Would love it if my app. map was as compact and neat as the one you create in your PDF: “Web Application Structure.”

  6. Hagan

    Bobby – How do I deal with long lines in OmniGraffle? After a certain point, I turn off the automatic layout features in OmniGraffle and just do the layouts myself. OmniGraffle is great for getting me started, but it wasn’t really designed to make these diagrams, so I have to work it a bit… I used to make them by hand in PowerPoint, so I considered OmniGraffle a big step up!

  7. Quora

    Help with creating concepts maps in Omnigraffle…

    The site appears to be down right now, but Hagan Rivers created and shared OmninGraffle templates for creating “Application Maps” using the outline tool, and the diagrams semi-automatically lay themselves out. See http://www.lukew.com/ff/entry.asp?10