Prototyping with Motion - Using Tumult Hype

"If it can be written, or thought, it can be filmed."

- Stanley Kubrick

Motion can be a key element in storytelling. In theater and cinemas, directors pay a lot of attention to the position of actors on the stage and how they move; this planning process is known as blocking and was named after the technique of using wood blocks in a miniature stage that originated in the 19th century. The movement of the actors and, in the case of cinema, the camera helps to communicate emotions to the audience. The way an actor walks in and enters the scene can tell as much as what the actor says.

A storyboard capturing key camera angles, movements, and transitions--note the "FADE TO BLACK" sign--that contribute to telling the story

When building a prototype, you are also telling a story--the story of how your product will help...

The role of motion in prototyping

An app normally has many moving parts, for example, transitions between views--panels that appear as you click on a button--animations and images that react to a touch gesture, and many more. Deciding how each of those elements will move is an important design decision to consider.

When prototyping, you can explore different approaches for using motion to help achieve your goals. Motion can be helpful at different levels:

• Motion helps to explain: The way items move can tell you about the rules of the digital world they live in, thus helping users to understand these rules better. Clarifying the information hierarchy or providing orientation cues can be more effective when it is communicated intuitively through motion rather than when explained with words. For example, friction in the scrolling movement of a list of items can be used to communicate...

The basic concepts of Hype

Tumult Hype is a tool to create interactive animations. Hype has been used to create functional applications, widgets for interactive e-books, interactive visualizations, entertainment videos, and games. Despite being a tool aimed at creating final products, it is also a very convenient prototyping tool, thanks to its interaction and time controls.

Hype falls into the same category as the classic Macromedia Flash, which was also used for prototyping purposes. However, Hype uses HTML5, which makes the resulting prototypes easy to use on different platforms. Hype is also able to export in video format--including animated GIF--which makes it easy to generate noninteractive prototypes.

Hype is available for Mac in two versions--regular and pro. Although the pro version provides features such as a physics engine and facilities to reuse components, the regular...

Manipulating layers with interactions

In the preceding example, we used a single image to represent a whole screen of an app. In this section, we will use layers to define separate behaviors for different parts of the prototype.

Manipulating layers

In this prototype, we'll explore a simple interaction that simulates the status change of an object. In the main list of activities on our example app, each element has a bookmark icon. We will build a prototype where you can activate and deactivate the bookmarked status of one item in the list.

We'll illustrate how to support this interaction through the following two different approaches:

• Using a single layer for the active state
• Using separate layers for each state...

Prototyping complex behavior

The prototyping techniques you have already seen should allow you to prototype many diverse interactions. In this section, we'll see a few examples that can be useful in more specific situations. You can probably prototype the basic idea of your designs without them, but they can add an extra degree of realism in those cases where it is needed.

Composing animations

In the former examples, the animations defined have been quite simple. We have created transitions for a few properties such as opacity and position, but we haven't paid much attention to the timing and acceleration of those transitions. In this prototype, we will create a much more complex animation.

Download a prototype from...

Being pragmatic

Hype is a very powerful prototyping tool. It allows you to create all kinds of prototypes. However, the process of creating a prototype for a real project is not always a clear path. You cannot anticipate all the necessary steps in advance, and some changes are expected in the process. In this section, you'll find some advice to help you navigate the process of prototyping with Hype more fluently.

Organize your layers

Before you start your prototype, it is useful to spend some time planning how the different layers will work together. You'll need to break your mock-ups into different layers depending on which parts you need to manipulate. Sketching the basic interactions will help you to determine...

Summary

In this chapter, we introduced Hype, a powerful prototyping tool. We illustrated how to support different prototyping patterns that we can use to simulate the behavior of our product. With examples of differing complexity, we will be able to support both quick rough prototypes and detailed interactions based on your specific needs.

Getting familiar with the concepts of motion design and how to use a timeline to support them will allow us to experiment with different kinds of interactions and communicate using motion with this or similar tools.

The next chapter introduces a very different tool that is equally powerful but approaches prototyping from a very different angle that relies mostly on prototyping with code.