4 ms·

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

by Kiro 4mo ago

jayd16 4mo ago
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 4mo ago
  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.
mrob 4mo ago
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?
- mawadev 4mo ago
  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__ 4mo ago
  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 4mo ago
    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.
- Lalabadie 4mo ago
  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.
  - mrob 4mo ago
    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_ 4mo ago
      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 4mo ago
        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
- Gigachad 4mo ago
  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 4mo ago
    >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 4mo ago
    > 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 https://en.wikipedia.org/wiki/Zeno's_paradoxes
pmontra 4mo ago
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.
deleted 4mo ago
[deleted]
voidnap 4mo ago
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.
Krssst 4mo ago
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 4mo ago
  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.
  - Krssst 4mo ago
    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 4mo ago
      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.
lynndotpy 4mo ago
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 4mo ago
  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 4mo ago
    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 https://news.ycombinator.com/item?id=48518721
    - lynndotpy 4mo ago
      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.
      - Kiro 4mo ago
        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.
        4mo ago
cyberax 4mo ago
I stopped playing quite a few games because of gratuitous animations.
Groxx 4mo ago
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.
bsder 4mo ago
> 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.
- Hendrikto 4mo ago
  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.
- kccqzy 4mo ago
  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.
RunSet 4mo ago
> 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 4mo ago
  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.
PennRobotics 4mo ago
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.

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

by Kiro 4mo ago

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

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 4mo ago
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.

mrob 4mo ago

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?

mawadev 4mo ago
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__ 4mo ago
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 4mo ago
  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.
Lalabadie 4mo ago
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.
- mrob 4mo ago
  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_ 4mo ago
    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 4mo ago
      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
Gigachad 4mo ago
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 4mo ago
  >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 4mo ago
  > 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 https://en.wikipedia.org/wiki/Zeno's_paradoxes

pmontra 4mo ago

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.

deleted 4mo ago

[deleted]

voidnap 4mo ago

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.

Krssst 4mo ago

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 4mo ago
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.
- Krssst 4mo ago
  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 4mo ago
    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.

lynndotpy 4mo ago

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 4mo ago
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 4mo ago
  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 https://news.ycombinator.com/item?id=48518721
  - lynndotpy 4mo ago
    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.
    - Kiro 4mo ago
      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.
      - 4mo ago

cyberax 4mo ago

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

Groxx 4mo ago

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.

bsder 4mo ago

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

Hendrikto 4mo ago
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.
kccqzy 4mo ago
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.

RunSet 4mo ago

> 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 4mo ago
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.

PennRobotics 4mo ago

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.