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

251–260 of 390 posts

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

#251

Post by Anotheroneagain »

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 feel like UI has changed to aim purely at the new user, at the expense of long term users. Its only focus is to be understandable as soon as possible, but cuts out everything that allowed to do things better once you understood it more in depth, as the depth isn't there. All that remains accessible are the black boxes that can be easily understood by someone new.

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

#253

Post by ripe »

card_zero wrote: post #240
usrusr wrote: post #197

Earlier quoted context omitted.

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

Why can't phones have mouse pointers? Drag anywhere on the screen (ideally not where the pointer is) to grab the pointer. Do some kind of multitouch thing like tapping with a second finger to click. Then you can see what's under the mouse instead of constantly prodding your fat finger into the object of interest. I guess that would be too slow, or something? Not simple enough?

Hmm, I must admit I had never thought of this idea by card_zero: why not drive a mouse pointer using touch at a distance? Does anyone with experience in this know why it wouldn't work, or whether it has been tried?

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

#255

Post by anon373839 »

layer8 wrote: post #231
anon373839 wrote: post #129

Earlier quoted context omitted.

Checkboxes and switches serve different functions and shouldn't be used interchangeably: https://www.nngroup.com/articles/toggle-switch-guidelines/

This is a rationalization after the fact. Checkboxes used to be used in contexts where they are effective immediately too, and nobody was confused by that. The real reason switches were introduced was to be able to line them up on the right side in iPhone OS Settings, whereas checkboxes would have to be on the left side, costing too much extra margin space on the then-small iPhone screen.

Did you read the linked article? I think toggle switches are a superior metaphor for controls that move a system between two states. Checkboxes are superior for opt-in items that can be skipped over.

Consider the “kitchen lights” illustration here: https://learn.microsoft.com/en-us/windows/apps/design/contro...

Do you really think a checkbox has the right affordances for this action?

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

#256

Post by ulrikrasmussen »

jdiff wrote: post #214
ulrikrasmussen wrote: post #86

Just go with the instant toggle instead of wasting time making the UI worse by making users wait for pointless animations.

Who is stuck waiting for a toggle or checkbox to finish animating? It's not blocking anything.

The user is. You usually wait for visual confirmation before you determine that the action you performed was indeed performed.

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

#257

Post by Retr0id »

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…

In this case a lot of people are unable to read the article because it hangs most non-chromium browsers about a third of the way down the page.

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

#258

Post by some1else »

You only need to smooth on approach. Something like `transition: left 200ms ease-out` in CSS should have you covered most of the time. Alternatively, you can build any kind of interpolation by replacing the `ease-out` function with the `cubic-bezier(...steps)` keyword: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...

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

#259

Post by d0gbread »

kkoncevicius wrote: post #232
Slartie wrote: post #223

Earlier quoted context omitted.

But when you move a switch like the ones demonstrated here in the real world, you have the haptic feedback of moving the pin physically, of it "snapping" into place. And that's how you know that your switch toggling was successful. The "digital switch" does not have that. You usually don't even "move" it, as in "move the finger over the screen", but you just touch it. And your finger obscures the UI component in the…

I agree more with James K on this, but see your point too. Maybe this should be abstracted away such that each person can set their own preference which would be applied across all websites. Similarly how some of them respect your theme (dark vs light), they could be made to respect the animations, so that all toggles behave the same way (fast animation / smooth animation / instant). I would choose instant thou.

Or use a checkbox and stop trying to make toggles a thing, since they just don't translate to digital as well.

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

#260

Post by rav »

iainmerrick wrote: post #222

I don't see much discussion here of the crucial point, which is that this isn't just another easing curve or smoothstep() between 0 and 1, it's a stateless method that handles pretty much any inputs in a regular way. That's really useful! If you've used CSS transitions you'll have encountered the problem this solves. Okay, my duration is 400ms -- but why 400? Shouldn't it depend on how far it has to move? As others h…

> If you've used CSS transitions you'll have encountered the problem this solves. Okay, my duration is 400ms -- but why 400? Shouldn't it depend on how far it has to move?

It seems to me that the "speed" parameter in the exponential function has the same issue, does it not?

Post reply on HN