Learn how Keynote is useful for animation-focused interaction, and for testing out screen-flow animations. In this tutorial, Diane Cronenwett demonstrates how to use Keynote for simple UX interactions.
- Keynote is primarily a presentation software, but you can use it for prototyping and for wireframing concepts and ideas quickly. Keynote has a lot of built-in animation, so it's really easy to experiment with different effects to prototype animations and help visualize interactions. One of the reasons you may want to use Keynote for prototyping over another tool is the ability to produce the interactions and animations that you're visualizing, quickly. In this first example that we're creating, I'm going to simulate a web experience where someone selects on a video and the video displays in a modal state.
I also want the video comments to move and dissolve in. I've inserted a wireframe I created previously and added a thin border around it to distinguish it from the background. Let's add some way of showing how a user might select the video. We'll do that by adding a circle to show where the mouse will click. In the Shapes menu, let's select a circle and change the color of it using the inspector on the right.
I want to make it stand out, so I'll select red, and remove the shadow. I want the circle to appear and disappear, like a mouse click. So in the Animate tab in the inspector, I'll select Build In and Add an Effect of Appear from the animation options. In the Build Out menu, I'll select Disappear. Opening up the Build Order menu, you'll see two separate animations that are controlled by a click.
I'm going to drag Disappear up so that it's part of the same animation build. If you preview the build, you can see that the circle flickers briefly. Let's slow that down by adding a delay after the build of .20 seconds. Now we can see it better.
From the Shapes menu, add a rectangle and drag it over the entire image. Let's change the color to a dark gray and change the opacity to 80 percent. To simulate the overlay dissolving in, let's add an animation effect of Dissolve.
You can find that effect in the Build In tab. When you open the Build Order menu, you'll see the rectangle we just added is not in a combined build with the other two objects. So we'll just drag that in to create a continuous build. For the video player, let's add another shape of a rectangle, and change the color and place it centered in the canvas.
I'll need a Close icon, and for this I'll use text with the letter X as a shortcut by selecting the Text button and moving it to the corner and changing the color to white. Let's add a Play icon to put in the center to make this look like a video player.
To finish up the player, let's select all three objects, the Close icon, the Play icon and the rectangle, and group the objects by either going to the Arrange menu, or selecting group by using Option Command + G. For this interaction I want the video player to appear in the overlay. So in the Build In tab, we will select Appear as an effect, and in the Build Order, let's drag the group into the animation build.
And in the Start dropdown, let's change this to With Build 3. I want the player and the overlay to display at the same time, so by changing this to With Build 3, I can simulate this experience. Let's add comments into this view. Let's add three profile images onto the canvas below the video player, and then group them.
We are going to apply the action of Move to this grouping of profiles. I want them to appear as if they are animating in from below. When applying the action to the grouping, by default it moves from left to right. Using the Zoom button from the top left, I'm going to zoom out to 25 percent so I can get a better view. You can find the ability to move in the Action tab, and add an effect of move.
You can see the grouping shows up to the right, with opacity applied. Grabbing this group, let's drag it down below the canvas, then we will move the group with opacity to line up with the group off the canvas. And let's drag into the animation build.
I now want the comments to dissolve in as the profiles are moving in. We can accomplish this by adding text. Selecting the Text button from the top, I'm going to add Comment and change the color to white, and then change the size to 18, and copy and paste that two more times. Loosely I'm going to align the Comment to the profile image. So by selecting the profile groups in the build, you can see where the end state of the profiles are.
Line up the Comment with the profile image. It might take a few tries. In the Animate tab, apply a Dissolve effect from the Build In group and drag it into the animation build from the Build Order window. Okay, let's preview this interaction by pressing Play.
And great, that looks exactly like what I was expecting.
Explore the benefits, techniques, and tools of prototyping in this introductory course with designer Diane Cronenwett. Diane covers the basics of building effective prototypes with the right "fidelity," and getting more valuable feedback from your design testing. Learn how to build simple, satisfying prototypes on paper, and use digital prototyping tools like Moqups, InVision, and Axure to add interactivity and animation.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool