Animation Guidelines

Animation

Modern Principles of Interactive Animation

• Have a known purpose for every animation in your interface.
• Don't create obstacles with animation.
• Keep animations flexible and nonblocking.
• Focus on readability above duration.
• Animate the most performant CSS properties to set yourself up for good performance from the start.

Using Animation to Orient and Give Context

Animation can help orient users to the spatial relationships in your interface. It's especially helpful for:

• Helping users create a mental model of the interface, even the parts that aren't currently in view.
• Moving between layers of a layered interface.
• Guiding users through the steps to complete a task.
• Connecting content through context changes.

Using Animation to Direct Focus and Attention

You can use animation's attention grabbing powers for good by:

• Animating the most important content for your users.
• Directing eye flow and guiding the gaze through the content hierarchy with motion.
• Using visual continuity to show when an object hasn't changed.
• Working with a defined easing palette and creating contrast of motion or easing.

Using Animation to Show Cause and Effect

You can use animation to show users what effect their actions have caused while they're completing a task by:

• Hinting at affordances with animation.
• Cueing the next step in a series of tasks with animation.
• Previewing of the effect an action will have before it is taken.
• Confirming an action's effect once it has been taken.

Using Animation for Feedback

Animation can help make feedback better by:

• Animating effective and attention-grabbing error messages.
• Visually confirming behind-the-scenes tasks in context.
• Animating meaningful loading indicators.
• Providing an early hint of content to make wait times feel shorter.

Using Animation to Demonstrate

• Focus: Each animation should have a clear focus of either a single feature or a single aspect of the story to tell.
• Short length: Keep the animation on point and show a single task or action at a time.
• Don't block access to content or navigation.

Using Animation to Express Your Brand

• Animation design guidelines or values can help keep your brand's motion efforts consistent and cohesive.
• Collecting and evaluating existing animations as a group with a motion audit can give you valuable insight into how you're currently using animation.
• The same words you use to describe your brand and its values can be translated into motion to define your brand's motion style.
• Looking to real-world objects or animals to emulate can also help define what your brand looks like in motion.

Where Animation Fits in Your Design Process

• Start the animation discussion early.
• Use storyboards to brainstorm animation ideas quickly early on.
• Use prototypes and motion mock-ups to test how your animation ideas hold up to interaction and to discuss ideas with your team.
• Document animation design decisions in your style guide.
• Keep the communication open and discuss animation ideas and opportunities throughout the project life-cycle.

Animating Responsibly

When you're trying to create accessible, progressively enhanced web animation, keep the following points in mind:

• Animation has the potential to be both beneficial and harmful for accessibility. Aim to minimize the harmful potential while maximizing the potential benefits.
• You can design safer motion for those with vestibular disorders by being purposeful with your animation, offering accurate context cues, and providing an option to reduce motion, if needed.
• Treat animation as a layer of enhancement that helps make your work more universal and less fragile.

This guideline is based on Val Head's "Designing interface animation".