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

71–80 of 390 posts

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

#71

Post by coldtea »

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…

>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

More like "for the same reason a fish needs a bicycle".

>Not using animations would likely be more taxing on our visual processing

And yet, Windows 2000 era UI was far more intuitive, consistent, and self-discoverable than today's animated, shadowed, gradient-filled, blurry transulcent, momentum-having flat crap.

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

#72

Post by function_seven »

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?

Depends on what it’s controlling. The tune of my car? Red = performance, green = eco-mode.

The valve on a pipe? Red means “stop” (off) and green means “go” (on).

What about a heater? Does red mean hot? Or stopped?

Sibling comments cover colorblind users, but those concerns also apply to most e-ink users as well.

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

#73

Post by bongodongobob »

slimsag wrote: post #67
chii wrote: post #60

Earlier quoted context omitted.

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.

I'm colorblind too but I don't pretend that it's a big deal, because it's not even a daily occurrence where I'm completely stumped by color and am blocked from doing something. Yeah, charts and graphs can be annoying sometimes, but I don't expect 90% of the world to bend around me because my sight is sub par. I loathe colorblind people who act like it's a disability. It's a slight inconvenience sometimes.

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

#74

Post by bongodongobob »

waveBidder wrote: post #64
chii wrote: post #60

Earlier quoted context omitted.

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

Red green colorblind checking in. In the case of a toggle, left is off, right is on. Up is on, down is off. Red tends to have less chroma, so dark is off, light is on if there aren't any other cues.

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

#75

Post by buserror »

All of this work for buttons that toggle on a mouse/finger DOWN. How irritating that there is no intermediate state on the mouse DOWN and the toggle on the mouse/finger UP.

Because it allows you to /cancel/ the action.. click, 'oops don't want that' drag mouse/finger out and release. No action taken. User is in control. Amazing.

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

#76

Post by lenkite »

saretup wrote: post #16
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…

> It looks worse vs the original instant response I think that’s an unpopular opinion. The instant response looks janky, exponential smoothing looks well polished as long as it’s not too slow.

Disagree - the instant response was alert and immediately observable and didn't take valuable time away from a limited mortal life.

Its like saying a web-page that loads and displays instantly is "janky" versus a web-page with a busy symbol that makes you pause and wait.

If you had 20 of these toggles to check, you would prefer your "janky" version anytime.

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

#77

Post by zbrozek »

max_k wrote: post #36
zbrozek wrote: post #15

Earlier quoted context omitted.

I miss old school checkboxes for UI toggles. They're crisp and clear and don't entice bored people to animate them.

Me too, agree with you and GP. And I can't keep wondering why this opinion is so unpopular. Today's UIs are bloated with unnecessary animations (which adds latency). But worse than animations is that UIs are horribly inconsistent; took me a while to figure out those toggles should be clicked, not dragged; or: what is even clickable, how do I scroll, ...? I could go on forever, and probably so can you. Why do only old…

I'm old now, and I won't dismiss that the new stuff is aesthetically nice. It's also not that hard to use. But I just don't like the visual polish more than I like the clarity and responsiveness of the old UI elements.

I just don't care if my computing experience is beautiful. I care if it's snappy, productive, and reliable.

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

#79

Post by smaccona »

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?

Am I wrong in thinking that checkboxes/tickboxes/whatever-one-calls-them are ubiquitously understandable across cultures from both an interpretation and interaction perspective? If so, it wouldn’t be the first time I’ve made this assumption/mistake so I’d be happy to hear about it!

If not (and I am right in thinking these are globally understood), then there’s a clear advantage of the checkbox over the switch in that it doesn’t depend on any color recognition to convey the current state. This is a huge win - I have definitely encountered UI controls where the current state was not at all apparent.

I happen to use an iPhone, and haven’t personally had any issues interpreting the “switch” state nor the checkbox, but what if you’re color blind or from a culture where the color doesn’t necessarily mean what you think it does?

Edit: clarify intent

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

#80

Post by idiotsecant »

function_seven wrote: post #72
chii wrote: post #60

Earlier quoted context omitted.

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

Depends on what it’s controlling. The tune of my car? Red = performance, green = eco-mode. The valve on a pipe? Red means “stop” (off) and green means “go” (on). What about a heater? Does red mean hot? Or stopped? Sibling comments cover colorblind users, but those concerns also apply to most e-ink users as well.

In fact red and green are generally not used for flow in a pipe because they have specific meaning for electrical equipment - green denotes an open circuit and red an energized one. This can be extremely confusing with something like an MOV so convention us to avoid red and green on valve position, pipe fill, etc.
Post reply on HN