Prototyping with Pencil and Powerpoint

I found myself in the need to produce functional specifications for a module of a web application. The requirement was to build some fake screen shots to give the client a representation of how the software will look like.

In past projects I tried paper prototyping, with mixed results and visio diagrams.

This time I looked around to see if some other tool was available and I found Pencil. It's a Firefox 3 plugin that uses the Mozilla Gecko engine. I should say I was really delighted by the simplicity of the tool and the power it gives in building prototypes/wireframes. I was able to be productive in minutes and the results were really good.

You can draw UI shapes, align and resize them with ease and organize them in pages. Then you can batch export those pages as PNG images in a folder. All with just a few clicks.

After doing this I built some detailed spec about how those pages interacted one with each other in a Word document. I was putting every single atomic user interaction down, in numbered points, using the point numbers as anchor reference between points.
As I was doing this I thought it would be more effective if I could just make this really interactive. So it came to my mind I could simply use PowerPoint to achieve this.

It turned out as simple as this:
- I used a print screen of the web app that is going to host the new module, cleaned the body with Gimp and keep just the background color and header and footer.
- Put this image as the background for the PowerPoint slides.
- Insert each PNG image obtained from Pencil in single slides.
- Draw a transparent rectangle (no fill, you can make them transparent by default) on the areas where you want to enable the user to click, for example on a button of a Pencil generated png image.
- On this rectangle, right mouse click and choose "Action settings".
- On the "Action settings" pane you can choose the "Hyperlink to:" option and define the slide to send to upon clicking the rectangle. On the Mouse over tab check the Highligh mouse over option.
- You can also disable clicks on the slide to take viewer on the next slide by selecting 'Slideshow' menu, 'Slide transition' and then uncheck the option that says 'Advance on mouse click'. You can also add a smooth transition and apply on all slides,

This method is really basic and simple, but the results can be quite realistic.