Prototyping with Keynote

This post was previously on the Pathfinder Software site. Pathfinder Software changed its name to Orthogonal in 2016. Read more.

I’ve been using Keynote–Apple’s version of Power Point–for at least a year now.  It provides multi slide functionality with an easy to use drag and drop interface for creating objects of pretty much any kind.  It also works great at any level of fidelity.  I can do quick sketches during the early phase of a project, and when the time comes I can also build complete full color, pixel perfect mock-ups of an interface.  Apple gives me more creative control over my objects with Keynote than Microsoft does with Power Point, which frustrated me to no end every time I needed to place something with precision or build a custom shape.

Pretty much all of my design projects will include some sort of user testing.  It is at this point that I must transform the wireframes I’ve built into a clickable prototype.  Now, this step can and frequently does get messy, at least the way I used to do it.  I used to create my wireframes, one slide for each screen, or state–which is much more common now as RIAs take over more and more of the landscape–and then export them to PDF.  I would then take that PDF document into Adobe Acrobat, which has a hyperlink tool, thus allowing me to add the interactivity to the wireframes.  The problem is that the workflow is slow and inefficient because the tasks involved require two different programs.  As long as the wireframes themselves are perfect, I have no problem.  I’m done with Keynote.  However, anytime I want to make a change to a wireframe, I must go back into Keynote, make the change, re-export the entire document as a PDF, take the page or pages that I’ve changed and, one at a time, place them into my existing hyper linked PDF.  Also, Acrobat is not great at making the process of replacing pages very usable.  I frequently have to double check whether a page replacement actually worked because it’s not clear during the action.

Now, instead of using Acrobat to add the interactivity, I simply use Keynote, which allows my to hyperlink any object to any slide number (or, for that matter any web page, or even another Keynote slideshow).  That way I can make changes to both the underlying objects in the wireframes as well as the click-flow in the same program.  Keynote will automatically embed the hyperlinks into an exported PDF as well.  That way, the end user of the test needn’t actually have Keynote.  The whole process is much more manageable as a result, especially since my prototypes typically involve dozens of individual wireframes.