Show it immediately
14 March 2024Indeed, not all interaction animations are good for user experience.
Take a look at this Stripe navigation:
Looks cool, but it is also slow. Imagine you have to use something like this every day. After 10 minutes it will become really annoying. Instead of clicking and doing whatever you are up to, you have to wait.
Compared to MacOS menu interaction speed, Stripe menu interaction is dead slow:
According to certain studies the mean human visual reaction time is 180–200 ms. We can suppose that any animated response to user actions that happens faster than that will be perceived as fast. Everything that takes longer will be perceived as slow.
Compare how slow and almost painful it feels when animation takes 300 ms, not even talking about 500 ms. Even 150 ms is a bit slow if you picky.
However it would be unfair not to mention that we can mitigate slow animation effect by adjusting the transition timing function from linear to logarithmic and effectively increasing animation speed at the beginning:
It helps a bit, although only to certain extent.
And back to Stripe menu example – the fact that I cannot move cursor to just appeared menu faster than it actually appeared does not even matter. It still feels slow, because I expect it to already be there.
So,
That means that any interactive element should change its color, position, opacity, transformation or any other visual feedback faster than the average human reaction time. Otherwise it will be perseived as slow. Clicking the button that reacts longer than you would normally expect would feel unnatural and fake, slow.