When communicating new research ideas with others, it is extremely important to visualize what you want to achieve. Often, ideas are vague. They may seem exciting, but when you try to visualize them, all sort of issues will come out. So a quick and dirty prototyping tool will greatly help the ideation process, both for yourself and for communicating with others.

PowerPoint is such a tool.

I have search the web and gathered a collection of resources for how to make PowerPoint interaction diagrams. Link will be provided:

Below are some useful information about creating PPT interaction diagrams.

Interactive Prototypes with PowerPoint

by Maureen Kelly on 2007/08/06

http://www.boxesandarrows.com/view/interactive

Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it?

Sure, you could invest in a dedicated prototyping tool, but you can create surprisingly quick and effective prototypes with a software program that’s probably sitting on your hard drive right now. It’s PowerPoint—and no, I am not kidding.

I’ve met many designers who use PowerPoint for blocking out screens without ever discovering the interactive features for creating hyperlinks, buttons, and dynamic mouseover effects. Yes, PowerPoint can do all that. When I show people an interactive PowerPoint prototype, someone inevitably asks what I created it in. The reaction is always the same: “PowerPoint can do that?”

Overview

To see what PowerPoint can do, here’s a sample interactive prototype (note: SamplePrototype.ppt is included in the package) created in Microsoft Office PowerPoint 2003 for Windows. (Important: View the document in slideshow mode to see the interactivity. Links and orange buttons are clickable.)

Though there are other prototyping tools out there, here are the main reasons I lean toward PowerPoint:

  • It’s fast. You can try something, hate it, and try something else—all in a matter of minutes.
  • It’s low-fidelity. A PowerPoint mockup doesn’t try to look exactly like the final product, so it’s easy to work on high-level design issues and not get bogged down in details like colors or exact text. I also like being able to jot down notes in the margins of an early design, which I’ve never found a good way of doing in HTML or Flash.
  • Everyone has it. One of the great things about PowerPoint is that the people on your team usually have it. You can easily email a PowerPoint prototype to people for review and feedback.

Basic Interactivity

To begin, create a simple PowerPoint mockup, each slide depicting a separate screen in your site or application. You can use shapes, text, and clipart to populate the screens. I like to leave a little space in the margins for notes and half-baked ideas.

clip_image001

Once your basic mockup is in place, you can add hyperlinks to text, shapes, or images. The links won’t be active in regular working mode; in slide show view, clicking on a linked object will go to a specific target screen.

Ready to give it a try? Let’s take a look at how to do it.

Note about versions: The detailed steps and screenshots in this article apply to PowerPoint 2003 for Windows. It’s possible to achieve similar results using other Windows versions of PowerPoint, but please be aware that the exact steps will vary. ”

Hyperlinking Text

  1. Select the text you want to hyperlink. Be sure to select the text itself, not just the box around the text.
  2. Right click, and select “Hyperlink…” from the menu.

clip_image002

  1. In the “Insert Hyperlink” dialog box, choose “Place in This Document” from the left menu.
  2. Click on the screen you want the hyperlink to lead to. Click OK.

clip_image003

  1. Voila! The text is now hyperlinked. View the PowerPoint as a slideshow to see it in action.

clip_image004

Hint: PowerPoint automatically applies a style to text links, but only if you apply the hyperlink to the text itself, not the box around the text. You’ll probably want to change the default sea-foam green color. Here’s how:

  1. Open the “Slide Design” panel from the Format menu
  2. Click on “Color Schemes”
  3. Click on the “Edit Color Schemes” option, which appears at the bottom of the screen.

Two settings control the color of links: The “Accent and hyperlink” color (for active links) and the “Accented and followed hyperlink” color (for visited links).

Creating Buttons and Hyperlinked Images

Follow the same basic process to create buttons and images that link to other screens.

  1. Right-click on the image or button. (I use a simple rectangle to represent a button.)

clip_image005

  1. Choose “Hyperlink…” and select the target screen following steps 3 and 4 above.

Hint: Try giving hyperlinked buttons a different color so you (and reviewers) can tell which ones are active in the prototype.

clip_image006

Simulating the Back Button

PowerPoint has a “back” control, but it steps back to the previous slide in the presentation. With hyperlinks, this may not be the slide the user just viewed.
If you want a back button that lets the user get back to the screen he came from, you’ll need to build it yourself. Here’s how:

  1. Right-click on the item you want to use as a back button.
  2. This time, instead of clicking “Hyperlink,” choose “Action Settings…”

clip_image007

  1. In the “Action Settings” dialog box, choose the “Hyperlink to:” radio button.
  2. Select “Last Slide Viewed” from the list.

