Creating Interactive Prototypes With PowerPoint

Why PowerPoint?

It contains a useful design tools, making it ideal to create wireframes and clickable prototypes for a variety of applications quickly and cheaply, without having to learn complex design apps. These features include basic shapes, visual styles (fill, stroke, shadow,…), slide transitions, grouping, slide masters, and hyperlinks.

Here’s how these features work together to create a prototype for an image sharing app for win 7 phone in less than 30 minutes.

Step1: Plan it

One of the simplest ways to plan an interface is to visualize it as a user flow diagram with states as interface screens, and links between states corresponding to user interaction. For example, here is the flow diagram for the image sharing app (created using Windows Journal on a Tablet PC)


Step 2: Sketch It

The next step is to create rough sketches for each screen. These sketches provide the high level direction for creating the wireframes in PowerPoint, so don’t worry about putting too much detail there.


Step 3: Prototype It

Open the PowerPoint Prototyping Bundle slides side by side with a new presentation, then create a slide for each interface screen, and copy elements from the bundle slides onto your app slides.

To edit the labels on each element, simply double click the element and type the new label. You can also resize elements and change their colors if needed, using the Format tab on the Office Ribbon.

clip_image006 clip_image008 clip_image010

Sample slides from the Windows 7 Phone Prototyping Template for PowerPoint

clip_image012 clip_image014 clip_image016

Sample slides from the Image sharing prototype

Step 4:Hyperlink It

Now the best part: To make your wireframe clickable, simply select an element on your slide, click the hyperlink icon from the insert tab, and select the next slide in the user flow. That way, you’re creating a non-linear flow that simulates user interaction with interface objects to navigate to other screens.


Step 5: Export It & Test It

PowerPoint provides a wide range of export formats, including PDF. The reason is I like PDF is that it can be easily shared and tested on different devices and platforms. If you already have a Windows 7 phone, open the exported PDF file and tap through it on your device as if it were a real prototype. All this is done without writing a single line of code, or using any design tool.



Final Tips

– Grouping shapes and elements together with CTRL+G makes it easy to move them around.

– Use slide masters to share basic screens and navigation items across multiple slides. That way, you won’t have to do lots of copy/paste, and you can update multiple slides with a single change.

– Copy formatting (style) of a shape or text by using CTRL+SHIFT+C and paste it onto a new shape using CTRL+SHIFT+V. That way, you can restyle multiple shapes at once using a common fill, stroke, shadow, etc… This works for text formatting as well.

– Keep your prototype simple, and focus on the main features that you’d like to visualize and test. Everything else is a distraction.

→ This sample prototype is included for free with the PowerPoint Prototyping Bundle