Dissecting Motion Design with the “7 W’s”
A practical framework that helps you create UX animation in a structural way
Animation is magical. When I was a four-year old, I visited the cinema for the first time. The film was The Lion King. I clearly remember marveling at the sight of moving drawings. That summer, I spent most of my time trying to make flip books and got quite frustrated with the outcome.
Twenty years later, that magical feeling still strikes me every now and then. It doesn’t just come from the traditional animation practice. More and more, I find myself enjoying animated moments in digital experiences. As a UX designer, I am convinced that utilizing animation has become essential for delivering polished digital products.
I believe most of you design folks are with me. Study papers show that animation helps usability in many ways, such as improving navigation of information, building cognitive connection, …etc. As today’s technology and tools mature, integrating motion design into our work is becoming easier and more prevalent.
Although we increasingly see animation showing up in digital products and interfaces, we find many of them boring, oftentimes annoying. Designers start to examine and reflect on the overuse of animation.
So how could we get motion design right? I’ve read many UX articles explaining general animation principles. I found them helpful in understanding the fundamentals of animation. It is also energizing to see beautiful examples. However, few effort was made to bridge the process gap between fundamentals and design outcomes by defining a clear framework in practice.
Recently I’ve been working with my colleague Bó Wáng on developing a motion design framework in order to integrate more animation in our ad formats. This new framework helps us approach motion design in a structural way and has improved our process. Hope it could provide some insights for you too.
The 7 W’s Framework for Motion Design
Think of animation as storytelling: something happens to this thing in some way at some time because of something else. The storytelling nature of animation made me wonder, if there were any formulas in literature that we could apply to motion design. I immediately thought of the Five W’s.
We’ve extended Five W’s to a 7 W’s formula: who, where, when, why, what, with what, in what way. In the context of motion design, they represent: component(who), environment(where), interaction choreography(when), user behavior(why), property(what), property relationship(with what) and time function(in what way). I’ll elaborate on this framework with a simple iOS unlock screen example.
Component (who)
Animation happens to component(s). In our example, the component is the text CTA “slide to unlock”.
There will be circumstances where one animation could happen to multiple components. (Imagine you do slide after seeing that unlock screen, what would happen? If you have password protection, you will see many components move together as one layer to guide you onto next screen.)
Clarifying what component(s) will be animated is the first step of motion design.
Environment (where)
Environment is where the component dwells. It is a relatively ambiguous element in the framework. From a higher level, it could be the OS and platform. More often, it indicates a specific screen.
Thinking about environment will help you figure out the following two elements: interaction choreography and user behavior.
In our example, we can simply define the environment as follow: iOS unlock screen.
Interaction Choreography (when)
Interaction choreography is part of your user flow. It indicates when this animation happens. If there are multiple states in one task flow, map out all of them and make sure all your animations work as a suite visually.
Still using our iOS unlock screen example. Let’s check out the whole experience(quick draw on the left). We can tell there are actually parallel states of the locked screen.
Now take an iPhone, and notice why Apple uses same animation for “slide to unlock” and “try again”.
User Behavior (why)
User behavior is the most important aspect in animation. If there is no user behavior, there shouldn’t be any animation (hey pop-up ads, I am talking about you). However, sometimes a user does participate without any direct input. For example, in our unlock screen scenario, Apple intentionally have a two seconds delay before the animation starts. So staying with the screen (time input) is also a behavior, a less obvious one.
Animation happens because of a certain trigger. In interaction design, we often have different approach to understand trigger. For example, in Dan Saffer’s classic book Microinteractions, he categorized trigger as user-initiated and system-initiated. While in our 7W’s framework, we see trigger as a flexible mix of environment, interaction choreography, and user behavior. Specifying trigger will help you evaluate your design ideas.
Property (What)
Now we can talk about animation itself. Basically, animation is the change of properties. I categorize properties in this way: Scale, Position, Color, Shadow, Image processing (such as opacity change or blurring) and mask.
These properties are easy to understand. The only one that needs a bit more explanation is the mask. Mask enables you add something new to the component. For example, our unlock screen text animation is actually a mask. Check out this Stack Overflow topic to understand the making behind this animation.
Property Relationship (With what)
Sometimes, an animation may involve change of several properties, tied by a certain relationship. This relationship usually comes from a physical world metaphor. For example, if you are designing a closeup and want to use lifting a piece of paper as the metaphor, first thing to change is the scale. And you might also apply the shadow property change to make the animation more convincing.
In our unlock screen example, once you slide the screen, you will notice the background image is blurred and the front layer is darken. These two properties work together as a metaphor for shifting lens focus.
Time Function (In what way)
Time function indicates how a property changes in a certain time duration. It could be confusing for most of us. Understanding time function is important for us to design smooth animation. If your animation looks awkward, half of the reason might be the wrong time function.
Time function usually could be presented as some kind of math graph like the illustration on the left. The Y-axis could be a property value, or the progression of the value.
Because of friction, gravity, tension… and many other forces in our physical world, a real movement usually has time functions with organic graph representation. In digital design, we would simulate the motion in a simplified way. Bezier curve is usually what we use in real application.
My suggestion for getting time function in place is fully mastering the tool you are using for your design. If you are using After Effects for design prototypes, you might want to be an expert using the Graph Editor. If you are using Framer or directly prototyping in code, make sure you get the bezier curve right(check out this article if you use Framer and this tool).
Animation could happen in millions of ways. Experimenting with different design choices could be fun. But it could also be an endless rabbit hole. Instead of designing details without a plan, you should lay out all possibly changeable properties, give meaning to the motion by organizing properties with metaphor, and finally tune in the design with your favorite tool.
Voila! I hope this 7 Ws framework would encourage you to think motion design in a more structured way. I’ll write another article about how to integrate motion design in your whole design process and how to apply this framework to your product. But before that… I’d love to hear your thoughts! ;)