clip_image008

  1. That’s it! Now, when viewed in slideshow mode, this link will take the user back to the screen he just viewed.

clip_image009

Hint: Even without a back button, you can go back in slideshow mode by right-clicking anywhere on a slide and selecting “Last Viewed.” However, keep in mind that other people who click through your prototype might not know this.

Advanced Interactivity

PowerPoint can go beyond basic hyperlinks and simulate dynamic behavior, such as mouseover effects for a Rich Internet Application.

Creating Mouseover Effects

  1. Start with two slides: one “before” the mouseover effect and one “after.”

clip_image010

  1. On the “before” slide, right-click on the item that will trigger the mouseover effect, and select “Action Settings…”

clip_image011

  1. In the Action Settings dialog, click on the “Mouse Over” tab.
  2. Select the “Hyperlink to” radio button.
  3. Choose “Slide…” from the drop-down menu.

clip_image012

  1. second dialog box will let you select the “After” slide.

clip_image013

Now, in slide show view, mousing over the item you selected will switch to the target slide: the one that shows the “after” mouseover effect.

Hint: There’s no “mouse out” effect in PowerPoint. The best way I’ve found to simulate it is a bit clunky, but it gets the job done:

  1. On the “After” slide, draw some boxes around the item you want to apply the mouse-out effect to.
  2. Apply a mouseover action to the boxes around the object. (For example, if you want to return to the previous slide when you mouse off an item, give the boxes around the item a mouseover effect that returns to the previous slide.)
  3. Make the surrounding boxes transparent.

Mouseover behaviors can get out of control quickly in PowerPoint. This is partly because creating the mouse-out behavior is awkward, and partly because you need to create “after” screens for each individual mouseover effect. PowerPoint can help you try out a mouseover behavior (e.g., wire up a single example), but for prototypes with lots of dynamic effects—or many instances of the same effect—you’re probably better off with another tool.

Other Tips & Tricks

Use slide masters for persistent navigation

If your mockup uses a persistent navigation framework (tabs, left navigation items, etc.), create the navigation elements in a slide master, and apply hyperlinks that lead from the master to individual screens. This way, each slide you create will already have the navigation built in. If you need to make changes, edit the master and the changes will automatically apply throughout the prototype.

Disable standard slideshow controls

Even with interactive elements in place, PowerPoint continues to work like a slideshow: clicking a slide advances to the next one. This can be disorienting for people using your prototype. When they click on something you didn’t make interactive (which—trust me—they will), the slideshow will advance to something that doesn’t make sense.

To avoid this confusion, I suggest turning off the slideshow behavior. Your hyperlinks will still work, but clicking outside them won’t advance the slideshow.

  1. Select “Slide Transition…” in the “Slide Show” menu.
  2. In the “Advance slide” section, remove the checkmark next to “On mouse click.”
  3. Click the “Apply to All Slides” button.

clip_image014

Note: In PowerPoint 2007 for Windows Vista, this feature is under the “Action” item on the Insert ribbon.

Conclusion

It’s possible to take the interactivity a step further with the Control Toolbox and ActiveX controls in PowerPoint, but I find that the techniques outlined here are all I need for early-stage prototypes. They help me test-drive an interactive design, get feedback, and make improvements early in the process.

Of course, PowerPoint isn’t right for every project. Here are some trade-offs to keep in mind if you’re deciding whether PowerPoint is a good fit for what you’re doing:

  • Sample interactions vs. all interactions. PowerPoint works well for creating a skeleton of a site or application and for testing individual interactions. But since it’s not especially object-oriented, it can be awkward to apply the same basic interaction to multiple things. For example, imagine a list where each item leads to a separate details screen. You can do this in PowerPoint, but each individual page and each individual link need to be created manually. It’s a lot of work, you wind up with a huge file, and God help you if you need to modify anything. Keep PowerPoint in mind for sample interactions, but if you’re looking to build a complete prototype where everything is truly functional, keep looking.
  • Low-fidelity vs. high-fidelity. PowerPoint is great for testing interactivity, but it won’t give you a realistic sense of what any one screen will really look like. You’re not going to get a sense of exact layout from PowerPoint. Also, remember that PowerPoint screens don’t scroll, so if you’re designing for the Web, your mockups won’t necessarily get a full-size picture of any one screen.

Overall, PowerPoint can be a blessing for interaction designers who want to create interactive prototypes quickly and easily. Interactive PowerPoint mockups can give a flavor for how a site or application will feel when you move through it—which is what interaction design is all about.

