I don't like this kind of smoothing at all. It feels slow to me. Please just toggle without animations instead. And yes, I know these examples have been slowed down.
My favourite animation trick: exponential smoothing (2023)
121–130 of 390 posts
Re: My favourite animation trick: exponential smoothing (2023)
#122Some of example animations are buggy - https://i.imgur.com/hQyh05s.gif https://i.imgur.com/So6KsMt.gif
The author addresses this:
"See this jittering after the animation completes?"
Re: My favourite animation trick: exponential smoothing (2023)
#123An 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....
Re: My favourite animation trick: exponential smoothing (2023)
#124> 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 animation, your eyes and brain recognizes a single image sliding around, giving you automatic positional awareness. Without, you eyes and brain recognize a slideshow of independent images, and makes recognizing and navigating the map a conscious effort. By no means an impossible effort, but an entirely unnecessary one detrimental to the user experience.
At the same time, navigation UIs that react as navigation-less updates also tend to have the double-whammy of bad UX in the form of blocking and discarding user input during updates.
Bad UIs are not bad because animations are bad, they're bad because they were made poorly.
Re: My favourite animation trick: exponential smoothing (2023)
#125Earlier quoted context omitted.
I agree with that; animations can be OK, but when I have a configuration setting, I usually disable them because input latency drives me crazy. My post replied to "checkboxes vs UI toggles", and replying to that aspect was my main point. That's slightly off-topic, of course. It has to do with animations only because checkboxes wouldn't really benefit from animation, whereas toggles are an obscure visual representatio…
> what does toggle "left" and "right" really mean? Nothing, because that's not the point of the article. It's weird to me that this is such a big point here. In an actual UI, you will have labels or indicators telling you what the toggle means and what the options are - "Safety door unlatched" vs "Control motors engaged". That's a toggle between two choices and having it a toggle like that would be safer than checkbo…
> that's not the point of the article.
Of course not. The post you're replying to explicitly said the discussion was off-topic. That means it's not discussing the point of the article.
> In an actual UI, you will have labels or indicators telling you what the toggle means and what the options are
If it only were that way, we wouldn't complain. But it's not.
> checkbox without labels is equally bad UX
Of course, I agree. But nobody asked for that.
Your post ignores the things that were said and replies to things that were not said.
Re: My favourite animation trick: exponential smoothing (2023)
#126Earlier quoted context omitted.
the color choice is the problem, not the toggle. If you had red or green, which one is on?
Am I wrong in thinking that checkboxes/tickboxes/whatever-one-calls-them are ubiquitously understandable across cultures from both an interpretation and interaction perspective? If so, it wouldn’t be the first time I’ve made this assumption/mistake so I’d be happy to hear about it! If not (and I am right in thinking these are globally understood), then there’s a clear advantage of the checkbox over the switch in that…
Checkboxes also have a fundamental dependency on the label to assist them with their affordance: a label for a checkbox should almost always be in the form of a yes/no question: “are you hungry? [ ]”
The “checked” box is an affirmative, empty is a negative. A checkbox without a label is useless because it has no context.
But I constantly see checkboxs without the question label. Think back to all those control panels and settings windows youve seen where the label for a checkbox is something like “animations [ ]”. Does that mean they are on by default? Does checking the checkbox switch them on or off?
Now compare with this “animations? [ ]” checking the checkbox has now become an answer to a question
Re: My favourite animation trick: exponential smoothing (2023)
#127Earlier 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…
Im not sure I agree with this, and its quite a common argument for animations in UIs. The fundamental weakness in this argument is that animations are not interactive. They have a beginning, middle and end. Any attempt to interact with the UI during this sequence would disrupt the animation. This is why animation makes UIs feel slow; clicking the widgets requires a period of time to transition from state A to state B…
This is why we design animations in immediate actions to be below 100ms, any more than that and we start to feel "computer's reaction is slow maybe it's doing some calculations in the background?"
Re: My favourite animation trick: exponential smoothing (2023)
#128I like this although I'm going to stick my neck out and say the author is objectively wrong that sqrt is better than cubic for a toggle switch, and that cubic is in fact the better choice for this situation simply because of the way real life toggle switches generally work. Think about the breaker switches on the electrical consumer unit on your house, or the kind of switches you often find on analog synths or other…
Intuitively I too preferred the feel of the cubic function. A mechanical toggle will have some inertia, and I guess that’s what we’re seeing with the cubic approach.
Re: My favourite animation trick: exponential smoothing (2023)
#129> 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…
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/
Re: My favourite animation trick: exponential smoothing (2023)
#130Can this be done in pure CSS?
Can probably try playing around with cubic-bezier, but not too sure.
Something like this: https://easings.net/#easeOutExpo