Comments on Storyboarding Rich Internet Applications with Visio

Roland Hill — Fri, 26 Jan 2007 14:52:43 GMT

Patrick, I think you are right that there can be an increase in workload with an approach that uses extensive wireframing. On the other hand, it saves you re-work later on and increases the chance that clients will be happy with the end result.

In terms of tools, I suggest people check out www.swipr.com. I had a look at this at the IA Summit and it looks good – it will also be free.

Roland

Patrick Stapleton — Fri, 26 Jan 2007 14:52:36 GMT

I really enjoyed the opening explination of PIAs and RIAs – very useful stuff. I am also a great believer in wireframes and for that matter any kind of visually orientated process. However coming from years of in the trenches services time I think I would think twice at even suggesting this process due to the work load increase it would demand.

Really I believe the future of elaboration is in specifically designed specification and simulation tools rather than technical drawing tools such as Viso, Illustrator and the like. These new tools hold the promise of natively supporting good design patterns and automations to reduce workload.

The big issue really is – what are good design patterns for RIAs? An article on this i’m sure would garner great interest :)

Clint Modien — Fri, 26 Jan 2007 14:52:25 GMT

>>”While this example is fairly trivial, more complex interactions can be built. In addition multiple storyboards can be used to represent different use cases. This is important for showing error conditions as well as different edge-cases.” >>

Why not just a visio uml diagram to illustrate the different use cases? What’s the advantage?

Clint Modien — Fri, 26 Jan 2007 14:52:24 GMT

While this example is fairly trivial, more complex interactions can be built. In addition multiple storyboards can be used to represent different use cases. This is important for showing error conditions as well as different edge-cases.

Why not just a visio uml diagram to illustrate the different use cases? What’s the advantage?

Bill Scott — Fri, 26 Jan 2007 14:52:23 GMT

David

Yes, you need to double-click on each of the storyboard steps (name or scenario step). The reason for this is Visio allows you to associate a macro with a double-click event. A hyperlink links to a page, anchor, etc.

I wired the storyboard stencils to use the double-click event.

Geert Claes — Fri, 26 Jan 2007 14:52:22 GMT

Hi Bill, I like the idea, but I prefer to show a client the wireframes in Full Screen view. Is there a way to go through the storyboard by just clicking (single) on the storyboard steps (like hyperlinks) in Full Screen view mode?

Cheers, Geert

David David — Fri, 26 Jan 2007 14:52:22 GMT

Very interesting article and usefull tool. But I’m wondering how to run the slide show according to there layers. Double click the name of layer?
Cheers, David

Alok Jain — Fri, 26 Jan 2007 14:52:19 GMT

Great Article and very relevant to practical use.

I would like to add that the change from PIA to RIA doesn’t just mean direct manipulation of page elements but a change in what is destination for the user.

Previous destination was like navigating through listing pages to reach a product detail page and then configure the product, go to shopping cart and so on. With RIA the sense of destination is changed and then users manipulate that destination space. So they do not “move across spaces” but they manipulate objects in same space.

I belive the we are in transition phase rightnow and are merging current interaction mechanism with what RIA offfers, as we move forward we’ll see fundamental interaction and navigation mechanisms changing.

I am writing an article (hopefuly soon) about this on my blog (http://www.iprincipia.com) in more detail.

Cheers
Alok Jain

Lars Pind — Fri, 26 Jan 2007 14:52:18 GMT

Hi Bill

I’m Lars Pind, the guy responsible for the code behind this site.

Yes, there were indeed 4 comments that were lost in the transition. They’ve been brought back now, and they appear at the top, like they should’ve from the start.

Sorry about that, and thanks for letting us know :)

Bill Scott — Fri, 26 Jan 2007 14:52:17 GMT

Looks like a couple of the original comments got lost since the posting of this article. In those comments some good points were made about other tools like Fireworks, etc. In those comments, I mention some background information.

I discuss the full Visio toolkit on my blog at:
http://looksgoodworkswell.blogspot.com/2005/11/visio-wire…

I also discuss briefly using Photoshop CS2 with animation & layered comps at:
http://looksgoodworkswell.blogspot.com/2005/11/animating-…

The time is ripe for a tool to be created that allows us to take our design artifacts and essentially animate them into life. Being able to express designs as storyboards that can be animated or shown as storyboard “walls” would be awesome in a design tool. Being able to reverse engineer sites & interactions into storyboards would be a great way to share ideas.

Thomas Vander Wal — Fri, 26 Jan 2007 14:52:17 GMT

Hopefully this is the tip of the iceberg for rich internet documentation pieces in Boxes and Arrows. We have been dealing with Flash for six years as a major rich interface component (that was Flash 3 or 4 in 1999 that really tipped things). We now have AJAX and very little has changed on the documentation front. Nearly every IA or UX designer conversation the past 12 to 18 months has included a question about documenting rich interfaces.

Now there is one article to point that I feel is worth reading and sharing. It is long past time.

Bill Scott — Fri, 26 Jan 2007 14:52:18 GMT

Bostich,

You have a very valid point. In that you cannot distribute the interactive variety of Visio over the web. Saving as HTML pages will only allow the hyperlink feature of Visio to work and not the layers functionality (which is a shame).

However, in our case this was easily solved by having our clients either download the free Visio Reader available from MS or capturing a movie of the interaction with either a product like SnagIt or Breeze (if you want to easily annotate it.) Of course it was not too uncommon for them to have Visio (especially in the corporate environment of the airlines.)

I have had a couple of other colleagues mention fireworks, but I have not had the time to dig deeply into it. It does appear to be a really nice tool for something like storyboarding.

I have spent some time using Photoshop to do the same things mentioned here. In fact in the link in my blog the presentation there discusses photoshop animation. In CS2 there is an animation palette and in CS they added layered comps (a way to name layers). This works pretty nicely. I have created some really quick drag and drop animations exploring different cinematic effects and transitions.

I discuss photoshop animations in my blog at: http://looksgoodworkswell.blogspot.com/2005/11/animating-…

I like others am still searching for the tool that pulls it all together.

Bill Scott — Fri, 26 Jan 2007 14:52:18 GMT

Absolutely. You can read about the stencil library at http://looksgoodworkswell.blogspot.com/2005/11/visio-wire…

You can either download it from there or from the link that is in the article.

I would be happy to have a link posted on the www.ianinstitute.org/tools site. I will contact them to see about getting it posted.

Thanks!

Bostich — Fri, 26 Jan 2007 14:52:18 GMT

Great article, and I like the interactive shapes – but wouldn’t this only work for showing a client in-person using Visio?

If you took it a step further in naming the layers and adjusting the content a bit it could work as a PDF (using Create PDF), although it wouldn’t be as elegant because the person viewing the PDF would have to click through the layers.

I’d think if you wanted to model this type of simple interaction you’d be better off using something like Fireworks, where you can export that functionality to a format that’s easier to send out.

Harry — Fri, 26 Jan 2007 14:52:18 GMT

Great article Bill. I find that good wireframes (in visio or other packages) give great ops for more collaborative design at earlier stages in the project. They are quicker, cheaper and you can draw all over them.

The IA Institute (www.iainstitute.org/tools/) offer a number of wireframe templates and stencil downloads – saves a lot of time and learning how to build your own.

Would you be able to share some of the stencils you demo’d in the article?