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

201–210 of 390 posts

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

#201

Post by ratiolat »

chefandy wrote: post #30
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…

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

When has the switch been toggled though and how can I know in each implementation?

1. Is it when I pushed the toggle, regardless of when animation finishes? 2. Is it when the animation finishes

This is necessary when flipping many toggles on one page and it needs to be done many times over. In case there's no animation, it simple and clear. In case there's animation you need the know is it case 1 or 2. If it's case 2 it will additionally slow you down as you now need to wait until all animations lengths * number of switches toggled has finished.

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

#202

Post by solardev »

usrusr wrote: post #197
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…

On a touch sreen, chances are the finger obscures the state change, or much of it. When you are not super focused ("I don't trust this thing!"), it's easy to miss the difference between before and after states. The animation serves as a low-threshold confirmation that the pixels are not just decoration and that the touch event has actually been registered. Requiring the user to mentally diff before and after states w…

Or you could just use a checkbox

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

#203

Post by akoboldfrying »

Certhas wrote: post #192
cardanome wrote: post #169

Earlier quoted context omitted.

> Similarly, people who spend most of their days doing technical things using technical tools made by and for technical people interpret interfaces differently than most people. Most "non-technical" people use computers, especially desktops, in a professional setting. Navigating those UIs is part of their jobs and they will spent hours upon hours doing so. Pretty animations may make a good first impressions but they…

Several years ago, the number one complaint you could read on this forum on Firefox was that Chrome felt snappier. Firefox is irrelevant today because the supposedly highly sophisticated users decided based on feel. Smooth animation performance was a major point of iOS over Android for years. I see plenty of evidence of sophisticated users deciding based on the factors you dismiss.

Smooth animations > janky animations, always, but that's not the issue here -- the issue is whether something that doesn't need to be animated should be animated.

I prefer programs I perceive as "snappier" -- and to me, a part of "snappiness" is choosing not to animate things unnecessarily.

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

#204

Post by Rallen89 »

Izkata wrote: post #55
blt wrote: post #51

Earlier quoted context omitted.

Also FF on MacOS, and same issue. Seems like a hang

Firefox on Android, too.

Doesn't load with mobile browser bur if you change to 'desktop site' option it loads... but is very jittery and loads slow, a few visual bugs aswell.

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

#205

Post by zarathustreal »

sabellito wrote: post #143
anon373839 wrote: post #116

Earlier quoted context omitted.

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

Your point has truth in it of course, but the main theme gp was pointing out is the hubris of people, often in our field, to think that they know better than someone specialised on a given field.

Are you conflating “hubris” with “reasoning”? Or are you saying that appealing to authority is a good thing?

Is any evaluation of any field you’re not an expert in hubris? Or is it possible to use basic logic to identify contradictions in the assertions made by experts outside your field?

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

#206

Post by coldtea »

wolpoli wrote: post #166
coldtea wrote: post #97

Earlier quoted context omitted.

Amazingly, not in 2024. They put shadows on otherwise flat layers - for gratuitous effect, but also to get back some separation after they've flattenned everything.

The shadow is around flat piece of paper of zero height, levitating off the background, casting shadow 360 degrees all around. No physical lighting set up could produce this effect.

Exactly. "Environmental cue" my ass :)

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

#207

Post by tdudhhu »

bee_rider wrote: post #38

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…

I have seen a lot of (eldery) people try to slide the toggle but then nothing happens.

So while your at it: also make it possible to slide the toggle. Or just use checkboxes.

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

#208

Post by aembleton »

injidup wrote: post #161
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…

Binary toggles are everywhere in web UX. They are almost always used where a simple dropdown menu with WORDS indicating the chosen state would be better. However designers hate that because then they can't write fancy animations on creamy toggle widgets. A dropdown with the words enabled/disabled indicating the state will always be better than a toggle with some subtle animation and colour signalling the state.

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 its currently in.

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

#209

Post by coldtea »

hoelle wrote: post #180
globular-toast wrote: post #146

Earlier quoted context omitted.

I hate animations like that because they are intentionally slowing down the UI. I already clicked it, why are you spending several milliseconds to update your state? Animations, or anything else really, should only be used to improve things. Ask what the problem is, not what cool solution I should implement. It's ok to go to town if the page is artistic , like your blog, but if I'm filling out a form? Get your art ou…

Beauty is often worth a little extra time. I'd rather walk a beautiful trail than a paved sidewalk beside 6 lanes of fast traffic. It's cool to choose the tools that appeal to your values. It's not cool to advocate for paving the planet in your quest for single-minded efficiency.

>Beauty is often worth a little extra time. I'd rather walk a beautiful trail than a paved sidewalk beside 6 lanes of fast traffic

Beauty can be expressed with the toggle's design, with the window decoration, with the colors, with the wallpaper, choice of font, and so on.

No need to be expressed with an animation.

If your car did a little "song and dance" everytime you started it up that you had to wait to be able to drive it off, it would get annoying really fast.

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

#210

Post by aembleton »

faceplanted wrote: post #181
wolpoli wrote: post #148

Earlier quoted context omitted.

> Computer UIs need animations for the same reason they need shadows, gradients, and momentum: The thing about design principles is that the designer picks the one that justifies their decision, which is more like fashion than anything. For example: Windows 8 swept away shadow, and semi-transparent material in the name of flat design, making it resemble Windows 2.0. Windows 10 brought back shadow. Windows 11 brought…

> Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world. Well not really, real world buttons are elevated off the surface because of the practicalities of producing buttons and attaching them to a surface, some of the material has to be abo…

In the real world, toggle switches cannot jump instantly from one state to another but on a computer they can because of completely different mechanics.

Either we want to resemble the real world or we don't or it depends on what is currently fashionable.

Post reply on HN