10 Minute Mock Prototyping – Tips for PowerPoint... http://www.krisjordan.com/2008/09/07/10-minute-...

Home
Recess! PHP Framework
Notes from Web 2.0 Expo NY
About
Feed

Kris Jordan
on Software, Frameworks, & Stuff

« Doing Some Life Architecture

Why the Google Chrome Comic Rocked – Scott McCloud’s “Invisible Art” »

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).

Jason Fried of 37 Signals [cite] is dead on when he

says Photoshop is not the right tool for the job. In
Photoshop it’s too easy to get lost in the details. In

1 of 7 12/15/2009 08:13 PM
10 Minute Mock Prototyping – Tips for PowerPoint... http://www.krisjordan.com/2008/09/07/10-minute-...

Photoshop you can’t simulate clicking around, it’s

just static images. That said I would argue there
are flaws with the Jason’s method of starting in
XHTML / CSS. The proclaimed upside in working
towards something ‘real’ is worthless if you’re
working towards something real bad but don’t
realize it until hours have been invested in an
oxymoronic real mockup. The time to dive into
XHTML / CSS is after the direction your design is heading in is clear, the wire
framing and interaction flow set.

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]:

2 of 7 12/15/2009 08:13 PM
10 Minute Mock Prototyping – Tips for PowerPoint... http://www.krisjordan.com/2008/09/07/10-minute-...

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’.

3 of 7 12/15/2009 08:13 PM
10 Minute Mock Prototyping – Tips for PowerPoint... http://www.krisjordan.com/2008/09/07/10-minute-...

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?

Related links:

Great pallet for prototyping windows apps over at istartedsomething.com

Joel on Software Thread

ShareThis

Write kick-ass web apps? Check out the Recess Framework. It's my full-stack,
RESTful PHP framework that breathes a little fun into the drudgery of PHP
development.

Posted in UX Design | Tags: Design, mockups, powerpoint, ui, ux

2 Comments so far ↓

1. Sep
15
12:48
AM

Ric Bretschneider

Hi Kris,
Thought you’d like to see this.
Cheers,
-Ric

http://blogs.msdn.com/powerpoint/archive/2008/09/14/one-more-special-
intern.aspx

4 of 7 12/15/2009 08:13 PM