Purposeful animations

Here's a summary of the themes from the Hacker News discussion:

Animation Should Be Subtle and Purposeful

A strong consensus in the discussion is that animations, when used, should be subtle, quick, and serve a clear purpose rather than being purely ornamental. Many commenters felt that excessive or slow animations detract from the user experience and make interfaces feel sluggish.

• "I feel like web design animations are more similar to PowerPoint than folks want to admit." tyleo
• "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." tyleo
• "Too often we think more animations = better." willio58
• "Personally I would even speed up these animations. 300ms is too high. I prefer animations that are almost imperceptible." prisenco
• "Anything longer than that I consider too slow." prisenco
• "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." danielvaughn
• "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." danielvaughn
• "Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll." wonger_
• "moderernerd: 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 how about 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." modernerd

Overuse of Animation Hinders Usability and Perceived Performance

Several users expressed frustration with animations that slow down interactions, interrupt workflows, and can even lead to an inability to use the interface until the animation finishes. Examples ranged from operating system animations to website elements.

• "Yells at cloud with visions of Windows 98 menu slide out animations stuttering on the barely good enough for the new OS pc! ;-p" rietta
• "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." willio58
• "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." mholt
• "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." mholt
• "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." gcau
• "webdevver: 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." webdevver

"Delight" as a Primary Motivation for Animation is Overstated

A significant point of contention was the concept of "delight" as a primary driver for animation. Several commenters argued that users, especially non-designers, rarely experience genuine delight from animations, and that this perceived value is often an internal metric for designers and engineers.

• "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." danielvaughn
• "> 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." meagher

Basic UI Feedback vs. Animation

The discussion touched on what constitutes "animation" versus fundamental visual feedback. The appearance change of a button on mouse down, for example, was debated as to whether it's an animation or essential feedback indicating clickability.

• "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?" xg15
• "dfxm12: 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..." dfxm12

User Control and Preference for Animation Settings

Several users suggested that providing users with control over animation levels would be beneficial. This could range from disabling animations entirely for power users to selecting preferred animation speeds.

• "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." wonger_
• "This exists as a browser setting, it's called 'prefers-reduced-motion', an example usage in my code: ..." mickael-kerjean

The Need for Usability Studies and Baseline Comparisons

There was a call for more empirical data and user studies to understand the actual impact of UI animations. The challenge of establishing a proper baseline for comparison (e.g., comparing a visually dynamic UI with animations to a UI designed from the ground up without animations) was also highlighted.

• "But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation?" wonger_
• "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…" bee_rider