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

191–200 of 390 posts

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

#191

Post by Kiro »

James_K wrote: post #189
Kiro wrote: post #183

Earlier quoted context omitted.

On mobile your finger is often obscuring the button you press and an animation is necessary feedback. This is especially important for things that are not booleans, for example a button to increase a value and you end up in "wait, did I change it to 5 now or was it 5 before with my press not registering?" (actual example from yesterday in a famous D&D helper app).

Surely this only happens because someone wasn't looking at the screen while they were making the input. They could just as easily miss whatever animation is attached to the number changing. The real solution here is to provide some kind of haptic feedback (phone vibration) or to play a sound.

Big disagree on that. Sound and haptic feedback are clearly inferior solutions to the obvious one: an animation.

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

#192

Post by Certhas »

cardanome wrote: post #169
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…

> Similarly, people who spend most of their days doing technical things using technical tools made by and for technical people interpret interfaces differently than most people. Most "non-technical" people use computers, especially desktops, in a professional setting. Navigating those UIs is part of their jobs and they will spent hours upon hours doing so. Pretty animations may make a good first impressions but they…

Several years ago, the number one complaint you could read on this forum on Firefox was that Chrome felt snappier.

Firefox is irrelevant today because the supposedly highly sophisticated users decided based on feel.

Smooth animation performance was a major point of iOS over Android for years.

I see plenty of evidence of sophisticated users deciding based on the factors you dismiss.

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

#193

Post by majewsky »

faceplanted wrote: post #173
bongodongobob wrote: post #94

Earlier quoted context omitted.

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…

Microsoft teams doesn't load slowly because of the animations, you can turn all of them off if you mess around with the settings and your windows registry enough. It loads slowly because MS have a huge incentive to keep adding features and almost no incentive to optimise it because the software is almost always purchased by large institutions, half of whom have vendor lock in already, and imposed on the people who ac…

> It loads slowly because MS have a huge incentive to keep adding telemetry and ads and almost no incentive to optimise it

Fixed that for you.

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

#194

Post by motoxpro »

James_K wrote: post #186
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…

> even "feel" does matter to most users And I think most users would prefer software that does stuff instantly. Attaching little animations to everything is just silly and distracting. It only happens because someone had nothing better to do but still had to look busy. These things almost universally degrade the interface and I've yet to see the actual benefit of them, aside from the fact that they draw attention to…

Almost no Apple interactions are without animation. It's actually hard to find something that's NOT animated on Android AND iPhone. For most users, the iPhone is one of the gold standards for "good feel".

Some people like the unrealistic jumping of no animation, which is totally fine. Some people want it to "feel like a computer" not how things actually behave in the real world. It's taste. Animations that are too long or too noticeable are bad taste. But animations themselves are not bad.

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

#197

Post by usrusr »

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…

On a touch sreen, chances are the finger obscures the state change, or much of it. When you are not super focused ("I don't trust this thing!"), it's easy to miss the difference between before and after states. The animation serves as a low-threshold confirmation that the pixels are not just decoration and that the touch event has actually been registered.

Requiring the user to mentally diff before and after states would be like a sailor only confirming captain's orders when explicitly asked "did you understand me?" instead of an unsolicited aye.

Where the "on-state not as clear as with a checkbox" critique gets a resounding comeback is when slider-looking on/off states are introduced only because of fashion, but in a process where the language used in animations (e.g. screen mockup bitmaps) is completely unaware of animations and therefore they only happen if toolkit sliders match exactly. Yeah, don't ask...

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

#198

Post by moffkalast »

Animats wrote: post #24

You never get there with exponential smoothing. It takes infinite time to asymptotically approach the goal. Also, that page uses 100% of the CPU in Firefox.

It's nice, but it's not nice enough to warrant going beyond transition: all and timing cubic-bezier in css. Maybe if browsers ever add native support without having to add extra overhead.

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

#199

Post by rypskar »

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.

>>Up is on, down is off

That depends on where you are from, in some regions light switches are on when up and in other places they are off when up

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

#200

Post by amarshall »

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…

> Since when has HN turned into Reddit?

Read at least the last paragraph of https://news.ycombinator.com/newsguidelines.html

Post reply on HN