Animation

Animation usage

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.

Last updated: Aug 2018

Next: Accessibility