An Introduction to Thinking About Animation on the Web
Minh Tran, Former Senior Designer
Movement is a form of communication that can be translated to informative interaction patterns on the web.
Movement is everywhere around us, and sometimes we forget it as a form of communication. From body language to the way gravity works — movement can tell us a person's emotions and what actions are about to occur.
- Where should we have animation?
- How fast should this move?
- Should it feel bouncy or rigid?
- Should it ease in or ease out?
- Should we have animation at all?
Goal Oriented Animation
If you can't rationalize any of the above questions, animations can easily become "delighters" and are seen as subjective fluff, easily dismissed or neglected. To avoid this, we should communicate project problems and goals effectively and rationalize animation as a means to solve problems or achieve project goals. To start, here are some general questions to guide you:
What do users need to do?
What is the most important action to users?
How do they do it?
What are they expecting when they take that action?
Did the animation fulfill its purpose?
How do users get to specific actions?
Does the layout spatially make sense?
Can motion help create a sense of depth to communicate hierarchy?
Do we need to reinforce any ideas?
Do interactions need to show a reaction to feel responsive?
Does interaction success need to be verified?
How do we show site performance speed and quality through interactions?
If you can start to answer these questions, animation becomes less subjective, and more objective. If you can start to answer these questions, animation becomes less subjective, and more objective. This is where we can have fun communicating brand voice and tone through our animations.
What makes good animation?
If you do a bit of research, the 12 Principles of Animation will be mentioned wherever you go. These are principles that have been observed in human movement for decades and shows us what makes an animation feel “real.” Looking for these patterns of movement in real life is the first step to understanding motion design. Every movement has an action and reaction.
Squash and Stretch
Straight Ahead Action and Pose to Pose
Follow Through and Overlapping Motion
Slow In and Slow Out
How does this apply to interaction design?
Buttons, links, blocks of text, and web pages don’t move like humans. However, we can use movement to design the way a user consumes and interacts with a page. Every movement has an action and reaction, and so should your interface. Planning these movements allows users to understand some key things:
Orient users to the layout of the page
Tell them can be interacted with
Visually guide users through content
Call attention to the most important content
Give feedback to the actions users take
Give visual appeal to the interface
How do we bring this into the interactive space?
If you’re working with a team, you need to intentionally and responsibly design every animated action and reaction. Here are four tips to incorporate animation in any upcoming projects:
Start talking about animations and interactions early
Determine the most important actions that need to be taken on the page
Use animation principles to define how interactions can reflect real-world gestures
Create an animation style guide for common interaction patterns
How can we execute these animations?
It’s easy to visualize the way things move in our minds but difficult to talk through in words. Prototyping animations is very visual. Here are a few suggestions on how to communicate your animation intentions.
Storyboarding / Sketching
HTML / CSS / JS
Animations are a tool.
Like other design skills, animation is a tool for communicating clearly and communicating well. When done well, animation can provide more clarity than anything static. Rationalize animation through your project goals and primary calls to action. Remember that your goal is good communication, not good animation.