Comments on Interactive Prototypes with PowerPoint

Brendan Hamley — Wed, 19 Sep 2007 12:12:31 GMT

Good stuff and as Bo indicates, really well thought out and put together.

Powerpoint is indeed a good prototype platform (though fiddly at times). It’s also an neat tool to help content producers quickly see their copy and content in context. A flat site template that allows for inclusion of proposed content can quickly show where readability or too much text can be an issue. Asking content owners to add the content/copy themselves helps them understand the constraints of available space and the context that it will appear within.

Finally, one note of caution about use of Powerpoint prototyping (particularly relating to highly polished designs). The The ubiquity of Powerpoint is a big plus but can lead to distribution beyond your intended audience. It’s crucial therefore to indicate that the design is ‘a prototype’ and state it’s specific purpose or you may find your Powerpoint can quite quickly become a full business specification or subject of extended debate.

Thanks.

Bo Lora — Wed, 12 Sep 2007 19:02:58 GMT

Oh yeah, another comment….

Maureen, I think your use of screenshots and step by step instructions is very thorough and makes the article a great resource for people wanting to explore more with PP.

Great job.

Bo Lora — Tue, 23 Oct 2007 20:49:42 GMT

I messed with PowerPoint for a couple of years. I believe that if you do different unrelated projects then powerpoint can be a great tool as described in this article. However, if you are tasked in a project that has a great degree of transactional/interactive design, like a customer service portal, then PowerPoint becomes extremely tedious.

I have found it much easier to invest the time in creating html templates in Dreamweaver and create prototypes on the fly. Having said that, it does take a certain level of skillset. Many IAs are not as comfortable operating in HTML and javascript to create rapid prototypes or have readily available resources to help them do so.

Maureen Kelly — Mon, 10 Sep 2007 23:26:00 GMT

Great question, Eric. The reason I draw several boxes for the mouseout behavior is, uh… well, it just never dawned on me to draw one. You’re right—it’s a much better technique! I’m having a bit of a forehead-slapping moment myself. Thanks!

Eric Reiss — Fri, 07 Sep 2007 07:32:25 GMT

Excellent article! I was wondering why you chose to draw several boxes for mouseout behavior instead of just one. Normally, we draw a single large rectangle under the area in question, give it a fill color temporarily, and move it down the layers until the button elements we need to see are visible. We then make the square transparent.

If you make this single transparent layer large enough, you can quickly make duplicate slides and swap out the individual mouseover elements as needed. Naturally, you need to change the target slide for the mouseover behavior of the transparent layer to reflect different actions. But this is much easier than drawing multiple boxes each time you need to create a mouseout routine.

Igor Jese — Tue, 23 Oct 2007 20:47:53 GMT

I have been watching Boxes and Arrows for long time and this is another great article!

I feel there is much more to “Low-fidelity vs. high-fidelity”, though. There is allways a good chance exact prototype in color looking “like the real thing” will create more problems than it will solve.

For articles and discussions on the same topic, you can check Henrik Olsen’s great site www.guuui.com

I’m author of a specialized tool for prototyping (www.MockupScreens.com) so I’m probably biased on this, but I have compiled a list of specialized tools at:
http://c2.com/cgi/wiki?GuiPrototypingTools

Santy S — Wed, 29 Aug 2007 21:29:06 GMT

I was pleasantly surprised to come across this article in Boxes and Arrows!
Joseph’s recommendations above are useful. And thanks to Maureen for publishing this article. I never thought that this was such an underutilized feature. I first discovered the interactive power point show back in grad school while tinkering with it for a class project- as I wanted something quick and dirty to demonstrate a tool in my CHI class. And incidentally now I am using it as a tool to do some quick usability tests at work.

I think it is a very useful tool to run quick and easy tests with users at any time in the design process. And it doesn’t take too much work to set it up either. Thanks for sharing it with everyone Maureen!

Joseph Seeley — Tue, 19 Feb 2008 00:51:37 GMT

I use PowerPoint prototypes often. Maureen and some commenters have described the main techniques. Here are a few tips I have found useful in my circumstances.

* Len mentions having a slide with all the controls and widgets, like a stencil or library. This saves a lot of time. I have a starter PowerPoint file with this slide in it, as well as the transition settings that Maureen mentions.

* Avoid the temptation of linking to Next and Previous slides, and go to named slides (as in Maureen’s examples). You’ll be grateful later when you insert additional slides to flesh out an interaction or show alternatives.

