How to create interactive iPad app prototypes in 30 minutes Using Keynote or PowerPoint



How long would it take to go from idea for an iPhone or iPad app to 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 learning any new tools or programming languages?

What if you can send your prototype to friends to play with and give you feedback, without having to install anything on their mobile device?

What if you can integrate your prototype into your presentation, and click through it to show your audience how it works, rather than boring them with bullet points?

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

 

The following video shows a sample prototype created using nothing but Apple Keynote and Keynotopia‘s iPad prototyping templates. You can also see how I am testing the prototype on an iPad, tapping my way through different screens and dialogs.

Here are the UI elements I use in that presentation, which were all vector shapes created from scratch in Apple Keynote.

a94f44d6-f2cf-48d3-a993-4613fdbd5eef a94f44d6-f2cf-48d3-a993-4613fdbd5eef a94f44d6-f2cf-48d3-a993-4613fdbd5eef a94f44d6-f2cf-48d3-a993-4613fdbd5eef a94f44d6-f2cf-48d3-a993-4613fdbd5eef a94f44d6-f2cf-48d3-a993-4613fdbd5eef

 

Why use Keynote?

The challenge with existing wireframing and prototyping tools is that you need to be a designer to create a good looking app prototypes. Additionally, most of them will help you create static screens, but not something that you can click through and test out.

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.

With the iPad prototyping templates for Keynote and PowerPoint, you can create a prototype simply by copying and pasting interface components on a slide, then creating hyperlinks to transition between slides, hence giving a prototype the needed interactivity and responsiveness to users’ actions.

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.

 

7ccf8415-c9eb-4021-bec3-3151be3907d9

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.

514ba6ce-44f2-47a1-9d03-f516374d3e8d

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.

0380afaf-5d63-4beb-8ca6-23c8fa1fed1b

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).

 

bf67265d-9685-4b6a-acba-92c074c818df

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. 5b565dc4-d4d3-4c08-ab40-9e6080874ee7

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

65874a06-e27d-4e30-82cb-b3fc49f2552e

dca8f2bc-f056-4bc6-820a-ceee05954737

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.

 

1258da8c-37ce-42ff-89c4-7e07ebb7cb9f 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.

 

88729712-c9e6-4c01-a9d7-11fd83bbeadd

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.

3caaa13c-1035-4ff6-bcea-f7663ceaa2a6

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.

 



I highly recommend Keynotopia for designing interface mockups for web and mobile apps

Keynotopia is a user interface design toolkit that enables you to use Apple Keynote or Microsoft PowerPoint to prototype, test and demo your application ideas quickly and cheaply, without doing any design work or writing a single line of code.

It includes thousands of wireframe and high fidelity vector user interface components and royalty free icons for mobile, web and desktop apps, all designed from scratch in Keynote and PowerPoint, and can be edited and customized without needing any design tools.

Keynotopia is used by 40,000 entrepreneurs, designers, and developers in more than 80 countries.

