Friday, February 23, 2007

PowerPoint Prototyping: an Introduction

I've had several occasions recently to develop quick prototypes of new display designs, and some small, focused usability evaluations of design options in cases where analysis wasn't able to resolve all of the outstanding questions or issues. I've found PowerPoint to be ideal for this, for several reasons:

- Its familiar graphics front end make developing the prototype graphics quick and easy. Although PowerPoint doesn't have as much graphic power as, say, Photoshop, the Format Autoshape dialog (right click on an object) provides more than enough control to create graphics that are precise enough for interface prototyping.

- Its hyperlink features make it possible to build what are essentially "screen shots", or slides of what the interface would look like in each possible state, and simulate navigating between them when the user selects the available options on each slide. The hyperlink features (accessed by the Action Settings dialog) include both mouse click events (go to the link when you click on the object) and mouse over events (go to the link when you simply move the cursor over the object). This makes it possible to simulate such things as highlighting individual options in drop-down menus when you move the cursor through the menu.

- Its Visual Basic for Applications (VBA) back end makes it possible to build in much more complex behaviors than would be supported just through hyperlinks. For example, a VBA subroutine triggered by an object can cause another object to change in some way. I'll show an example of this below.

- Furthermore, VBA can be used to record user actions and send them to Excel. In this way, a prototype can be turned into a desktop usability test, with user selections, what slide they were looking at, relevant prototype status variables, and time tags all captured automatically in Excel for easy analysis. This makes it possible to quickly develop a prototype that can be used to automatically capture user performance data such as how much time it took a user to make a decision or complete a task, and what errors or choices they made along the way.

- Because most people in business already have PowerPoint and Excel, designers and researchers can develop prototypes, usability tests, and experiments with tools they already own instead of having to buy special-purpose products. Furthermore, in some cases, the files for a study can be sent to the user/subject and run remotely on their own machines. This makes running a small study much more convenient than it otherwise might be.

Depending on the complexity of the interface being prototyped, the actual prototype can be developed in anything from a day to a couple of weeks, and an entire usability study can be accomplished in a few days or weeks. To illustrate this, I've built a small prototype of a clothes dryer control panel. You can download it from here. After downloading the file, open it and enable macros. Select slideshow mode, and select a cycle. You can select a new cycle at any time, and adjust the dryness level and overall cycle time. You can also select START and watch as the panel goes through an abbreviated dry cycle. When the cycle is done, or at any other time, select PAUSE/CANCEL to return to the starting condition. For reference, this prototype took me about a day to build.

Here's how the demo works: the controls and displays that do not change behaviors from slide to slide are all built on the master slide so they're always available. The time window contains a variable that is set by the cycle buttons and adjusted by the time adjustment buttons and the dryness level selection. By implementing these controls and displays on the master slide, the settings are stable from slide to slide. The cycle buttons themselves are implemented in the various slides to make it easy to change the embedded LED in each button with a new cycle selection. Although this could have been done in code, this was one case where simply drawing the graphic changes was easier than writing the code, and it's a nice illustration of how PowerPoint gives you several ways of doing something.

What's the point of all this? My major point is that you may already own all the tools you need to create truly rapid UI prototypes that can also serve as platforms for usability tests with objective human performance data. And you don't need to be a VBA expert to get started. You can look at the code in this prototype by returning to the regular view (exit the slide show) and selecting TOOLS, MACROS, VISUAL BASIC EDITOR. The VBA help files (select HELP and help contents, and navigate to PowerPoint Visual Basic reference) contain all the explanations and code examples you may ever need to build your own prototypes.

No comments: