Hacker News Reader

Comment by dig1 | Hacker News Reader

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.

View on HN

> 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

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.

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.

It's non-blocking. If those milliseconds are critical, you can be doing other stuff.

Controlling a computer at maximum speed inevitably means occasional fumbled inputs. If I don't detect these, my mental state will desynchronize from the computer's state, resulting in confusion and potential data loss. Therefore I can't look away from the checkbox until I confirm it changed state. Any animation slows down this confirmation, so it wastes my time.

Professional StarCraft players take about 200ms per action, which is about the reaction time of the human visual system. If you set your time constant to that (1/e in 200ms, which would be an extremely sluggish UI) then your UI elements will have moved by 15% in 33ms. A more reasonable response (1/e in 50ms) will have moved by 50% in 33ms. My personal favorite curve is just "move 50% per frame."

I'd love to see what your day looks like if you've optimized it to require professional Counter Strike reflexes to activate toggles.

That 200ms is the natural human delay. A "reasonable" 50ms animation is in addition to that, so it's equivalent to making the user 25% slower. It's similar to moderate alcohol intoxication.

I personally use 72Hz keyboard autorepeat, which requires both low latency and predictable latency to use effectively.

How is it wasting time? It's not like you have to wait for the animation to complete

It's delaying the feedback I use to know if I clicked correctly.

You know that as soon as you see the first frame of movement

That's a very small change that's a lot harder to see.

I think the animations are more satisfying on touchscreens, where you don't have a mouse.

They are literally covered by my finger, I can't even see them.

Are they though? I usually use dev mode on my phone to turn off most animations because I find them needlessly distracting instead of satisfying. If I can't disable it, at least let me speed it up

This in insightful, IMO. When attaching animation to action, if the animation doesn’t match the action, then there’s a disconnect that can be frustrating or annoying, even when the delay is a small fraction of a second. Physical light switches feel “instantaneous” because there is no added delay perceivable beyond how fast my fingers go. It does seem like some designers are sometimes so proud of their animations they run them too slowly. I do value designs that animate so quickly and smoothly that you don’t notice them until you look for it, and I feel like the article does lean in that direction. The map scrolling one feels pretty good, for example.

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.

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.

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.

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

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

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

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.

Reply on news.ycombinator.com