Animations

Sabre animations are simple, helpful and fun. When used correctly, animations can reduce cognitive load and enhance a user’s understanding of the interface, while improving its appeal.

When to Use

Animations should be purposeful and used to enhance an interface or control in the following ways:

  • To focus attention on important elements. For example: flagging an error that requires user interaction.
  • To guide users through workflows. For example: identifying next steps.
  • To reduce cognitive load. For example: transferring deleted items to a trash folder, so users know where to go to recover them.
  • To inject an element of fun by simplifying tasks or making tedious tasks more enjoyable.

Inside the User’s Area of Focus (Central)

Use animations to demonstrate or reinforce what’s happening between two states-—commonly triggered by a user action:

  • Revealing/hiding dependent form fields
  • Expanding/collapsing content
  • Minimizing content to a specific location—-users will learn where it lives and how to restore it
  • Transitioning between screens—-especially helpful for screens that look similar

Outside the User’s Area of Focus (Peripheral)

Use animations to draw attention to important peripheral elements requiring user attention, for example, highlighting important functionality that’s about to disappear. It’s best to limit peripheral animations, however, as they can distract a user from his goals and cause frustration.

Once an animation is deemed appropriate, three categories will help define its overall style: movement and frequency, positioning and appearance, and simplicity.

Movement and Frequency

When using animations, strive for elegant, natural movements, and use speeds appropriate to the situation.

Movement Style

Animations should be direct and portray a fluid elegance. Steer clear of silly, choppy or overly complicated movements.

Easing

Use easing on all animations to establish a sense of familiarity. Remember that movements in the real world naturally ease in and out.

Slower Animations

Slower animations are appropriate for peripheral animations or ones indirectly triggered by a user action — the slower the better, usually, so as not to distract the user from the larger content of the page. Slower animations typically run for a duration of 1000ms or more. For more complicated animations, ensure the duration is sufficient enough to convey its message.

Faster Animations

Faster animations are appropriate for central elements — slow central animations may cause boredom and give the perception of sluggishness — or for important peripheral elements that require attention. Faster animations typically run for a duration of 250ms or less.

Frequency

For common behaviors, consider limiting the number of times an animation runs, as it could distract users once the behavior is learned.

Positioning and Appearance

Applying Gestalt principles and color theory to animations can help provide clarity. In addition, metaphors can reinforce meaning, by relating animations to real-world concepts:

Proximity

Animations should run close in proximity to items to which they relate. Also, animations that run simultaneously tend to be grouped by the viewer and appear related.

Similarity

Animations that appear similar in shape or motion tend to appear related.

Color

When necessary, add color for meaning or to differentiate (ex. red for danger or blue for information). Color can also convey depth in space: red and orange tend to come forward, while blue and green recede. With complicated tasks, duller colors have less of a negative impact on the user’s performance.

Metaphors

Use metaphors when styling animations, to exploit familiar concepts, for example, a current running through a brain to denote thinking.

Simplicity

Keep animations simple. We can only process so much information at one time before the message becomes ambiguous, so adding many animated attributes to a single animation (size, direction, opacity, color, etc.) could confuse users and obscure its meaning.

Developer Notes

In most cases, animation should be achieved through pure CSS. This can include writing complex animations using @keyframes and the animation property, or simple animations using the transition property. (For more information on CSS animation, check out this MDN article.)

If there is a compelling reason to trigger animations through JavaScript, they should still leverage CSS animation technology. Libraries like Velocity.js or Greensock’s TweenLite support using JavaScript to animate CSS transform properties.

Because animating these properties (as opposed to left, top, margin, etc.) is often hardware accelerated by the browser, they will be more performant across devices. DO NOT use jQuery’s animate method to perform JavaScript animation. It has very poor performance as compared to other options. (For more information on how CSS animation compares to JS animation, see what Paul Irish has to say on the matter.)