Isometric Experience Maps

Isometric experience maps are three-dimensional diagrams used to illustrate hierarchy, flow, and/or relationships of pages within a website, ideally incorporating thumbnail screenshots, comps, or wireframes of the pages themselves.

Two dimensional site maps of labeled boxes and basic arrows may be too abstract and not engaging enough to communicate a high-level story effectively to less familiar with user experience techniques, particularly executive sponsors. Instead, you can use a visually attractive diagram to help others quickly understand the scope of an experience and precisely identify each unique step or destination.

However, doesn’t a diagram like this take a long time to produce? Actually, not really.

The Isometrics library in EightShapes Unify contains a flexible set of objects for you to rapidly create such a visualization in your deliverable. From the isometric grid (to align objects) to page objects (into which you can paste a screenshot), from grouping shapes to annotation markers, the Isometric library and page pattern provide all you need to create an attractive visualization.

Isometrics Library Elements (found in /deliverables/_elements/isometrics.indl)

Why Isometric Experience Maps?

You can use isometric experience maps to:

• Create a far more attractive diagram of an experience, compared to more traditional site map or flow with labeled boxes and arrows, in slightly more time and effort
• Appeal to many different audiences
• Gain credibility as an effective visual communicator
• Convey simple or complex ideas, depending on your goals
• Utilize deliverable page real estate to display more data in a condensed area
• Show a high-level (30,000 ft) or detailed (10 ft) view depending on how you resize the objects

You can also learn more about using isometrics in creating a site map or other diagram from our interview with Jason Wishard, an interaction designer at EightShapes.

Why NOT Isometric Experience Maps?

Isometric experience maps may look good, but are not appropriate for every experience diagram you need to create. These maps can sometimes take too much time to convey a message that can be communicated more simply and quickly with a lower fidelity diagram.

Additionally, the mechanics of isometric experience maps take some getting used to. Challenges include:

• Adobe InDesign CS4 lacks “snap to grid” for the grid you apply using the page pattern
• Objects in the library take some getting used to, since they are already skewed and styled
• Creating your own assets beyond those found in the library take some tinkering and can be time consuming (that’s why we created a library!)
• File size can increase with many page objects and the grid system in the background

Where

Download (Grid & Library)

Note that by downloading this library, you agree to our Terms of Use. The overlays library will be added to the next EightShapes Unify release.

How

Seeing is believing, so we’ve created a basic video tutorial that introduces you to the basics of creating an isometric experience map:

[VIDEO COMING SOON]

In addition, some other tips will help you get the most out of the library, including:

• Using the Isometric Grid
  We’ve provided a page pattern snippet (also to be available in the overall kit at /deliverables/_pages/diagrams/isometricgrid.inds) that adds the multidirectional grid to your deliverable page. Just place it as you would any snippet (via File > Place) and position it in the upper left of your deliverable page. For better results, ensure that the “Paste Remembered Layers” option is checked within the options menu of the Layers panel, so that you can hide or remove the grid easily. When using the grid, remember that there is no Snap to Point with this grid system, so you will have to use your best guess when aligning with the grid. Also, when maneuvering objects to align with the grid, it’s best to ungroup them so that the bounding box angles are easier to see and align when moving on the screen.
• Placing Pictures into Page Objects
  If you’ve got a JPG, PNG, Photoshop PSD comp, or even an InDesign INDD wireframe, just use the File > Place command and place the picture directly into the object by hovering your cursor over the object and clicking. Alternatively, you can also paste into the object by having a picture on your clipboard (such as a screenshot), selecting the object, and selecting Edit > Paste Into. In either case, your picture is embedded directly into the object, and is also automatically sized and rotated for you based on the object’s style!
• Resizing Isometric Objects
  It’s not as easy as grabbing an object’s handle and dragging to resize; when you do that, the sheared angles aren’t maintained. Instead, you should make sure that the object you are going to resize is ungrouped. You can do this by selecting Object > Ungroup. Once ungrouped, each object can be resized accordingly. When you are done resizing, simply group all of the objects together again by selecting them all and then using the Object > Group command.

Need Inspiration?

There are plenty of great examples of isometric diagrams out there in the wild. Visit a few of these sites to be inspired! (and send us links to if you know of more)

• Activeside’s Flickr Library
• Yahoo Network Diagram from 2006 IA Summit
• Element of User Experience from Jesse James Garrett of Adaptive Path

Helpful Publications

Thanks to Paul Kahn, who provided us with references his work (such as MAPA: a system for inducing and visualizing hierarchy in websites) and other publications after we published the library, along with others such as Krzysztof Lenk and their Dynamic Diagrams consultancy. We’ll be taking a look soon!

Acknowledgements

We’ve been using isometric diagrams at EightShapes for awhile, but it was the inspiring direction provided by Izac Ross (our EightShapes 2009 summer intern), diligent and detailed prep by Jason Wishard, and helpful hints from Geoff Shott and France Rupert that resulted in this library. Thanks guys!