Consider These 7 Motion Principles Before Kicking Off Design
If you’re on a product design team, you may want to start considering a clear motion strategy. After all, motion is the future, at least according to this post.
When I started establishing a Motion Design Language for DirecTV’s Next Gen Entertainment products, it was going to be important to start with a strong foundation of principles. This was not only important from a design perspective, but also in getting buy-in from leadership because motion/interaction design, as a discipline, was never considered before at DirecTV. And the same can be said for many other companies.
Today, we want to move designers from whiteboarding to experiencing ideas faster. This involves prototyping with motion. A standard click-through prototype can communicate a flow, or a sequence of steps, but using motion adds the concepts of speed, ease, personality, pacing and timing — all of which are important to UX. By far, in my experience, Principle is the best tool for this, and it’s so easy to learn.
With so many ideas coming out of our group every day, and with several motion designers and prototypers on the team, it’s important that we all speak the same language. These 7 Motion Design Principles are a foundational set of motion and interaction tenets that are the driving force behind our motion work today:
Motion is Emotion
Imagine watching a Pixar movie in storyboard format. You’d probably see a bunch of cute and clever character illustrations with relatable facial expressions, but what really delivers that emotional punch is the way they move. That magic can be applied to anything, even UI. The more we assign natural movements to a UI, the more we connect to it emotionally. Words like “fun,” “slick,” “fancy” are all words you’ve heard used to describe certain UI. Well, try assigning characters, or some people you know, to each word as well. UI can—and should — be emotionally relatable.
Motion as UX
Motion isn’t just sizzle — something we can add to a product after everything’s been designed. Here at DirecTV/AT&T, motion has become an integral part of the design process, sometimes leading UX and UI explorations. Motion should be functional, above all else. It should help orient the user, or help them know what they can do next, or how to get back to where they were. It can mask long loading times. The way a transition is designed can affect how software and API’s are built. So it has to be an early consideration.
Progressive Disclosure
This a very common UX principle that’s aided through motion. It involves only showing the user what they need to see as they move through a flow, progressively showing more, and maybe hiding previous steps along the way. Without motion, you can easily disorient a user by hiding, or suddenly revealing, a part of the UI.
Continuity
If a user’s moving from one page to another by selecting something on the previous page, motion can build a seamless link between the two pages by bringing that selected item along.
Just note, this is one of those transitions that require data and API’s to be structured in a specific way in order to achieve this.
Motion as a Necessity
This is arguably one of the more important principles. It’s how we practice restraint. We only design motion and transitions when it helps the product or feature in some way. And we often use this principle to check ourselves when we get carried away.
New hardware and software advances can be exciting, but that’s when we turn to the saying “Just because we can, doesn’t mean we should.”
Invisible Transitions
Seems counter-intuitive, right? Why design something people can’t see? that’s not quite what I mean. An invisible transition is so logical, predictable and intuitive that it’s almost not even noticed, at least not consciously.
An invisible transition is like good film editing. It should have a subconscious emotional impact and be logical, or “feel right.” You probably don’t walk out of a movie saying “wow, the way that film was edited was amazing!” Instead, you talk about how it made you feel or how the story grabbed you.
Implied Motion
When something transitions into position from off-screen, you don’t always need to show that thing starting from off-screen. Try showing 60% or 30% of the movement while you fade the item(s) on and you’ll imply where it started from. The human brain can fill in the rest. And what you’ll end up with is a much more sophisticated design than if you were to show the full motion. This is especially important when designing for larger screens.
Some of these principles are simply what I believe to be best practices (Motion as UX, Motion as a Necessity). Some are relevant to our brand and our voice (Motion is Emotion, Continuity, Implied Motion) at AT&T.
Finally, Make It A Collaborative Process
Once we established these Motion Principles, we put together our Motion Design Language, which is a philosophy around how and why we apply motion design the way we do. It gets into details around speed, ease, spatial qualities, functional attributes, etc. And all of this was put together early and collaboratively before design began or final hardware/software decisions were made. Making it a collaborative process was one of the most important elements. It gave everyone some ownership and made the adoption of motion Principles and Design Language fast and seamless.
