This is a question I get asked a lot at workshops and talks, and it’s an important one! Good timing choices are essential for creating a good experience.
Often times I hear designers and developers say they have one specific small number, like 200ms, to use as the duration for any and all interface animations no matter what. This sounds like a good solution, but it over-simplifies the complexities of timing and won’t always get you the best results.
Good animation timing is more of an art than a science. Thinking in terms of a range instead of one set duration value will serve you much better in your design work.
200ms to 500ms seconds is a good range for interface animations
Using this range as a guide, small UI animations — ones that involve smaller elements or small amounts of change — tend to be on the lower end in the 200ms to 300ms range. Larger motion that covers a lot of ground, or motion that uses complex bounce and elastic easing, usually works best on the higher end of this range, around 400ms to 500ms.
Here’s a breakdown of the approximate timing windows for UI animation:
(Diagram adapted from Paul Lewis’ Flip your animations post )
Where do these numbers come from? (aka geeking out over the research)
This suggest range are largely based on research from the Neilsen Norman Group and the Model Human Processor. The Neilson Norman Group found that 100ms is perceived as instant, and 1 second is considered the upper limit of a user’s flow of thought . Together these outline a range of 0.1s to 1s for feedback to feel connected to a specific user action or input. One entire second feels like ages for UI animation though, so that’s why the suggested upper limit for durations is half that at 500ms.
The Model Human Processor finds that on average it takes a human 230ms to visually perceive something. So, an animation with a duration of 200ms will be just within range to be perceived by the average person. Any shorter and you risk it not be visually perceived at all which would kind of defeat the purpose of animating it in the first place.
There are exceptions to every rule, of course, but using a range as a starting point will help make your timing decisions easier. Getting UI animations to feel right is more important than the exact numbers behind them.