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

271–280 of 390 posts

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

#271

Post by aembleton »

injidup wrote: post #234
aembleton wrote: post #208

Earlier quoted context omitted.

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 agree, for on/off a checkbox would work better

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

#272

Post by iainmerrick »

rav wrote: post #260
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…

> 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? It seems to me that the "speed" parameter in the exponential function has the same issue, does it not?

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

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

#273

Post by dclowd9901 »

indigane wrote: post #29
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…

I'm working on a Git GUI for myself, in which one of my top priorities is making it more understandable than Git's own UI. I usually dislike animations. I used to disable transitions whereever possible, as they made the UIs feel sluggish. And I still do. But working on the project made me for the first time really appreciate in practice how much amimations help with understanding. I paid a high price in complexity to…

I think this is the trick. Animations as a visual tool for teaching the outcomes of complex behaviors are a very valid usage of animation. There’s that one site that pops up on here occasionally with the fabulous educational topics and tons of animations to relate concepts that I think really drives that point home.

Minimizing animations are nice for showing you where things “went” when you minimize them. But apart from that, most other UI annimations are just eye candy.

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

#274

Post by mxfh »

omeze wrote: post #49

This is very cool, the camera over world example really highlights the difference

Yes, but this seems to be convoluting two distinct problems.

one is how to handle user inputs to a camera/world with inertia while moving whith a lot more variables to set for a certain desired feel, (why no long taps/mousedown to speed up the movement).

While the button is just easing a fixed animation between two states with no intermediate input.

Also what happens to the binary state of the app if the animation can be reversed before reaching final state, this is opening a can of worms for no obvious reason.

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

#276

Post by chefandy »

James_K wrote: post #186
chefandy wrote: post #30

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…

> even "feel" does matter to most users And I think most users would prefer software that does stuff instantly. Attaching little animations to everything is just silly and distracting. It only happens because someone had nothing better to do but still had to look busy. These things almost universally degrade the interface and I've yet to see the actual benefit of them, aside from the fact that they draw attention to…

> And I think most users would prefer software that does stuff instantly

User research feels differently, but with numbers.

> These things almost universally degrade the interface and I've yet to see the actual benefit of them

See my point about technical people and their usage perspectives.

> When you think about it, that is the opposite of good interface design.

Having been a professional software designer, I assure you I've thought about this. And explored it, researched it, tested it, prototyped it, interviewed people about it, built it, rebuilt it, and then did it all over again to improve it. Re-read the last paragraph in my comment.

> A good interface is one you do not notice – it puts as little as possible between user and machine.

On second thought, re-read the whole comment.

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

#277

Post by chefandy »

arnorhs wrote: post #190
chefandy wrote: post #30

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…

>As someone with a good amount of professional experience both as a developer and a designer, I'm consistently surprised by how quick so many developers are to assume their personal usage habits, osmosis-gained knowledge from projects, and folk wisdom about design trumps the expertise of seasoned credentialed professionals in the field. Same here, and couldn't agree more. Except that I'm not surprised. The thing is,…

> poor design aesthetics

Sorry to be nitpicky-- I largely agree with your comment-- but I always must point out that interface design is a communication medium, not an aesthetic medium. Like technical writing, it's a communication medium even if there are some secondary aesthetic considerations.

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

#278

Post by andrewaylett »

ripe wrote: post #253
card_zero wrote: post #240

Earlier quoted context omitted.

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?

Hmm, I must admit I had never thought of this idea by card_zero: why not drive a mouse pointer using touch at a distance? Does anyone with experience in this know why it wouldn't work, or whether it has been tried?

Microsoft's Android RDP client does this, the biggest issue is that it's not expected behaviour.

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

#279

Post by James_K »

chefandy wrote: post #276
James_K wrote: post #186

Earlier quoted context omitted.

> even "feel" does matter to most users And I think most users would prefer software that does stuff instantly. Attaching little animations to everything is just silly and distracting. It only happens because someone had nothing better to do but still had to look busy. These things almost universally degrade the interface and I've yet to see the actual benefit of them, aside from the fact that they draw attention to…

> And I think most users would prefer software that does stuff instantly User research feels differently, but with numbers. > These things almost universally degrade the interface and I've yet to see the actual benefit of them See my point about technical people and their usage perspectives. > When you think about it, that is the opposite of good interface design. Having been a professional software designer, I assur…

Actually I think you should re-read my comment. I'd also love to actually see the research you're talking about here.

> I assure you I've thought about this. And explored it, researched it, tested it, prototyped it, interviewed people about it, built it, rebuilt it, and then did it all over again to improve it.

Oh, sorry, I didn't realise I was talking to the world expert on button animations. So do users prefer quadratic or exponential smoothing on their switches?

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

#280

Post by andrewaylett »

James_K wrote: post #215
motoxpro wrote: post #194

Earlier quoted context omitted.

Almost no Apple interactions are without animation. It's actually hard to find something that's NOT animated on Android AND iPhone. For most users, the iPhone is one of the gold standards for "good feel". Some people like the unrealistic jumping of no animation, which is totally fine. Some people want it to "feel like a computer" not how things actually behave in the real world. It's taste. Animations that are too lo…

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.

I don't know about your switches, but mine definitely do need to pass through the intervening space between states.

That's not an argument for slow transitions, but some transition is realistic.

Post reply on HN