Note: below are some optional readings for making PowerPoint Prototypes with more examples and tricks. If you want to increase your productivity, please read the following article and its accompanying video.

http://www.krisjordan.com/2008/09/07/10-minute-mock-prototyping-tips-for-powerpoint/

10 Minute Mock Prototyping – Tips for PowerPoint

Written by Kris on September 7th, 2008

Mocking up user-experience designs needn’t be time a huge time-sink. This is especially true for sketchy, early-stage designs. First draft mockups are about exploring as many promising directions possible before picking just one. Agility and speed are the overarching goals when laying out a new vision, brainstorming a screen flow, or mocking a renovated experience. The goal is not pixel perfection it’s proof-of-concept (ex ppt).

PowerPoint is great for fleshing out quick and dirty UX Design Mockups. You can whip screen flows together, make important elements interactive and clickable, share with other people, and quickly iterate on the mock. For a great introductory tutorial on step-by-step check this article out. [Quick & dirty example of a mock ppt for Jitter. View in presentation mode.]

When I’m mocking/prototyping in PowerPoint there are a couple of short-cuts I take to make the work go fast. To see the following 5 tips illustrated, check out the YouTube screen cast.

1. Use a Pallet PowerPoint File and Ctrl + Tab

The number one waste of time when mocking UX in PowerPoint is to have to go to Insert > Shape, pick the shape, and correctly style it or Insert > Picture, and have to go find an icon, etc. When mocking designs there are a handful of things you’ll often need: shapes, styles, UI controls, icons, images, container screens, and action templates. Create a PowerPoint file which contains all of your commonly used elements and have it open in the background. Here’s the example pallet I threw together to use in the video [download ppt]:

clip_image016

Have a pallet file open while you’re working on your prototype design file and Ctrl-Tab between the two for quickly getting at your design elements.

2. Create Master Slides First and Duplicate with Ctrl + D

In PowerPoint each slide is independent of the rest. So if you create a layout on one slide then duplicate it and rearrange the layout the result is a different layout on each. This is addressed in two ways, one by keeping your screens as simple as possible, and two by creating master slides and doing some forethought around the elements that will be present on every screen. Once you’ve got your template you can quickly duplicate by selecting the slide and using the Ctrl+D shortcut.

3. Copy and Paste Styles (Ctrl + Shift + C / V)

Maintaining a consistent UI is a lot easier with a catalog of styles. The coloring and text styles used throughout your mockup should be kept on a slide in your pallet file. Want to change from one style to another? Easy, just select the style you want, use Ctrl + Shift + C shortcut, then select the items you want to apply the style to and use the Ctrl + Shift + V shortcut. Voila! Fun hack: on my pallet file I’ve got styles and then a group of shapes. By copying a style and selecting any object in the group I apply the style to all shapes and then copy the shape I need out.

4. Use Hyperlinks for Interactivity (Ctrl + K)

To simulate interaction in PowerPoint use hyperlinks that jump non-linearly through the presentation. Select the item you want to be made clickable and use the Ctrl + K shortcut. Then select the ‘Places in this Document’ and finally slide in which you want the click to bring you to. Sure, it is ‘spaghetti’ like ‘GoTo’ in programming, but it works. Additionally, you usually want to turn off the ability to click anywhere on the slide and move to the next slide. This can be accomplished by going to the ‘Animations’ tab in PowerPoint 2007 and unselecting ‘Advance Slide on Mouse Click’.

5. When Feigning Mouse Over (Use Action Templates)

Believe it or not you can get mouse over effects in PowerPoint. Warning: it’s hacky. The premise is you place a very transparent box on top of what you want to be able to hover over and give it ‘mouse over’ action of moving to the next slide. The following, nearly duplicate slide, then uses a transparent ‘Border’ shape (hollowed out rectangle) which surrounds the hoverable area and moves to the previous slide when it’s mouse over action is triggered. I use a template for this, located in the example pallet, which simplifies the process.

Do you use PowerPoint for Mock-ups?

If so, what are your short-cuts, speed-ups, and tactics? If not, what do you use and why?

Resource:

A youtube video for this article is available at http://www.youtube.com/watch?v=JjbeCkn0bJg

October 18, 2007 1:35 am AEST — By Long Zheng

PowerPoint Prototyping Toolkit (release 0.2)

PowerPoint Prototyping Toolkit (release 0.2)

Written by Shengdong Zhao

Shen is an Associate Professor in the Computer Science Department, National University of Singapore (NUS). He is the founding director of the NUS-HCI Lab, specializing in research and innovation in the area of human computer interaction.