Interactive Prototypes with PowerPoint

Written by: Maureen Kelly

Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it?

Sure, you could invest in a dedicated prototyping tool, but you can create surprisingly quick and effective prototypes with a software program that’s probably sitting on your hard drive right now. It’s PowerPoint—and no, I am not kidding.

I’ve met many designers who use PowerPoint for blocking out screens without ever discovering the interactive features for creating hyperlinks, buttons, and dynamic mouseover effects. Yes, PowerPoint can do all that. When I show people an interactive PowerPoint prototype, someone inevitably asks what I created it in. The reaction is always the same: “PowerPoint can do that?”

Overview

To see what PowerPoint can do, here’s a sample interactive prototype created in Microsoft Office PowerPoint 2003 for Windows. (Important: View the document in slideshow mode to see the interactivity. Links and orange buttons are clickable.)

Though there are other prototyping tools out there, here are the main reasons I lean toward PowerPoint:

  • It’s fast. You can try something, hate it, and try something else—all in a matter of minutes.

  • It’s low-fidelity. A PowerPoint mockup doesn’t try to look exactly like the final product, so it’s easy to work on high-level design issues and not get bogged down in details like colors or exact text. I also like being able to jot down notes in the margins of an early design, which I’ve never found a good way of doing in HTML or Flash.

  • Everyone has it. One of the great things about PowerPoint is that the people on your team usually have it. You can easily email a PowerPoint prototype to people for review and feedback.

Basic Interactivity

To begin, create a simple PowerPoint mockup, each slide depicting a separate screen in your site or application. You can use shapes, text, and clipart to populate the screens. I like to leave a little space in the margins for notes and half-baked ideas.

BasicInteractivity_1_v2.gif

Once your basic mockup is in place, you can add hyperlinks to text, shapes, or images. The links won’t be active in regular working mode; in slide show view, clicking on a linked object will go to a specific target screen.

Ready to give it a try? Let’s take a look at how to do it.

Note about versions: The detailed steps and screenshots in this article apply to PowerPoint 2003 for Windows. It’s possible to achieve similar results using other Windows versions of PowerPoint, but please be aware that the exact steps will vary.

Hyperlinking Text

  1. Select the text you want to hyperlink. Be sure to select the text itself, not just the box around the text.
  2. Right click, and select “Hyperlink…” from the menu.
HyperlinkingText_1.gif
  1. In the “Insert Hyperlink” dialog box, choose “Place in This Document” from the left menu.
  2. Click on the screen you want the hyperlink to lead to. Click OK.
HyperlinkingText_2.gif
  1. Voila! The text is now hyperlinked. View the PowerPoint as a slideshow to see it in action.
HyperlinkingText_3.gif

Hint: PowerPoint automatically applies a style to text links, but only if you apply the hyperlink to the text itself, not the box around the text. You’ll probably want to change the default sea-foam green color. Here’s how:

  1. Open the “Slide Design” panel from the Format menu

  2. Click on “Color Schemes”

  3. Click on the “Edit Color Schemes” option, which appears at the bottom of the screen.

Two settings control the color of links: The “Accent and hyperlink” color (for active links) and the “Accented and followed hyperlink” color (for visited links).

Creating Buttons and Hyperlinked Images

Follow the same basic process to create buttons and images that link to other screens.

  1. Right-click on the image or button. (I use a simple rectangle to represent a button.)
CreatingButtons_1.gif
  1. Choose “Hyperlink…” and select the target screen following steps 3 and 4 above.
    Hint: Try giving hyperlinked buttons a different color so you (and reviewers) can tell which ones are active in the prototype.
CreatingButtons_2.gif

Simulating the Back Button

PowerPoint has a “back” control, but it steps back to the previous slide in the presentation. With hyperlinks, this may not be the slide the user just viewed.
If you want a back button that lets the user get back to the screen he came from, you’ll need to build it yourself. Here’s how:

  1. Right-click on the item you want to use as a back button.
  2. This time, instead of clicking “Hyperlink,” choose “Action Settings…”
BackButton_1.gif
  1. In the “Action Settings” dialog box, choose the “Hyperlink to:” radio button.
  2. Select “Last Slide Viewed” from the list.
BackButton_2.gif
  1. That’s it! Now, when viewed in slideshow mode, this link will take the user back to the screen he just viewed.
BackButton_3.gif

