In a lot of my projects, I have found that any thought around motion design tended to be well after we made a lot of the critical decisions. After most of the interaction work (research, synthesis, prioritization, workflows, wireframes, iterations, and annotations), visual designers would start to talk about motion.
We often felt that during this stage it was too late. We were constrained by previous decisions and could only add animation at the microinteraction level.
How could we have better explored how to integrate motion design into the work with interaction models and system designs? The following are concepts I have been exploring as I try to find a path that brings these disciplines together.
Motion design: the good
A couple of years ago at SXSW I lucked into this talk, “Principles of UX Choreography.” Rebecca Ussai Henderson (UX designer) and Glen Keane (Disney animator) introduced the concept of animation principles to designers. Motion was just beginning to gain attention in the app space. This was a timely presentation that connected tech with classic Disney animation. Ultimately, the principles that Rebecca introduced helped designers interpret the intersection between motion and ux. If done carefully with well thought out intentions, we can help the users complete their tasks. If we are lucky, we could elicit a positive emotion that the user would associate with our product.
Animation principle: pose to pose
Animation principle: solid drawing
Check out the video “The Illusion of Life” to learn more about the 12 principles of animation.
Motion design: the bad
With the goal to make a more engaging experience, motion has quickly surfaced as the “go to” tool for designers. However, just as gifs and flash animation saturated the landscape, overusing these technologies can place a cognitive burden on the users.
They do not come to the site or download the app to watch the same redundant animations. They have a task to complete. These animations often slow them down.
Just how badly do we overuse motion? Sophie Paxton outlines the scope of the problem in this post on Medium.
Focus on the problem first
Mark Di Sciullo outlines in his article, “How to Integrate Motion Design in the UX Workflow,” 13 key functions that motion contribute to a UX problem. His point is that we should never start with motion. We should start with the problem and then consider how motion can help solve it.
UX problem
”I don’t know where I should go next”
Complimentary functions of animation
- orient the user within their environment
- provide useful feedback
- hint as to what to do next
Motion design can be a powerful tool for solving problems. While using these elements in our products receives a lot of attention from designers and developers, it also has the potential for confusing everyone involved with the project. Teams can get distracted from the real problems. People using the product may not find their way easily. As we move forward, we need to remember that the masters of animation have already figured out how to communicate a story that elicits appropriate emotional responses. As designers, our job is to properly link this work to the UX process.
For a deeper dive read this Smashing Magazine article “How to Integrate Motion Design in the UX Workflow.”
Learn more about motion design
School of motion
Joey Korenman has put together an online school that kickstarted a few of my colleagues’ motion graphics careers. The courses can be intense, but they are arguably more financially accessible than design school.
UX in motion
Issara Willenskomer got me hooked on After Effects and UI with his course “UI Animation Fundamentals.” He has quick tutorials that help you optimize a workflow from static screens to animated prototype.
UI animation newsletter
Web Developer, Val Head, curates a fantastic list of resources for Web animation. This is great for the code curious designers.
Disney animation principles
Learn the 12 principles of animation from the work of Disney.
