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

331–340 of 390 posts

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

#331

Post by mynjin »

bayindirh wrote: post #282
dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

> I click a button in the real world, it changes the state instantaneously. Actually it does not. Flick switches have travel, click buttons have depth. Electronic buttons have lag, bigger systems have startup time (hence the blinkenlights). My dishwasher starts in ~3 seconds after I press start. The button travel is so much that I'm never sure whether it registered the press or not until I hear the water pump start p…

Let's just call miming physical switch travel and movement what it is: skeuomorphic animation

And just like its design counterpoint, while some may enjoy the aesthetic, it's actually superfluous and we've mostly moved on.

I get it, it's visual, it's easy to show one's boss domain knowledge; it doesn't do anything for accessibility and the feel (dependable repeatable ui workflow).

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

#332

Post by injidup »

chefandy wrote: post #325
aembleton wrote: post #271

Earlier quoted context omitted.

I agree, for on/off a checkbox would work better

Somtimes. Checkboxes work for "yes" or "no", but they're not idiomatic for other "a" vs "b" selections.

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

And then toggle the color of the background between two different pastel shades which is aesthetically pleasing to the eye but delivers you halfway towards a reactor pile meltdown when the operator gets it wrong.

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

#333

Post by deathanatos »

Philip-J-Fry wrote: post #291
Difwif wrote: post #238

Earlier quoted context omitted.

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

According to who? It's a restyled checkbox.

Well, stuff like this used to be encoded in HIGs (Human Interface Guidelines). The GNOME HIG, back in the day, had the parent's recommendation, as well as the rationale for it: so that the feedback is immediate, and the user can then visually see the effect that that option has.

Gating it on a submit forces a user who is looking for something & not finding it into a "try one thing, submit, evaluate, open settings, undo that, try different thing, submit…" loop, which is a lot longer.

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

#334

Post by buran77 »

mrob wrote: post #309
chefandy wrote: post #305

Earlier quoted context omitted.

User testing disagrees. Most people find an instantly refreshing screen of text to be quite dazzling. Developers look at screens of text all day long-- they're much more tolerant to those sorts of transitions than most people are, and basing defaults on their usage styles is one of the reason most people find FOSS interfaces completely awful.

Most users only see animated scrolling at work (not genuine "smooth scrolling" tied to continuous touchscreen or touchpad input, which is unobjectionable, but playback of canned animations following completed input events). They have an obvious incentive to like it: they're getting paid for doing nothing.

> They have an obvious incentive to like it: they're getting paid for doing nothing.

My friend, this is weapon's grade ignorance, and this is a very, very charitable characterization. Your big idea is that people want these continuous transitions because they can waste a few minutes per day looking at them and be paid for it?

Any person working together with someone else on large documents and their endless reviews, and definitely anyone who often has to follow documents on a shared screen knows the benefits of transition between states. Something that allows the eyes and brain to track the motion. Objects in real life don't jump between locations instantly so nothing about people is trained to follow such instant transitions. The fewer the cues about how things moved, the harder it is to follow.

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

#335

Post by chrisjj »

jalfresi wrote: post #316
chrisjj wrote: post #226

Earlier quoted context omitted.

> But I constantly see checkboxs without the question label. Properly so. Imagine every real-world appliance power toggle was labelled "Power?".

Real world appliances dont use checkboxes to power toggle

Checkbox is nearest in equivalence.

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

#336

Post by DinaCoder99 »

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…

> The obvious fix is to stop animating when the step gets below some threshold, but that's inelegant.

Why? It's simple, easy to implement and validate, and provides the desired visual impact. Seems perfectly elegant to me.

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

#338

Post by dahart »

mrob wrote: post #285
itishappy wrote: post #283

Earlier quoted context omitted.

> When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more…

The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.

This in insightful, IMO. When attaching animation to action, if the animation doesn’t match the action, then there’s a disconnect that can be frustrating or annoying, even when the delay is a small fraction of a second. Physical light switches feel “instantaneous” because there is no added delay perceivable beyond how fast my fingers go. It does seem like some designers are sometimes so proud of their animations they run them too slowly. I do value designs that animate so quickly and smoothly that you don’t notice them until you look for it, and I feel like the article does lean in that direction. The map scrolling one feels pretty good, for example.

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

#339

Post by mrob »

buran77 wrote: post #334
mrob wrote: post #309

Earlier quoted context omitted.

Most users only see animated scrolling at work (not genuine "smooth scrolling" tied to continuous touchscreen or touchpad input, which is unobjectionable, but playback of canned animations following completed input events). They have an obvious incentive to like it: they're getting paid for doing nothing.

> They have an obvious incentive to like it: they're getting paid for doing nothing. My friend, this is weapon's grade ignorance, and this is a very, very charitable characterization. Your big idea is that people want these continuous transitions because they can waste a few minutes per day looking at them and be paid for it? Any person working together with someone else on large documents and their endless reviews,…

The users' fingers don't jump between locations instantly. That already provides the motion cue. UI animations are additional motion added after the natural motion has already completed.

And I already agreed that animation can be beneficial to spectators, who don't have access to the natural motion cue, but that's a small fraction of total use.

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

#340

Post by Levitz »

>Again, this begs us to add some animation.

No, no it doesn't. Not at all.

It's a MAP. It's there explicitly to display information, If I'm moving the map such a distance that an instant effect might not rely the information that place X is above place Y then yes, maybe an animation is in order, since that gives me more information, but every single iteration after the first one is worse, way worse, and the last one is one of the worst of them, feels like trying to drag your feet through mud.

Post reply on HN