Prototyping with PowerPoint

I would like to make a case for building software application prototypes with PowerPoint and drive the point home with a small example. Included at the bottom of this page is an image of a screen built with PowerPoint and the actual presentation itself. Half of the battle in software is finding the right tool for the job and for screen comps, PowerPoint certainly seems like an unusual choice.. I’ve seen a lot of different tools used for this and they all have their pros and cons. Most of the good Information Architects I work with use something like Visio. A handful of others build HTML screens using a variety of tools like FrontPage (barf) or DreamWeaver.

Common Problems using HTML WYSIWYG for prototyping

  • Very few people in an organization will have licenses for these tools so the number of people that can make changes is limited
  • These tools are not free so the time to get these tools depends on the purchasing department
  • All of these tools have a learning curve. Visio is pretty easy but it can be a real pain if you are not familiar with it. It can take a while to bring people up to speed on a new tool.
  • Almost all of these tools suffer from versioning issues. I can’t count the number of times someone sent me a Visio file I couldn’t read because I had an older version.
  • Distribution of the results is difficult. Most people using Visio export using to PDF which is nice. DreamWeaver and other HTML tools create large sets of files which are difficult to e-mail or check into a repository.
  • Many of these tools are slow…especially WYSIWY HTML tools like DreamWeaver. As soon as you want to paint outside the lines a bit, things get really difficult. Visio is better in this respect as it’s easy to copy and paste images and other elements into the prototype.
  • Corporate templates that have common elements across the organization are more difficult to build and maintain with HTML tools or Visio

Benefits of using PowerPoint for Prototyping…

  • Nearly everyone in the world has PowerPoint.
  • Nearly everyone in the world knows how to use PowerPoint.
  • PowerPoint has a stable file format and versioning issues are rare.
  • Distribution of a PowerPoint deck is simple. It’s one file that can be e-mailed or easily checked into a repository and versioned.
  • Developing prototypes is fast in PowerPoint. I can build a complex page in a couple of hours.
  • As you’ll see, it’s very easy to create templates for your organization that can help build standards around look and feel and get designers up and running quickly.

The following image is an example of a prototype that I built using PowerPoint. You’ll notice that it looks exactly like a web page. In fact, it’s nearly impossible to tell the difference. I was able to create this page in about an hour and it looks great. I modeled this from an existing page that exists on the IBM web site so you could compare. I used to work with IBM and always thought they did a good job with web site standards across a global company. If you want to take a peek at the actual web page, you can visit it here. If you look at the PowerPoint I’ve included you should take note of a couple of things.

Key takeaways…

  • The master slide contains the header of the web site that should be common across all pages. This gives the information architect a good head start on the slides and creates a standard for the site.
  • The last few pages in the deck contain common form controls and elements that can easily be copied and pasted into each page. Form controls, tabs, navigation items, content blocks, portal headers, and other common items should be included.
  • While I didn’t include any hyperlinked buttons, it is easy in PowerPoint to support clicking buttons and navigating to other slides. Simply right click on an object and choose hyperlink. In this example, it would be nice to actually hyperlink to existing sites making the prototype super functional.
  • Nearly everything on the page is editable. You can easily change colors, fonts, add notes, etc.
  • You can drag and drop images from web pages and other applications onto PowerPoint. This is much more painful in other applications.

I hope you have found this article useful and take a stab at building your own application prototypes or screen comps using PowerPoint.