Microsoft Design prototyping with PowerPoint

PowerPoint prototypingWhat does Windows, Windows Live, Internet Explorer, Home Server and Expression Blend all have in common? Believe it or not, PowerPoint played a role in the design process. The productivity application where you and I might just make slideshows is also becoming a popular prototyping tool inside Microsoft.

At the “Expression around the clock” event in Seoul, Manuel Clement gave a talk about wireframe prototyping with Office PowerPoint 2007. Manuel is a lead of XDR (Experience, Design & Research) at Microsoft Design – the group responsible for design of Windows (7) and Windows Live. Simply put, XDR is taking over where MSX, the former Windows design team, left off. Thus, you bet I’ll be watching them very closely.

Prototyping is the process in user experience design where you want to build a quick mockup of the interaction process that may compromise perfection but not the interaction to make decisions and test usability. Jensen Harris from the Office team have previously touched on the idea of prototyping with PowerPoint, but didn’t quite go into the details. Probably because he was stuck in a paradox – prototyping PowerPoint 2007 in the PowerPoint 2007 he was designing.

PowerPoint prototyping Windows Live SkyDrive
A prototype of Windows Live SkyDrive built in PowerPoint

The advantage PowerPoint has over other popular prototyping tools such as Photoshop and Visio is the ability to allow anyone, even non-designers, to make quick and easy modifications to the design. Because there are already simple effects and animations built-in, there is no code to waste and changes can be updated in real-time with zero effort. For example, a simple reflection effect does not need to be re-rendered if the design changes.

To use PowerPoint as a prototyping tool, you will need to set up a few things.

  • Turn off the “Advance Slide – On Mouse Click” option under the “Animation” tab to prevent PowerPoint from advancing the slide when you click the mouse button.
  • Insert hyperlinks on your buttons to go to specific slides to mimic the effect of changing screen content or displaying windows.
  • Build a toolkit of commonly used interface elements such as window frames, buttons, controls and mouse cursors to make it easy to copy and paste across many screens.

You can watch the 26 minute long recording of the presentation to get a better sense of what can be achieved. Manuel even does a live demonstration of building a prototype of an online photo management tool near the end of the presentation.

I’m definitely looking forward to use PowerPoint in the future for my prototypes. I’ve built a few prototypes recently with Visio and the like and they haven’t been as ideal as I would have liked, so I definitely see the advantage of switching to PowerPoint. Hey if it’s good enough for Microsoft it’s good enough for me.

22 insightful thoughts

  1. I too was doing some quick and dirty UI mockups the other day in PowerPoint 2007. Yes, its a very convenient solution, but still lacks that level of sophistication and detail you are able to get out of Photoshop and Illustrator. With Photoshop, I am able to achieve more control over my prototypes, the ability seamlessly alter and move layers while adding effects is more powerful and productive in Photoshop.

    But not everyone can afford Photoshop or Expression, for that PowerPoint remains a good stop gap. Especially 2007 with with its powerful drawing tools that offer new functionality through the contextual tabs. You call PPT 2007 the poor mans Adobe Director, LOL!

  2. lol PowerPoint, has it seen any significant innovations since the latest 3-4 versions? I’d take Keynote any day because it’s 3D.

  3. I used to create in entire games in PowerPoint (when I was about eight), then I used to prototype games that I planned to make in GameMaker, then I learnt VB6 but still did all graphical stuff through PowerPoint, so I guess I’ve always prototyped in PowerPoint. Although now I tend to prefer pencils and paper to design my applications – saves having to Alt+Tab all the time… or maybe I should just get another screen.

  4. As a 15 year old in England, I’m doing my IT exams in which I rely entirely on PowerPoint for prototyping. macosx, I’ve seen many changes in the last few versions and with a bit of thinking you can make PowerPoint to render 3D objects. To make the PowerPoint totally convincing as a program, I use the “Browse at Kiosk” mode found in “Set Up show”. This removes the controls in the bottom-left corner and stops the scroll wheel advancing slides.

  5. @macosx: Please take a look at PowerPoint 2007. The Ribbon is a neat new interface (and I agree with tino, that I too love scrolling between tabs with the mouse wheel), and SmartArt is an amazing way to spiff up presentations.

  6. At the risk of unveiling my ignorance I need to ask a question:

    I’ve downloaded the toolkit and extracted the files. Now what? I do not understand how I can now make these samples show up in PowerPoint. I do have PowerPoint 2007. Help!

  7. Rohan – good luck with your exams. To turn off the bottom-left corner controls in normal show mode, uncheck the ‘Show popup menu button’ option in Tools > Options > View.

Leave a Reply