Application Prototyping With PowerPoint

It is all too easy to fall into the trap of using prototyped or demo code as the foundation for a production system. I've done it a few too many times myself. Joel writes about how it happened with Fogbugz. Basically, you need to show something to your client, your manager, your VC, whatever. Maybe you're getting near the end of Analysis and Design. Maybe you need to work through functionality with a user group. Bottom line is, you've got to get your ideas off of the paper napkins and whiteboards, and onto a screen.

You're in a meeting room, and you've got the projector plugged into your laptop, and you're walking everybody through your application, before you've really begun to build it. This is the dog and pony show. Most of what you're showing probably doesn't work, and you've got to step carefully around code that is not ready for prime time yet.

And because you've invested more than a little time into building something demonstrable, you figure you might as well just keep going. Add a little bit more here and there and you're good to go.

Of course, it almost never works that way. The slappy stuff you throw together "just to make it work" will stay there. Or the simple architecture you built for a demo doesn't scale well, only you don't realize it until it's too late. There are far too many problems with allowing your demo code to evolve.

But what else can you do? You're painted into a corner. You simplyÿmust present something to your end users, or to your project manager, to make sure you're all on the same page.

And what are we talking about here, anyway? Coding or presenting? Everybody involved knows that a demo doesn't need to be flawless, and is probably more smoke and mirrors than anything else. The important thing is the ideas you're trying to convey. If you're gonna do a presentation, if you're visually sharing ideas, why not use PowerPoint? It's a pretty effective tool for just that purpose. And you might be surprised at what you can do with it.

Here are a few simple guidelines for creating knock-your-socks off PowerPoint prototypes (all the more impressive if you're building a web-based application):

Take a screen shot (PrtScn) of your browser, maximized. Don't know if this works in Netscape, but if you type "about:blank" as your URL, you'll get a nice, clean, empty page.

Within PowerPoint, view the Slide Master. Location of this varies by version, but it'll most likely be under the "View" menu.

Paste the picture of your browser onto the master. Resize it so that it's the same size as the slide.

If your browser window is already blank, you're fine. If not, you'll need to draw a white box over the content, so it looks like a blank window.

More fine tuning, but it's worth it:

Create a text box with the name of the URL you want for your prototype (http://www.foobar.com). Make sure the background is white, and font size is appropriately small. Move this over the actual URL in your screen shot.
Do the same thing with the page title, with whatever background color and font style.

For extreme fine tuning, replace the static picture of the system clock with the correct time by drawing a text box, then selecting "Insert/Date and Time?" Make sure your background matches that of your taskbar, resize fonts, etc., and you're good to go.

If you're having a tough time lining things up, you can hold down the ALT key while you're moving the text boxes, which allows them to move without snapping to a grid. This works while resizing them, too.

When you're done with the Slide Master, choose "View/Normal," or "Close Master View," whichever is easiest to find.

Here's the big secret: for every action you want to demo, you will need a different slide. For example, you might want to show somebody making a selection from a combo box. Here's how many different slides you'd want:

Your application, with either nothing in the combo box, or some default text
Click on the down arrow to expand a list of options within the box.
Move your mouse to the item you want to click on (it'll be selected)
Click on the selected item, which will show your app again, with the new selection in the combo box.

You might be thinking this is going to take a ton of work. You're probably right about doing combo boxes. But believe me, it is much easier to copy and paste a bunch of PowerPoint slides than it is to build an entire application from scratch. It's also much easier to make changes within PowerPoint. Patience, grasshopper. We're starting with the most challenging element.
Here's how you build the combo box slides. We'll link 'em together next.
1. Draw a text box. Type something into it. Change fonts, etc. Draw a square. Put it next to the rectangle. Fill it with gray. Draw a triangle. Fill it with black. Flip the triangle so it's pointing down. Move it into the middle of the box. Copy and paste this slide (using the Slide Sorter view).
2. On the second slide, create a text box, roughly the same width as your combo box. Make sure everything is left-aligned. Enter a bunch of words you want for your combo box. Move the text box underneath the rectangle, so it looks like you've made a selection. Copy and paste this slide.
3. On the third slide, create yet another text box (or copy one of the others). Type the word that you'll want to demo somebody selecting. Change the font color to white, background color to black. Move this text box over the other word in your list. Use the alt-key to nudge and resize appropriately.
4. Copy and paste the first slide again. On the fourth slide, change the text in the rectangle to match the to-be-selected item.
Now that you've built your script, you've only got a couple more steps to make your slides interact. All of this hinges on a not-so-well known feature of PowerPoint that allows you to associate hyperlinks to objects:
1. Right-click on the triangle in slide 1, and choose "Hyperlink?" There is a category for Place In This Document." You can either pick "slide 2," or "next slide," depending on whether you want a relative or absolute reference.
2. The second slide is a bit trickier, since you want the movement of your mouse to indicate a selection. Right-click on the text box (with your list of words) and choose "Action Settings?" Here you can associate a hyperlink with a Mouse Over. When you move your mouse over this box, it will appear to "select" your item, but it's really moving to the next slide.
3. Third slide is the same as the first, except your hyperlink goes onto the "selected" text box, either to "slide 4" or "next slide."
One last step and you're finished. You want to make sure that your PowerPoint presentation navigates when you want it to. Normally a click of your mouse advances to the next slide. You don't want that to happen.
So, under the "Slide Show" menu, you'll see an option for "Set Up Show?" Choose "Browsed at kiosk." By doing this, the only way to navigate through the slide show is to click on the hyperlinks you've created. Another cool side effect of this is that you can actually let clients browse the "app" by themselves.
When you run the slide show, you should be able to "select" something from your combo box.
Now, build the rest of your application. Create navigation tabs. Create popup windows by combining boxes and rectangles and a capital "X." Change layouts or color schemes or content without touching a lick of code.

There are numerous benefits of using PowerPoint as a prototyping tool. First and foremost, you're not tempted to turn it into a production application, since you never wrote any code in the first place. You're also able to build several prototypes at a fraction of the time and cost it would take to code multiple interfaces. You can have several meetings, with several different users or groups of users, gathering and applying feedback. Everybody will feel as though they're helping to create the application. You're able to make changes to your interface without modifying a single line of code. What you've done is create a wonderful blueprint for your development team. Everybody knows exactly what the app is supposed to look like, exactly where links are supposed to lead. It'll print nicely. You can make notes on it. When you're done, it'll be the foundation for your design document. Tape all the screen shots to a wall. The list goes on and on.

In the end, you'll have more time for pure development, because you've spent less time trying to get your prototype to work.

If you've done something like this before, let me know of the other benefits you've received. If you haven't, give it a try, and send me an e-mail, letting me know how it works.