5 ms·

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 worl

by dig1 3y ago

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

wpm 3y ago
As the article says, and it seems like what a lot of designers feel as well: “Adding some animation to it would be cool!” I’m with you though. Most animation in UI is superfluous and annoying, if not down right rage inducing (like when the animation blocks input). A good example of an animation that I don’t dislike is the window minimize animation on macOS where the window gets “sucked” into the Dock. It’s useful because it relates a “where” that I can keep in my head. I click a button, where’d my window go? Down there, I just saw it get sucked down into the Dock.
- bayindirh 3y ago
  Also some of these sliders are tri-state. When you touch it, it moves 3/4 way, becomes washed out, meaning "making the change, please wait", and either goes all the way & becomes green, or returns to its place and shows an error. Animations are tools. Use wisely, they inform and entertain. Use too much, they become boring.
bayindirh 3y ago
> I click a button in the real world, it changes the state instantaneously. Actually it does not. Flick switches have travel, click buttons have depth. Electronic buttons have lag, bigger systems have startup time (hence the blinkenlights). My dishwasher starts in ~3 seconds after I press start. The button travel is so much that I'm never sure whether it registered the press or not until I hear the water pump start pulling water from the pipe. > It gives me an instantaneous feedback. It's just because you're touching a button, and feeling the pressure on your fingertip. Nothing is in an "instant" in the world.
- mynjin 3y ago
  Let's just call miming physical switch travel and movement what it is: skeuomorphic animation And just like its design counterpoint, while some may enjoy the aesthetic, it's actually superfluous and we've mostly moved on. I get it, it's visual, it's easy to show one's boss domain knowledge; it doesn't do anything for accessibility and the feel (dependable repeatable ui workflow).
itishappy 3y ago
> 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. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more powerful with additional degrees of freedom, like when moving the map from the article. It feels a lot better to have your view animate smoothly than jump around discontinuously.
- mrob 3y ago
  The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.
  - bmicraft 3y ago
    How is it wasting time? It's not like you have to wait for the animation to complete
    - mrob 3y ago
      It's delaying the feedback I use to know if I clicked correctly.
      - bmicraft 3y ago
        You know that as soon as you see the first frame of movement
        mrob 3y ago
        That's a very small change that's a lot harder to see.
RunSet 3y ago
UI animation is largely intended to hide delays when loading dynamic content but its pervasiveness means it is more likely to contribute to delays when loading dynamic content. https://addons.mozilla.org/en-US/firefox/addon/disable-transitions/ https://addons.mozilla.org/en-US/firefox/addon/disable-trans...
crtasm 3y ago
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.
Asooka 3y ago
The animations are useful when you can't easily see the instantaneous change, but I'm with you on the slowed feedback. I think the best feedback would be for the slider to move instantly, but with a fading motion blur effect. So if you're hard of seeing, or blink, or whatever and miss the change in state initially, there is still an animation playing that you can see to know that something changed, but at the same time the button is already at its new state, so you don't have to wait if you are paying attention. Or we can go back to normal checkboxes and radio buttons where the on/off state is obvious and no animation is necessary to help people see when they change state.

by dig1 3y ago

wpm 3y ago

As the article says, and it seems like what a lot of designers feel as well: “Adding some animation to it would be cool!” I’m with you though. Most animation in UI is superfluous and annoying, if not down right rage inducing (like when the animation blocks input). A good example of an animation that I don’t dislike is the window minimize animation on macOS where the window gets “sucked” into the Dock. It’s useful because it relates a “where” that I can keep in my head. I click a button, where’d my window go? Down there, I just saw it get sucked down into the Dock.

bayindirh 3y ago
Also some of these sliders are tri-state. When you touch it, it moves 3/4 way, becomes washed out, meaning "making the change, please wait", and either goes all the way & becomes green, or returns to its place and shows an error. Animations are tools. Use wisely, they inform and entertain. Use too much, they become boring.

bayindirh 3y ago

> I click a button in the real world, it changes the state instantaneously. Actually it does not. Flick switches have travel, click buttons have depth. Electronic buttons have lag, bigger systems have startup time (hence the blinkenlights). My dishwasher starts in ~3 seconds after I press start. The button travel is so much that I'm never sure whether it registered the press or not until I hear the water pump start pulling water from the pipe. > It gives me an instantaneous feedback. It's just because you're touching a button, and feeling the pressure on your fingertip. Nothing is in an "instant" in the world.

mynjin 3y ago
Let's just call miming physical switch travel and movement what it is: skeuomorphic animation And just like its design counterpoint, while some may enjoy the aesthetic, it's actually superfluous and we've mostly moved on. I get it, it's visual, it's easy to show one's boss domain knowledge; it doesn't do anything for accessibility and the feel (dependable repeatable ui workflow).

itishappy 3y ago

> 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. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more powerful with additional degrees of freedom, like when moving the map from the article. It feels a lot better to have your view animate smoothly than jump around discontinuously.

mrob 3y ago
The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.
- bmicraft 3y ago
  How is it wasting time? It's not like you have to wait for the animation to complete
  - mrob 3y ago
    It's delaying the feedback I use to know if I clicked correctly.
    - bmicraft 3y ago
      You know that as soon as you see the first frame of movement
      - mrob 3y ago
        That's a very small change that's a lot harder to see.

RunSet 3y ago

UI animation is largely intended to hide delays when loading dynamic content but its pervasiveness means it is more likely to contribute to delays when loading dynamic content. https://addons.mozilla.org/en-US/firefox/addon/disable-transitions/ https://addons.mozilla.org/en-US/firefox/addon/disable-trans...

crtasm 3y ago

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.

Asooka 3y ago

The animations are useful when you can't easily see the instantaneous change, but I'm with you on the slowed feedback. I think the best feedback would be for the slider to move instantly, but with a fading motion blur effect. So if you're hard of seeing, or blink, or whatever and miss the change in state initially, there is still an animation playing that you can see to know that something changed, but at the same time the button is already at its new state, so you don't have to wait if you are paying attention. Or we can go back to normal checkboxes and radio buttons where the on/off state is obvious and no animation is necessary to help people see when they change state.