Why your animations are making users wait

Search for a command to run...

No comments yet. Be the first to comment.
A bite-sized series on the thinking behind digital products, where design meets engineering. From UX patterns to dev workflows, each post offers a focused take on building thoughtful, user-centered software, one small usability insight at a time.
It takes about 100 milliseconds to blink and in the digital world, this time frame is critical! It's the absolute limit. When an interaction takes longer than 100ms, the average user loses the sensation of "feeling instant" and feels a noticeable lag...
You might need to ask yourself too

Let's talk about usability and 3 common mistakes you might be making when building that product. Confusing 'Account Setup' with 'Onboarding': Your onboarding flow is meant to serve a primary purpose,

Last year during Google's Built-In AI hackathon, I built an experimental Chrome extension called Clarity Lens. The product was inspired by thinking about the 'hidden 16%', the portion of the world's p

If you've used Youtube long enough, you'd realize it gradually became better in understanding your needs. I'm sure you can relate to this - you think of something, next thing, you open Youtube and it's being advertised, or you come across it on your ...

Trade-offs, accessibility concerns, and what CSS alone can’t solve

We all love animations that make a UI feel interactive. But poorly implemented animations can make any UI really slow. The secret to smooth and fast implementations is knowing how to avoid some common mistakes.
will-change as it should be used - The will-change CSS property can be used to improve the performance of animations and transitions, especially when working with complex filters, etc, but it should be used carefully as using it everywhere can waste memory resources and cause lags.box-shadow - Animating box-shadow will hurt performance, but you can create the same effect with the smallest repaint operations by animating the opacity of a pseudo-element. This would help achieve smoother animations.transition: all - The transition: all animates every property that can change, and you can imagine what this would do to any UI, especially if there are so many animations implemented. Transitioning should be directly set and applied to the specific elements.