[ikesau]

I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like.

At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts)

I think many of these transitions are unnecessary and would feel just as good if they snapped immediately with instantaneous reflow.

[bee_rider]

I think the “imperfect frames” on the Safari search bar are, practically, just fine and doing it in the way that looks better in screenshots would be worse.

The cursor appears on the left because that’s where the user will actually start writing. I assume that’s where people look, if they know the UI. Having it appear in the middle of the screen and then move over would be unnecessary and distracting.

The stand-in text slides over to the left, to draw the attention of the unfamiliar user.

[bwhmather]

To add to this, experienced users will often start typing without looking based on what they trust the eventual state of the UI will be. Moving the cursor immediately makes it explicit that this should work.

This is following a more important rule which is "Never make keyboard input timing dependent!" I'm looking at you new Windows start menu and VS Code quick open.

[Hendrikto]

> experienced users will often start typing without looking based on what they trust the eventual state of the UI will be

Does that not still point to bad animation if for a different reason?

The animations seem to be a workflow hindrance rather than helpful.

[Kiro]

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

[mrob]

Games are entertainment products, not tools. It's acceptable for a game UI to draw attention to itself for artistic effect, but I don't want to have to put up with this when I'm trying to get work done. Instant state transitions become imperceptible as you learn how they work. An instant UI effectively functions as part of your body, just like hand tools do. Animations make this impossible.

Compare an ordinary pencil (no animations, movement is directly tied to your hand) to a pencil with a pompom on a spring attached to the end. Which is most fun for brief use? Which would you rather write a whole page of text with?

[Lalabadie]

For UI purposes, sub-150ms animations can be very effective as "pro" interface behaviours. That's close to our best reaction time [1]. Good UI personality doesn't have to get in the way of pro-level efficiency.

One of the ways to achieve this is to not actually transition between states, but simply animate the "end bounce" of an introduced element, as if it was eased into position. So not actually slid from the left, for example, but rebounding the last few pixels from an imaginary slide. Our eyes just draw their conclusions to inform us of a movement, and in exchange the component is readable and usable immediately.

[1] ~100ms represents optimal reflex time in recent research. [2] Anything that requires user attention to interact after the component appears is very comfortable with a 150ms transition. One important note is that for components you can navigate across (i.e. one key shortcut invokes a modal state, another key runs a command in that modal), experienced users will "type" consecutive shortcuts in one go, and you must have the second behaviour responsive from frame 1.

[2] Some athletes seem to train down to ~80ms on very specific reflexes, which recently lead to race-start controversies when block timers disqualify sub-100ms reactions for runners.

[mananaysiempre]

> ~100ms represents optimal [human] reflex time in recent research.

For unpredictable inputs. Intervals between a human own actions or discrepancies in delays between successive external events can be effected or perceived with significantly greater precision, especially for people with e.g. music training, especially for percussionists. I’d bet on somewhere between one and two orders of magnitude more precision, that is single-digit milliseconds, at higher skill levels. (Chopin’s Fantaisie-Impromptu is among the easier rhythm-based parlour tricks and already requires staying below ~30ms of error. Alternatively, a single frame at 60fps is 17ms, and speedrunners can hit single frames of a game pretty reliably.)

[Lalabadie]

Yep! That's why I thought it was important to mention the caveat on chained shortcuts. Two keyboard inputs can easily happen within 30-50 ms of one another when it's a learned movement. This is not a situation where a user relies on visual cues to move between steps, however.

[mariusor]

I'm pretty sure that the way speedrunners get their fast times are by either anticipating, or more likely, by finding an earlier trigger event that correlates, and allows them to hit the frame perfect timing.

[mananaysiempre]

Yes, that was my point: just because people can’t react to unexpected events faster than ~100ms does not mean that shorter time periods can somehow be disregarded as imperceptible to the conscious mind or beyond human capability. The perception or reaction jitter is easily an order of magnitude lower than the reaction latency.

[mrob]

Reaction time is unrelated to perceptible latency. You're not reacting to things; you are seeing the result of an action you requested. You already know it's coming. To say that delays less than your reaction time don't matter is like saying it doesn't matter if your flight is delayed by an hour because it takes 8 hours to cross the Atlantic.

[tom_]

Watching your own hand movements through your phone camera is a good demonstration of this. Set 60 Hz video mode, and the latency is probably less than 30 ms - but still extremely obvious.

[pillmillipedes]

it's quite a lot more than 30ms, as phone cameras do some real heavy-weight image processing to compensate for their tiny size, I'm talking neural networks and such. the throughput might be 60fps when it's all conveyor-ed but the latency sure isn't

[amavect]

Perceptible latency goes well below 10 ms. https://www.youtube.com/watch?v=vOvQCPLkPt4

[rcxdude]

If the animations are effectively 'cancellable', i.e. they don't block input or delay the change in state, this can be reasonable. You can put in a sequence of actions into a UI at a much faster pace than 100ms, if you have the muscle memory for it.

[fragmede]

Using a keyboard or other hardware input device, yes however in today's modern touchscreen world, you have to wait for the UI to render before you can get to the next step so you do build up a step for the next step memory, but you do have to watch the screen so it's not exactly muscle memory.

[mawadev]

I think this is key to understand the motivation behind pretty and animated UIs. In games it has a different motivation compared to UIs that you use as a tool. If you compare old software to new software, a lot of tab switching and hotkey magic is simply not there anymore. Blender has a notoriously difficult UI but once you get the hang of it, you become very efficient. I think the current way of creating UIs caters to people making decisions of whether to purchase the software but that don't actually use the software in the end.

[jesse__]

Animations are highly effective tools for conveying state information.

Consider a toolbar with a mix of enabled and disabled buttons. Hover effects (which I would consider animations) convey that something is clickable, and on-click effects confirm an action. These effects convey meaningful information to both beginner users and power users of any software, and are in no way inconvenient to either group.

I generally agree animations tend to get in the way when you want to get shit done, but the idea that animations are only applicable as artistic effects rings untrue to me.

[mrob]

Hover effects are a terrible way of indicating if something is clickable, because you have to mouse over them instead of just looking at them. This problem was already solved a long time ago by rendering inactive elements in gray. I'm not sure which GUI did this first, but the Apple Lisa (1983, first mass-market personal computer with a GUI) definitely did it.

[Gigachad]

Everything in reality is animated. Nothing instantaneously snaps between two states. Which is why UX designers want to animate everything, it looks more natural for something to move from one place to the next rather than snap instantaneously. Everything used to be even more animated, ebook readers would play a 3D page turning animation, these days we settle for subtle abstract animations.

[mrob]

>Everything in reality is animated. Nothing instantaneously snaps between two states.

That's precisely why a GUI should not be animated. No matter how I operate it, the action I use already has its own animation, e.g. my finger moving on the mouse. If I add another animation in the GUI itself that's double animation. It's equivalent to pressing a button and triggering a servo to automatically press that same button.

[RunSet]

> Everything in reality is animated. Nothing instantaneously snaps between two states.

Alternatively nothing in reality is animated and everything instantaneously snaps between states.

https://en.wikipedia.org/wiki/Zeno's_paradoxes

[lynndotpy]

Maybe you dislike them, but that does not make for a fact.

Instant transitions are something I strongly prefer and use in practice. There's no question, I don't want my operating system slowing itself down to a factor (literally) of 1000x, pointlessly fading and jiggling and sliding and bouncing and wiggling. And, as this article points out, animations in operating systems often make a visually illegible mess in the meanwhile.

Animations might be a good idea in theory, but it doesn't seem like anyone has figured out how to do them right.

[cwillu]

Indeed: one of the first things I do on a new android phone is activate developer mode specifically so that I can set the animation timescale to 0×.

[Kiro]

Which the majority of people think is a horrible experience. There's even a sibling comment in this thread pointing that out: https://news.ycombinator.com/item?id=48518721

[lynndotpy]

Unless you can back that up, "Majority" is something you're making up. It's a guess.

It also doesn't matter whether it's true if the majority or not- "Instant transitions are only good in theory" is not a true statement. Instant transitions are good in practice for many people and that has been true for decades.

[Liftyee]

I see Kiro's guess and raise you an anecdote. I just turned animations off on my Android device, and instantly it feels faster and more responsive.

Maybe software programs got faster with our faster CPUs but all the animations just made everything feel slow.

[Kiro]

Most people with that opinion keep using apps and devices with animations, but thinking it would be better without them. Very few actually torture themselves like that in practice.

[Groxx]

Most shoulder-surfers who see my phone ask me how everything's so fast, and get me to show them the settings. Being able to disable the extremely-excessive animations many things have nowadays is fantastic, and is a great reminder that hardware actually has made progress in the past two decades.

(I use accessibility -> reduce motion, personally. less flaky than the dev options, though also less reliable)

[Kiro]

Finally someone not roleplaying. You're the first person who acknowledges the flakiness of the dev options. People are self-reporting when they claim they set it to 0x without realizing it's unusable due to the bugs.

[cwillu]

Perhaps you should note the replies to that sibling comment

[Kiro]

Setting animations to 0x is famously broken on Android with the UI jumping up and down on transitions. It's a litmus test to spot people falsely claiming they have it disabled without realizing it outs them.

[gf000]

Real life has everything "animated". Nothing happens in an instant, there is force required to accelerate mass, etc.

Short, well-done animations make for better UIs.

[lynndotpy]

This might be true, but the operating systems with animations you can't disable aren't short and they aren't well done.

[mrob]

You're not operating the GUI by thought alone, so your muscles already provide the animation. Adding additional animation on top of that is unnatural.

[Hendrikto]

> Short, well-done

This is the neglected key point. None of the examples were short or well-done.

[bsder]

> Instant transitions are only good in theory.

For a professional tool, animations are anathema. They interfere with muscle memory.

Someone who uses a program continuously can be clicking or typing before a dialog box or button is even in the right position.

My wife drives me MAD with this. She has already clicked the cancel button on a popup before I can even read the first word in the dialog box. This is fine when she is working as the dialog box is just a dumbass notification from some idiot UI designer. This is NOT fine when she has asked me to help debug a problem. I have to force her hand off the mouse so that I can read the damn error message before she clicks it away.

[kccqzy]

I don’t understand this. One of my colleagues drove me mad with exactly this behavior. He opened an internal tool to load some complicated data for visualization. The tool immediately had a popup that said “Loading” with a sole button labeled “Cancel” in it. He reflexively clicked “Cancel” and then complained that the internal tool did not work at all.

[Hendrikto]

The amount of times people asked me for help without even reading the very obvious error message is astonishing. Many people just completely switch off their brain when anything goes wrong.

[voidnap]

No they are not used everywhere. Some games with good UI use animations everywhere that an animation is appropriate. But plenty of good UI exist without animations. The point above is that no animation is better than an inappropriate animation.

[Groxx]

Instant transitions are wonderful for efficiency, and you do see that mirrored in games as well. And you hope to see it in utility-oriented software.

[PennRobotics]

I find a much more enjoyable interface after disabling animations on every device I use---as well as shadows, glow, blur, translucency, hover effects, and rounded corners. Eye candy is an annoyance and wastes developer time, in practice, even when done "correctly".

Kinetic scrolling on touchscreens can stay, but only because my finger doesn't have a no-friction scroll wheel.

[RunSet]

> Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

Would you rather the game have the coolest load screen in the universe or no load screens at all?

[Kiro]

Not the gotcha you think it is considering how common fake loaders are in all application development. They're inserted for a reason, but that's a different topic. We're talking about pure animations here, not loading screens.

[cyberax]

I stopped playing quite a few games because of gratuitous animations.

[jayd16]

You will also see plenty of cases where a screenshot captures incoherent frames.

Squash and stretch is a whole art style that relies on unrealistic frames.

[jdiff]

You're thinking of smear frames. Squash and stretch are animation techniques that are perfectly coherent. Smear frames as well contribute to an overall coherent animation. They're a counterpoint to the general idea put forward in this article, but it's also rarely ever relevant to this type of animation.

[Krssst]

Games are for fun. Wasting time in a game is fine, that's what it is for. (edit: not saying that pejoratively)

Other applications are to do things. They should do the thing and get out of the way as fast as possible. Animation-induced delays are fundamentally contradictory with that; they waste the user's time instead of doing the thing.

[embedding-shape]

I think the default "product manager wants to build flashy animation" fundamentally contradicts that, but I also don't think it's fair to apply that criticism across all animations.

Good and useful animations communicate something, they're not there just to be there or to make it "pretty", which is most designers use them. But they can actually communicate intent, action, immediacy and other important things, if they're used sparingly in the right situations, without actually getting in the way.

