Creator: Wen Tao

Overview

Prototyping is a widely accepted best practice in interaction design circles.  There are many methods that can be used to create prototypes.  At ThoughtWorks, many of our user experience practitioners have used PowerPoint for prototyping.  However, PowerPoint was not designed for creating prototypes, and thus tends to require repetitive and redundant manual work.  We created ViPrototype to improve PowerPoint as a prototyping tool, with the key benefit being the ability to track changes between slides and therefore avoid having to repeat identical changes across multiple slides.  This kind of ability is analogous to "refactoring" in software development.

Installation

ViPrototype is a PowerPoint Add-in, and it is written by mulitple Microsoft technologies. So, there are many dependencies need to be checked before installing ViPrototype. They are:

If you know what they are, you can check whether you have them already. If you have no idea what these things are about, no worries. You just need to click the link one by one, and install them, then you are fine.

After you have all those things in place, you can start installing ViPrototype. After you have installed it, you need to restart your machine to make the changes taking effect.

If you have problem to make it working, please send mail to us.

I want to...

Get out a rough design with few mouse clicks

Step 1: Find Lo-fi Widget Toolbox

After installation, it will automatically appear in your toolbars.

If you can not find it, you can right-click on any toolbar. This will pop up a menu like this:

If you can not find "Lo-fi Widget Toolbox" in the menu items, that means you might have not installed ViPrototype correctly.

Step 2: Click on a widget button

There are many widget buttons on the toolbar. Click on one of them, and this will make it selected. For example:

Step 3: Click on the slide

Now, you have selected a widget you want. Then, we are going to drop it on a slide. Before doing this, you need to have a presentation open first. Then, you click on any position within the current slide.

Step 4: Edit the widget as normal shape

In current version of ViPrototype, a widget is no more than a normal shape. So, you just edit it as usual.

Prototype a action sequence by multiple slides

Step 1: Make the first slide

Step 2: Clone the first slide to get the second slide

There is a "Lo-fi Prototyper" toolbar among the toolbars. If you can not see it, refer to "Find Lo-fi Widget Toolbox". Select the first slide first, and then click the "Clone Slide" button.

Step 3: Make some changes to show what the second step is about

When prototyping, it is very usual to have two slides look very similar, but only differ from each other in tiny details. Here is also the case. We cloned the first slide, so right now the second slide is identical to the first slide. Then, we should make some changes on it to show what the second step is about:

Step 4: Complete the whole prototype

After we are done, it should be:



Change the initial design without changing ALL the slides manually

There are more than one slide to show a action sequence. If I want to change something, usually I have to make a change on one slide, and repeat the change on every slide. With ViPrototype, this could be simplied as following steps:

Step 1: Switch to "Track Changes" mode

There are two working modes. One is normal mode, and another is "Track Changes" mode. In "Track Changes" mode, ViPrototype will be aware of the changes you made, and it is smart enough to repeat the changes on other slides for you. In normal mode, it will be silent. Click on Track changes button will switch between two modes. When "Track Changes" is highlighted, that means current mode is "Tracke Changes" mode.

Step 2: Make the changes on one of the slide

There is no restriction on which slide should you make the change, it could be any of the slide with in the sequence.

Step 3: You do not need to do anything

The changes you just made will be propagated to all the slides automatically. So you acutally do not need to do anything. The ability to propagate those changes is the biggest feature of ViPrototype.



Misc

Add my widget button

Select the shapes composing the widget, then click "Make Widget" button. Give it a name, and optionally assign it a icon.

Rename widget button

Press "F2" key when the widget button is selected

Delete widget button

Press "Delete" key when the widget button is selected

What kind of changes could be tracked?

  • Size
  • Position
  • Fill Color
  • Text
  • Add shape to a slide
  • Remove shape from a slide
  • Group mutltiple shapes
  • Ungroup grouped shape