Live data from Hacker News

My favourite animation trick: exponential smoothing (2023)

lisyarus.github.io

301–310 of 390 posts

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

#301
post #112

Have you tried using a tick box?

They don't serve the same purpose. A toggle switch has an immediate result, such as switching the website between light mode and dark mode. A checkbox is part of a form, and indicates a boolean choice that will only be taken into account once you submit the form.

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

#302

Earlier quoted context omitted.

Got any research to back up that claim? I always go to the developer settings and turn off all animations on my Android phones, and it makes a monumental difference in usability, exclusively for the better. I did it on my moms phone as well, and she instantly felt it got faster, so this is not just because I am a technical person. Some UI designers think animations are good, but they are not. They are a clutch that d…

> Some UI designers think animations are good, but they are not Imho animations are not a problem in cases where they do not affect latency . For example a visual click feedback to tell the user that it was registered & is being processed makes sense, especially for situations where the task may take a while. For example Mac OS' "eject drive" button would benefit from this, it has zero visual click feedback while eje…

Feedback affects latency when working fast. Feedback is in the critical path because the user can't look away until they've confirmed they made their input correctly. To do otherwise risks desynchronizing their mental state from the computer's state.

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

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

One I often find funny/annoying is an icon next to items on a game menu that has a smooth movement (sometimes paired with a partial fade-out!) - this makes quickly selecting a option a few steps away so much slower and error-prone.

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

#304

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…

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

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

Yes, but they still reason about those interfaces totally differently. This isn't a quantitative difference in competence, it's a qualitative difference in approach.

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

Animations that stick out as 'being animated' are rarely desirable. I assure you that you don't notice most of the animations you benefit from in your usage.

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

Do you have any actual evidence for the assertion that Blender's UI designers don't actually drive the usability of the software?

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

You're substituting your opinion for fact. Mozilla's design team publishes a lot of stuff. If you think it's wrong, there's lots of specifics available for you to counter.

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

This is a common trope among developers who think their feelings about interface design carry more weight than the research that actually tests these things. It holds about as much weight as any other feelings vs facts argument.

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

#305
post #293

Earlier quoted context omitted.

Some animations can be essential for user experience. One of them is demoed in the page: the page scroll animation. If you've ever looked at a wall of text or other high entropy information displayed on the screen, especially if it was on a shared screen so the image is all you can see with no hints about the scroll direction, keeping up with the motion can be nigh impossible. You have the whole image jumping up and…

The vast majority of scrolling is done for the benefit of the person initiating it. It's a good point that you might want an optional animation mode for the the benefit of spectators, but it should be disabled by default. My short term memory lasts more than one second, so I don't need to be reminded that I just scrolled down after I scroll down.

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.

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

#306

Earlier quoted context omitted.

Im not sure I agree with this, and its quite a common argument for animations in UIs. The fundamental weakness in this argument is that animations are not interactive. They have a beginning, middle and end. Any attempt to interact with the UI during this sequence would disrupt the animation. This is why animation makes UIs feel slow; clicking the widgets requires a period of time to transition from state A to state B…

This is why we design animations in immediate actions to be below 100ms, any more than that and we start to feel "computer's reaction is slow maybe it's doing some calculations in the background?"

100ms is more than enough to break the joyful feeling of the computer becoming part of my own body, like a hand tool or a bicycle. Humans are adapted to tool use, and don't need to consciously think of the position of tools they're using. But this effect only works if the tool moves like an ordinary physical object. If you move a pencil, it just moves. It doesn't move and then move again because a designer wanted to play an additional animation after your movement. Until we have direct neural interfaces, all UI animation playback is unrealistic, because it's adding to the physical movement of your fingers, not replacing it.

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

#307

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…

I think parents reaction might be due the amount of shit software with pretty UIs. In the last 10 years it really feels like software has leaned towards form over function. I personally miss, simple, snappy Windows NT type UIs that were a megabyte and didn't contain a gig of custom icons or hit the GPU to like fade a window or something. I think most people would trade opacity and fancy buttons for MS Teams to be abl…

Most developers look at old interfaces through rose colored glasses. If you separate nostalgia from what most people find usable, they just don't hold up.

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

#308
post #220
post #213

Earlier quoted context omitted.

Tends do get completely obscured and you're back to mental diffing. I know, I know, nothing a bigger checkbox could not solve, but they look weird when you only make them bigger horizontally.

Checkboxes can usually be toggled by clicking/tapping on the label. That may not resolve all criticism, but I'm just saying.

True. Ideally you put some "event received" indication across the whole trigger area, e.g. that little Android ripple animation. Certainly does not hurt to do the same (whole area clickable, and with visual feedback) even when your designer insisted on fashionable slider-toggles.

Subtle things like that greatly reduce the mental background load for the user, but that's impossible to quantify. Chances are you don't consciously notice when it's missing even when in theory you are fully aware of the concept.

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

#309
post #293

Earlier quoted context omitted.

The vast majority of scrolling is done for the benefit of the person initiating it. It's a good point that you might want an optional animation mode for the the benefit of spectators, but it should be disabled by default. My short term memory lasts more than one second, so I don't need to be reminded that I just scrolled down after I scroll down.

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.

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

#310
post #267

Earlier quoted context omitted.

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

Nobody's waiting on a checkbox to finish filling on before moving onto the next.

In this case, not necessarily. It's obviously designed to animate in a particular way. Why? Is it just for kicks, or is there a reason for it to animate as it's moving? Is it going to bounce back half-way through because the system realized you're not allowed to turn that thing on for example? I don't know, so I would wait for it to finish.

I admire the dedication to do this, but I find it superfluous when designing something I need to actually use. Great for a game, not so great for a page of checkbox thingies I need to set to the right values to make something else work correctly. I don't really want it to animate well, I want it to work fast and to be obvious what it does and how it works. It doesn't have to be pretty, unless being pretty helps make it more clear what's what.

Post reply on HN