63 Comments

  1. I would like to be updated when you post your write up for using keynote to prototype for the iPhone as well. This is a great write up and I really enjoyed. I agree totally with having a solid prototype and this really helps seal the deal!

    Reply
  2. This is a really neat idea! I’d never thought of using a slideshow to prototype…
    I don’t have keynote myself, but maybe the same thing can be done in other software like powerpoint or open office.
    Thanks!

    Reply
    • I will have the iPhone write up and template up soon, as well as a Powerpoint prototype. Leave your email in the box above to be notified.

      Reply
    • Fixed. The templates now work with Keynote 08 :)

      Reply
  3. Looks like a good idea but you should mention it requires a purchase of Iwork. Many Macs dont come with Iwork installed maybe Ipads do.

    Reply
  4. Amir,

    Thanks for the post, its truly useful. I will get my hands dirty shortly in trying it out.

    TT

    Reply
  5. @PD Some folks were able to run it in OpenOffice presenter, which is free ;)

    I will be uploading some assets for OpenOffice and Powerpoint shortly.

    Reply
  6. Have you tried creating iPad prototypes likes this inside of the iPad version of Keynote?

    Reply
    • I haven’t – due to a simple reason: AFAIK, Keynote on the iPad does not support hyperlinking, which is a major point for me to make a click-thru prototype.

      Also, I don’t think it would be very easy to copy and paste assets around on the iPad.

      I look forward to Keynote getting hyperlink support on the iPad – then I’d be able to test the actual keynote file rather than exporting a PDF file – And animations might work too ;)

      Reply
      • Hi Amir,

        This is a very useful post. I wondered if there’s any update on the Keynote app in iPad supporting hyperlinks? I do a lot of iPad app development and it would be HUGE to have a prototying solution for iPad that I could use for user testing.

        Thanks!

  7. Nice work :)
    I use the mockapps set of icons and I have been using PPT and keynote to prototype apps and website but your really make it look great with hyperlinking

    Reply
  8. Great stuff! I’m looking forward to your next templates for iPhone and web apps :)

    Reply
  9. Awesome to see that it’s possible to prototype this fast for mobile devices like the iPad. I’ve recently switched to Keynote for wireframing and prototyping as well. Though I’ve found one issue for which I can’t seem to find the solution.

    The problem I’m confronted with is wireframing for a website, at first you start with a canvas of 1024 by 768px, after a while the height won’t be enough to fit in the content. When I resize the canvas all the text will be proportionally scaled and the whole wireframe/prototype is screwed up. Did any of you guys find a solution for this?

    P.s. Thanks for the templates!

    Reply
    • The way I do long pages is that I divide the page across multiple slides and have the “scroll bar” transition between different slides. This allows you to scale one page across 2 or 3 slides without impacting the rest of the pages.

      Reply
  10. GREAT! Many thanks!

    Reply
  11. Amir, this is great stuff. Thanks for sharing it, putting together the video and posting the templates online. Seems like Keynote might be the easiest wireframing tool out there!

    Reply
  12. Found your article via the SkyGrid app on the iPad. Please do let us know when you have the PowerPointassets ready. at work, i am stuck with Windows!

    Thanks!

    Reply
    • Looks great, Fabrice!

      Reply
  13. Thanks for this awesome idea. One snag I’ve run into is getting the interactive quicktime movie to run interactively on the iPad. I used the hyperlinks only option to create the movie, but it plays like a normal movie on the iPad.

    Reply
    • You’re welcome, John.
      Unfortunately, that’s true for quicktime: iPad and iPhone don’t support hyperlinks in mov files. In fact. you need to have Quicktime Player 7, not just the regular quick time player that comes with Snow Leopard, in order to play a .mov with hyperlinks.

      Reply
      • Amir,
        Thanks for the awesome post. I’ve made a hyperlinks-only movie from my Keynote file. However, how do I install Quicktime Player 7 on the iPad??

      • Hyperlinks in quicktime don’t work on iPad (yet). You need to export as PDF.

  14. Dear Amir

    Thank you so much for your help, it’s been really helpful. I’ve used your tools to make an interactive presentation of our products on iPad, and your indications have been great. Exported as PDF and the interactive buttons remain active. The only thing I’ve been struggling with is that some of the slides contain audio information (mp3 / WAV) and neither quicktime export or pdf export seems to do the job (actually when I export the keynote file as quicktime, it just starts running on until the end of the “movie” on the ipad, no way to interact).

    Do you have any idea how I could manage this?

    Thankx from Belgium, Jeroen Ravesloot.

    Reply
    • Audio/Video cannot currently be exported as PDF

      Reply
  15. any ideas about how to use the templates on the iPad version of Keynote? I tried to import the themes but it’s not seeing them.

    Also, there’s an app for creating prototype using the actual UIKit components. It’s called ‘Interface’ BUT if you’re thinking of using it remember there’s no way to then export that prototype out to PDF or distribute it as a presentation to your client.

    This makes an excellent alternative. Thanks for the kit. Would like more controls in the future.

    Reply
    • Lee,
      At this point, Keynote on the iPad does not support hyperlinks or groups, which are key to the workflow that I am describing.
      I see this workflow working best on the desktop to be transferred to the iPad for testing.
      I will be adding more controls to the Keynotopia templates regularly. There are already over 250 of them :)

      Reply
  16. This is close to be a perfect solution for many problems. But the following are still a headache:

    1. If you import your keynote file into the Keynote app, transitions work, but links wont (how stupid because…)

    2. If you use the bulit-in viewer in the iPad (send your keynote file by email and open it directly from there), links work, but animations do not.

    3. In PDF, links work, but no transitions or animations (looks like Netscape on a 28.8 modem).

    So, if you really-really need to show a nice working demo (links+animations) here’s my solution (but it needs you to do a little HTML5 coding):

    1. Build your Keynote mockup as described here.
    2. Export as HMTL
    3. Change some tags and put in webkit animations – (pretty much all are supported)
    4. Make sure you create a manifest file so it can run offline
    5. Publish locally in a webserver, navigate your demo, create a homescreen button.
    6. Keep wishing Keynote supports links.

    Guys, please let me know if you think there’s something easier! Thanks

    Reply
  17. Help!

    I am having a lot of trouble opening up interactive .pdf’s on my ipad. I use an interactive .pdf that was built in AA Pro on my laptop for client contracts. I enter their information and select various radio buttons to complete the contract itself and then submit it online. Works nicely. However, when I open the same interactive .pdf on my ipad it simply opens as a normal readable .pdf – and I’m unable to enter information and ‘submit’ the contract.

    Any thoughts or ideas?

    Reply
    • Joe – Use GoodReader application on the iPad. It works flawlessly with interactive PDFs.

      Reply
      • That was my first attempt at a solution and it didn’t seem to work. Am I opening it incorrectly in GoodReader? It opens as a normal .pdf without allowing me to interact with the various fields. I feel like a 1st Grader here!

      • Joe,
        Please email me your PDF to amir@keynotopia.com and I will take a look at it.

  18. Can I use Keynote on the iPad or just on an Apple (which I don’t have)?

    Reply
    • Hugh – You can use it with Keynote on the iPad.

      Reply
  19. Hi Amir,

    thanks a lot. After watching this I bought the templates from Keynotopia and I’m preparing a prototype which wouldn’t be feasible otherwise due to a very tight schedule (3 days before we present it to the client).

    The only thing that bugs me is the lack of a demo mode for GoodReader. It’s not my intention to fool the client into believing that we have a real app running, but I can only present it while holding the iPad in my own hands. Otherwise someone will accidentally pinch, zoom,swipe or tap in the middle revealing GoodReader’s menu. All this could create unnecessary distraction. Furthermore I haven’t found a setting yet which disables displaying the page number when switching between slides. I know I should rather complain to GoodReader, but I don’t think it’s their focus to develop in the prototyping direction. I’d appreciate any hints in the future :)

    Reply
  20. If you just load your Keynote presentation (made on the Mac) in Goodreader on the iPad everything works. The links work, havent tried the transitions!

    Reply
  21. Hi Amir,

    I’m trying to download the free trial of Keynotopia but I can’t find my way around it. Could you please guide me through the process?

    Thanks much

    Jahm

    Reply
    • Hi Jahm – There is no free trial – but the templates come with 100% money back guarantee.

      Reply
  22. This is great! Does this same process not work for the iPhone? Why not?

    Reply
  23. I seem to be missing the link to the free iPad template mentioned at the end of the video.

    Reply
  24. Thanks. Can you please send me that templates for PowerPoint? I would really appreciate it.

    Reply
  25. Amir, can you send a broadcast email to your mailing list (which I’m on) once Keynote for iPad supports hyperlinks?

    There are still a few things slightly klunky about goodreader like borders when I don’t want them and flashes/pauses/processing between transitions. I expect Keynote for iPad will be smoother.

    Thanks for your great products! They are a boon to my fledgling company.

    Jeff

    Reply
    • Sure, Jeff.

      Reply
  26. How are the hyperlink highlight created for the iPad? (I’m talking about the blue color that appears when tapping hyperlinks)

    Reply
    • That’s a feature of the PDF reader, not the template itself

      Reply
  27. Hi amir, i downloaded the template on my pc – but i have been unable to transfer it to my the keynotes on my iPad.
    On downloading i got a winzip file! how to proceed?

    Reply
    • Use iTunes or DropBox to transfer the files

      Reply
  28. How to create that. ppt into iPa file plz help

    Reply
  29. Hey man, very nice!!!

    Is possible to send a command to a desk pc whith a button??
    I want to get that command with visual basic, and do things…
    I really appreciate your support on that

    Many thanks.
    Sergio

    Reply
    • Sure – as long as you have a hyperlink that opens a web page where this command will be executed. The page can point to http://localhost if you want to execute a local command

      Reply
  30. Great Tutorial, thank you! I’m just wondering if there is any app on android similira to GoodReader that is capable to run interactive pdfs that are created that way?

    Reply
    • I believe Adobe reader on Android should work.

      Reply
      • it doesn’t work with the adobe reader app, same on iphone as well btw.

  31. Amir,
    Keynote on Ipad now supports hyperlinks. Any idea of how you can export/save so it’s in view only or protect? I’d like users I’m sending this to only have view or play only mode to give illusion it’s an app without losing hyperlinks, swipe, or media.

    Thanks for any tips

    Reply
    • You can use iTunes or DropBox to transfer. My secret weapon is uploading/sharing via iWork.com (free)

      Reply
  32. Just tested it with ezPDF Pro and it works after some tweaking in the settings (which were kind of hard to find btw.)

    Reply

