A technique that caught my eye was “Innovating with Sticky Notes” (p28). The premise is to use a sharpie and generate ideas on sticky notes. One idea per sticky note (the bonus of using a sharpie is that is about all you can fit). Just unleash as many ideas as possible and get them up on the wall. Structure and flow can then be orchestrated by rearranging the notes.
Idea Notes for Chord Talk
I decided to give the sticky note method a shot with a talk I’m giving on the Chord Protocol in a graduate class I’m auditing at UNC. I must admit I really liked the technique after trying it out. It’s quick and dirty and prevented me from getting lost in details and aesthetics. My focus remained on the big ideas and overall message I wanted to ‘teach’. I would even go so far as to say that it’s fun. Once I’m done with the talk I’ll narrate a slideshow and throw it up on here so you can see the end result.
This sharpie + sticky notes method is only a detail in the grand thesis of Nancy Duarte’s slide:ology. Spend some quality time with this book before you prepare your next presentation, you won’t regret it.
Aside: if you’re going to use this technique on a wall at a coffee shop be prepared for inquisitive looks!
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 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]:
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?
RSS Feed
Follow on Twitter