10 Minute Mock Prototyping - Tips for Powerpoint
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.
YouTube Demo:
Jason Fried of 37 Signals is spot 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 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.
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.
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?