Trackbacks/Pingbacks

  1. Prototyping voor iPad met Apple Keynote » frEdSCAPEs 3.0 - [...] YouTube Direct » iPad Keynote prototyping: How to prototype iPad apps in 30 minutes or less using Apple Keynote …
  2. Rapid Web Application Prototyping with Apple Keynote | Amir Khella - [...] let me thank you for all the feedback that you provided about the iPad keynote prototyping. I hope that …
  3. Interactive iPad App Prototypes In Under 30 Minutes Using Keynote | iPhone iOS 4 iPad SDK Development Tutorials, Programming Tips, News - [...] You can find the guide and download here: How To Prototype Interactive iPad Applications In 30 Minutes Or Less …
  4. My four steps to the epiphany: Lessons learned from creating a minimally viable research product | Amir Khella - [...] How to build interactive iPad applications in 30 minutes using Apple Keynote [...]
  5. Interactive iPhone prototype with Keynote in 30 minutes | Amir Khella - [...] people who downloaded the iPad Keynote prototype asked if it’s possible to create something similar for the iPhone. I …
  6. How to Create iPad Prototypes Using Keynote for iPad « cvil.ly - [...] Take a look at what @amirkhella has been up to: How to Prototype Interactive iPad Applications in 30 Minutes …
  7. Today’s Readings | Aaron T. Grogg - [...] Everything is the iPad now-days, isn’t it?  Well, this is too: a great way to build functional templates for …
  8. Wireframes Magazine » iPad Template for Keynote Prototyping - [...] Khella just described his experience of building an interactive prototyping for an iPad application using Apple’s Keynote. Along [...]
  9. Обзор свежих материалов, июль 2010 « UI Warehouse - [...] How to prototype interactive iPad applications in 30 minutes using keynote Amir Khella подробно рассказывает о том, как можно …
  10. Prototyping with Apple Keynote | Why Not? - [...] help on how to create these prototypes, check out this tutorial. Published: October 4, 2010 …
  11. Methods of presentation to start thinking about. « Editorial Graphics for iPad - [...] http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-o... [...]
  12. iDog. Wireframe e mockup - [...] How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote [...]
  13. The Impending Tablet Explosion - [...] How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote – This shows you how …
  14. Should a Non-Technical Co-Founder Learn a Language? | Erik Pettersen's Random Drivel - [...] How to create an interactive iPad app prototype using keynote [...]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>