Every time I see animation discussed by designers, they're thinking about it in terms of polish and "delight", and then balancing those things with perceptual latency. It's not entirely incorrect, but a couple of minor nits:
1. Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers.
2. It's more useful to think about state when deciding when to animate. Could the user have trouble perceiving the change in state that just occurred? If so, then use an animation to help them visualize what happened. I believe this is the primary reason to use an animation - all others are vanity.
cosmic_cheese · 57m ago
> Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers.
If (and that’s a big if) animation is used in moderation only when it actually communicates something and isn’t an active impedence (as demonstrated in the linked post), I think it has a significant effect for users. It’s just not the effect that many might expect.
Meaningful, unintrusive animations are one of the myriad puzzle pieces that come together to form a positive impression. They’re a sizeable chunk of that last 20% that separates “good” and “excellent” in users’ minds. They’re not strictly necessary, but between two equally good competitors they’ll help one pull ahead of the other, because users come away with a stronger impression of “solidness”. It’s not unlike how people tend to consider heft and resistance to flexing as markers of higher quality in physical products.
The problem is that since a decade or so ago, UI design as a whole has veered heavily in the direction of vibes, slideshow wow factor, and “branding value” (I felt a pang of nausea just writing that) and away from the volumes of well-researched best practices, and regard for good use of animation has been lost along with it. We’re well overdue for a correction that pushes UI design back in the direction of practical usability and away from Dribbble appeal.
tobr · 37m ago
> users come away with a stronger impression of “solidness”
This really is what UI polish of any kind is all about. You feel like you can trust it more, it feels more robust and reliable. Animation and gestures are a part of this, but it’s only the last mile after everything already feels robust.
Before you make it more glitzy you have to make it less glitchy.
cosmic_cheese · 28m ago
That I can agree with. Applying polish to glitchy software is like putting a high end leather interior and soundproofing in a car that only starts 85% of the time and occaisionally opens its rear hatch while on the road for no apparent reason.
luqtas · 16m ago
> communicates something and isn’t an active impedence (as demonstrated in the linked post)
woah! you are starting from the point an individual preference is any metric to gneral public preferences and understanding... there's not a SINGLE study cited on the blog!
xg15 · 1h ago
Fully agreeing with this. I was also surprised that the appearance change of a button on mousedown is considered an animation here. ("Another purposeful animation is this subtle scale down effect when pressing a button.")
Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
madeofpalk · 1h ago
Why would it not be an animation?
It’s a pretty basic animation.
dfxm12 · 1h ago
It fits both the dictionary and colloquial definitions of animation. If there is any domain specific jargon, surely that applies too. I can't understand why this wouldn't be considered an animation...
addaon · 1h ago
I can see either side of it, but in my mind animation (in this context) means the generation and timed display of synthetic tween states to smooth the transition between the display of actual states. The mouse-down case is (in this context) an immediate change from the up- to down- states, without additional frames in between, so is not an animation by this particular domain-specific definition.
trogdc · 6m ago
The example on the site does have tween frames: `transition-duration: .15s`
robenkleene · 44m ago
> Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers.
Appreciating delight (for it's own sake) in software design I'd consider a core trait of (old-school?) Apple fans. E.g., lamenting the decline of whimsy in the post-Jobs era.
I think there's truth to it being relatively niche, appreciating delight that is, but it's certainly not confined just to designers. E.g., like I'm saying here, a core trait of Apple fans is appreciating these kinds of details.
CuriouslyC · 1h ago
I can tell you from experience that impressive hero banners and animations that get the user's attention reduce bounce rate. That might not matter if you're established and you get customers via product market fit and word of mouth, but for small shops trying to land early customers it's crucial.
moron4hire · 1h ago
The assumptions buried here are that bounce rate is accurately measurable and that reduced bounce rate correlates to increased sales.
xnx · 1h ago
> 1. Delight is overblown, in my opinion
I might delight in seeing an animation the first three times, after that I want it off. Don't add extra latency to my process.
athenot · 1h ago
The author made that point, in considering frequency of use as a criteria for whether to use an animation or not.
meagher · 1h ago
> Delight is overblown, in my opinion
Nerdsnipe perpetuated by other engineers/designers admiring it on Twitter. Nothing wrong with that, just shouldn’t pretend that most users care.
mholt · 1h ago
Apple could learn a thing or two from this. Too often I'm waiting for their silly animations to finish. Just a moment ago I swiped to scroll the view to the bottom, then immediately tapped the button when it came into view, but I had to tap it multiple times until the bouncing stopped.
That's just one example because it just happened, but this happens ALL the time. I know Apple can do better. My Android phone felt so much more responsive (the 120hz screen helped, I'm sure), simply because the animations were snappier.
Other examples that come to mind real quick:
- Swiping up to switch apps. That one is awfully slow. (Actually, most gesture-based activities are painfully slow!)
- Dismissing notifications (esp. on Mac)
- Opening the drawer thing
- Revealing the dock
- Sometimes I see animations stacked upon each other. One animation has to fully complete, then another one, THEN I can finally use my computer again.
It's ironic that I have to go to Accessibility settings and disable these things to make my device accessible.
gcau · 1h ago
Whenever my apple wallet connects to my phone, It plays a totally useless animation that feels like it takes forever, and covers the entire screen. In that time, you cant see or do anything on the phone. So annoying, and for no reason. Just give me a little haptic when it connects.
GuinansEyebrows · 1h ago
same when attaching a locked phone to a magsafe charger. it seems like a small thing but i actually interact with my locked phone enough for that to get on my nerves. i'd prefer the haptic feedback but i would even settle for being able to swipe it away - nope. not an option.
void-pointer · 48m ago
You don’t have to wait for the iOS navigation animations to finish, they’re designed to be fully interruptible.
outlore · 22m ago
One thought about this section:
> To give you an example, a faster-spinning spinner makes the app seem to load faster, even though the load time is the same. This improves perceived performance.
Perhaps due to poor design by companies that abuse the fast loading spinner when, in fact, nothing is happening, I instinctively trusted the slower spinner more.
stack_framer · 10m ago
Here's a subtle problem: An animation that looks "delightful" on the screens you have, might look pretty bad on a screen you don't have. For example, the author's animation for scaling a button on click looks fine on my M1 MacBook Pro, but jittery and sluggish on the crappy IBM ThinkVision monitor attached to my MacBook. See for yourself:
Personally I would even speed up these animations. 300ms is too high. I prefer animations that are almost imperceptible. You might even only notice them if you take them away.
Anything longer than that I consider too slow.
chrismorgan · 1h ago
I used to go for 250ms, now I go for 200ms. I find that about the sweet spot for UI transitions where it helps you to understand what’s changing and how and why. And if it doesn’t meet those criteria, don’t transition it.
200ms is also nice and short to write in CSS, .2s. I contemplated shorter, but I found that by 150ms a transition can start to feel like it’s a mistake, a brief rendering glitch, especially if the first few frames of the animation are dropped, as can be common (.2s is already down to only ~10 intermediate frames). It’s too short to get the benefits of an animating transition, but too long to be or look or feel instant.
cousin_it · 1h ago
I think if the animation "helps you understand what's changing and why", sometimes that's a sign that the change could be redesigned - moved to a different part of the screen, for example - so that it becomes clearer without needing to be animated.
For example, if pressing a "Save" button makes a "Save successful" toast appear on top of the screen, it's tempting to animate it in, so that the user notices it. But it's better to replace the button text with "Saved" and gray it out, which achieves the same goal and feels great without any animation.
cosmic_cheese · 37m ago
In general I think toasts are a borderline antipattern, particularly those presented as a chance for the user to undo some action that they accidentally triggered (doubling the panic since now the undo has become a time bomb). Just don’t make the consequencial action so easy to trigger in the first place and where relevant (on iOS or desktop) support the standard undo stack.
Larrikin · 59m ago
The toast doesn't block the user from saving again in quick succession
tyleo · 2h ago
I feel like web design animations are more similar to PowerPoint than folks want to admit. What I mean by that is that quick cross-fades can be used 99% of the time to tidy the look of UI but you rarely need to do anything beyond that.
w4rh4wk5 · 1h ago
My rule of thumb: if the user has to wait for the animation to play out, before they can continue, remove it.
And, always provide an accessibility option to turn off all animations.
pverheggen · 33m ago
Worth noting, the prefers-reduced-motion media query is great for this:
The "perception of speed" argument reminded me of when I was asked to add spinners and animations to a web app I was building, because without them the UI would have felt too fast and fake.
wonger_ · 1h ago
Clickbaity title; more like "things to consider when designing animations."
I appreciate subtle animations like the button press. Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll.
But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation?
Also, I think a lot of people would be happier if web apps exposed settings like zero animation / mild animation/ full animation. Power users could speed up their workflows by turning off animations. Kinda like my phone UI settings.
mickael-kerjean · 1h ago
> Also, I think a lot of people would be happier if web apps exposed settings like zero animation
It might be kind of interesting to see a well-done usability study around animations. I tend to assume they are pretty useless, but I guess I can see some point in drawing the eye from a button you press, to some UI component that it generates.
OTOH, it isn’t clear what the baseline should be. The easy way to do an incorrect study would just be to toggle off animations and have the very dynamic design with components popping into existence without any hints. But, that’s flawed, a UI made from the ground up with the assumption of “no animations” should just be less dynamic, rendering the whole concern moot…
cosmic_cheese · 31m ago
In my opinion the bare minimum for UI animations is where a large percentage (30%-40% or above) of the screen changes. This kind of thing doesn’t faze even moderately advanced users, but for many below that level it’s confusing because there’s not necessarily anything that ties the two UI states together.
bee_rider · 9m ago
Hmm. That isn’t my preference—animation is best used to draw attention to something where I might noticed the cause-and-effect. If nearly half of the screen has changed after I hit a button, I hope to notice that!
modeless · 5m ago
Android has really failed at this. Android apps are full of animations that serve no purpose or are even misleading, and slow down the experience. It's cargo cult copying from iOS. And the animations are janky, too.
Luckily Android has a developer option to double the speed of animations system-wide. It's the first thing I turn on every time I get a new phone. I find that double speed is about right. Designers tend to make every animation at least half as fast as it should be, to make sure you notice their effort.
modernerd · 1h ago
I wish more designers thought this way.
I have a blog post draft called, “5 principals of interactive animation” aping the “12 principles of animation” from the 80's that I thought every would-be UX designer might learn from. It mirrors a lot from this post!
1. Purpose over ornament.
2. The more often, the less.
3. Timing shapes perception.
4. Motion adapts to state.
5. Silence is an option.
willio58 · 2h ago
YES. I love the examples here. The best one to me is the row background color transition on hover. It's painful, it feels like the UI is sluggish, when it reality it was someone going a little too hard on animation for no reason. Too often we think more animations = better.
xnx · 1h ago
Android 16 just introduced a stupid animation when unlocking your phone. Rather than show you what you want to see as fast as possible, the designers decided you would have to sit through watching their fade in animation dozens of times a day.
Designers either don't use their own products, or have no taste (possibly both).
wjrb · 1h ago
Absolutely right. I even find that 300ms in UI animations is still too long, but like TFA says, it depends on how often that piece of UI is used. Great Raycast example.
No comments yet
webdevver · 1h ago
old school bios/DOS interfaces are kings of usability to this day imo. sub 1ms latency, arguably even a little too quick - sometimes it feels like the interface changed right before my input.
croisillon · 46m ago
oh the policing of blog titles now, can't wait for an AI to neutralize any post that would otherwise stand out unfairly on HN's first page
lagniappe · 42m ago
Frontend design is looking more and more like a jobs program at worst, and at best cost allocation justification.
I already foresee a lot of people jumping on me for this, so do your worst, nerds.
luqtas · 25m ago
> Frontend design ...
UI frontend design*
maybe they never tried a TUI
fallinditch · 1h ago
Good post with useful info. The author doesn't discuss it but I like the momentum inertia (aka spring animation) of the dropdown example - a nice touch.
busymom0 · 59m ago
This recently happened to me when I was using an online website for preparing for a drivers license test. After finishing a 20 question practice test, the site would show a cool confetti animation on top of everything. While cool, it would prevent any clicks from registering on the entire site for the entire 5 second duration of the animation. I emailed the company to add `pointer-events: none;` to the confetti `div`. That fixed the problem.
Since the website had been around for a very long time, I wonder how many millions of seconds had been wasted on this animation to complete.
ryanisnan · 37m ago
Am I the only one who dislikes off-angle animations?
GuinansEyebrows · 1h ago
not to nitpick because i mostly agree, but the second example (scaling a button on press/hold) is so ugly and weird that it comes across more like a glitch than an intentional animation. maybe it doesn't fit as well into a (post-)flat UI world but i always liked the bevel-shade-inversion technique of old MS Windows buttons to simulate pressing them "down".
rietta · 2h ago
Yells at cloud with visions of Windows 98 menu slide out animations stuttering on the barely good enough for the new OS pc! ;-p
1. Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers.
2. It's more useful to think about state when deciding when to animate. Could the user have trouble perceiving the change in state that just occurred? If so, then use an animation to help them visualize what happened. I believe this is the primary reason to use an animation - all others are vanity.
If (and that’s a big if) animation is used in moderation only when it actually communicates something and isn’t an active impedence (as demonstrated in the linked post), I think it has a significant effect for users. It’s just not the effect that many might expect.
Meaningful, unintrusive animations are one of the myriad puzzle pieces that come together to form a positive impression. They’re a sizeable chunk of that last 20% that separates “good” and “excellent” in users’ minds. They’re not strictly necessary, but between two equally good competitors they’ll help one pull ahead of the other, because users come away with a stronger impression of “solidness”. It’s not unlike how people tend to consider heft and resistance to flexing as markers of higher quality in physical products.
The problem is that since a decade or so ago, UI design as a whole has veered heavily in the direction of vibes, slideshow wow factor, and “branding value” (I felt a pang of nausea just writing that) and away from the volumes of well-researched best practices, and regard for good use of animation has been lost along with it. We’re well overdue for a correction that pushes UI design back in the direction of practical usability and away from Dribbble appeal.
This really is what UI polish of any kind is all about. You feel like you can trust it more, it feels more robust and reliable. Animation and gestures are a part of this, but it’s only the last mile after everything already feels robust.
Before you make it more glitzy you have to make it less glitchy.
woah! you are starting from the point an individual preference is any metric to gneral public preferences and understanding... there's not a SINGLE study cited on the blog!
Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
It’s a pretty basic animation.
Appreciating delight (for it's own sake) in software design I'd consider a core trait of (old-school?) Apple fans. E.g., lamenting the decline of whimsy in the post-Jobs era.
I don't know of a canonical piece that summarizes this idea, but it's referenced a bit in this short piece https://daringfireball.net/linked/2024/12/05/festivitas
I think there's truth to it being relatively niche, appreciating delight that is, but it's certainly not confined just to designers. E.g., like I'm saying here, a core trait of Apple fans is appreciating these kinds of details.
I might delight in seeing an animation the first three times, after that I want it off. Don't add extra latency to my process.
Nerdsnipe perpetuated by other engineers/designers admiring it on Twitter. Nothing wrong with that, just shouldn’t pretend that most users care.
That's just one example because it just happened, but this happens ALL the time. I know Apple can do better. My Android phone felt so much more responsive (the 120hz screen helped, I'm sure), simply because the animations were snappier.
Other examples that come to mind real quick:
- Swiping up to switch apps. That one is awfully slow. (Actually, most gesture-based activities are painfully slow!)
- Dismissing notifications (esp. on Mac)
- Opening the drawer thing
- Revealing the dock
- Sometimes I see animations stacked upon each other. One animation has to fully complete, then another one, THEN I can finally use my computer again.
It's ironic that I have to go to Accessibility settings and disable these things to make my device accessible.
> To give you an example, a faster-spinning spinner makes the app seem to load faster, even though the load time is the same. This improves perceived performance.
Perhaps due to poor design by companies that abuse the fast loading spinner when, in fact, nothing is happening, I instinctively trusted the slower spinner more.
MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw...
Crappy Monitor: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX...
Anything longer than that I consider too slow.
200ms is also nice and short to write in CSS, .2s. I contemplated shorter, but I found that by 150ms a transition can start to feel like it’s a mistake, a brief rendering glitch, especially if the first few frames of the animation are dropped, as can be common (.2s is already down to only ~10 intermediate frames). It’s too short to get the benefits of an animating transition, but too long to be or look or feel instant.
For example, if pressing a "Save" button makes a "Save successful" toast appear on top of the screen, it's tempting to animate it in, so that the user notices it. But it's better to replace the button text with "Saved" and gray it out, which achieves the same goal and feels great without any animation.
And, always provide an accessibility option to turn off all animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
I appreciate subtle animations like the button press. Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll.
But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation?
Also, I think a lot of people would be happier if web apps exposed settings like zero animation / mild animation/ full animation. Power users could speed up their workflows by turning off animations. Kinda like my phone UI settings.
This exists as a browser setting, it's called "prefers-reduced-motion", an example usage in my code: https://github.com/mickael-kerjean/filestash/blob/master/pub...
OTOH, it isn’t clear what the baseline should be. The easy way to do an incorrect study would just be to toggle off animations and have the very dynamic design with components popping into existence without any hints. But, that’s flawed, a UI made from the ground up with the assumption of “no animations” should just be less dynamic, rendering the whole concern moot…
Luckily Android has a developer option to double the speed of animations system-wide. It's the first thing I turn on every time I get a new phone. I find that double speed is about right. Designers tend to make every animation at least half as fast as it should be, to make sure you notice their effort.
I have a blog post draft called, “5 principals of interactive animation” aping the “12 principles of animation” from the 80's that I thought every would-be UX designer might learn from. It mirrors a lot from this post!
1. Purpose over ornament.
2. The more often, the less.
3. Timing shapes perception.
4. Motion adapts to state.
5. Silence is an option.
Designers either don't use their own products, or have no taste (possibly both).
No comments yet
I already foresee a lot of people jumping on me for this, so do your worst, nerds.
UI frontend design*
maybe they never tried a TUI
Since the website had been around for a very long time, I wonder how many millions of seconds had been wasted on this animation to complete.