[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

[tom_]

You're right. Looks like it's more around 90 ms, at least for my iPhone 12 Mini. Test setup was taking a photo of the iPhone 12 Mini watching an incrementing counter on a 50 Hz CRT.

[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