The movement is the massage

Cooper hosted an IxDA-SF event last summer in which Punchcut‘s Christian Robertson discussed motion design, and the ways in which it can provide meaning in user interfaces. His presentation was specific to his experience designing for mobile devices, but many of his insights apply to a much broader perspective and, since then, they’ve remained in the back of my head.

Prior to joining Cooper as a visual designer, I was a motion graphics designer. For a long time, these two experiences were disconnected. I took interaction design classes and motion design classes in school, but they were separate lines of thought. One was rational; the other, evocative.

Recently, I worked on a consumer product in which the interface movements and animations were the foundations of the experience. The real lesson for me in this process was that thinking about, and designing, what happens between screen states. Even when there isn’t a mandate for you to consider motion in your product, incorporating it can yield a design that is more complete, more understandable, and more meaningful.

This was a huge duh-moment for me. Looking at a typical design framework, we see discrete places (or states), snapshots in time and space. We architect this way because it is efficient and breaks the flow down into digestible parts. But when we ignore the path between A and B, we risk disorienting and confusing the user.

no transition.gif
Scrolling a menu with no transition.

with transition.gif
Scrolling a menu, transition included.

The example Christian used in his presentation was the subway: You get on at one place, and you are essentially teleported to another place. You arrive without really knowing how you got there.

Humans look for, and respond to, movement. We evolved to spot predators in our periphery and track the movement of prey. This instinctual attention is what motion design can leverage in order to make a behavior feel more “intuitive.” When users can see how the screen gets from state A to B, we (as designers) can worry less about them getting lost. When designers think about how the screen gets from state A to B, we can understand the system of behavior at a more detailed level. The movement becomes the meaning.

2 Comments

uxdesign.com
Wholly agreed. Time/motion is an unsung hero of user interface design, even it has a bad rep. from early flash abuses. Used well it can tell a more meaningful, even usable, interactive story. Two things: better mock-up and prototyping tools will help us better use motion/time as a design element... design (and approval) is too often considered in freeze frame. And we must know and use and encourage frameworks that support use of time. Great post. Thanks!
Joe Pemberton
Daniel, thanks for the thoughtful write-up. Christian's team at Punchcut has a handful of talented motion designers. One of them posted a piece on motion design at our blog recently. http://idlemode.com/2009/07/07/why-motion-design-matters/ Regards.

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment