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.
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.
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.
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.
First thing I do on any android phone is enable developer mode and double the speed of animations. Drives me crazy when I see one running them at normal speed!
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.
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?
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.
> 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.
> 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.
The other problem I encounter is designers working in B2B, but designing like they're working in B2C.
For B2B (especially enterprise B2B), your software is just a tool your customers' employees need for their day jobs. Fancy animations, multi-colored gradients (because gradients mean "AI" now, right), and other gaudy crap does not make it easier for anyone to do their job. It's just noise -- constantly distracting users who are just trying to navigate through dense, text-heavy dashboards.
If you want to design "pretty" and "delightful" experiences, then it doesn't make much sense to join a company that revolves around CRM/ERP workflows. Work for a company whose value is directly tied to users' warm and fuzzy feelings.
> 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 think this is the only justified use of animation in UI, however I wasn't satisfied with the dilemma of increasing perceived transition while increasing perceived UI latency.
I found it's possible to get the best of both for event triggered state changes i.e clicking on stuff, by sticking to ease-out based transitions, where the start of the transition is instant and the end decelerates.
This makes it feel just as snappy as no animation, while still helping to communicate a transition, because we are more sensitive to the latency of the start of the transition when it's an event - since we are anticipating a reaction, which is satisfied as soon as it starts to react.
> Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers.
I disagree with this, as much as I want it to be true. Just ask an Apple/iPhone user to use an Android phone for a week and then ask them how the experience was, they'll tell you something felt off or janky about it, and a lot of it comes down to really well designed animations on iOS for everything you interact with.
Regular consumers may not use the word delight to describe the user experience, but they do notice it when faced with what is (to them) an inferior experience.
Delight sounds similar to what game designers call "juice" and, done well, it really does make a game feel delightful beyond its pure gameplay.
I've had the same feeling with more utilitarian interfaces, but it's pretty rare. I don't know why. I expect it's partly because we have different expectations for programs than we do for games, partly because the context and the interactions are pretty different, and partly because most organizations do not have the will or the ability to make interfaces that satisfying. (After all, it's the worst sort of thing for most organizations: something that requires taste, time and experience and cannot be managed, measured or executed by committee.)
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.
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.
When does my wallet slide slightly from the magnetic center and then back into place most often? When I’m getting it out of my pocket.
When am I trying to just use my goddamn phone the most? When I get it out of my pocket.
So, it ends up being that ~50% of the time I need to use my phone, I have to wait for that goddamn 3 second animation first.
If some engineer introduced a 3 second regression in the time for Face ID to unlock your phone 50% of the time, it would be noticed and fixed immediately. But call that 3 second regression a “surprise and delight animation” and suddenly Apple designers love it and force it on you.
the macos switching between spaces/desktops is INFURIATING, because until the animation fully finishes, all the clicks/keys are registered on the last space, and the animation takes a while...
apple have completely lost the plot, and organisations of that size are incapable of producing good user experience w/o a de facto dictatorship person who has an idea what here doing (a la steve jobs)
this is worsened by the the fact that even on hn people have no idea what's they're doing in terms of design most of the time, because they fail to realise that the average person isn't like a fan of their product lol, they just see it as a utility that needs to perform a bare minimum of functions reliably, with a consistent ui, like thats literally it...
every time you want to change something, ask yourself, if I show this to my grandma, and unless her reaction is "omg yes this is a million times better, pls do that" DO NOT CHANGE ANYTHING
An extremely infuriating one that repeatedly gets me because I forget about it: the AM/PM wheel when setting an iOS alarm. If I set an alarm the night before and the last thing I do is flick the wheel to AM, but then hit save before the animation has finished it's very subtle and slight easing/bouncing animation, the setting remains at its original value (PM because I'm creating the alarm at night) and thus the alarm does not go off in the morning when I expected it to.
You're right, that one drives me nuts. Any slide wheel doesn't change its underlying value until it stops animating, even if it's 99% of the way there. You navigate away from the screen thinking the new value is set, but it's not.
That one falls into the category of UX felony as far as I'm concerned. It's not just delay or confusion, but actively misrepresenting a value.
iOS default animation speed is 350 ms, at least for SwiftUI. This has always felt a bit too slow. And recent system animation changes felt gratuitous to me (opening the action bar on iMessage for example).
OTOH this article is basically downstream of Apple’s interface design philosophy.
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.
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…
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.
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!
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.
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).
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".
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.
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.
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.
> 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.
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 looks fine on my M1 MacBook Pro, but jittery and sluggish on the crappy IBM ThinkVision monitor attached to my MacBook. See for yourself:
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.
>> This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page.
That might be the designers intent, but that's not what it does for me at all. First, the animation shown is on some weird 3D angle which is not part of any sane UI. Why is that? Not to convey anything about the actual experience of the app shown. That 3d look certainly does not "help the user understand what this feature does"
The fade-in of the animation seems to draw me in to that area of the page which I assume is the intent. The 3D perspective helps me understand that the text in that box is not part of the page I'm reading, but a view of something else - their product. But it doesn't really help me to understand the product.
> Another purposeful animation is this subtle scale down effect when pressing a button. It’s a small thing, but it helps the interface feel more alive and responsive.
If you haven't watched the Half Life documentary, I can't recommend it enough. In it Gabe Newell talks about the way he wanted the game to be different from games that came before it in that you could interact with things around you so you felt like you were actually in with and interacting with this world. He then related it to a psychological concept (maybe associated with self realization or external validation) and how as humans we crave the kind of physical objective feedback as recognition of our existence and how important and valuable that is. Really a neat idea and whether or not the science is sound, there is something immensely satisfying about interacting with virtual objects and having them respond in a physical manner that replicates physical reality.
I have a problem with animation every time it induces latency. It's okay to animate some action that would take that much time anyway, but waiting for purely cosmetic animation to finish feels sluggish and not enjoyable.
70 comments
[ 3.0 ms ] story [ 74.7 ms ] threadAnything 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.
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.
Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
Nerdsnipe perpetuated by other engineers/designers admiring it on Twitter. Nothing wrong with that, just shouldn’t pretend that most users care.
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.
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.
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.
For B2B (especially enterprise B2B), your software is just a tool your customers' employees need for their day jobs. Fancy animations, multi-colored gradients (because gradients mean "AI" now, right), and other gaudy crap does not make it easier for anyone to do their job. It's just noise -- constantly distracting users who are just trying to navigate through dense, text-heavy dashboards.
If you want to design "pretty" and "delightful" experiences, then it doesn't make much sense to join a company that revolves around CRM/ERP workflows. Work for a company whose value is directly tied to users' warm and fuzzy feelings.
If you go in and read TFA you'll see that's one of the main points being made.
I think this is the only justified use of animation in UI, however I wasn't satisfied with the dilemma of increasing perceived transition while increasing perceived UI latency.
I found it's possible to get the best of both for event triggered state changes i.e clicking on stuff, by sticking to ease-out based transitions, where the start of the transition is instant and the end decelerates.
This makes it feel just as snappy as no animation, while still helping to communicate a transition, because we are more sensitive to the latency of the start of the transition when it's an event - since we are anticipating a reaction, which is satisfied as soon as it starts to react.
I disagree with this, as much as I want it to be true. Just ask an Apple/iPhone user to use an Android phone for a week and then ask them how the experience was, they'll tell you something felt off or janky about it, and a lot of it comes down to really well designed animations on iOS for everything you interact with.
Regular consumers may not use the word delight to describe the user experience, but they do notice it when faced with what is (to them) an inferior experience.
I've had the same feeling with more utilitarian interfaces, but it's pretty rare. I don't know why. I expect it's partly because we have different expectations for programs than we do for games, partly because the context and the interactions are pretty different, and partly because most organizations do not have the will or the ability to make interfaces that satisfying. (After all, it's the worst sort of thing for most organizations: something that requires taste, time and experience and cannot be managed, measured or executed by committee.)
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.
When does my wallet slide slightly from the magnetic center and then back into place most often? When I’m getting it out of my pocket.
When am I trying to just use my goddamn phone the most? When I get it out of my pocket.
So, it ends up being that ~50% of the time I need to use my phone, I have to wait for that goddamn 3 second animation first.
If some engineer introduced a 3 second regression in the time for Face ID to unlock your phone 50% of the time, it would be noticed and fixed immediately. But call that 3 second regression a “surprise and delight animation” and suddenly Apple designers love it and force it on you.
apple have completely lost the plot, and organisations of that size are incapable of producing good user experience w/o a de facto dictatorship person who has an idea what here doing (a la steve jobs)
this is worsened by the the fact that even on hn people have no idea what's they're doing in terms of design most of the time, because they fail to realise that the average person isn't like a fan of their product lol, they just see it as a utility that needs to perform a bare minimum of functions reliably, with a consistent ui, like thats literally it...
every time you want to change something, ask yourself, if I show this to my grandma, and unless her reaction is "omg yes this is a million times better, pls do that" DO NOT CHANGE ANYTHING
That one falls into the category of UX felony as far as I'm concerned. It's not just delay or confusion, but actively misrepresenting a value.
OTOH this article is basically downstream of Apple’s interface design philosophy.
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…
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).
And, always provide an accessibility option to turn off all animations.
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.
I already foresee a lot of people jumping on me for this, so do your worst, nerds.
> 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...
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.
That might be the designers intent, but that's not what it does for me at all. First, the animation shown is on some weird 3D angle which is not part of any sane UI. Why is that? Not to convey anything about the actual experience of the app shown. That 3d look certainly does not "help the user understand what this feature does"
The fade-in of the animation seems to draw me in to that area of the page which I assume is the intent. The 3D perspective helps me understand that the text in that box is not part of the page I'm reading, but a view of something else - their product. But it doesn't really help me to understand the product.
If you haven't watched the Half Life documentary, I can't recommend it enough. In it Gabe Newell talks about the way he wanted the game to be different from games that came before it in that you could interact with things around you so you felt like you were actually in with and interacting with this world. He then related it to a psychological concept (maybe associated with self realization or external validation) and how as humans we crave the kind of physical objective feedback as recognition of our existence and how important and valuable that is. Really a neat idea and whether or not the science is sound, there is something immensely satisfying about interacting with virtual objects and having them respond in a physical manner that replicates physical reality.