Live data from Hacker News

My favourite animation trick: exponential smoothing (2023)

lisyarus.github.io

381–390 of 390 posts

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

#381
What you want is the switch to follow a potential function like this:

     .-------.
  \_/         \_/
The two low energy states are the on/off positions.

Next, we want there to be some friction.

Lastly, we imagine the switch being moved by a mechanism that moves linearly, and is connected to the switch by an invisible spring or rubber band.

As the motion begins, the invisible linkage spring compresses and the switch moves only a little. Then it snaps out of the potential valley and moves across the plateau. Finally it snaps into the other valley, with a bit of overshoot.

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

#382

Earlier quoted context omitted.

> Read the comment I wrote initially This is why I call you conceited – the only reason people can disagree with you is because they are stupid or because they haven't actually read what you said. You seem so confused by the fact that I have read it, and I find it to be unconvincing. You suggest that these switches exist primarily to look pretty, when as I understand it, their main purpose is to communicate that chec…

>>> Appropriately applied anything is good. I am disputing whether this is an appropriate application. >> Ok, explain why this animation is not an appropriate application of this animation in a technical demonstration of this animation. > Thought so. > the only reason people can disagree with you is because they are stupid or because they haven't actually read what you said. What I initially said is based in common i…

> Rather than addressing the clear premise of how you'd respond to sweeping, arrogant, and unsupported criticism by arrogant laypeople

Except I did address that in the next sentence[1]. Maybe you should read my comments before you write all this and accuse me of not reading yours.

> Thought so.

> The default state of UI design is not adding anything unless it adds something specific and justifiable and doesn't kill any other sort of accessibility

I did actually explain why it is not appropriate (that it communicates something specific which is contradictory to the way I often see it used). I'll add that it feels much worse than the native form widgets in websites where I often see it used, and it can degrade usability by being a non-standard input method. I also should point out that the null hypothesis doesn't need explaining. You've said yourself that the default state is not adding something, i.e. assume it is not appropriate until there is evidence to the contrary. The burden of proof is on you, and that is why I didn't deem that sentence worthy of specific reply.

> In this comment section, literally zero of the very critical people, you included, has responded with anything aside from some combination of personal preference

I don't control the actions of other people. That said, I did as you asked yesterday and looked it up, and the only study I could find said users didn't like toggles[2][3]. Wherever toggles are compared to binary non-toggle options, the other options are preferred though there is a degree of subjectivity to it. The only reason I didn't post it is because I assumed you were already familiar with the literature on the matter.

> Your refusal to acknowledge all of this doesn't oblige me to gather empirical evidence to defend it.

If it is as easy as you claim, it would be a lot less effort than writing all this and it would actually convince me you are correct (which I assume is your objective but it may not be). That seems like a much better option than calling me egotistical and stupid.

[1] "If the people making these claims were incorrect about something, I would simply explain why that is rather than saying "I have a bunch of experience that you don't have and there are some studies that prove your silly little feelings wrong. Your opinions are worthless compared to mine."" - James K (2024)

[2] Plaisant, C., & Wallace, D. (1990). Touchscreen toggle switches: Push or slide? Design issues and usability study (CS-TR-2557, CAR-TR-521). University of Maryland.

[3] Alyaa Al-Jasim and Pietro Murano. 2023. Designing User Interface Toggles for Usability. J. User Exper. 18, 4 (August 2023), 175–199.

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

#383

Earlier quoted context omitted.

>>> Appropriately applied anything is good. I am disputing whether this is an appropriate application. >> Ok, explain why this animation is not an appropriate application of this animation in a technical demonstration of this animation. > Thought so. > the only reason people can disagree with you is because they are stupid or because they haven't actually read what you said. What I initially said is based in common i…

> Rather than addressing the clear premise of how you'd respond to sweeping, arrogant, and unsupported criticism by arrogant laypeople Except I did address that in the next sentence[1]. Maybe you should read my comments before you write all this and accuse me of not reading yours. > Thought so. > The default state of UI design is not adding anything unless it adds something specific and justifiable and doesn't kill a…

Those would be great citations of we were talking about that. This entire conversation and the article it's responding to are discussing UI animation and not the merit of any given UI widget. You're obviously just going to just keep claiming that whatever you kicked the ball into is the goal, so I'm washing my hands of this pedantic mess. Enjoy.

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

#384

Earlier quoted context omitted.