Hint: Even without a back button, you can go back in slideshow mode by right-clicking anywhere on a slide and selecting “Last Viewed.” However, keep in mind that other people who click through your prototype might not know this.

Advanced Interactivity

PowerPoint can go beyond basic hyperlinks and simulate dynamic behavior, such as mouseover effects for a Rich Internet Application.

Creating Mouseover Effects

  1. Start with two slides: one “before” the mouseover effect and one “after.”
Mouseover_1.gif
  1. On the “before” slide, right-click on the item that will trigger the mouseover effect, and select “Action Settings…”
Mouseover_2.gif
  1. In the Action Settings dialog, click on the “Mouse Over” tab.
  2. Select the “Hyperlink to” radio button.
  3. Choose “Slide…” from the drop-down menu.
Mouseover_3.gif
  1. second dialog box will let you select the “After” slide.
Mouseover_4.gif

Now, in slide show view, mousing over the item you selected will switch to the target slide: the one that shows the “after” mouseover effect.

Hint: There’s no “mouse out” effect in PowerPoint. The best way I’ve found to simulate it is a bit clunky, but it gets the job done:

  1. On the “After” slide, draw some boxes around the item you want to apply the mouse-out effect to.
  2. Apply a mouseover action to the boxes around the object. (For example, if you want to return to the previous slide when you mouse off an item, give the boxes around the item a mouseover effect that returns to the previous slide.)

  3. Make the surrounding boxes transparent.

Mouseover behaviors can get out of control quickly in PowerPoint. This is partly because creating the mouse-out behavior is awkward, and partly because you need to create “after” screens for each individual mouseover effect. PowerPoint can help you try out a mouseover behavior (e.g., wire up a single example), but for prototypes with lots of dynamic effects—or many instances of the same effect—you’re probably better off with another tool.

Other Tips & Tricks

Use slide masters for persistent navigation

If your mockup uses a persistent navigation framework (tabs, left navigation items, etc.), create the navigation elements in a slide master, and apply hyperlinks that lead from the master to individual screens. This way, each slide you create will already have the navigation built in. If you need to make changes, edit the master and the changes will automatically apply throughout the prototype.

Disable standard slideshow controls

Even with interactive elements in place, PowerPoint continues to work like a slideshow: clicking a slide advances to the next one. This can be disorienting for people using your prototype. When they click on something you didn’t make interactive (which—trust me—they will), the slideshow will advance to something that doesn’t make sense.

To avoid this confusion, I suggest turning off the slideshow behavior. Your hyperlinks will still work, but clicking outside them won’t advance the slideshow.

  1. Select “Slide Transition…” in the “Slide Show” menu.
  2. In the “Advance slide” section, remove the checkmark next to “On mouse click.”
  3. Click the “Apply to All Slides” button.
DisableSlideshow_1.gif

Note: In PowerPoint 2007 for Windows Vista, this feature is under the “Action” item on the Insert ribbon.

Conclusion

It’s possible to take the interactivity a step further with the Control Toolbox and ActiveX controls in PowerPoint, but I find that the techniques outlined here are all I need for early-stage prototypes. They help me test-drive an interactive design, get feedback, and make improvements early in the process.

Of course, PowerPoint isn’t right for every project. Here are some trade-offs to keep in mind if you’re deciding whether PowerPoint is a good fit for what you’re doing:

  • Sample interactions vs. all interactions. PowerPoint works well for creating a skeleton of a site or application and for testing individual interactions. But since it’s not especially object-oriented, it can be awkward to apply the same basic interaction to multiple things. For example, imagine a list where each item leads to a separate details screen. You can do this in PowerPoint, but each individual page and each individual link need to be created manually. It’s a lot of work, you wind up with a huge file, and God help you if you need to modify anything. Keep PowerPoint in mind for sample interactions, but if you’re looking to build a complete prototype where everything is truly functional, keep looking.
  • Low-fidelity vs. high-fidelity. PowerPoint is great for testing interactivity, but it won’t give you a realistic sense of what any one screen will really look like. You’re not going to get a sense of exact layout from PowerPoint. Also, remember that PowerPoint screens don’t scroll, so if you’re designing for the Web, your mockups won’t necessarily get a full-size picture of any one screen.

Overall, PowerPoint can be a blessing for interaction designers who want to create interactive prototypes quickly and easily. Interactive PowerPoint mockups can give a flavor for how a site or application will feel when you move through it—which is what interaction design is all about.