Keynote is a kick-ass prototyping tool

Note: This piece was written in 2013, before Keynote got a massive update to match its iOS counterparts. The feature set has changed and, thus, it may no longer support a lot of these awesome features. Wah wah wahhhh....

The idea of using Apple Keynote for prototyping is not new. In fact, it's really really  not new. But I recently decided to give it a shot again and found it to be pretty damned good for this purpose.

The Problem

People love high-fidelity. Low-fi stuff is good for basic flows and page structures, but when it comes time to check out the nitty gritty nothing beats hi-fi: it simply feels more real. I wanted to get ideas in front of users quickly, and also make changes just as quickly, but I didn't want to break out the HTML. Enter Keynote. 

The Good Stuff

Keynote provides the tools for a rather robust prototype. First, it supports hyperlinks: any object (text box, shape, etc.) can jump to another slide, a mailto:, a web page. Easy.

Keynote hyperlinks.png

I often take a screenshot of an existing UI and put totally invisible shapes on top of it. Just grab a round rect or a square, plop it on top of the UI element you want to activate, kill the fill color and outline, and make it a hyperlink. Easy.

Keynote also supports animations on slide load/unload and, unsurprisingly, those animations are also supported - for the most part - by Safari and better modern JavaScript + CSS libraries. So, you can have interactions mocked out. Also easy.

Someone anticipated this type of usage for Keynote, as you can make a non-slideshow and force a user to interact with your prototype. Just change the Presentation type to "Hyperlinks only" in the document inspector. 

Keynote hyperlinks only.png

Again, easy. Really.

What's also great is that a file can be exported as a PDF or as a Keynote file. Now, you might wonder why the hell you'd want to make a PDF out of this thing, right? Here's why: while you lose the animations, you keep the hyperlinks. So, you've just made a Q&D clickable prototype that works just about anywhere! We've used the PDF prototypes on laptops and iPads (with apps like iBooks, GoodReader, etc.) 

Also: Keynote's image editing tools are the OS X standard ones, which means you can actually adjust images. PowerPoint, I'm looking at you in disgust.

The Not as Good Stuff

The hyperlinking capabilities you see above are pretty limited. You can't do too much amazing stuff.

Keynote also sticks hard to the slide metaphor (it's a presentation tool too, remember) so you still have the construct of "pages" to worry about. But duplicating slides makes this kind of a non-issue. At one point I admit I did  have two slides to indicate on/off state of a checkbox. Inefficient? Sure. But I needed to test that part of the UI.

Viewing a hi-fi Keynote presentation with animations et al intact requires a Keynote viewer, which means the Keynote app on iOS. I'm not sure if the new web-based Keynote (announced in June 2013 at Apple's WWDC) will handle this, but if it does... look out, because PDFs may no longer be required. 

What is this all good for?

Keynote isn't where I'd want to build something super elaborate and complex. It is the place where I want to get out pretty high-level UI ideas, but with a degree of polish I simply can't do otherwise without re-learning Photoshop. Being able to link slides and create a fair amount of interactivity makes it feel more "real". And, the speed - the speed! Keynote is super fast for these purposes, and it moves about as quickly as I need and want it to. I don't need to learn another language nor UI for it. 

Tell you what. If you have it, try it. Go grab some templates from Keynotopia or just build off of your existing screens. Don't dismiss it as a lowly presentation tool: Keynote is a utility that should be in your UX toolkit.