Animation

Animation

When to use animation

Reinforcing an interaction

Good reinforcement is demonstrated by explaining where objects have moved to, showing how interactions are handled within modules, and highlighting processes that take place behind the scenes.

Telling a story

Telling a story helps users understand where they are in an application, and reminds them of what their motives are. For instance, building related chart data piece by piece demonstrates ideal storytelling.

Delighting a user

The occasional points of delight can give personality to your application. Twitter’s “Heart” button is a good example of this done well. NOTE: Should be used sparingly.

Types of animation Pega uses

Groupings

Animate as a group — Most commonly used for the sake of UI speed.

Stagger animation of items — Great for multiple objects that are distinct, yet related (e.g., bars for each day in a week animate at different times).

Reveals

Fading — Most common reveal type, and perhaps the most performant. Stacks well with other reveal types.

Slide or scale — Typically used in mobile apps to reveal new pages or in desktop application side-panel reveals.

Grow, draw, or wipe — Typically used in charting to show how data has progressed.

Easing

Ease-out — Most commonly used. Other forms of easing can feel sluggish to end users.

Ease-in-out — Used for singular objects that need to loop smoothly, and grab attention (e.g., a beating heart icon might use this method).

Linear — For UI elements that need to have steady, consistent motion (e.g., a spinner, gear, or refresh icon).

Bounce — Used to add playfulness to an element or as a reaction to friction-like interactions. We use it only to emulate OS-specific interaction.

Duration and speed

  • 0.2 seconds, once — Used for small, in-element changes (e.g., a transition in a button’s resting to hover state).
  • 1 second, infinite — Used for rotating objects. Mostly commonly paired with linear easing.
  • Greater than 0.2 seconds, once — Used in all other cases. The more drastic the animation, the greater the time needed to prevent a jarring reaction for the user. Items that are large, need to move a large distance, or drastically change appearance (e.g., a 3-D card flip) typically need a longer time line.

Accessibility considerations

  • Never flash an object more than twice a second as it can cause seizures.
  • Avoid auto-playing animations (especially ones with sound) without user initiation as it can cause issues ranging from annoyance to sensory overload. WCAG 2 defines standards for the audio and video tag specifically, but the spirit of the rule applies here too.
  • Users with vestibular disorders can get vertigo when objects slide into or out of the screen. While there are currently no WCAG 2 standards around these issues, some browsers and OSes are beginning to support a 'Reduce motion' setting. Typical implementations convert movement animations into fades.

Last updated: Jun 2017

Next: Mobility