8 ms·

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 actuall

by ikesau 3mo ago

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.

tsunamifury 3mo ago
Motion is critical for reorientation after transition. Often with out it your brain has to rescan the entire page on each refresh.
- geokon 3mo ago
  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 3mo ago
    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 https://app.ilograph.com/demo.ilograph.Ilograph/Request
    - jstanley 3mo ago
      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.
    - cyberax 3mo ago
      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.
- ikesau 3mo ago
  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/toolbar@2x.mp4 https://tonsky.me/blog/every-frame-perfect/toolbar@2x.mp4, 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.
- mrob 3mo ago
  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 3mo ago
    This is the standard confusion HNers have with real life. I think it should work this way vs “how it be”
- voidnap 3mo ago
  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 3mo ago
    “This isn’t true generally” Proceeds to give a self only data point Come on guy. Think a bit.
- encom 3mo ago
  >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'.
- jstanley 3mo ago
  True in 3d CAD when switching between work planes. I can't think of another application.
  - hollerith 3mo ago
    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.
- lukeschlather 3mo ago
  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 3mo ago
    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 3mo ago
      Sounds like a tiled window manager is not the best (at least for me).
Kiro 3mo ago
Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.
- PennRobotics 3mo 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.
- jayd16 3mo 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 3mo 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 3mo 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?
  - 3mo ago
ryukoposting 3mo ago
> 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!
crystal109 3mo ago
[flagged]
krater23 3mo ago
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.
bee_rider 3mo ago
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 3mo ago
  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 3mo ago
    > 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.
numpad0 3mo ago
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.
keynha 3mo ago
[flagged]
RunSet 3mo ago
> 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.

by ikesau 3mo ago

tsunamifury 3mo ago

Motion is critical for reorientation after transition. Often with out it your brain has to rescan the entire page on each refresh.

geokon 3mo ago
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 3mo ago
  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 https://app.ilograph.com/demo.ilograph.Ilograph/Request
  - jstanley 3mo ago
    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.
  - cyberax 3mo ago
    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.
ikesau 3mo ago
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/toolbar@2x.mp4 https://tonsky.me/blog/every-frame-perfect/toolbar@2x.mp4, 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.
mrob 3mo ago
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 3mo ago
  This is the standard confusion HNers have with real life. I think it should work this way vs “how it be”
voidnap 3mo ago
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 3mo ago
  “This isn’t true generally” Proceeds to give a self only data point Come on guy. Think a bit.
encom 3mo ago
>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'.
jstanley 3mo ago
True in 3d CAD when switching between work planes. I can't think of another application.
- hollerith 3mo ago
  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.
lukeschlather 3mo ago
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 3mo ago
  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 3mo ago
    Sounds like a tiled window manager is not the best (at least for me).

Kiro 3mo ago

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

PennRobotics 3mo 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.
jayd16 3mo 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 3mo 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 3mo 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?
- 3mo ago

ryukoposting 3mo ago

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

crystal109 3mo ago

[flagged]

krater23 3mo ago

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.

bee_rider 3mo ago

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

numpad0 3mo ago

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.

keynha 3mo ago

[flagged]

RunSet 3mo ago

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