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

231–240 of 390 posts

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

#231

Post by layer8 »

anon373839 wrote: post #129
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.

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.

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

#232

Post by kkoncevicius »

Slartie wrote: post #223
James_K wrote: post #215

Earlier quoted context omitted.

Switches in the real world tend to snap almost instantly from one end to the other. That is the defining feature of switches – that they don't have a slow transition between the states. This animation stuff isn't realistic, and even if it was that isn't an argument for it.

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.

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

#233

Post by Shorel »

johnnyanmac wrote: post #142
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…

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

We don't use Teams because it is fancy, or smooth or appealing.

We use Teams because the company that pays our salary tells us to use Teams. End of story.

And I would definitely trade opacity and fancy buttons for a client that loads and runs fast.

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

#234

Post by injidup »

aembleton wrote: post #208
injidup wrote: post #161

Earlier quoted context omitted.

Binary toggles are everywhere in web UX. They are almost always used where a simple dropdown menu with WORDS indicating the chosen state would be better. However designers hate that because then they can't write fancy animations on creamy toggle widgets. A dropdown with the words enabled/disabled indicating the state will always be better than a toggle with some subtle animation and colour signalling the state.

Why is it better to use a dropdown? A drop down doesn't show me all of the options until I click on it; so I have to perform an action to see what my options are, rather than having them presented in front of me. They're fine if there's going to be loads of options such as country name, but if its left handed or right handed, I just want to see a toggle/radio button that lets me switch and makes it clear which state…

The problem is that you don't know if ``on`` mapped to what you think it does.

https://i.imgur.com/cflIbUv.png

for example. Light grey is disabled. Light blue is enabled. It's not accessible. It's not obvious. It's not great for colour blind people. It's probably in this case a deliberate dark pattern. The only case where a toggle is ok is if the word for the each state is to the left and right of the toggle.

https://i.imgur.com/skPP5Cu.png

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

#235

Post by baxuz »

amarshall wrote: post #200
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

I wasn't aware of that fine print, but in light of that, let me rephrase it:

Certain topics on HN can induce commenting behaviour among seasoned HN users often attributed to Reddit users, including, but not limited to:

- being contrarian without fully reading, understanding or contextualizing the article or comment in question

- weaponizing downvotes

- being overly cynical, lowering the overall quality of the discussion

- repeating, or tersely acknowledging what has been said by most upvoted comments in order to gain more upvotes

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

#236

Post by interloxia »

useless999 wrote: post #150

Author writes about useful easing concept, happens to use UI element purely for illustrative purposes, HN comment section turns into a 100+ comment jihad over animations in GUIs. Nothing substantial is discussed.

I can't down vote this so I'll reply to say that there is still value to be found amongst the noise and complaints, even in this thead. I found iainmerrick's comment insightful and worthy. A place to discuss the value of animations is of value some of time too. There are lots of other threads to participate in.

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

#237

Post by layer8 »

Kiro wrote: post #183
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 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).

If the animation is so slow that it is still visible after your finger isn't obscuring the button anymore, I'd argue it has to be really slow and is not snappy anymore. It also doesn't behave like anything physical, because physical buttons/sliders only move while you're touching them.

The gold standard used to be to make buttons large enough so they are never fully obscured (for toggles, the label can be included to be part of the button) and to highlight them when pressed and remove the highlight when released. (Like keys on a virtual keyboard mostly still behave.) That way, you have a clear indication of when you press something, and it coincides with what your finger is doing, and doesn’t lag behind.

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

#238

Post by Difwif »

Philip-J-Fry wrote: post #178
modeless wrote: post #167

Earlier quoted context omitted.

The only problem with instant transitions is that sometimes you may not notice what changed. I would like to see a UI built around instant transitions but with subtle animations that happen after to emphasize the change. Like the new content shines, or does a tiny bit of grow/shrink, but not in a way that prevents interaction. There's nothing I hate more than waiting for long transition animations (looking at you, ma…

We've solved this problem already without animations. You just highlight the data that has changed and have an "Apply" button to save those changes.

Toggle buttons are supposed to have an instant effect. It's an anti pattern to gate the effect on a submit.

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

#240

Post by card_zero »

usrusr wrote: post #197
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 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?
Post reply on HN