Animations
A Motion Language
Spark animations are natural, simple, professional, well-timed, and helpful. Not only do these 5 characteristics reinforce the Sabre brand, but they also encourage the design of animations that reduce cognitive load and enhance a user’s understanding of the interface, while improving its appeal.
1Natural
Use easing on all animations to establish a sense of familiarity. Remember, movements in the real world naturally ease in and out.
2Simple
We can only process so much information at one time before the message becomes ambiguous, so limit the number of animated attributes (size, direction, opacity, color, etc.) within a single animation to prevent confusing users and obscuring its meaning.
3Professional
Animations should be direct and portray a fluid elegance - steer clear of silly, bouncy, or choppy movements.
4Well-Timed
The user’s area of focus and task at hand will determine the speed at which an animation runs.
- 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.
- 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.
5Helpful
Animations should be purposeful and used to enhance an interface or control.
Helpful animations include:
- Focusing attention on important elements. For example: flagging an error that requires user interaction.
- Guiding users through workflows. For example: identifying next steps.
- Reducing cognitive load. For example: transferring deleted items to a trash folder, so users know where to go to recover them.
- Injecting an element of fun by simplifying tasks or making tedious tasks more enjoyable.
Area of Focus
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.
Animation Style and Appearance
Proximity
Animations should run close in proximity to items to which they relate. To further associate certain elements with their controls, animations should originate from the controls that trigger them.
Similarity
Animations that appear similar in shape or motion tend to appear related. Also, animations that run simultaneously tend to be grouped by the viewer and appear related.
Color
When necessary, add color for meaning or to differentiate (ex. red to alert or blue to signify 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 progress indicator spinning in a clockwise fashion, to indicate time passing.
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 High Performance Animations.)