OmniGraffle & the Application Map
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 » |
March 11th, 2010 at 3:22 am
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.
March 23rd, 2010 at 8:45 pm
[...] 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 [...]
April 15th, 2010 at 3:18 pm
Thanks for this, and thanks for the stencils! Looking forward to hearing more about this at UIE Web Masters in Minneapolis
July 23rd, 2010 at 11:16 am
Great talk at the Seattle UIEWMT Hagan!
Thanks for the wisdom, i am working on putting it to work.
M
August 5th, 2010 at 12:24 pm
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.”
November 4th, 2010 at 12:31 pm
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!
January 25th, 2011 at 7:27 am
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…