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.
Scrolling a menu with no transition.
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.