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

61–70 of 390 posts

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

#61

Post by dgellow »

eviks wrote: post #12

> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…

“Accessibility > Reduce animations” is the magic trick to make modern UIs feel snappier and less distracting. I wish web UIs would respect it.

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

#62

Post by dgellow »

bobbylarrybobby wrote: post #43
eviks wrote: post #12

> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…

Computer UIs need animations for the same reason they need shadows, gradients, and momentum: because these are aspects of the physical world that we already know how to interpert, so can be used "for free" to aid our understanding of the UI. Not using animations would likely be more taxing on our visual processing because nothing in the world moves discontinuously, so that would be a new thing to learn when using a c…

Try to disable/reduce animations in your OS via accessibility settings, you will see that you really don’t lose much.

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

#63

Post by daniel_iversen »

chii wrote: post #60
croes wrote: post #58

Earlier quoted context omitted.

Then a toogle button is a bad example. It's a replacement for checkbox and adds ambivalence that the checkbox doesn't have. Can you tell me which position of the toggle means on? Purple or green.

the color choice is the problem, not the toggle. If you had red or green, which one is on?

If you were colorblind that could be harder to answer (plus, it seems like a lot of designs have color "themes"). Checkbox is probably best.

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

#64

Post by waveBidder »

chii wrote: post #60
croes wrote: post #58

Earlier quoted context omitted.

Then a toogle button is a bad example. It's a replacement for checkbox and adds ambivalence that the checkbox doesn't have. Can you tell me which position of the toggle means on? Purple or green.

the color choice is the problem, not the toggle. If you had red or green, which one is on?

lets ask someone who's colorblind

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

#65

Post by eviks »

chefandy wrote: post #30
eviks wrote: post #12

> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…

> Like in this case, what exactly is "going on" that requires this visual delay? Nothing. It's a technical demonstration. The delay is also overemphasized to make the difference more apparent. > The this is the fanciness that detracts from solving the major flaw of these sliders: you can't easily tell whether it's off or on That's because they don't represent anything. Toggles don't always represent on or off, either…

> 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 case ("turned_on"). The other use cases would have different issues like the choice of colors (green is for on)

Then you overly general description forgets to prove that slower and more confusing control (which some generic non-tech users try to actually slide by holding a mouse button and moving the mouse instead of clicking) is actually preferable because it "feels" nice to them

Also, these > seasoned credentialed professionals in the field.

are the same people who put these garbage sliders in the OS settings menus (as well as maintaining many other common decades-old UI bugs), so color me unimpressed by their credentialed osmosis degrading user experience at scale (poor FOSS designs notwithstanding)

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

#66

Post by [deleted] »

dietr1ch wrote: post #56
bobbylarrybobby wrote: post #43

Earlier quoted context omitted.

Computer UIs need animations for the same reason they need shadows, gradients, and momentum: because these are aspects of the physical world that we already know how to interpert, so can be used "for free" to aid our understanding of the UI. Not using animations would likely be more taxing on our visual processing because nothing in the world moves discontinuously, so that would be a new thing to learn when using a c…

Well, some constructs need animation, but others can work out just fine without animation. When typing, I want the characters to show right away, and instead of using a switch, I could use a checkmark that I wouldn't mind getting checked too fast assuming that the context isn't full of checkmarks. I think that we have tools in the UX toolbox that are less reliant on animations than others, but yeah, if you can get an…

[deleted]

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

#67

Post by slimsag »

chii wrote: post #60
croes wrote: post #58

Earlier quoted context omitted.

Then a toogle button is a bad example. It's a replacement for checkbox and adds ambivalence that the checkbox doesn't have. Can you tell me which position of the toggle means on? Purple or green.

the color choice is the problem, not the toggle. If you had red or green, which one is on?

I am profusely colorblind, and it's infuriating when people only use colors to indicate something.

Please for the love of god give me a checkbox over a red/green slider toggle. Shapes, please, shapes.

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

#68

Post by coldtea »

>However, this still looks a bit clumsy due to having a constant speed

Does it? Looks much better to me, and preferred to waiting for a animation to be given more time to speedup while looking "smooth" (they seldom seem to be given the same time as instant or linear animations, do they? For some reason we have to be forced to enjoy them in half time).

In fact I'd take the "instant toggle" in a heartbeat too. Real life toggles don't "exponentially smooth" from one side to the other either.

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

#69

Post by King-Aaron »

bobbylarrybobby wrote: post #43
eviks wrote: post #12

> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…

Computer UIs need animations for the same reason they need shadows, gradients, and momentum: because these are aspects of the physical world that we already know how to interpert, so can be used "for free" to aid our understanding of the UI. Not using animations would likely be more taxing on our visual processing because nothing in the world moves discontinuously, so that would be a new thing to learn when using a c…

I have a different definition of what a "need" is.

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

#70

Post by skrebbel »

DevoAKA wrote: post #42
nextaccountic wrote: post #22

Can this be done in pure CSS?

`transition-timing-function: ease-in-out` This reminds me of Medium spending months to change the underline beneath a descender: https://medium.design/crafting-link-underlines-on-medium-7c0...

This isn’t like ease-in-out at all. It resembles ease-out a little.
Post reply on HN