A couple of weeks ago when I talked about
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
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
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
- 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
- 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
- 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
- Repeat this process for each slide to which you want to add interactive
You’re good to go! We’ve found that this technique has yielded some very
useful prototypes with a minimum amount of work.