Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My favourite animation trick: exponential smoothing (2023)

lisyarus.github.io

Post reply on HN
Print view View original

341–350 of 390 posts

Re: My favourite animation trick: exponential smoothing (2023)

#341

Post by slumberlust »

Retr0id wrote: post #257
baxuz wrote: post #156

This is actually a really good approach and a good proof of concept for an animation / easing technique. Reminds me a lot of Flickity: https://metafizzy.co/blog/initial-demos/ https://metafizzy.co/blog/math-time-resting-position/ https://metafizzy.co/blog/particle-to-slider/ https://metafizzy.co/blog/flickity-begins/ Especially this demo: https://codepen.io/desandro/pen/myXdej This technique isn't just useful for swi…

In this case a lot of people are unable to read the article because it hangs most non-chromium browsers about a third of the way down the page.

Loaded fine for me on Firefox. What are you using?

Re: My favourite animation trick: exponential smoothing (2023)

#342

Post by itishappy »

mrob wrote: post #298
itishappy wrote: post #289

Earlier quoted context omitted.

It's non-blocking. If those milliseconds are critical, you can be doing other stuff.

Controlling a computer at maximum speed inevitably means occasional fumbled inputs. If I don't detect these, my mental state will desynchronize from the computer's state, resulting in confusion and potential data loss. Therefore I can't look away from the checkbox until I confirm it changed state. Any animation slows down this confirmation, so it wastes my time.

Professional StarCraft players take about 200ms per action, which is about the reaction time of the human visual system. If you set your time constant to that (1/e in 200ms, which would be an extremely sluggish UI) then your UI elements will have moved by 15% in 33ms. A more reasonable response (1/e in 50ms) will have moved by 50% in 33ms. My personal favorite curve is just "move 50% per frame."

I'd love to see what your day looks like if you've optimized it to require professional Counter Strike reflexes to activate toggles.

Re: My favourite animation trick: exponential smoothing (2023)

#343

Post by hn_acker »

ustad wrote: post #96
aappleby wrote: post #32

I've used this for decades. The sweet spot for ui components seems to be moving 90% of the way to the target every 80 milliseconds.

Reminds me of that famous paradox.

Zeno's dichotomy paradox [1]. To travel a certain distance, you must cross half the distance. Then you must cross half of the remaining distance (one fourth). Then half again, and so on.

[1] https://en.wikipedia.org/wiki/Zeno's_paradoxes

Re: My favourite animation trick: exponential smoothing (2023)

#344

Post by tetha »

chefandy wrote: post #318
eviks wrote: post #65

Earlier quoted context omitted.

> It's a technical demonstration So? The justification is still substantive. What would change in a real slider that turns real setting on/off? > delay is also overemphasized That's only true for those slowed down by a factor of 8. Otherwise it's not, I see the exact same issue in real-world sliders on web sites and in apps. > Toggles don't always represent on or off, either But they mostly do, add they do in this ca…

> So? The justification is still substantive. What would change in a real slider that turns real setting on/off? No it's not. Whether or not a design accomplishes its goals is exclusively based on what it's trying to communicate. This is trying to communicate animation curves. > That's only true for those slowed down by a factor of 8. Otherwise it's not, I see the exact same issue in real-world sliders on web sites a…

> Most novices can't distinguish poor practice from poor practitioners from poor general concepts.

Off-topic, but this made me chuckle. My current progress into learning instruments and music is greatly helped by the fact of knowing a few musicians who understand my problems better than I do because they had those problems 15 years ago, haha.

Re: My favourite animation trick: exponential smoothing (2023)

#345

Post by zellyn »

frfl wrote: post #9

Really great write up. The demos seems to work fine in Chrome, but on Firefox they freeze up and cause they page to stop rendering completely as you scroll.

Yeah, I had the same issue and came to the comments to find out it it was just me.

Re: My favourite animation trick: exponential smoothing (2023)

#346

Post by mrob »

itishappy wrote: post #342
mrob wrote: post #298

Earlier quoted context omitted.