> Rather than addressing the clear premise of how you'd respond to sweeping, arrogant, and unsupported criticism by arrogant laypeople Except I did address that in the next sentence[1]. Maybe you should read my comments before you write all this and accuse me of not reading yours. > Thought so. > The default state of UI design is not adding anything unless it adds something specific and justifiable and doesn't kill a…

Those would be great citations of we were talking about that. This entire conversation and the article it's responding to are discussing UI animation and not the merit of any given UI widget. You're obviously just going to just keep claiming that whatever you kicked the ball into is the goal, so I'm washing my hands of this pedantic mess. Enjoy.

The fact that users prefer a non-animated widget to an animated one seems exceedingly relevant my statement that users prefer widgets that react instantly over animated ones. I would even call it a strengthened goal. If you accept this conclusion, then I have shown more than I needed to prove.

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

#385
post #370

It's fascinating that easing, which is what this article mostly boils down to, is something that each new generation seems to need to (re)discover on their own. I remember being fascinated by Yugo Nakamura's experimental websites back in the late 90s because they were some of the first that I'd seen that had an organic feel due to liberal use of easing. https://www.youtube.com/watch?v=NLt7Gwnt3WY

I remember sitting on the front row of a conference where Yugo was presenting and watching all the other Flash experts lose their minds as he ran through his demos.

Seeing him present those demos/techniques in person would have been an amazing experience. Is there video of that presentation online anywhere? I'd love to know the background of how he developed his programming techniques and visual style.

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

#386
post #151

Earlier quoted context omitted.

The bottom half of the page doesn't even show in FF on MacOS for me... just white... Text selection also doesn't seem to work... is it all Canvas maybe?

Perhaps it's worth filing a bug report if this works on other browsers but not FF.

Reported it here: https://github.com/webcompat/web-bugs/issues/134506

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

#387
post #375

Earlier quoted context omitted.

If you use the version somebody else here mentioned, “move 90% of the way to the destination in 80ms”, does that make more sense? (I think it’s equivalent, just a change of units.)

But can't you then also change the units on the linear animations? "move 40px/s until you reach the destination"

I don't think there's any way to do that in pure CSS (which is what I was comparing to). You can specify transition duration, but not speed.

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

#388
post #158
post #140

Earlier quoted context omitted.

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

This is a problem if using "tri-state" checkboxes. Don't. They're confusing. It is not a realistic problem for two-state checkboxes. I'm from nordic country, and yes, I too have seen the "checkmark" to indicate mistake on school work as listed on the Wikipedia page and attributed to Sweden and Finland. I've however also seen that on my son's school work in the UK. And I've seen it used for correct. And for just "I've…

That’s a very fascinating detail that I never knew about! Thank you for sharing and the detailed explanation.

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

#389

Earlier quoted context omitted.

A checkbox should always have a label which should always be a question. The checkbox should be a tick not a cross. Then there is not ambiguity. Toggle switches should have two labels to the left AND right which are binary enumerations. yes (O----) no vanilla (----O) chocolate off(O----) on The problem is that designers with their bias towards animation and colors get it wrong. They do things like Turn on? (O----) An…

Bad design != Design. UI design is a communication medium, like technical writing. Within a weekend of fiddling, damn near anyone can operate the tools to assemble interfaces, but that does not mean they are interface designers. Failing to use color to appropriately communicate actions or state and thoughtlessly applied labeling are the actions of graphic designers trying to make things look pretty, or developers do…

> Failing to use color to appropriate communicate actions or state ....

No no no and no again!

Do not use color to to communicate actions or state unless that color can be used to statically differentiate between another color that is present in the UI at the same point in time. This is why syntax highlighting in code editors works because there is a state boundary between a word in one color and a word in another. It is why colors for toggle sliders indicating off and on do not work. What color is 'off' or 'go' or 'enable' or 'disable' or 'allow'. An animation of any type does not help and only adds CPU overhead and UI slowdown.

Animations can be useful only if they assist in disambiguating a transition between states. For example transfer of an item to a different position in a list. If the item animates across the screen the eye is guided to the new position. A toggle slider does not have this issue and should transfer to the new state immediately and the most important design question is how to interpret the current state of the toggle not the animation between the two state.

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

#390
post #375

Earlier quoted context omitted.

But can't you then also change the units on the linear animations? "move 40px/s until you reach the destination"

I don't think there's any way to do that in pure CSS (which is what I was comparing to). You can specify transition duration, but not speed.

Ah, I think I considered the article to be a supposed improvement to CSS animations - in which case both exponential smoothing and px/s transitions would be independent improvements.
Post reply on HN