Show it immediately

14 March 2024

Indeed, not all interaction animations are good for user experience.

Take a look at this Stripe navigation:

Stripe main 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:

MacOS menu speed

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.

150 ms

Hello

300 ms

Hello

500 ms

Hello

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:

150 ms

Hello

300 ms

Hello

500 ms

Hello

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,

Animation of interactive elements should be finished earlier than anticipated interaction

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.