Sitemaps are common deliverables, desired by clients who want a visual representation of a site. This article further develops the excellent Automating Diagrams with Visio by Michael Angeles. Just as actionable elements in a wireframe could have a reserved colour, perhaps a second standardized colour could be reserved to suggest selected items.“I would suggest that making sure the little boxes line up is a waste of an IA’s mental abilities. This brings back thoughts about colouring clickables in wireframes. Here, yellow has been used to hint at the currently selected item. Similarly to showing needs alongside wireframes, perhaps seeing structure or user flows more closely could enrich the context.Ī second thing I find interesting here, is the use of colour to suggest the current location of the user. After all, seeing the site structure along side the wireframe in itself provides a richer picture. I mean, this type of view could just as well be used even if the interface did not contain such a navigation. What I find interesting however is the juxtaposition between the site structure and the wireframe at a more general level. As we’d expect, these ideas have been naturally placed into the wireframe.

While designing the site, Dawn has come up with a navigation scheme which displays the site structure along with the current location at the very top of the interface. So I added a line for every page on the site map where you can offer a very brief description of the page. In other words, if you have a page titled, “Orders”, it’s not clear if that’s a dashboard, a list of orders, or even a form form for adding an order. Unfortunately, clients and developers and designers don’t always know what kind of page the page will be. In your typical site map, you show the page’s title adjacent to the little box for that page. Lately, however, I’ve been site mapping in sweet, luscious OmniGraffle, and I created a Unify-inspired OmniGraffle stencil for making site maps.īut, there’s one problem with lots of site maps. Out of the box, Unify is designed for use with Adobe InDesign.

I’ve used EightShapes’s brilliant Unify deliverable system for about four years. He shared the downloadable stencil which can be obtained right from his site. In the stencil, beside each page title there is now a little space for an explanation of what the page is about. If you would like to tweak the deliverable, the author has been kind enough to share the actual source Axure file as a downloadable template.Īustin recently came up with a sitemap or site architecture OmniGraffle stencil that makes room for some extra description. Either way, good stuff and thanks for sharing! One thing I do wonder about is how this would work though if there was a second or third scenario for the same user type, as sometimes I feel that interactive projects are composed of many little separate user stories and not just one. Possibly what Barnabas is doing is helping the Persona to live a little bit longer and inspire the team a bit more as the Persona’s comments pop up throughout the project. My take on this deliverable would be that Personas can sometimes get lost once a project builds momentum.

Barnabas has been exploring Personas that “could talk” in a few other forms as well, as the Complex Speech Bubble Persona and the Commented Sitemaps show.

In the built Axure Demo that has been generated, the sitemap pages are also linked to the wireframes which makes it easier to switch from the generic to the specific. More so, the speech bubbles are ordered chronologically and so flow through one by one. The idea starts off by overlaying simple and short comments made by a persona in the form speech bubbles on top of a structured sitemap. The Speech Bubble User Flow by Barnabas, is a hybrid representation that combines a sitemap, persona and user flow all into one.

Omnigraffle sitemap