on motion design for mobile interfaces
August 30, 2008
On Wednesday evening, I heard Christian Robertson speak about Motion Design: Wayfinding and Storytelling in Mobile UI at IxDA SF.
Christian began his talk by defining motion design as “change over time with visual continuity.” However, throughout the presentation, he revealed details of motion design which made clear that it is a lot more than that: the reasons to do it and what it helps you accomplish in a design. It is about story telling, setting context, establishing mood and helping someone find their way.
Teleportation
On a mobile phone, you have the design challenge of very few inputs and outputs. The screen size and resolution are small, and it is easy to have a scattered experience. The mobile UI is composed of many, many states. Without visual continuity, it is like teleportation, which one can only imagine would be a disorienting experience. Christian compares it to taking the NYC subway a few blocks instead of walking. You come up above ground and you don’t know what direction you are facing and exactly how to get where you want to go. Whereas, if you walk there, you know exactly where you are. Our eyes provide a very small slice of the visual field, but our brains are adept at putting together complex maps of a scene or territory so we can find our way.
Emphasis
Movement makes us look. Christian compared a picture of large, fuchsia flowers and a low contrast photo of a lion blending into grass. If that lion moves just a little, our eyes are drawn there. The pretty colorful flowers are fairly uninteresting contrasted with the fear of death. We’ve evolved to pay attention to motion. As designers we can take advantage of that.
User Generated Motion
Christian noted that to make motion feel natural, you can use traditional character animation effects like ease-in/ease-out and secondary or residual motion. However, as interaction designers we have an opportunity to incorporate the motion of a live human being in the design to create a richer, more textured experience. Mouse movement creates an organic feel with a natural fluidity. Even navigating through a list has randomness.
Christian also provided a great list of practical tips of how to inject motion into the design process that I’ve written up over a the cinematic interface blog.