Probably the most basic animation most of us PC users see every day is the very basic animation of a text cursor blinking on/off in text fields, like the one I write it right now. It's super basic, but communicates that the computer is waiting for you, it's alive and you can enter things. If it was static, you get the impression something is stuck instead, or couldn't tell exactly where the cursor is at a glance. But it blinks, and that tells us stuff.

[joveian]

I agree that some things have a use and can do so without getting in the way, but I think as your example illustrates it is mostly to help new or infrequent users who aren't familiar with how the system works and often comes at the expense of regular users. Like mrob mentions (with a wonderful example), I usually want software to function like hand tools where I can just do a thing as quickly as I can do it and without unnecessary distractions. I've turned off cursor blink in my terminal and even though it isn't as bad in the browser I just turned it off in Firefox since you mentioned it (add a new preference ui.caretBlinkTime set to 0). Some of us do get more distracted by this kind of thing than others :/. Same with audio cues.

I do still like progress indicators when you might be waiting on a longer task (and when it actually indicates liveness, which too often it doesn't :( ).

Games I can sometimes appreciate the new user benefits and affecting the pace can sometimes have an artistic intent or relaxation effect that tools should not normally have. I have stopped playing games for excessive animations and will usually quickly (but not always immediately) disable anything that can be disabled. It is so common that I distinctly recall the free game Strange Adventures in Infinite Space intentially doing the opposite to great effect (it has been a bit but I think it was not only instant transitions but on mouse click instead of release).

https://rich.itch.io/strangeadventures

[gf000]

Hand tools have mass and momentum, they are most definitely "animated". You need force to accelerate them up to speed, they don't change state "in binary", or in a blink. Good UI is when you don't even consciously notice the animation, but it has subconsciously given you more information (e.g. desktop changes with very brief animation tells you from where did you transition to where. I personally find i3/sway to be a bit slightly disorienting with certain workloads)

[mrob]

A mouse, even a lightweight gaming mouse, is substantially heavier than a pencil. Even if you somehow made a mouse with zero mass, your hand still has mass. The momentum is unavoidable. You don't need to add an inferior simulation of additional momentum to the momentum that already exists.

[Krssst]

The cursor animation is actually a great one because it does not add any latency. By comparison, when animations are not disabled on my Pixel 6 it takes almost one second to switch application instead of maybe 100ms (double tapping the app swap button to get to the previous app running).

[embedding-shape]

God yeah smartphones are the worst, Apple (& co) particularly. My iPhone 12 Mini could feel so much faster if I could just disable all the annoying animations that just make everything feel slower instead of being helpful. Setting animation speed to 0x is probably the feature from Android I miss the most.

[TylerE]

Accessibility > Reduce Motion

[gf000]

As another example, with the "new" navigation gestures switching to the last app and back is just a finger swipe away, following your thumb's speed.

[pmontra]

Games are games, work is work. I disabled every animated transitions in my desktop UI. Elements appear instantly at full size in the place they rest and disappear instantly.

Reasons:

1) I'm doing that thousands of times per week, I know what's going to happen

2) It's my desktop, there is no one else who might be puzzled by a non standard behavior

3) It's faster.

By the way, it is a GNOME desktop on Debian 13.

Oops, I lied. I was about to click on Reply and I realized that the bottom panel (which on a standard GNOME is at the top) is on autohide with a short transition. Maybe because it's the only transition that I activate with the mouse pointer: I hit the bottom of the screen and while it's traveling the last pixels the bar starts sliding in. It's very fast.

[krater23]

I think exactly that. When you add motion, do it right, but when you don't put time in to do it right, it's clearly the better option to leave it out completely. Without animations, much things feel snappier because you don't have to wait on a shitty animation thats running through.

[ryukoposting]

> At the same time, why does everything need motion?

They don't. Most things don't. This kind of nonsense keeps an extra half-dozen people employed, and gives license to a half-dozen other people to smugly proclaim $BRAND's design language is superior to alternatives.

In most of the cases shown, it would probably feel better if the animations weren't there. I clicked the button, show me the thing. Don't do a dance and then show me the thing, just show it!

[numpad0]

Slot machines has to have something always going on, overly dynamic Apple animations help with that. For regular UI animations, it helps normal users who struggle with sudden changes in screen contents, as well as helping to smooth out framerate and hide delays caused by API calls or backend processing.

[tsunamifury]

Motion is critical for reorientation after transition.

