Chapter 7: PowerPoint and Keynote

(Open in Flickr)

Figure 7.1 (Open in Flickr)

Example of a prototype dashboard created with PowerPoint 2007. http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

Microsoft PowerPoint and Apple Keynote are more than just tools for making great presentations. While not as robust as Axure, Flash, or HTML, PowerPoint and Keynote have become popular prototyping tools.

How popular? Well, over 40 percent of the industry uses them for some form of proto-typing. In fact, PowerPoint played a pivotal role in the design process of Windows 7, Windows Live, Internet Explorer, and Expression Blend at Microsoft.[1]

PowerPoint is just about as omnipresent as Microsoft Word. It comes with Microsoft Office, which is on just about every working professional’s computer on the planet. For those of us who choose not to use Microsoft Office, but instead opt for Apple iWork, there’s Keynote.

Have you ever had a client or a designer give you a set of Photoshop files and ask you to create a prototype? You could use the old slap-and-map method—for example, stitch them together with Dreamweaver and create image maps. Or you could use PowerPoint or Keynote.

In this chapter, we’re going to explore using PowerPoint and Keynote to create narrative and interactive prototypes. I’ll also discuss techniques you can use to create AJAX simulations.

Strengths

Here are some of the strengths of these programs for prototyping:

• Learning curve. PowerPoint and Keynote are perfect for the technically challenged. The applications employ a drag-and-drop model and don’t require any coding to create interactivity.
• Familiarity and presence. Probably the biggest advantage of PowerPoint is its sheer presence—it’s everywhere. Just about every computer on the planet, Mac or Windows, has a copy of PowerPoint or Keynote installed on it. Chances are, you already have the application and so does your intended audience. If your audience doesn’t have PowerPoint or Keynote, both programs can export to PDF or HTML.
• Master slides. You can use master slides to create templates and share common elements across multiple slides. Master slides also increase productivity and ensure consistency.
• Copy-and-paste. You can copy individual elements or entire screens quickly and easily.
• Rearrange with drag-and-drop. Rearranging the order of your screens is as simple as dragging-and-dropping. The light table mode displays slides in a grid, making it easy to rearrange entire sections of your prototype.
• Export to HTML or PDF. Want to run your prototype in a Web browser? Just export it as HTML. Or export it as a PDF and use Adobe Acrobat to create additional interactivity beyond the capabilities of PowerPoint or Keynote.

Weaknesses

There are a few weaknesses for prototyping with these tools:

• Limited drawing tools. The drawing tools in PowerPoint and Keynote are rudimentary. If you want to create high-fidelity designs, you’re going to be better off doing that in a program like Illustrator, Fireworks, or Photoshop.
• Limited interactivity. Interactivity is limited to hyperlinks. Hyperlinks can only be used to link to other screens within the prototype or URLs.
• Nonreusable source code. Neither tool creates reusable source code. Most of the time this isn’t an issue because prototypes are typically not intended for production. However, in the case where the goal is to create reusable source code, you should consider something else.

In an effort to reduce redundancy, for the rest of this chapter, I’m going to reference PowerPoint instead of PowerPoint and Keynote. You can assume that the technique I provide applies to both PowerPoint and Keynote, unless otherwise stated. In the event the same technique doesn’t apply, I’ll provide a separate Keynote reference.

Creating Narrative Prototypes with PowerPoint

Narrative prototypes are often used to get high-level feedback on things like the basic application flow, or to evaluate the visual aesthetics of a system.

I’ve used this method in the past to test linear systems, such as mobile or digital video recorders (DVRs). I’ve also used this method to perform A/B testing on multiple visual designs, which you can read more about in Chapter 12, “Testing Your Prototypes.”

Creating a narrative walkthrough or a linear prototype in PowerPoint is pretty straightforward. If you’ve created your screens in another visual design tool like Photoshop or Fireworks, you simply import the screens in the order you want to display them and that’s it. Just run the presentation and click through the slides.

There are no fancy methods, techniques, coding, or adjustments necessary. PowerPoint’s default settings are good enough to provide a narrative prototype of screens you designed in another application. You can download a sample prototyping kit for PowerPoint and Keynote at http://rosenfeldmedia.com/books/downloads/prototyping/chapter7.zip.

If, on the other hand, you want to use PowerPoint to create the prototype screens, then there are three basic steps:

Step 1: Set Up Your File

1. Start with a blank screen template by selecting File > New from the application menu.
2. Use Visio, Illustrator, or your favorite drawing program to create a generic window or use a screen grab from your Web browser.
3. Select a master slide and use the generic window as the background for that master.
4. Repeat the third step to create master slides for each of the different template screens you need.

Step 2: Apply a Background Image to a Master Slide in PowerPoint

1. With the master slide selected, right-click on the master slide and select Fill Effects and then Picture and select the picture.

Step 2 (Alternate): Apply a Background Image to a Master Slide in Keynote

1. With the master slide selected, select the Appearance option from the Slide Inspector and then select Background and Image Fill, as shown in Figure 7.2.

Figure 7.2 (Open in Flickr)

Use a background image on a master slide in Keynote.

Step 3: Create a Set of Common GUI Widgets

Visio, OmniGraffle, Fireworks, and Illustrator all have GUI libraries available, which you can find on the book site. One of the easiest ways to create a common GUI library for PowerPoint is to copy and paste them from one of these existing libraries.

