My favourite animation trick: exponential smoothing (2023) • Hacker News Board

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

#111

Post by tetha » Fri, Mar 08, 2024, 7:35 AM UTC

max_k wrote: post #110

tetha wrote: post #104

Earlier quoted context omitted.

I mostly find the way the opinion presented in this thread by many people exhausting. You're doing it there too: You're throwing every bad point of every bad UI you ever encountered into a bucket and throw all of that at this article by concluding "Animations in UI are terrible and just bloat everywhere". That's very close to a strawman. I have worked and AB-tested in UIs for games and such dealing with just that and…

I agree with that; animations can be OK, but when I have a configuration setting, I usually disable them because input latency drives me crazy. My post replied to "checkboxes vs UI toggles", and replying to that aspect was my main point. That's slightly off-topic, of course. It has to do with animations only because checkboxes wouldn't really benefit from animation, whereas toggles are an obscure visual representatio…

> what does toggle "left" and "right" really mean?

Nothing, because that's not the point of the article.

It's weird to me that this is such a big point here.

In an actual UI, you will have labels or indicators telling you what the toggle means and what the options are - "Safety door unlatched" vs "Control motors engaged". That's a toggle between two choices and having it a toggle like that would be safer than checkboxes.

Otherwise your checkbox without labels is equally bad UX because what does "on" and "off" mean for an unlabeled checkbox? I could give enough examples from work how vaguely labeled checkboxes like "remote authentication" are terrible UX.

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

#112

Post by exe34 » Fri, Mar 08, 2024, 7:36 AM UTC

Have you tried using a tick box?

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

#113

Post by eviks » Fri, Mar 08, 2024, 7:40 AM UTC

ramesh31 wrote: post #33

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…

Animation should enhance and enrich the UI, not make it "look fancy". Apple gets this perfectly. The squeeze animation on iOS's volume bar is a great example. Providing feedback to the user in response to an action, in a manner that is expected and makes sense, can massively increase UX.

Apple is missing a few bites from its perfection:

They use these sliders, realize they could be ambiguous, so add an accessibility setting for the on/off labels.

Then they have these fancy animations where holding a slider even elongates the button "providing feedback", but this is just wasted since your finger is covering the button, and fingers have no eyes!

But still, it's a slider, so you'd expect that if you slide your finger over it, it will move. Not so fast, this only works if your started sliding from the slider, not from a side outside it (which would still work in the "real" world.). But if you start at the slider, then there is no point in sliding, there is simply not enough width for that!

Also if slider's button is to the left and you swipe from right to left, the sliders moves right! Take that, immediate fedback in the opposite direction, massive UX boost in a manner that's unexpected and doesn't make sense! (because it's not a real slider, just a check box of a different form)

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

#114

Post by sodimel » Fri, Mar 08, 2024, 7:43 AM UTC

Emotional design (https://en.wikipedia.org/wiki/Emotional_Design) as it's finest form, there's a lot to tell behind a tiny little animation.

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

#115

Post by unwind » Fri, Mar 08, 2024, 7:47 AM UTC

TomK32 wrote: post #89

Izkata wrote: post #55

Earlier quoted context omitted.

Firefox on Android, too.

and Firefox on Linux.

Seconded (Firefox on Linux), it worked fine with the toggles but once it came to the map-based examples it stopped. Never saw a map scroll, and continuing down the page started to blank out the (assumed to be) maps, so I closed the tab.

Very nice-looking page, but perhaps a smidgen over-engineered for what it wanted to show? :)

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

#116

Post by anon373839 » Fri, Mar 08, 2024, 7:48 AM UTC

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…

> I'm consistently surprised by how quick so many developers are to assume their personal usage habits

To be fair, developers coming from math and CS backgrounds may not have had any HCI/UX/design training. For those who have, "You are not the user" [1] was drilled in as a foundational concept.

[1] https://www.nngroup.com/articles/false-consensus/

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

#117

Post by jalfresi » Fri, Mar 08, 2024, 7:52 AM UTC

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…

Im not sure I agree with this, and its quite a common argument for animations in UIs. The fundamental weakness in this argument is that animations are not interactive. They have a beginning, middle and end. Any attempt to interact with the UI during this sequence would disrupt the animation. This is why animation makes UIs feel slow; clicking the widgets requires a period of time to transition from state A to state B via animation. The irony is that this is used to indicate a transition, to emulate what happens “in the real world sliders dont teleport to the next state”, but this often always misses the fact that I didnt slide the slider to its new state: i clicked a mouse button. That is an immediate state transition. So all animations like the above do is slow the feedback of the state transition in a misguided attempt to emulate a real world slider when i never interacted with the UI in any way that resembles a slider.

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

#118

Post by anon373839 » Fri, Mar 08, 2024, 7:53 AM UTC

bongodongobob wrote: post #94

chefandy wrote: post #30

Earlier quoted context omitted.

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

I think parents reaction might be due the amount of shit software with pretty UIs. In the last 10 years it really feels like software has leaned towards form over function. I personally miss, simple, snappy Windows NT type UIs that were a megabyte and didn't contain a gig of custom icons or hit the GPU to like fade a window or something. I think most people would trade opacity and fancy buttons for MS Teams to be abl…

That's a fictitious trade, though. Opacity and fancy buttons are computationally very cheap, and they aren't the reason for Teams's poor performance.

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

#119

Post by degun » Fri, Mar 08, 2024, 7:53 AM UTC

huhtenberg wrote: post #101

Some of example animations are buggy - https://i.imgur.com/hQyh05s.gif https://i.imgur.com/So6KsMt.gif

Same on my browser and system: Safari on iOS.

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

#120

Post by t43562 » Fri, Mar 08, 2024, 7:55 AM UTC

I think this was fun but I really hate those switch things - I find it confusing to know which position is on and which is off. Which colour is the "on" colour? A checkbox might be ugly but I do understand it at a glance.