Often with out it your brain has to rescan the entire page on each refresh.

[geokon]

Do you have some concrete examples?

"Back-in-the-days" you'd click and stuff would instantly happen, and I don't remember anything being more difficult to visually interpret.

On my Kubuntu desktop if I disable all animations (the whole compositor) I don't feel there is an increased cognitive load of rescaning things - but maybe it's my preexisting memory of the UIs and certain baked in UI expectations. Maybe this animated stuff helps people that are computer illiterate? (software made for the lowest common denominator)

[billyp-rva]

Consider trying to follow along with this app [0] without the transitions. Without them you'd experience much more cognitive load to staying oriented.

[0] https://app.ilograph.com/demo.ilograph.Ilograph/Request

[cyberax]

Well, yeah. This app's UI is horrible. It's both cluttered and sparse. But what's worse, it's ANNOYING.

The key here is that animations happen outside the foveal area. Our vision is tuned to be extremely sensitive to motion and changes _outside_ the foveal area. So when something moves at the corner of your vision, it distracts your attention from your current focus.

This makes a lot of "modern" UI literally anti-productive. It actively _slows_ _down_ people and increases cognitive load.

[jstanley]

I think this is actually a perfect example. The animations make it more complicated to follow, not less! If it just highlighted the stuff you were hovered over it would be easy to understand, I honestly don't get the motivation behind the animation.

[mrob]

Outside of dedicated notification areas, a GUI should only change state in response to user action. Because the user requested the state change, they naturally know how it changed. This means any animation is a redundant waste of time.

The notification area doesn't need animations either, because a GUI is only appropriate for displaying non-urgent notifications. If something really needs urgent attention, you need alarms and flashing lights, not an animated "toast".

[tsunamifury]

This is the standard confusion HNers have with real life.

I think it should work this way vs “how it be”

[voidnap]

This isn't true generally. I am personally far more comfortable with disabling smooth scroll. It has more to do with your mind's expectations. Which can vary between people. Some people expect smooth and others don't. Motion itself isn't necessary.

The only time I have to "rescan" is if I input a scroll and anticipate a scroll and it doesn't scroll. It has nothing to do with motion. In fact, in that case, I "rescan" even though the page hasn't changed, but because it doesn't match my expectation that it would change.

[tsunamifury]

“This isn’t true generally”

Proceeds to give a self only data point

Come on guy. Think a bit.

[lukeschlather]

The OS shouldn't be making many big changes that force me to reorient. When I'm moving between different UIs I often want to compare them; animations make it harder to compare state A to state B. I can detect very fine differences between two images by switching between them within a second, if there's a 1-second animation it not only means it's going to add a second, it adds a bunch of visual noise which might make it impossible to be able to distinguish what's an actual difference and what's just noise introduced by the animation.

[helterskelter]

Try using a tiling window manager. I generally dislike animation in my UI, but when a window, especially an unexpected one opens up and changes your layout it can take a second or more to reorient and it can really interrupt your flow. Animation would alleviate that.

That said, I still prefer sway over the animated alternatives for other reasons.

[silon42]

Sounds like a tiled window manager is not the best (at least for me).

[encom]

>Motion is critical for reorientation after transition.

The only case I can think of where this is true is on scroll, and that barely counts as animation. Anything else is an irritating waste of time.

The absolute worst offence is animating page content on scroll. Great job making me wait on pointless nonsense while scanning your website for the bit I'm looking for. People who do this should be sent to reeducation camps. Both for the animation, and for disregarding 'prefers-reduced-motion'.

[ikesau]

Ah yeah, that makes sense, but I still feel like there's room for a little more discretion.

https://tonsky.me/blog/every-frame-perfect/[e-mail]4, for example

I don't think I would have to rescan the entire page to figure out where things were afterwards. Everything's shifted to the right, just like when I open my browser bookmarks.

[jstanley]

True in 3d CAD when switching between work planes. I can't think of another application.

[hollerith]

It is easier for me to play speed chess with smooth animation of each move rather than when a piece instantly teleports from origin to destination, but I have reason to believe that I'm unusually intolerant to frequent activation of my orienting response.

[RunSet]

> At the same time, why does everything need motion?

To hide the user interface congestion exacerbated if not caused by the ubiquitous animation.

Imagine reading a book if the letters just sat motionless. You'd need to be constantly studying the page.