How long does it usually take to go from idea to creating a 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 your 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 prototype on an iPad, tapping my way through different screens and dialog.
Here are the UI elements I use in that presentation, which were all created in Apple Keynote.
Why use Keynote?
Keynote includes powerful drawing tools, smart guides, styles, locking, and grouping. Master slides make it possible to reuse interface components across multiple screens, hyperlinks add “clickability” to the prototype, and slide transitions create cool interface animations with a single click. Finally, it works seamlessly with Adobe CS apps, so copying and pasting graphics works seamlessly across.
How do you create a similar prototype in 30 minutes or less?
Download the iPad Prototyping template from Keynotopia , 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: Sketching the user flow
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.
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.
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.