Is there an optimal duration for animating subtle transition effects? 150-250ms usually seems about right to me for most effects. Is there any research to confirm that this is good for most users or give a more precise duration? Does it vary widely for different kinds of transitions?
Answer
You can use the "Model Human Processor" system to decide the length of an animation.*
On average it takes a human 230 ms to visually perceive something, with a min/max of 70-700 ms across different people. That basically means that some people are faster at perceiving motion than others, and what some people can perceive in 100ms will take others else 600ms to notice. (Like most human traits, perception time distribution approximately follows a normal curve.)
The other answers give good advice for how choose longer vs shorter animations – but these are the numbers that actually define the human limits of how long is too long or too short. If an animation is repeated for many interactions (like a contextual menu), a slower, more-perceivable animation (600ms) is going to feel quite tedious to most of your users. Micro-animations (like a nav bar or a context menu) of ~250ms will be noticeable by most people, but just noticeable enough that they won't feel like they're waiting for it.
[*] This is a methodology of formal Human-Computer Interaction that's used to estimate the time to complete various interactions with a system, including humans' typical times for cognitive processing, sensory perception, and motion.
No comments:
Post a Comment