Interactive Wireframes: Documenting RIAs

Background
I started designing (and developing) user interfaces professionally 20 years ago. My first experience was writing GATO, a submarine simulation, for the then newly minted Macintosh.

I moved through a myriad of business domains from there. These included designing interfaces in the areas of:

• wargaming
• airline forecasting
• software reverse engineering
• integrated development environments
• shipping and logistics management
• supply chain planning
• airline scheduling, operations, planning, revenue management
• telecommunications
• oil & gas production
• lots of interface toolkits and frameworks

Somewhere around 1999 I moved away from desktop applications to the web world.

Interaction Design for the Web
It was exhilerating to have the constraint of visual design removed in product ideation. But with that exhileration came the realization that a much larger constraint had been placed on any design I wanted to come up with. The interaction dimension had all but been eliminated.

This constraint though tended to make it easier to mockup and interface or build wireframes for a design. Since most interaction occured at the page boundary, one could create interactive slide shows of the application to understand happy and sad paths. This had always been challenging in the desktop world... how do I document the interaction dimension?

Simulating Interaction with PowerPoint
By this time I was also doing lots of design work and lots of prototyping of new concepts.

One of the tools I used to present an interface was PowerPoint. It provided a way to create slide snapshots of the interface and stitch them together with hyperlinks and animation to simulate an interface. There were problems however.

• Screen real-estate constraint. Powerpoint puts you in a smaller resolution to work with.
• Very hard to maintain and change. No good way to visualize the interaction dimension. Have to debug hyperlinks that are hidden behind an object's hyperlink dialog.
• Too much time spent wiring.
• Simulating in-page interaction meant creating animations or duplicating pages with slight modificiations.
• Limited drawing tools
• No good way to create templates (throw them all on a single page or put them in the gallery which could not be shared with anyone unless they installed them in the exact same directory structure as you did when they were saved.)

Having said that I was able to successfully use the tool to pitch designs and iterate quickly with our clients.

The Problem
But as we started adding more and more rich interaction in our web application it got harder and harder to document the interaction in the tool.

With the recent rise in popularity of rich internet application solutions, this problem will become a much bigger issue.

Several things could happen:

• RIA toolkits get simple enough that you can develop a quick prototype that can simulate the various interactions without a lot of code. Sounds great but probably not going to be the majority solution.
• The community agrees on a set of notations that can indicate various interactions (double click, fade, zoom, etc.) that can be documented in a static page. These efforts have been numerous in the past. I recall working on a notational system in 1993 for desktop interactivity.
• People cobble together tools that allow them to be pragmatic in their documentation. Wireframe the interface. Take the more interaction-dense parts and create animations with various tools to explain the interface. This will definitely continue to happen.
• A killer tool comes out that solves all of our problems. And world peace happens, too. :-)

Simulating Interaction in Visio
So in the spirit of cobbling I recently created at technique in Visio to animate wireframes.

The problem we face is how to visualize the interaction dimension. How do we communicate what all lights up, fades, changes, pops and sizzles when the user types, points, clicks our interface.

In the entertainment world, the technique for visualizing the flow of a movie or game is through storyboards.

Enter Visio
One obvious way is to add hyperlinks and then generate the Visio wireframe as a web site. But this just gets us back to PowerPoint (with a little less power.)

Storyboarding
So what I created in Visio is a new stencil library that contains a way to document and drive a storyboard animation for the wireframe interface.



In another blog I will discuss the features of the Visio Wireframe Toolkit I built. But for now just imagine I have stencils for all sorts of web components, containers and content. I can create my wireframe with all of these elements and then use the Storyboard stencil to drive what parts of the interace show up when walking through a storyboard.

Visio Layers
Visio contains a concept called layers. Think photoshop. With one twist. The layers are really just tags. A shape (component, container, content) can be in zero, one or more layers. I have the ability to turn layers on or off. All objects that participate in that layer will turn on/off with the layer visibility.

The visual glue that holds this together is the ability to snap together storyboard frames and walk through the frames which drives turning layers on or off.



In this example, the user scenario (storyboard) is called Swap Shift. The respective steps are clicking on the desired shift, entering search criteria, checking to see if the schedule change will be what they want and finally submitting the request for the swap.

In Visio, as I double-click each storyboard step that part of the interface becomes visible. This simulates interaction with the application in a staged movie-style manner. Double-clicking the header resets the scenario to the beginning state. You can view an animation of this to see it in action.

The feedback has been very favorable. We have used this toolset to present a very complex application to a set of customers that have traditionally been hard to nail down and communicate with. They expressed a real appreciation for getting a chance to observe the interaction at much more intuitive way than traditional functional specs or wireframes.

There are issues of course.

• I have tried to make it simple to configure each step as to which layers turn on or off. It is still can be tedious if you get a large number of layers.
• It does not display more advanced effects like: zoom, fade, puff, slide, etc. Although these could be written as VB scripts and mostly simulated with an expanded syntax for each storyboard shape.
• How to communicate in printing? Well you can tell which layers print or not. So you just have to take the extra step to specify what will show up for a printout.

One thing we have considered is just capturing the whole walkthrough in a movie or flash file and using this as part of our documentation (with voice over.)

I hope to publish a much expanded version of this with detailed examples as well as the stencil library. I am awaiting the editoral staff's decision.