Transitions & Animations

Overview

Using transitions and animations can be costly in terms of page performance and productivity. However, when used properly and with the right purpose, transitions and animations can enhance the user experience.

Use animations and transitions to:

Show changes in the interface.
Prompt or abrupt changes can cause loss of context, which ends up ruining the user experience. When a user performs an action, visibly animating the effect of that action can:
  • Show acknowledgement that the system has received the user’s action
  • Give the users the required time to understand the change

    Sample of microinteraction
    Credit: Tamino Martinius

  • Inform the user of the results

Emphasize important information.
Examples include:
  • controls that need action (shake animation for incorrect passwords, or for Save buttons when many changes have already been made)
  • new notifications

Show the status of the system.
One example is the pulsing animation when there is an incoming call.

Provide hints and orientation.
When there are unconventional interfaces, orienting the user can be a challenge. Animations and transitions can:
  • demonstrate relationship between elements
  • guide the eye to see where new objects or screens come from upon its reveal and where the previous object/screen (so that the user can access it again).

Guidelines

Show animations and transitions at the exact area where the user triggered it

The is to help the user comprehend the change that has just happened in the view’s layout and what has triggered the change.

animate in context

Avoid using animations and transitions for repetitive and self-explanatory tasks

For those who just wish to get things done quickly, too long and/or too many instances of a delay can cause annoyance, no matter how good the animation or transition is.

Keep animation and transitions short (but not too short)

  • 0.25 to 0.3 seconds for microinteractions
  • no longer than 0.5 seconds for more significant animations

Use a smooth-scrolling animation for long websites

For long pages, using a sticky navigation can let the user navigate from one element to another. However, without transitions, the changes will seem too abrupt. Use smooth-scrolling to show the relationship between the navigation element and the page layout.

sample of long-scrolling page

Using transitions and animations can be costly in terms of page performance and productivity. However, when used properly and with the right purpose, transitions and animations can enhance the user experience.

Use animations and transitions to:

Show changes in the interface.
Prompt or abrupt changes can cause loss of context, which ends up ruining the user experience. When a user performs an action, visibly animating the effect of that action can:
  • Show acknowledgement that the system has received the user’s action
  • Give the users the required time to understand the change

    Sample of microinteraction
    Credit: Tamino Martinius

  • Inform the user of the results

Emphasize important information.
Examples include:
  • controls that need action (shake animation for incorrect passwords, or for Save buttons when many changes have already been made)
  • new notifications

Show the status of the system.
One example is the pulsing animation when there is an incoming call.

Provide hints and orientation.
When there are unconventional interfaces, orienting the user can be a challenge. Animations and transitions can:
  • demonstrate relationship between elements
  • guide the eye to see where new objects or screens come from upon its reveal and where the previous object/screen (so that the user can access it again).