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

141–150 of 390 posts

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

#141

Post by tiborsaas »

Traubenfuchs wrote: post #123

An I the only one upset this is done by (excessive) JS usage? It would be my deepest displeasure to bring a button toggle animation to production that requires more than CSS. Quick example I found: https://hudecz.medium.com/how-to-create-a-pure-css-toggle-bu... Easing/Smoothing is possible with transition-timing-function. https://www.w3schools.com/cssref/css3_pr_transition-timing-f... .

Buttons are just examples because it's easy to understand. The point of the article is the math.

Of course CSS could do it with less JS, but this would have been a totally different post.

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

#142

Post by johnnyanmac »

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…

>I think most people would trade opacity and fancy buttons for MS Teams to be able to load in under a minute.

It's a paradox. If you don't make it look fancy, smooth, and appealing, you lose out to those that do. Even if you have a better product, that doesn't mean you can sell it on merits of being more technically efficient. Especially to more casual consumer or to business heads to make the purchases.

besides, the minute loading times aren't because it's caching all those animations and assets. That's a different division with different problems. Probably a mix of security checks, inefficient networking, and _maybe_ some choice in framework like Electron as a distant 3-5th (not that Teams uses Election).

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

#143

Post by sabellito »

anon373839 wrote: post #116
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'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/

Your point has truth in it of course, but the main theme gp was pointing out is the hubris of people, often in our field, to think that they know better than someone specialised on a given field.

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

#144

Post by whitehexagon »

hmm, could be my old FF (or hidpi) but many of the examples just dont work. Jittery scrolling on the landscape, and circles that start teleporting back and forth on the sliders, and one that vanishes to the left. To me that just highlights another reason to keep it simple... checkbox?

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

#145

Post by d--b »

I wonder if there is some cultural preference for this.

Looking at the map example, I find the cubic smoothing way “calmer”. The exponential one feels a bit hectic and I am wondering if it’s an American thing. It’s got a “wheez” quality that is annoying to me, but that reminds me of hyper cartoons like powerpuff girls.

It’s still all very subtle…

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

#146

Post by globular-toast »

coldtea wrote: post #68

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

I hate animations like that because they are intentionally slowing down the UI. I already clicked it, why are you spending several milliseconds to update your state?

Animations, or anything else really, should only be used to improve things. Ask what the problem is, not what cool solution I should implement. It's ok to go to town if the page is artistic, like your blog, but if I'm filling out a form? Get your art out of here.

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

#147

Post by vidarh »

bongodongobob wrote: post #74
waveBidder wrote: post #64

Earlier quoted context omitted.

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.

While that seems to be more common by a fairly large factor, in a quick search of images of toggle buttons there were at least two examples of left being on already in the top 10 for me.

I also found a few that had both variants in the same image, and a few examples where from the image alone I couldn't tell if my life depended on it whether they are in the left or right position, and what that means because there's no shading or geometrical hint as to which part is meant to be the actual toggle.

I wish you were right and that this was consistent, and when I read it I did that image search because I hoped you were and that I somehow just hadn't realist. But sadly it's not consistent.

That said, the same image search also demonstrated people managing to mess up the equivalent of a checkbox too (by changing the label, so it's not clear if it needs to be "ticked" to disable the state currently indicated by the label) so it's clear the problem isn't just checkbox vs. toggle.

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

#148

Post by wolpoli »

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:

The thing about design principles is that the designer picks the one that justifies their decision, which is more like fashion than anything.

For example: Windows 8 swept away shadow, and semi-transparent material in the name of flat design, making it resemble Windows 2.0. Windows 10 brought back shadow. Windows 11 brought back Semi-transparent material and also rounded corners buttons from Windows 2.0.

Gradients have been banished and missing for a decade, but I am waiting for a come-back.

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

The above could also apply to more than just shadows, gradients, and momentum.

Skeuomorphic icons help users understand functions but we have shape & outlines resembling hieroglyphs. I doubt we are getting skeuomorphic icons back ever because font icons are just too awesome for designers.

Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world.

Post reply on HN