Prototyping With PowerPoint

A couple of weeks ago when I talked about
The
Feature Bob Invented
, I mentioned that we use PowerPoint as an easy way to
prototype UI, especially in the early stages of design. A number of people have asked me
for more details, and so today I thought I'd go through it step-by-step.

We use PowerPoint as kind of a better version of
paper prototypes.
This technique has several advantages: prototypes can be made to feel somewhat interactive, because the content
is electronic it can be modified more easily than paper, and (best of all) the
usability participant uses the mouse and is on the computer, so it feels natural to them.

In my opinion, paper prototypes always suffer a little bit because of the
weirdness of asking people to pretend paper is the monitor and a pencil is the
mouse. (Although I guess with the advent of Tablet PC's, this is becoming less
weird...)

Note: The following technique will only work for PowerPoint 2002 and above.
Previous versions did not include sufficient support for transparent AutoShapes.

The way we normally set up PowerPoint prototypes is this:

  • Put screenshots of all of the different UI states you want to test onto
    different slides.

  • If your UI is mostly popups on top of a static frame, you might consider
    putting that static frame into the slide master background; that way, you
    only need to put the UI which changes on each slide. (Click View,
    Master, Slide Master to access the slide masters.)

  • Next, you want to make sure PowerPoint doesn't advance your slide show
    to the next slide whenever the user clicks. This is so you can simulate
    interactive click behavior within the prototype. Click Slide Transition on
    the Slide Show menu, turn off the setting to Advance Slide On Mouse Click,
    and then click the Apply All button to apply the setting to all slides.

Now, that your overall prototype is set up, it's time to add interactivity. Let's
say you have a button, and when
someone clicks on that button, you want it to simulate bringing up a menu. Easy
enough, assuming you have added slides containing pictures of both states
(pre-menu and while the menu is up.)

  • Using the Drawing toolbar at the bottom of the screen, draw a box over
    the hit target for the button. (You can use any other AutoShape you want, it
    doesn't have to be a rectangle.)

  • Now, right-click the shape and click Format AutoShape on the context
    menu.

  • On the Colors and Lines tab, set the Transparency to 1% and remove the
    border entirely. This will make the shape virtually invisible, yet will
    still allow you to receive mouse clicks on it. (If you make it entirely
    transparent, PowerPoint doesn't register mouse clicks on the shape.)

  • Now, right-click the shape again, and click Action Settings on the
    context menu. This is where you determine what should happen when the button
    is clicked.

  • Normally, I choose "Hyperlink to:" in the dialog and then choose to which
    slide it should navigate. You could also be fancier and have an external
    program launch, a sound played, or run a custom macro. If you wanted a snazzy
    rollover effect, the Mouse Over tab in this dialog would be the place to do
    that.

  • Repeat this process for each slide to which you want to add interactive
    behavior.

You're good to go! We've found that this technique has yielded some very
useful prototypes with a minimum amount of work.