While you can use the basic shape tools in PowerPoint to create GUI widgets, I wouldn’t recommend it because they tend to be a bit rudimentary and sloppy in my opinion. Additionally, since there’s probably a library readily available for your illustration tool of choice, there’s very little reason to create your own.

If you’re looking for a set of GUI widgets already created for PowerPoint, you can use the PowerPoint Prototyping Toolkit, which is available at http://www.istartedsomething.com/. The PowerPoint prototyping kit is a collection of application windows, dialog windows, and common GUI controls based on Windows Vista (see Figure 7.3).

Tip GUI Master

Create a master slide and use it as your GUI widget palette. Whenever you need a GUI widget, you can copy it from your GUI palette master slide.

Figure 7.3 (Open in Flickr)

PowerPoint prototyping toolkit.

Creating Interactive Prototypes with PowerPoint

PowerPoint is probably one of the easiest tools for creating basic interactivity. If you can click a mouse, you can create interactive PowerPoint prototypes. You just need to add a few things to your basic narrative prototype:

• Create your keyframes or beginning-and-end states.
• Give your slides meaningful names.
• Add hyperlinks to your buttons.

Step 1: Create Your Keyframes

Keyframes represent the main starting and stopping points in your prototype simulation. For a search-results scenario, you might have a few keyframes: the initial search input screen, the search results display screen, and the individual screen a participant would come to if he/she selected one of the search result items.

When using PowerPoint, keep each keyframe on its own slide. This keeps the prototype simple and makes the screens or states easier to link to. If you forget a few keyframes, don’t sweat it. You can always add them later and reorder them using drag-and-drop.

Step 2: Disable Slide on Mouse Click (PowerPoint Only)

1. From the Slide Show menu, select Slide Transition.
2. The Advance Slide on Mouse Click is enabled by default, as shown in Figure 7.4. Unselect this option and apply to all.

Figure 7.4 (Open in Flickr)

Disable Advance Slide on Mouse Click in PowerPoint.

A quick warning about hyperlinks in PowerPoint. PowerPoint doesn’t support hyperlinks on 100 percent transparent objects. Why does this matter? Well, one common method is to use PowerPoint to create interactivity between a series of imported images like visual design comps or screen captures.

Let’s take the example of prototyping the Slide Transition screen shown in Figure 7.4. There are a number of actions on this screen, including Cancel, Apply to All, and Apply. Rather than create new buttons for each of these, I’m probably going to just draw a shape around each of the three buttons, make it transparent, and apply an action or hyperlink to go to another screen.

If the shape is 100 percent transparent, PowerPoint won’t let you attach a hyperlink to it. The workaround is to give the object an opacity of one percent, and the problem is solved.

Tip One Percent

If you’re using PowerPoint, make sure that your button objects have an opacity of at least one percent in order to hyperlink them.

Step 3: Add Interaction and Hyperlinks to Your Buttons (PowerPoint)

1. To add interaction, select the button and right-click. Then select Action Settings from the menu, as shown in Figure 7.5.
2. Select the Hyperlink To option and pick either Slide or URL, as shown in Figure 7.6.

Tip Name It

Give your slides meaningful names. It’s much easier to link to the correct slide if it’s named Product Details than Slide 41.

Figure 7.5 (Open in Flickr)

Right-click the menu to select hyperlink in PowerPoint.

Figure 7.6 (Open in Flickr)

Add interaction on mouse click or mouseover in PowerPoint.

Step 3: Add Interaction and Hyperlinks to Your Buttons (Keynote)

1. Select the Hyperlink Panel in the Inspector.
2. Select the Enable as Hyperlink option and pick either the Slide or URL option (see Figure 7.7).

After you’ve enabled the button as a hyperlink, you should see a visual cue like the arrow in the blue circle in Figure 7.8.

Figure 7.7 (Open in Flickr)

Add interactivity to Keynote slides.

Figure 7.8 (Open in Flickr)

Example of button with interactivity or hyperlink enabled.

That’s it. Now you have an interactive prototype. See how easy that is?

AJAX Effects in PowerPoint

The built-in transition effects in PowerPoint make simulating a number of common AJAX effects easy. Let’s look at the JavaScript fade technique as an example. This technique is used to highlight the background of an object on the screen for a few quick seconds. After a few seconds, the background color fades out, and the highlight is removed.

This is probably the easiest effect to simulate in PowerPoint.

1. Create two keyframe slides—one that shows the highlight (see Figure 7.9) and one with the highlight removed (see Figure 7.10).
2. Start with the slide that shows the highlight and select the Transition option; then select Dissolve and set the transition to start on the mouse click. Set the delay to one second.

The keyframe with the highlight will fade away and reveal the screen without the highlight, simulating the JavaScript fade technique.

Figure 7.9 (Open in Flickr)

Keyframe with highlight for JavaScript fade technique.

Figure 7.10 (Open in Flickr)

Keyframe without highlight for JavaScript fade technique.

You can also apply action effects like Move, Opacity, or Scale to objects in PowerPoint. I’ve used these effects in the past to simulate other AJAX effects to show and hide objects on the screen.

So even if you can’t program AJAX transitions, you can fake them with PowerPoint.

Summary

Okay, here’s a quick recap on reasons you might want to consider using PowerPoint or Keynote next time you’re prototyping:

• You probably already have it installed.
• The learning curve is pretty low.
• Master slides are great for consistency and efficiency.
• You can export to a clickable PDF or HTML prototype.

  [1]http://www.istartedsomething.com/20071014/microsoft-prototpying-powerpoint/ Please note that the word “prototyping” must be misspelled as above in order to work.