guides-ppt

How To Create An Interactive App Prototype With PowerPoint

 

 

Why PowerPoint?

PowerPoint is an excellent prototyping tool disguised as a presentation software. It comes with lots of basic vector shapes, solid/gradient fills, strong layout engine, and the ability to create hyperlinks between slides, making it a great tool for laying out UI screens quickly, and then linking them together so that you can interact with them same way you would do with a real app.

Each slide in PowerPoint represents a screen in your app, and each link between an element on a slide and another slide represents a transition from one screen to another in your app.

Here’s how I use PowerPoint to create a prototype for an Android app in less than 30 minutes. The app lets you select a group of friends to invite to lunch or dinner, find out where those friends are on the map, and the places that are close enough to all of them.

 

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. Here’s how I plan the dinner reservation Android app that I want to prototype.

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 prototype in PowerPoint, so don’t worry about putting too much detail there.

Step 3: Design 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.

Here is what the final prototype screens look like.

 

 

Step 4: Link 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. 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