Natural interfaces in 5 min.

By May 23, 2010 work 4 Comments

Click image to play video.

How to prototype iPad apps with PowerPoint

You don’t need an iPad or an engineer to tantalize your product team with the possibility of a natural interface. With just a few minutes, a computer that isn’t touch capable, and the equipment listed below, you can work like Tom Cruise in Minority Report—or at least create the illusion.

Equipment

Here’s what you’ll need:

  • A mouse
  • A camcorder
  • PowerPoint or Keynote
  • Screenshots of the prototype interface. You can use Shift-Command-3 and Shift-Command-4 followed by Space to capture the desktop or a window, respectively, on a Mac. PrintScreen and Alt-PrintScreen will do the trick on Windows.
  • A dash of manual dexterity

Process

  1. Start by envisioning the interactions you’d like to prototype. For inspiration, play with a business card on an iPad-sized piece of paper, imagining that the card is an interface object.
  2. Grab a screenshot of your desktop (on a Mac, use Shift-Command-3).
  3. Paste the screenshot into PowerPoint (or KeyNote or Whatever).
  4. Now you need to set the PowerPoint canvas to just the right size. Right-click the screenshot and select Format Picture. Note the exact size of the picture.

    Select File > Page Setup and set PowerPoint to the same size as the picture of your desktop.
    Now when PowerPoint goes fullscreen, it will look just like the native desktop. This is critical to producing a believable effect. (You’ve got it right when you find yourself clicking on a “frozen desktop” only to realize that you’re in PowerPoint. Computer, end simulation!) You’ll also want to select a color scheme with the right background color. Black works well.
  5. Place an image of the object you wish to manipulate on top of the desktop screenshot. You can also use the desktop screenshot itself, as I did in the first gestures of the video where I turn the display on and off.
  6. Select the slide you’re working on (far left), and use the Formatting Palette to select Animation > Customize. Select the image you want to animate and click Add Effect. There are a variety of effects available. PowerPoint provides a preview—sometimes slowly—of the animation, so you can explore different effects for inspiration.
  7. User interface from PowerPoint showing animation controls

  8. Set the desired effect. I find that simple effects like Wipe and Shrink/Grow work well. Be sure to note the differences between Entry, Emphasis and Exit effects. The video in this post primarily uses Entry effects that fire On Click and last for 1 second.
  9. Put your presentation in fullscreen mode and rehearse your timings.
  10. This is where the fun begins. You’re ready to film. If you’re a one-man show, you can hold the mouse and camera as shown below.
  11. Hand holding camera and mouse

Have fun and, if you have a moment, post links to your videos in the comments : )

4 Comments

Leave a Reply