How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:How to Use Keynote to Rapidly Prototype and Visualize Applications

How to Use Keynote to Rapidly Prototype and Visualize Applications

Apple’s Keynote is a surprisingly unsung hero in a market that is stuff full of specialty prototyping applications aimed at UX and design professionals. And while I’ve been really happy using Axure, Sketch, Omnigraffle and other applications, Keynote is one I keep coming back to for its speed, flexibility and its ability to quickly generate visuals for testing and gathering client feedback.

Version

The version of Keynote I use most often is not the latest Keynote 6, but Keynote 5. The main reason for this is that some of the interface changes in Keynote 6 make it harder to determine which builds on the build screen are INs, OUTs, and ACTIONs. Since the majority of the work we’re doing is on the builds screen, we use Keynote 5.

| | |
|

Keynote 5 displays if an action is a build IN, OUT or action such as MOVE, SCALE, etc.

|

Keynote 6 always displays the name of the build, but does not tell you if the build is IN or OUT.

|

The Build/Animate menu is one of Keynote’s most powerful tools and the changes in Keynote 6 make it a bit more of a hassle to navigate when you have many actions/builds that are of the same type.

To Click Or To Play?

Now that we’ve chosen which version of Keynote to use, the next step is determining what sort of prototype we want to build. Keynote has the ability to export an MP4 movie that when played in Quicktime, will respond to the user’s mouse clicks as if the file was natively run in Keynote. So if you want to allow the user to navigate with the mouse, or on a touch device through iWork.com, you can set it up to do so. For more information on this approach, check out this tutorial.

For this post, we’re going to focus more on playing a predefined sequence for the audience - there are two reasons for this:

1) The main benefit that keynote brings to early prototyping over tools like Axure, is speed and fidelity in transitions between different display states. While Axure, Sketch, and other prototyping tools are great for illustrating user flow and basic interactivity, they lack fidelity when looking at touch behaviors or illustration specific mouse interactions.

2) Early definition of visual transitions can allow UX technologists, as well as front end developers, to begin work on JavaScript methods earlier in the process and facilitate client discussion.

While Keynote is great for creating fully clickable prototypes - it does not allow for the work to be ported into the final product. That being said, instead of wasting time making high fidelity transitions in Keynote, it might be more worthwhile to only focus on a few key transitions in Keynote and use another tool (like Axure) for making clickable prototypes.

Rather than relying on the user to click to interact with the final export, we’ll be animating a mouse or thumb cursor and use it to guide the audience through the interaction.

Of Mice and Thumbs

When creating video examples of interactions, we want to ensure that it’s clear what mouse or touch motion is firing off various events. When showing a desktop application, a .png of a cursor with a transparent background makes for a great example. To ensure that you have good contrast at all times, apply a 1px white stroke around the cursor, so it doesn’t get lost on dark backgrounds.

cursor

When clicking, I like to have a small circle with a transparent fill and a single red line. POP the circle in for the click action, SCALE it down to about 15% and then DISAPPEAR it out. Time both the POP and the scale to .3 of a second for a nice tight interaction. This object can be copied and pasted multiple times with it’s build events arranged in the build order as necessary.

For a thumb cursor, I use a grey circle at about 40% opacity. For the tap motion, SCALE the circle to 50%, then SCALE it back up to 100% both with .3 of a second durations.

thumb

Now that the cursors are settled, we can use actions to MOVE them through the scene and trigger other build actions to tie to the on-click action.

Here’s a quick example of a user completing some form fields with validation…

formfields

Each of the text entries in the the form fields are TYPEWRITER builds of a text box. The on-click visual treatment of the submit button is an APPEAR build while the validation message is a DISSOLVE.

Mysterious Magic Move

This all works well for super simple pages but what happens when you want to scroll or navigate? For moves like these, the Magic Move transition is your best friend. One important thing to note is that while Magic Move can be a major time saver, it’s a fairly closed featured compared to the rest of Keynote’s features and can be more difficult to use accurately than other transitions in keynote.

Magic move works fairly simply - if a slide is set to have a Magic Move transition, then at the end of the BUILD OUT sequence, Keynote will look at the destination slide and match up elements from one slide to the other, adjusting all the visible elements of the existing slide to match the destination slide.

For solving our issue with showing how a page scrolls, this is pretty easy. Simply put all of the elements on the first slide, set the transition to Magic Move, duplicate that slide, and then shift all the elements up. On transition, all of the elements will move up simulating a page scroll.

Things begin getting tricky when elements appear and disappear between transitions.

Let’s take a look at the following example.

SchedulingApp

To accomplish the transition the way we want - with the calendar coming in from the top and the previously scheduled events coming in from the bottom - we want to have both of these elements in the first slide, just off the screen. We could set a build order to build out the elements that we no longer want, such as the various text boxes, but any elements that are missing will simply fade away during the Magic Move. The tricky part is that Magic Move will attempt to pair objects, so if there are other rectangles or text boxes in the destination slide, you could see a transition where one text box morphs into another text box.

It can be tricky to implement a transition that changes text while it’s moving - or to tie multiple movement and text changes in at the same time, but with extremely fine control within the timing and delay boxes in the animation, it can be done successfully.

The alternative to creating an animation and using an approach like Keynote is to create something like the image below which tries to show what will happen in the transition with a static image.

diagram

Being able to show a client an animation is much more consumable and Keynote allows you to tweak delays, durations and speeds so more accurate information can be provided to the developers and technologists when the design is approved.