Transitions

Transitions go smoothly from one state to another.

When to use

• When using a data set with large variety of options
• To tell a story with the data (for example, having various bar graphs transition to a stacked bar to emphasize the total)
• To engage the user to play with the data

What to avoid

• Avoid lengthy transitions
• Confusing or complex transitions can detract users from the story

Design and code

Example 1: From vertical bars to stacked bars

Example 2: From paths on a map to horizontal bars

Content and design guidelines

• Make the transition impactful enough for users to notice change but not so impactful it confuses them
• Aim for transitions of approximately 500 milliseconds in length
• Follow the general design guidelines

Accessibility guidelines

• Make sure that transitions can be done without a mouse
• If the transition tells a clear story, include that story somewhere else in writing
• Follow the general accessibility guidelines