Comment by Kiro

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.

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.

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.

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.

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

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.

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.

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.

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.

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.