Guides

Creating Interactive Prototypes With Keynote

Step 1: Plan It

Create a diagram with each interface screen as a state, and create links to specify how users will transition between them.

The diagram above shows a social media application that tracks multiple accounts, and allows users to post updates to multiple networks.

Step 2: Prototype It

Open the .Key file that comes with the Keynotopia Prototyping Templates side by side with a new presentation.

Start by creating a slide for each screen (each state in the diagram) by copying interface elements from the keynotopia template and pasting them onto your presentation. To edit the label of an interface element, simply double click it and start typing.

You can also modify element sizes, colors, and effects using the shape inspector in Keynote.


After putting together the main screens, you can move them to master slides so that you can reuse them in other screens without doing much copy/paste, and update multiple screens with a single change.

Step 3: Add Interactivity

To make an interface element clickable, select it, then open the hyperlink tab in the inspector, and specify the target slide.

I recommend using slide numbers, instead of next/previous slides, since Keynote is smart enough to update these numbers if you end up inserting a slide in the middle later on.

Make sure you test the interactivity every once in a while to make sure the app behaves as you’d expect it to.

You can add some slide transitions or magic moves to create interface animations. But remember not to get too distracted by these features.

Before testing your final presentation, make sure that clicking anywhere on the slide doesn’t cause it to advance to the next one. To do this, select “Hyperlinks only” in the presentation settings in the inspector.

Step 5: Export It & Test It

From the file menu, choose export and then select PDF. Then you can email it to yourself or share it via DropBox and open it on your iPhone/iPad using GoodReader.

Step 6: Share It & Get Feedback

Upload your prototype to iWork.com (free) and email a link for people to interact with it online, and give you feedback.

Comments

Bonus: Customize Your Keyboard Shortcuts

As you create more prototypes with keynote, it’s essential that you start customizing and using keyboard shortcuts to save time. To do this, go to System Preferences –> Keyboard then click the Keyboard Shortcuts tab. Select Application Shortcuts, from the left panel, then click the + button at the bottom left of the right panel to add a new shortcut. Select Keynote as the application, then type the menu item name you’d like to create a shortcut for *exactly* as it appears in Keynote (In the example below, I am assigning a shortcut for Align->Left menu item, so I typed “Left” – it’s case sensitive.

Keyboard Shortcuts
Here are the keyboard shortcuts I use:

Menu Item Shortcut Purpose
Group CMD+G Group objects together to easily select and edit them as a unit.
Ungroup CMD+SHIFT+G Ungroup grouped objects – Pressing it multiple times will ungroup nested groups
Send Backward CMD+[ Place selected objects/groups behind others. The order of objects on the slide is defined by the order they were created.
Send to Back CMD+SHIFT+[ Place selected objects/groups behind everything else.
Bring Forward CMD+] Does the opposite of Send Backward
Bring to Front CMD+SHIFT+] I’ll give you three guesses
Lock CMD+L locking enables you to pin selected objects to the slide so that you can select and edit other objects without accidentally selecting or editing the locked ones.
Unlock CMD+SHIFT+L Unlock selected objects or groups. You will notice that locked objects, when selected, will have “x” markers around their edges, instead of the square marker that enables you to resize them.
Zoom In CMD+SHIFT+> This is the standard zoom in shortcut for all iWork apps. CMD++ is already reserved for increasing text size, which I use more frequently.
Zoom Out CMD+SHIFT+< Same
Fit in Window CMD+1 This shortcut is particularly useful if you’re working on a prototype with dimensions larger than the screen. For instance, I prototype iPad apps in portrait mode, and the 1024px height won’t fit on my 800px laptop screen.
Actual Size CMD+0 This will zoom into the actual size of the slides


Here is how to use Keynotopia to prototype and test an iPhone app in 19 minutes!



→ Sample prototypes are included for free with the Keynote Prototyping Bundle