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.