Movement is all around us. It’s an integral part of the human experience. And yet, we often forget its importance as a vector for communication. Research has shown that additional avenues of communication lead to a “richer” message, with face-to-face communication being much richer than other forms, due to the many different feedback channels at play,
The same holds true for communication media as well. Motion is an important tool for adding context and nuance to a message. From human body language to object physics, motion can show us a lot.
- What should be animated?
- Ease in? Or should we ease out?
- Should it be precise and rigid? Bouncy and floaty? Something else?
- How fast or slow should different elements be?
- Should this even be animated in the first place?
Animation in Goal-Oriented Design
If you don’t have ready answers to those questions, it’s all too easy for your animations to become superfluous “delighters” – fun little touches that don’t accomplish much besides looking nifty. Which is great – the first time you see them. After that, they’re dismissed as superfluous fluff.
We want to avoid that.
To do so, we need to communicate the problems, goals, and scope of the project. Web animation is more than just a neat distraction; it’s a way to solve design problems, communicate information, and otherwise achieve your project’s goals. So to do that here’s some questions to ask.
What Does the User Have to Do?
What’s the primary action your users are going to perform here? How are they going to do it, and what will they expect to happen when they do? In light of that, is your animation a help, or a hindrance?
How Does the User Arrive at Specific Actions?
Does your spatial layout make logical sense? Can you incorporate motion to create a feeling of depth, thereby communicating a hierarchy?
What Ideas Need to be Reinforced?
Will interactions feel more responsive by showing a reaction? If a user successfully interacts, should that be visually verified? Can we illustrate the site’s quality and performance speed through interactive elements?
Once you’ve got an answer to these questions, you can move away from subjective design, and into a goal-oriented, objective mode. And once you’ve done that, now you can focus in on having fun conveying a brand’s tone and voice through animation.
What Makes a Quality Animation?
If you do even a tiny amount of research, you’ll run into something called the 12 Principles of Animation. Introduced by two Disney animators in 1981 – and based on the work of top Disney animators leading back to the 30’s – these factors are readily observable in human motion, and help gauge what feels real to us. Identify these movement patterns in everyday life, with their actions and reactions, and you’re on your way to understanding motion in design. They are:
- Squash and Stretch
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Motion
- Slow In and Slow Out
- Secondary Action
- Solid Drawing
Applying the Principles to Interactive Design
Text, buttons, links; these elements don’t move the way that humans or animals do. Even so, these principles can help guide your use of motion. Every movement contains actions and reactions, and your interface should be no exception. Using these animation principles, you can highlight and identify key elements, by telling users what’s interactive, guiding them visually through your content, orienting them to your page, giving them feedback, and of course, making the interface visually appealing.
If you’re part of a team, you’ll want to be proactive about the role of animation in your project. Talk about interactions early in the project, figure out the priority actions for each page, and you can likely benefit from a style guide for your animation.
Animation is Communication
Just like any design element, animations are a tool in your kit, a way to communicate information. A well-crafted animation can be clearer than any static element.
Keep in mind; your goal is to communicate, not animate. Do that, and you’ll be fine.