How to prototype interactive iPad applications in 30 minutes using keynote

How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote

How long does it take to go from idea to prototype that you can test with users? A month? A week? Few days? How about 30 minutes?

What if you can prototype your next idea quickly and cheaply without using any special wireframing or design tools?

What if you can send your prototype to friends to play with and give you feedback, without having to worry about uploading it to a server or making sure they have the right platform?

What if you can embed that interactive prototype within your product presentation, and click through it to show your audience how it works, rather than overloading their imagination with bullet points?

And what if you can do all this without writing a single line of code?

The challenge with existing prototyping tools is that they require you to become a designer in order to create a good looking, interactive prototype. By taking design out prototyping, you can focus on simply placing components on a page, editing their text, and create links between components and other pages. And contrary to popular beliefs, a prototype doesn’t need to look ugly or rough, especially if you’re presenting it to a prospective client or investor.

The video below shows a sample prototype created using Apple Keynote and Keynotopia’s iPad prototyping elements, without using additional graphics or tools. You can also see how I am testing the SAME prototype on an iPad, tapping my way through different screens and dialog.

Here are some screenshots of the graphics used in that presentation, which were all created in Apple Keynote.

Read the updated version of this tutorial & step-by-step video at Keynotopia

So how can you create a similar prototype in 30 minutes or less?

First, you will need to get the Keynote Prototyping template , and install the file “iPad Prototype.kth” into <UserName> -> Library -> Application Support -> iWork -> Keynote -> Themes. Alternatively, you can double click the file to open it in Keynote, and choose file -> Save Theme. This will create a theme in Keynote that you can reuse to create new presentations, as shown below.

When you create a new presentation based on the iPad Prototype theme, you will see a single black slide. To access the assets, you need to go to the toolbar and click View -> Show master slides.

This will reveal the master slides panel above the slides panel, allowing you to click on a specific master slide and copy/paste assets into your slides.

Step 1: Drawing a blueprint

To create your prototype, start by defining the different app screens that you will need and how the user will transition between them. I typically do this as a state diagram as shown below (Created on the iPad using Adobe Ideas).

It’s important that you get this diagram right because it will save you time doing modifications to your prototype later on.

Step 2: Putting together application screens

Next, you create a new slide for each screen, and copy/past components from the masters into each slide (Select a master slide > Select an object > Select target slide > paste object). Since all objects were created in Apple Keynote, they are fully editable (resize, change labels, change colors, add/remote elements, etc…). Each object is a group of building blocks that are grouped together. You can either double click on an object to select each sub-object, or ungroup using the Ungroup button on the toolbar, edit sub-objects, then group again. Grouping makes it easier to select and move objects.

Hint: After you’ve created each screen, you may find it at times easier to move the static components of that screen into its own master slide. That will save you time in making modifications in each slide if you decide to change something later.

After creating each screen, you duplicate (CMD+D) slides and add additional elements to them (pop-ups, fill text, …).

Step 3: Adding interactivity

Finally, it’s time to create transitions between screens. You do this by going through your state diagram, and for each slide, select the element that would transition it to another slide. For instance, clicking a picture shows the profile pop-up, so you’d select the profile picture (you can select all pictures in the slide), and in the Inspector -> Hyperlink select the target slide. Do this for every transition that you have in your state diagram. Keynote will add a blue indicator on each hyperlinked element in your slides.

Hint: Keynote is smart enough to know when you rearrange your slide, and will keep track of the right slide you link to even if you change its sequence order.

Test your presentation frequently to double check that you’re hyperlinking the correct slides.

That’s it! You now have an interactive prorotype within your presentation.

Test it on an iPad !

If you’d like to test this prototype with users and see how they’d use it, you need to export it as QuickTime as shown below (This will prevent screens from automatically advancing if the user clicks a spot that’s not hyperlinked. You then open the prototype in QuickTime Player 7, and interact with it.

If you’d like to test the prototype on the iPad, you need to export the prototype as PDF, email it to yourself or put it in DropBox, then open it on the iPad. In the video above, I use GoodReader to show the PDF file.

Hint: Unfortunately, the Keynote iPad app does not support hyperlinked navigation, so if you open this keynote file on the iPad it will only advance sequentially.

Bonus Hint: Keynote has an automatic tweening/animation feature called Magic Move. If you want to have fun by adding animated transitions, fading pop-ups in and out, you can do so by copying and pasting the shape across two slides, select both slides then selecting the effect as shown below. I found this feature to be unpredictable at times.

Final Words

Remember that a prototype doesn’t need to be perfect. It just needs to convey your idea better than your words do. Don’t over-engineer it, and don’t prematurely optimize it. Just put together something that users can see and play with. You will get many more insights than spending hours in focus groups, market research and surveys.

Next time you’re giving a pitch, remember to show more and talk less. If a picture is worth a thousand words, a prototype is worth a thousand pictures.

Creating prototypes is like doing magic: once you understand that all magic happens in the spectator’s mind, you can focus on bringing what matters to the audience. Everything else is a distraction.

If you think this tutorial is useful, or if you have any feedback or questions, leave me a comment below. I will do my best to reply to every single one of them.

Update

Wow! I didn’t imagine when I wrote this blog post that it will generate so much buzz and love in the blogosphere and the Twitterverse. In the past two weeks alone, more than 10,000 people read this post and more than 500 downloaded the iPad Keynote toolkit.

Having received so many requests to create a variation for the iPhone, I spent the past few days creating the most comprehensive prototyping toolkit for Keynote. Over 200 assets total, all created in Keynote. The premise of this toolkit is to help anyone put together an interactive prototypes of their idea and test them with users in less than 30 minutes. The other benefit is to embed these prototypes in product pitches and demos, and be able click-through screens without leaving the presentation.

Wow!Wow! I didn’t imagine when I wrote this blog post that it will generate so much buzz and love on the blogosphere and the Twitterverse. In the past two weeks alone, more than 10,000 people read this post and more than 500 downloaded the iPad Keynote toolkit alone.

Having received so many requests to create a variation for the iPhone, I spent the past few days creating the most comprehensive wireframing and prototyping toolkit for Keynote. Over 100 assets total, all created in Keynote. The premise of this toolkit is to help anyone put together an interactive prototype of their idea and test it with users in less than 30 minutes. The other benefit is to embed these prototypes in product pitches and demos, and be able click-through screens without leaving the presentation.

Here is a video of an apartment hunting

I didn’t imagine when I wrote this blog post that it will generate so much buzz and love on the blogosphere and the Twitterverse. In the past two weeks alone, more than 10,000 people read this post and more than 500 downloaded the iPad Keynote toolkit.

iWork 09 is 60%+ off on Amazon today (down to $33 from $79). >>> Grab it while it lasts.

Here is a video of an apartment hunting app prototype assembled with the toolkit and exported to the iPhone as PDF (displayed in GoodReader, which is the best PDF reader on iPhone/iPad).