Visualizing Rich Interactions in Paper Prototypes

Elyse Sanchez, Monday, March 27, 2006 @ 11:42 am

Wireframes and paper prototypes work well in documenting the standard page metaphor of the Web, as the functionality of each screen can be captured in a single wireframe. Rich interactions, though, pose the challenge of expressing a series of states that may occur on a single screen.

As technologies like AJAX gain greater popularity, designers face the challenge of exploring and developing new and innovative visual vocabularies and flexible tools for capturing the microflows of rich interactivity.

At Pathfinder, we are drawing inspiration from the discipline of storyboarding, which is, of course, closely related to wireframing. Storyboards express ideas in a sequence of "key frames," showing only the minimum number of frames to convey the idea. The richness of storyboards comes not from just the individual pictures, but from the change from picture to picture. It's possible, then, to embed a miniature storyboard into a wireframe, thus illustrating the quality of the rich interaction.

A second technique is to create a visual taskflow representation to the system. In this format, all screens are miniaturized to capture both the linear and non-linear flows within individual screens and from screen to screen.

Our fellow practitioners are tackling this challenge as well. Bill Scott considers several strategies for creating interactive wireframes, including the PowerPoint clickthroughs, the development of quick and easy RIA toolkits, and standardized notations to indicate interaction effects in traditional, static wireframes. His personal technique involves the creation of storyboards in Visio, which he then animates. The strategy is detailed in his blog entry, "Interactive Wireframes: Documenting RIAs."

Related posts:

1. Rapid PowerPoint Prototypes for Ajax and Rich Interactions
2. Great Article on Prototyping Complex Interactions
3. Wireframes: Much More Effective than Interpretive Dance
4. Developing Good Wireframes Ahead of Visual Design
5. Exactly What are Wireframes?

Comments (0)

User Experience Design

Comments

• Leave a comment
• Comment feed for this post

None so far.

Leave a comment