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

161–170 of 390 posts

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

#161

Post by injidup »

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…

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.

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

#162

Post by verisimi »

baxuz wrote: post #156

This is actually a really good approach and a good proof of concept for an animation / easing technique. Reminds me a lot of Flickity: https://metafizzy.co/blog/initial-demos/ https://metafizzy.co/blog/math-time-resting-position/ https://metafizzy.co/blog/particle-to-slider/ https://metafizzy.co/blog/flickity-begins/ Especially this demo: https://codepen.io/desandro/pen/myXdej This technique isn't just useful for swi…

The cynicism doesn't seem that fair in this case.

Re HN becoming like Reddit..

Perhaps there is a generic 'cynical feeling' in the air with technology, with feelings of distrust about the intentions of governments and corporations over their use of the profound technology that is appearing, and how this is being constructed with the intention to constrain and manage the individual, rather than enabling greater freedom.

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

#163

Post by Klaster_1 »

hellweaver666 wrote: post #149

I appreciate the effort that goes into animation like this, but I always have to wonder, especially in the context of the web if it's worth all of the additional code and development time for such a minor detail. Do our users even notice?

During my day job as a frontend developer, I have to cope with this quite often. When you raise a point with the manager that we could be fixing real bugs instead re-doing a non-essential, very subjective thing the designer came up with, they usually reply that they trust the designer as a professional and they know better - the developers don't have a choice.

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

#165

Post by jotaen »

alpaca128 wrote: post #154
jotaen wrote: post #131

Earlier quoted context omitted.

> what's the point of emphasizing the sliding? Because the “knob” changes position. Like in the real world, objects can’t disappear in one place, and then instantly appear in another. Animating a UI state change in terms of a move transition can help people to understand how both end-states are logically connected to each other. The animation resembles the mechanics of the slider knob being a “perpetual entity” that…

I don't know about you but I probably wouldn't notice if my light switch suddenly moved to the opposite position instantly instead of in 50ms or something. And animations wouldn't be quite as annoying if they actually were that fast.

You might not consciously observe how your light switch transitions to the opposite position, but I’d argue that most people still have an immediate and intuitive understanding of how both end-states of a light switch are related to them applying physical force onto the switch.

The toggle transition is supposed to resemble this notion, and aims to allow the user to build up an analogous mental model of cause and effect.

To me, this sounds like a valid and worthwhile idea in general. That animations are not always appropriate or fitting, or that they sometimes are laggy and sluggish, is a different story.

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

#166

Post by wolpoli »

coldtea wrote: post #97
eru wrote: post #91

Earlier quoted context omitted.

Isn't shadowed and flat sort of the opposite of each other?

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.

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

#167

Post by modeless »

coldtea wrote: post #68

> However, this still looks a bit clumsy due to having a constant speed Does it? Looks much better to me, and preferred to waiting for a animation to be given more time to speedup while looking "smooth" (they seldom seem to be given the same time as instant or linear animations, do they? For some reason we have to be forced to enjoy them in half time). In fact I'd take the "instant toggle" in a heartbeat too. Real li…

The only problem with instant transitions is that sometimes you may not notice what changed. I would like to see a UI built around instant transitions but with subtle animations that happen after to emphasize the change. Like the new content shines, or does a tiny bit of grow/shrink, but not in a way that prevents interaction. There's nothing I hate more than waiting for long transition animations (looking at you, macOS fullscreen button)

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

#168

Post by alpaca128 »

chefandy wrote: post #47
adrianmonk wrote: post #31

Earlier quoted context omitted.

Here's one practical benefit: the UI should make it obvious that your click did successfully register, and an animation does that because it's eye-catching. But the other side of the coin is that, because it is eye-catching, animation can be distracting or annoying. Adding animation to your UI is like adding salt to your cooking: it's going to be pretty bland without it, but you can also ruin things by going overboar…

Most people that complain about these things don't even realize how much of it is integrated into their daily lives and workflows because it's too natural to notice. You don't need experience to see when someone's done a shitty job, though; just like any other tool, inexperienced people often see poor outcomes as an indictment of a technique, tool, or approach when the practitioner is to blame.

I think that's a bit of an exaggeration. Yes, animations are useful sometimes, but in at least 90% of cases they make the experience worse. If animations were so important and integrated everywhere then why didn't I notice any change when enabling "reduce animations" on all my devices, other than everything being suddenly faster?

> inexperienced people often see poor outcomes as an indictment of a technique, tool, or approach when the practitioner is to blame.

Or they simply realized that so many practitioners are to blame that the distinction barely matters anymore.

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

#169

Post by cardanome »

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…

> 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 get old and annoying very fast. It is a huge mistake in UI design to only optimize for smooth on-boarding of new users and not for long term productivity.

> The reason most end-user-facing FOSS projects (that don't have foundation-funded UI teams like Blender or Mozilla

Blender has great UI because they are dog-fooding their own software through blender studio. Meaning because they are the users and develop UI based on their own needs, contradicting your theory.

Firefox UI has gotten significantly WORSE over time and the browser is becoming irrelevant based on market share. Now that is not all the fault of the UI but it is still worth noting that the height of firefox popularity was when it had a very power-user friendly UI that all that fancy "UI experts" would hate. Maybe they should replace the "foundation-funded" UI team.

As for commercial software, modern UI is so bad that many "non-technical" users actively hate using computers and feel absolutely powerless when errors occur. Modern UI is actively user-hostile.

Post reply on HN