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.

Yells at cloud with visions of Windows 98 menu slide out animations stuttering on the barely good enough for the new OS pc! ;-p

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.

Anything longer than that I consider too slow.

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.

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.

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.

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 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.

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.

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.

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.

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

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.

Am I the only one who dislikes off-angle animations?

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.

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.

The one that bites me daily is in keeper. The web UI opens with icons collapsed, expanding after ?500ms?, right about when I want to click on a category to expand it, thus collapsing it again.

One thing that instantly ruins my day is animation where the element state is inconsistent during the animation.

For example - I think it's on Windows where I keep running into this - on notification popups from some apps, you can't click "X" to close until sufficient time has passed after the popup animation. If you try to close it in that time, it instead acts as if you clicked the notification to open it. Super annoying.

Another, on Mac, when switching desktops, sometimes an app will show on the screen briefly before flashing to another app. The animation is slow enough that it often tricks me into thinking it's ok to do stuff and then nope the app changes. Even worse, I think it occurs randomly.

Note to designers: if you do choose to include an animation, it better be the most rock solid implementation ever or I will immediately think you're a twat and your app is a buggy pile of crap.

If only UX/UI people spent their time optimizing their code rather than polishing their animations.

Sorry for this rant, but hell, the web, the apps, everything is so sloooow and bloated. Make it instant! I just want to do my things, not to wait for drawings to draw!

While animations in general may add juice they can also hide better ux, like the feedback button, it's one more click(actually two as it seems not to automatically focus on the textarea once opened) to send feedback. But the more years come by the more it looks being a choice to not have a great ux, in the case of the feedback button one might want to be sure the user intention is to send some

UI animations actually do have one valid use: clarifying UI state changes to third parties.

When you're the only person using the computer, UI animations are pure time-wasting anti-features. You obviously know how the UI state changed because you're the one who requested the change. If the UI state changed without your explicit request, that's a bug that needs fixing. But somebody viewing your screen remotely can't see which keys you're pressing, and they don't know what you intend to click on before you've actually clicked it, so to them UI state changes can be surprising. Animations can help them follow what's happening.

Of course, animations should be disabled by default, because most computer use is not performed for an audience, but having the option to enable them is occasionally useful.

I'm a big believer that animations need to validate what you already know, they aren't the information itself.

This means, if you turned animations off you would still work as fast and understand the flow the same as if animations were enabled.

For me, the purpose of animations is to soften the UX journey, and to confirm what I already knew, by giving me small indications that yes, the UI is truly in the state I expect it to be.

Such as fast highlighting of on hover items, so I don't have to correlate the mouse position to the control.

I love that example of tool tip popups taking 0ms once you have popped up one, that is a clear signal that the UX understands you are trying to learn more about the controls you're hovering over.

That's a perfect representation of how animations signal understanding of your UX journey.

Thoughtful article. I read the introduction several times, picking it apart in my head.

> When done right, animations make an interface feel predictable, [...]

Predictable how? If you anticipate the animation, then you will have predicted it. But you also could anticipate the lack of an animation, and you will have predicated that.

> When done right, animations make an interface feel [...] faster,

Do they make the interface feel faster because no transition ever occurs in less time than the animation? Or is it that literal motion on the screen tricks us into thinking something is "going fast"? A nearly instantaneous, unanimated change in view must feel faster than an animation, no?

> When done right, animations make an interface [...] more enjoyable to use. [...]

This is true sometimes. It's particularly true when you're interacting with controls that have a "real physical world" analogy, like buttons, sliders, and page flips. On the other hand, if I click a button and a bunch of sparkles happen, that's not enjoyable to me.

> When done right, animations [...] help you and your product stand out.

If your product has animations and competing products do not, then yours stands out insofar that it has animations.

> But they can also do the opposite. [...]

Correct!

> So how do you know when and how to animate to improve the experience?

> Step one is making sure your animations have a purpose.

Or... don't use animations unless the app involves animation. Or do, there's nothing I can do about it.

I think motion blur could enhance UI animations by making fast transitions feel smoother, even with the low number of frames the animation has to be rendered with. I wonder if this idea has been explored in mainstream UI frameworks, and if not, why - is it too computationally expensive, technically infeasible, or just a bad idea.

Whoever designed the keyboard animation for Walmart self checkouts should take note.

Every time you want to type in a product by name, you must endure a 2 second slide-in of the keyboard before you can start typing on it. It's so slow that I feel that I could have completed the search and started on the next item before it's even done animating, if there was a way to disable it.

I sincerely hope employees don't have to use systems like this all day that reduce their throughout by more than half.

At least on desktop screens I think chronostasis might make animations seem more sluggish depending on where you looked before.

I wonder if this leads experienced users of the app in question to not like any animations, because they know click paths better and place their focus in an anticipatory manner.

Maybe one could measure click speed and reduce animation times based on that.