Controlling a computer at maximum speed inevitably means occasional fumbled inputs. If I don't detect these, my mental state will desynchronize from the computer's state, resulting in confusion and potential data loss. Therefore I can't look away from the checkbox until I confirm it changed state. Any animation slows down this confirmation, so it wastes my time.

Professional StarCraft players take about 200ms per action, which is about the reaction time of the human visual system. If you set your time constant to that (1/e in 200ms, which would be an extremely sluggish UI) then your UI elements will have moved by 15% in 33ms. A more reasonable response (1/e in 50ms) will have moved by 50% in 33ms. My personal favorite curve is just "move 50% per frame." I'd love to see what…

That 200ms is the natural human delay. A "reasonable" 50ms animation is in addition to that, so it's equivalent to making the user 25% slower. It's similar to moderate alcohol intoxication.

I personally use 72Hz keyboard autorepeat, which requires both low latency and predictable latency to use effectively.

Re: My favourite animation trick: exponential smoothing (2023)

#347

Post by chefandy »

mrob wrote: post #330
chefandy wrote: post #327

Earlier quoted context omitted.

> They have an obvious incentive to like it: they're getting paid for doing nothing. Oh good lord: what an incredibly patronizing sentiment. If design makes an interface slower for its users to use, it's a bad design. What developers-- used to looking at entirely text-based interfaces and command lines-- expect in interface feedback is much different from what others expect from it. If it's a tool for which developer…

It's an major confounding factor in all productivity studies, and IMO underappreciated because UI researchers generally don't want to get involved in politics. Social status depends more on relative wealth than absolute wealth. When the owning class takes approximately 100% of the generated wealth from improvements, the direct effects of improved productivity only hurt the worker. (They gain indirectly, because impro…

What an astonishingly bizarre non sequitur. Are you implying that someone's socioeconomic status affects how they perceive animations in interfaces?

Re: My favourite animation trick: exponential smoothing (2023)

#348

Post by mrob »

chefandy wrote: post #347
mrob wrote: post #330

Earlier quoted context omitted.

It's an major confounding factor in all productivity studies, and IMO underappreciated because UI researchers generally don't want to get involved in politics. Social status depends more on relative wealth than absolute wealth. When the owning class takes approximately 100% of the generated wealth from improvements, the direct effects of improved productivity only hurt the worker. (They gain indirectly, because impro…

What an astonishingly bizarre non sequitur. Are you implying that someone's socioeconomic status affects how they perceive animations in interfaces?

Yes. I believe professionals are less tolerant of time-wasting UIs, in part because they stand to gain a larger proportion of the wealth produced by productivity improvements. If a faster UI just means you do more work while your boss gets richer, why would you want one?

Re: My favourite animation trick: exponential smoothing (2023)

#349

Post by Retr0id »

slumberlust wrote: post #341
Retr0id wrote: post #257

Earlier quoted context omitted.

In this case a lot of people are unable to read the article because it hangs most non-chromium browsers about a third of the way down the page.

Loaded fine for me on Firefox. What are you using?

Firefox

Re: My favourite animation trick: exponential smoothing (2023)

#350

Post by alpaca128 »

chefandy wrote: post #299
alpaca128 wrote: post #168

Earlier quoted context omitted.

I think that's a bit of an exaggeration. Yes, animations are useful sometimes, but in at least 90% of cases they make the experience worse. If animations were so important and integrated everywhere then why didn't I notice any change when enabling "reduce animations" on all my devices, other than everything being suddenly faster? > inexperienced people often see poor outcomes as an indictment of a technique, tool, or…

> Yes, animations are useful sometimes, but in at least 90% of cases they make the experience worse. If animations were so important and integrated everywhere then why didn't I notice any change when enabling "reduce animations" on all my devices, other than everything being suddenly faster? You're confidently saying it makes the experience worse but you said you didn't notice a difference when it went away? There's…

> you said you didn't notice a difference when it went away?

No, I said no difference "other than everything being suddenly faster". I'd say about 1-5% of animations are actually useful but I still wouldn't miss most of them.

> There's a lot of data out there that says otherwise

I would love to see that data. Not sure what your opinion on Gimp's UI design or its popularity has to do with the value of animations, or lack thereof.

Post reply on HN