Powerpoint for Prototyping: Part 1 of 2

by Tom Vollaro

PowerPoint is like being trapped in the style of early Egyptian flatland cartoons rather than using the more effective tools of Renaissance visual representation.

— Edward R. Tufte (Beautiful Evidence)

Boy does PowerPoint get a bad rap. I guess it is somewhat warranted. But the blame falls squarely on the authors. Like any tool, PowerPoint itself is neutral – it can be used for good or evil. This post will hopefully lean towards the former. In our interaction design work on Autodesk’s building information modeling (BIM) tools, we have found PowerPoint to be a powerful, low-cost prototyping tool.

Advantages

• Immediately available on almost every designers desktop.
• Easy to learn. If you know other MS Office apps, and even if not, PowerPoint has a fairly low learning curve.
• By its very nature, it is perfectly suited for storyboarding.
• For viewers without PowerPoint, prototypes can be exported to a variety of read-only formats.
• Works well for Agile teams - it conveys just the right amount of information.

Disadvantages

• Lacks sophisticated branching logic, without the use of VB scripting or add-ins.
• Difficult to simulate complex interactions such as 3D models - but perfect for web pages, UI "chrome", help and dialogs.

Examples

All of our PowerPoint prototypes can be grouped into low, medium and high fidelity. Many times they evolve from low to high as our designs develop. Sometimes, they may go from low to medium and then, depending on resources, we will have a “real” prototype coded up by a developer.

Low fidelity

Like I mentioned before, PowerPoint is a great platform for storyboarding. By its very nature, individual visually oriented panels organized into a sequence, PowerPoint is perfect for storyboarding. The simplest low-fi prototype can be imported sketches that are organized into a sequence. Simply re-order the slides to start to refine and tell the story of your design. This is very useful for sharing a set of storyboards with remote colleagues who could not attend an in-person design review.

Project Vasari concept storyboard - part 1

A simple prototype consisting of scanned images in sequence.

Medium fidelity

Once we start moving past sketches and into “real” design, we start to add screenshots, annotations, and even user interface elements. The following example is a refined version of the sketch storyboard shown above. In this version, we have started to mix media between screenshots, scanned sketches, and images from another prototyping tool (in this case, Balsamiq.)

Project Vasari concept storyboard

A more refined version of the early prototype above. This one is mixed media.

This type of medium fidelity prototype has also served us well on the Agile/Scrum project I have been working on. Instead of long, drawn-out documentation, we just put together quick annotated prototypes like the one below to communicate a specific set of behaviors to the developers. We use the text tool to overlay UI elements. It is OK if it looks rough, I have enough trust with my developers to get it right. And if not, we are agile, so we can always make slight adjustments. Annotations help explain an intended behavior or interaction.

 

Project Vasari - 3D Images Storyboard

A short annotated prototype used to communicate a design for an agile project.

In part 2, I will show some higher fidelity examples and talk in more detail about how they were made and how they can be shared.