Live data from Hacker News

My favourite animation trick: exponential smoothing (2023)

lisyarus.github.io

131–140 of 390 posts

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

#131
post #99

Earlier quoted context omitted.

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…

This appealing fallacy is part of the reason, but way too broad in general (and is also not reflected in the flat design land of today, but even before that almost nothing was really skeumorphically close to reality), so let's try to apply it to this specific case: you usually click on a slider, not drag it. So in this case, there is nothing "physical" on the user's intuition side that corresponds to the slider slidi…

> what's the point of emphasizing the sliding?

Because the “knob” changes position. Like in the real world, objects can’t disappear in one place, and then instantly appear in another. Animating a UI state change in terms of a move transition can help people to understand how both end-states are logically connected to each other. The animation resembles the mechanics of the slider knob being a “perpetual entity” that can move between two positions, rather than the slider control as a whole being some sort of static icon that is instantly swapped out for another static icon once I click on it.

Whether or not animations are necessary might still be arguable. I suppose it depends on the complexity of the UI control, on personal preference, and certainly also on the general level of technical familiarity of the end-user.

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

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

The animation clarifies the change. A user, heck even I could be confused by an instantaneous touch toggle. Why? Because my finger covers it during the press, so I would not see the change happen - if my mindset was "change that setting", I might rapidly tap it again, thinking the press didn't register. Such confusion does not occur with a (fast) animated transition. The map example is much more important. With anima…

>> The animation clarifies the change

Isn't that a problem that UI designes (sorry for generalisation) created by themself? Let's stick to the toggle element. It replaces the classic checkbox.

A "checked checkbox" leaves no doubt. A toggle box does.

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

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

Contrary to what some of the replies imply (that a smooth animation is always better than a discrete one), I have a solid example where animation definitely harms the UX.

One of the language apps (either Hemingway or grammarly) had this issue stepping through search results. As you moved, it would change the colour of the matching text, but slowly and subtly, via animation. That makes it much, much harder to actually spot where, in a wall of text, the match actually is. An instant change is far more visible.

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

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

> Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing.

For UI elements that try to replicate the physical world, such as toggles, switches, even some buttons, I find it that the animation makes the UI easier for the brain to understand.

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

#135
post #52

For some reason this makes me want a toggle that: * Moves slowly to about 75% of the way there while you hold the touch/click * Snaps the rest of the way on release I’m not sure what this could mean in terms of UX though. Maybe the setting is actually applied or saved at the end. Or it could be part of an “are you sure?” dialogue. The setting is applied as you hold, but you can hit escape to undo before it snaps into…

https://jsfiddle.net/u1vybhqg/ input:checked + .slider:active:before { transform: translateX(8px); transition: 1s; } input:not(:checked) + .slider:active:before { transform: translateX(18px); transition: 1s; }

This, but set closer to 200 or 100 ms (and for me, swapping the translate 8 and 18 so that the switch barely moves on mouseDown, because that's damn close to a real switch's behavior). This seems like it could be a good compromise to all of the people complaining about lag and others who understand that the visual system is powerful and movement is a huge part of that. Also, it's relatively simple as far as CSS animations go!

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

#136
post #132

Earlier quoted context omitted.

The animation clarifies the change. A user, heck even I could be confused by an instantaneous touch toggle. Why? Because my finger covers it during the press, so I would not see the change happen - if my mindset was "change that setting", I might rapidly tap it again, thinking the press didn't register. Such confusion does not occur with a (fast) animated transition. The map example is much more important. With anima…

>> The animation clarifies the change Isn't that a problem that UI designes (sorry for generalisation) created by themself? Let's stick to the toggle element. It replaces the classic checkbox. A "checked checkbox" leaves no doubt. A toggle box does.

few things in the world are perceived as instantaneous, except maybe lightning. until recently people were not used to interacting with instantaneous objects. even a checkbox, in its original incarnation with pen and paper, would take a second to be filled. as long as the animation is interruptible, and the underlying change happens quickly (whatever the toggle is controlling) then animating the transition is usually better. I really like that their animation is interruptible.

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

#138

Earlier quoted context omitted.

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…

Got any research to back up that claim? I always go to the developer settings and turn off all animations on my Android phones, and it makes a monumental difference in usability, exclusively for the better. I did it on my moms phone as well, and she instantly felt it got faster, so this is not just because I am a technical person. Some UI designers think animations are good, but they are not. They are a clutch that d…

Thank you for this. I didnt know I wanted disabled animations until I tried it just now.

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

#139

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/

Most frontend developers also don't have much - if any - HCI/UX/design training. My experience is that a lot of people who should have had that instead see design as "above" that in a way that is worse by far by showing active disdain for user feedback. Often, in fact, by dismissing input from a user perspective from developers with a "oh, but you're not typical users". Which is on one hand usually fair, but on the other hand dismissing that they also are users, and often there is no such thing as a "typical" user.

If one segment of your users reports something as a problem, you need to at least try to understand why and whether it is possible to reconcile with what your other users want, or whether in fact your other users also would agree but just haven't been vocal about it.

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

#140
post #132

Earlier quoted context omitted.

The animation clarifies the change. A user, heck even I could be confused by an instantaneous touch toggle. Why? Because my finger covers it during the press, so I would not see the change happen - if my mindset was "change that setting", I might rapidly tap it again, thinking the press didn't register. Such confusion does not occur with a (fast) animated transition. The map example is much more important. With anima…

>> The animation clarifies the change Isn't that a problem that UI designes (sorry for generalisation) created by themself? Let's stick to the toggle element. It replaces the classic checkbox. A "checked checkbox" leaves no doubt. A toggle box does.

>A "checked checkbox" leaves no doubt.

It's absolutely not that simple. I actually think that the toggle design is _very_ clever, explicitly because it sidesteps a lot of cultural baggage that comes with existing symbols, and creates its own, fairly unambiguous one.

Do you use "checkmark" to indicate that a choice is selected? In some cultures that indicates "wrong" answer.

https://en.wikipedia.org/wiki/Check_mark

Sure, just use "x" then, right?

In _different_ cultures, that one indicates "no, I do not agree".

https://en.wikipedia.org/wiki/X_mark

Post reply on HN