Overall, we want animations to make Customer.io feel more responsive and intuitive to people, but without being over the top. We'll use them to:
- 1.Draw attention to change, but soften harsh cuts: "Hey, this new thing happened!"
- 2.Explain the changes: "This is a new element that allows you to edit the thing you clicked on!"
- To establish a connection between two states by animating the shared content
- 3.For fun (sparingly), and to convey our brand.
- Animations should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
- Animations should begin within 100ms of a user performing that action. This ensures that the user connects the animation to their action.
- Items which enter the screen should exit in the same place.
- Animate as few items as possible at one time: if several elements are being animated, define one central object and animate it first.
Three numbers to remember:
- 100ms: Under this, and the user feels it's instantaneous
- 1 second: After this, and the user's flow of thought is interrupted
- 10 seconds: The upper limit of attention.
Animations should be between 200 and 500ms, depending on complexity. Shorter durations for simpler effects, longer durations for more complex movements:
(courtesy of Val Head)
Sometimes it's better for the animation to be a little longer, so the user doesn't feel surprised by how quickly something is done. A few more guidelines:
- For buttons and dropdowns: 100-250ms
- For panels and modals: 250-400ms
- Page transitions: 500ms +
Where applicable, we can use our branded loading animation for processes taking up to 10 seconds. It's been shown that users were willing to wait longer and abandon rates were lower with branded animations.
For loading operations taking longer than 10 seconds, percent-done progress indicators should be used if possible.
It’s important for animations to mimic the laws of physics so that they feel natural and intuitive to users. In web animation terms, this is called "easing."
- For objects entering the view, use
- For objects exiting the view, use
- For moving an object from point to point, use
ease-in-out(when in doubt, use this)