Animation thinking: Problem solving with movement
animation (animatio)
[an-uh-mey-shuh n]
- A simulation of movement created by displaying a series of pictures, or frames.
- Liveliness; vivacity; spirit; motion; activity.
- (Latin) “the act of bringing to life”
You can’t argue with Latin (it’s a dead language, after all). Just as we’re sitting here thinking of cartoons dancing across a television screen, Latin reminds us that without animation, we would only be able to appreciate the superficial appearance of those cartoons. We wouldn’t be able to observe them dancing, moving, living. But watch as they move and suddenly we bear witness as they come to life.
Sounds magical, right? And yet “we’ll think about animation later” remains a common statement in design meetings.
There’s still a lot of work that needs to be done in the way of demonstrating the value and functionality of animation as it applies to mobile and product design. But like anything, the best place to start is with thinking.
But first — a brief history of animation
Animation’s inception can be traced back to Walt Disney’s first feature film in 1928: Steamboat Willie. Over the years animation evolved in later Disney movies, anime (Japanese animation), to retro and modern video games. We see it all around us in our everyday entertainment.
The animation principles behind this form of design were documented in the 1981 Disney published book, The Illusion of Life, to help people better understand what animation was all about.
The 12 animation principles are as relevant as ever today. When applied well, these principles can complement the design and UX and make the experience look and feel responsive. Sure, it will take a little more time and attention to detail but that only goes to show how much more we care about the product and the user.
So how can we apply these principles to the user experience?
Watch the video below and see👇🏻
What is animation thinking?
“Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together.” — Pasquale D’Silva”
How many times do you notice the way your news feed stories gently transition as you scroll, or how your notification bell rocks back and forth when there’s something new to tell you? We’ve become so accustomed to animation in our lives that we don’t even notice it’s there, shaking its pixels at us, always trying to tell us something.
But what exactly?
Animation is telling us that time exists, and life is a series of one transition to the next. It’s reminding us that physics affect the world with weight and direction, that nothing in the real world just turns on and off. There is always a movement in between, sometimes in the most subtle of ways.
This is animation thinking; it’s a problem-solving process that uses physics to answer the question of what those movements between life turning on and off should be.
Animation as a visual language
“The goal of animations should not solely be entertaining the user, but rather, they should be helping the user better understand what’s going on and how to use your product most effectively.” — Michael Villar”
As we create more interactive experiences, there’s a greater need to bring movement into our designs. The moment we start problem solving with movement, animation becomes a visual language.
For example, often we don’t need to explain how an interface works. We can use animation to deliver the message at the appropriate time, and with more ease on the eyes. Animations can be used as cues and feedback to show the user progress, what’s about to happen, or what can’t work. They can also be used purely to evoke an emotional response, like amusement, humour surprise or delight.
Since humans are used to seeing things move in the real world, animation can provide a more natural-feeling user experience. Of course, the opposite is also true; as good as we are at observing movement, we’re also sensitive to movement that doesn’t feel right. If the movement is jarring or shaky, the user may feel disoriented and communication instantly breaks down.
As a visual language, animation is responsible for communicating information to the user with context and meaning. As a cognitive process, animation thinking is responsible for delivering solutions. Achieving these goals in a way that feels natural to the user relies on applying the principles of animation effectively, and with good timing.
It’s all about the timing
As humans we generally don’t like to wait too long for anything, especially when it comes to a user experience. Good animation all comes down to the balance of timing; if they’re too quick, the user may feel disoriented or overwhelmed. Too slow and the design feels unresponsive and sluggish.
Layering animations can help get the timing right and prevent a disjointed experience. Start by treating each animated element as independent with its own timing. Watch each element in isolation over and over again; testing it on yourself and others. You may have to keep tweaking numbers, direction, subtle movements, easing until it all starts to feel right. Once it does, think about the device the animation will be applied to; animations will feel differently across mobile, table and desktop.
And speaking of timing, the best time to apply animation is at the very start of your design process. As both a visual language and a way of thinking, animation is an end-to-end process and should be applied as such. It’s not just one transition that will make a user’s experience amazing, but the entire journey.
