I think it comes down to personal preference. I prefer instant and snappy interfaces with as minimal latency as possible. Please provide me with an option to disable all animations and I'm likely fine with your interface.
My favourite animation trick: exponential smoothing (2023)
221–230 of 390 posts
Re: My favourite animation trick: exponential smoothing (2023)
#222I 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 have noted, exponential smoothing has a different problem, that it asymptotically approaches but never quite reaches its destination. The obvious fix is to stop animating when the step gets below some threshold, but that's inelegant.
When using a similar method for inertial scrolling, I've found it useful to add a (pseudo-)friction term. This offsets the exponential, and effectively works as a minimum speed. Here it is in Desmos: https://www.desmos.com/calculator/98ufbuzxhj
Re: My favourite animation trick: exponential smoothing (2023)
#223Earlier 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.
But when you move a switch like the ones demonstrated here in the real world, you have the haptic feedback of moving the pin physically, of it "snapping" into place. And that's how you know that your switch toggling was successful.
The "digital switch" does not have that. You usually don't even "move" it, as in "move the finger over the screen", but you just touch it. And your finger obscures the UI component in the moment you touch it, without any haptic feedback (except for your finger hitting the screen somewhere, but that does not necessarily mean that the switch has toggled). The animation replaces this missing haptic feedback, by your eyes seeing the switch moving, when you remove your finger after touching the screen.
Re: My favourite animation trick: exponential smoothing (2023)
#224On mobile Safari, I get a translucent gray square showing the hit target over the toggle whenever I touch it. That removes any subtlety the different animations may show
Re: My favourite animation trick: exponential smoothing (2023)
#225The 8x slow-down argument is so naive, it's bad. Perception and interpretation change with speed. Listen to a song you slowed down. It becomes something entirely different. Compare https://youtu.be/r2ozuCXpVJY?t=70 and https://www.youtube.com/watch?v=QspuCt1FM9M&list=PL19J-0p1Ir...
If you can't see the difference at normal speed, there is no difference.
Re: My favourite animation trick: exponential smoothing (2023)
#226Earlier quoted context omitted.
Am I wrong in thinking that checkboxes/tickboxes/whatever-one-calls-them are ubiquitously understandable across cultures from both an interpretation and interaction perspective? If so, it wouldn’t be the first time I’ve made this assumption/mistake so I’d be happy to hear about it! If not (and I am right in thinking these are globally understood), then there’s a clear advantage of the checkbox over the switch in that…
Checkboxes also have a fundamental dependency on the label to assist them with their affordance: a label for a checkbox should almost always be in the form of a yes/no question: “are you hungry? [ ]” The “checked” box is an affirmative, empty is a negative. A checkbox without a label is useless because it has no context. But I constantly see checkboxs without the question label. Think back to all those control panels…
> But I constantly see checkboxs without the question label.
Properly so.
Imagine every real-world appliance power toggle was labelled "Power?".
Re: My favourite animation trick: exponential smoothing (2023)
#227> 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…
> the expertise of seasoned credentialed professionals in the field
Given how bad UIs in general have become, some scepticism over that expertise is warranted.
To be clear, UIs weren’t all great across the board 20 years ago. But there was a general agreement between UI experts and power users on how a good UI with standard desktop controls should look like and behave, whereas now it’s a mess and there are significant disagreements.
Re: My favourite animation trick: exponential smoothing (2023)
#228CSS animations are much lighter on battery and computing resources than JavaScript and potentially smoother too. Something to take into consideration.
Re: My favourite animation trick: exponential smoothing (2023)
#229> 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…
> On a touch sreen, chances are the finger obscures the state change, or much of it.
Here's how I deal with that, in my app: https://imgur.com/a/6uQnuox
It's accompanied by haptics.
Re: My favourite animation trick: exponential smoothing (2023)
#230I remember seeing how much better was iPhone than Android, having slick continuous sliders instead of old-hat binary switches.
Imagine my disappointment when I found that the iPhone slider for mute didn't smoothly slide the sound volume to silence, as per the visual effect, but snapped it to zero just like the Android switch.
;)