* I go to some lengths to avoid giving the prototype a polished visual design, because we have a graphic designer who gets paid to do that and is better at it than I am, and because I want the clients or users to see the prototype as a rough draft. Also, my prototypes are for exploring site architecture and task flow, which means font and color would just be distracting. (“Can we change this blue to something lighter?”) So, I work in grayscale, use a handwriting font, and highlight navigation tabs with crudely drawn semitransparent ovals. (Despite these efforts to make sure the prototype is seen as an early rough sketch, I still get comments like “I really like the way you highlight the tabs. Can we do that?”)

* I usually end up creating multiple slide masters. In a tabbed interface, one master per tab is typical. An interaction that takes place on a single page may require 4 or 5 slides to portray, and I find that having the common elements of those slides on their own master makes later adjustments easier.

* For remote usability testing, I sometimes put a brief description of the task on all of the relevant slides for easy reference. I like to use a callout box coming down from the upper right of the slide.

* I display the slide title and slide number at the bottom of each slide, in a very light gray. During remote usability testing or walkthroughs, this helps keep everyone on the same page.

David Shen — Mon, 13 Aug 2007 22:06:54 GMT

I love this. There should be more articles on how to use commonly available software for design purposes, especially if it speeds up the process. How many of us know Flash to whip up something that doesn’t require its complexity to express our ideas? What other programs have people used for design purposes? Logo design in MS Paint? HTML coding in WordPad?

Chris Collingridge — Fri, 10 Aug 2007 08:49:17 GMT

Both this article and the article on PDF are excellent for those of us who need to create simple prototypes that are easily distributable, and don’t always have a development resource to assist. The roll-over is a good tip, but a horrible solution! Thanks also to Tamlyn for the heads-up on OpenOffice…

Len Conte — Mon, 20 Aug 2007 15:37:53 GMT

Great article …I’ve used PowerPoint for mocking-up GUI’s and learned lots of good tricks I thought only available via VB …similar to VISIO stencils, I try to keep a a set of contols available for re-use in a separate slide e.g.checkboxes, radio buttons, tabs, tables etc…when I need higher fidelity I steal contro;s from the VISIO XP stencil….

Tamlyn Rhodes — Mon, 20 Aug 2007 15:37:46 GMT

This had never even crossed my mind! I’ve just spent the past few days drawing screens on bits of paper which is all very well until I have to change something or demonstrate some kind interactivity. I passed them on to the designer who did a good job but inevitably got some bits wrong. A powerpoint prototype would have been just the ticket and I’ll definitely be giving it a go soon. Thanks!

Incidentally this all works in OpenOffice Impress too.

Bill Hutchison — Mon, 20 Aug 2007 15:37:18 GMT

I found this excellent too – thank you. I’m not sure if you mentioned the fact that you can save the deck as a Powerpoint Show or .pps. This allows people who don’t have Powerpoint to view it. I tried with your example and the links all appeared to work.

Sherri Martin — Wed, 08 Aug 2007 02:22:46 GMT

Fantastic article! (and a bit of the slap in the forehead, I admit) I have used PowerPoint for web mock-ups and, separately, have used the hyperlink feature in presentations to link to sites I want to show, but I had no idea I could link to pages within PowerPoint itself. I will definitely put this tip to use. Thank you so much!

Terry Bleizeffer — Mon, 20 Aug 2007 15:37:30 GMT

Very good, practical advice. In particular, I’ve been trying to figure out how to change the default formatting for link text in PowerPoint for years without success. Drove me crazy. I usually resorted to creating a rectangular autoshape with no fill and no border, add the blue-underlined text, then make the box the hyperlink (as you say in the article). A pain in the, um, neck.

I also like using PowerPoint for prototyping. Another good technique is using a combination of PowerPoint and Visio. You can embed a Visio object into a PP chart (Insert -> Object -> Microsoft Visio Drawing), then choose a drawing type of Software -> Windows XP User Interface, which allows you to quickly create a mockup. Then for interactivity, I use “invisible” hyperlinks sitting on top of the Visio object. By invisible I mean a no-line, no-fill rectangle with a hyperlink to the appropriate slide. The downside is that if you update your mockup you have to remember to move the invisible hyperlink, but sometimes the advantage of being able to use the Visio drawing makes up for the hyperlink maintenance. And people don’t need Visio to view your PP charts.

Anyway, nice article. I use PP a lot and still learned some new tips. Thanks.