5 ms·

> I wouldn't be surprised if one day soon this fad gives way back to a renaissance of clean, simple, instant UI's and everyone will feel like their devices got

> I wouldn't be surprised if one day soon this fad gives way back to a renaissance of clean, simple, instant UI's and everyone will feel like their devices got a lot snappier. No, don't think so. Instant UI's are disorienting because there's no visual cue for what is about to happen, and they don't give your brain an intuition as to how the interface behaves (e.g. a sidebar slides in from the side rather than the top). We're used to instant UI's because we've learned the patterns over time, but they're very unnatural to new/ocassional users. Some interfaces overdo the animation timing though, they can be very fast and still give users enough of a cue to understand what happened.

Retric 8y ago
Animations that change colors within a narrow range are fine, moving UI elements around is a huge anti pattern that annoys users without any benifits. It’s the same issue as flat buttons, users need to know what’s clickable, and what has been clicked. They don’t need shading etc, but feedback has masssive utility. Sadly, our field generally lacks the kind of real feedback that corrects such incompetence.
- phailhaus 8y ago
  > moving UI elements around is a huge anti pattern that annoys users without any benifits. Still disagree, and I think you're thinking of really obnoxious examples. I'm imagining about a ~150ms animation for the following: 1. A sidebar sliding out from the side 2. Dialogs swooping in and out from the top of the screen 3. Form panes sliding out when replaced These quick, almost-no-time visual cues are incredibly important at giving your interface a sense of presence and physicality. Without them, your UI elements are flickering in and out of existence without any perceivable reason, and can often leave the user wondering what changed.
  - Retric 8y ago
    That still just adds perceived lag to the system slowing people down as you can’t read something that’s not yet rendered or sliding around that quickly. 150ms adds up. “Why did this get so slow?” Is a real and common complaint with such changes and why OS’s allow people do disable so many animations.
    - phailhaus 8y ago
      The "why did it get slow" complaints happen when the animations aren't fast enough. The brain doesn't need a lot of time to register motion, but many times designers will use a slow and laborious animation to really emphasize something appearing. See Google's material design: it is based on the philosophy that interfaces should behave physically, and you'll see that it feels incredibly snappy. Check out these demos: https://material.io/design/motion/speed.html https://material.io/design/motion/speed.html Example: you can't effectively convey a menu becoming a button without an animation. Without an animation, the menu disappears and a button appears, but there's no reason to believe that they're related. A 100ms tween from one to the other is all you need. Our brains are very good at relating motion, not objects blinking in and out of existence.
      - Retric 8y ago
        100ms * even a minimal 20 actions per minute = 16 minutes wasted in an 8 hour work day. Remember, those 100ms delay gaining information which also delays every action that happens after them. So, the cost is real. Worse, people can break 200 actions per minute for well known systems. Which makes this far worse as it’s slowing people down more as they try and get more done.
flukus 8y ago
The human brain dedicates quite a bit of hardware to some of the best visual diffing algorithms in the known universe. Animations just confuse those algorithms.
- phailhaus 8y ago
  Um, this is absolutely false. There's actually a very famous optical illusion that proves that humans are extremely bad at visually diffing without animations. If you switch between two pictures but separate them with a black screen, you will have a hard time figuring out what changed. The brain is extremely good at detecting movement, not "find the ten differences". Here's an article that shows gifs that demonstrate the illusion: https://www.thisisinsider.com/spot-the-difference-brainteaser-change-blindness-2018-1 https://www.thisisinsider.com/spot-the-difference-braintease...
  - flukus 8y ago
    Separating things with a blank screen isn't representative of a visual element suddenly appearing/dissapearing though. If they have to resort to that to confuse you then it shows that the brain is good at spotting the difference, it's almost like adding an animation if anything, a fade out and back in. This is also with a far more complex scene than most programs, so again not representative. Get rid of the blank screen in-between and tell me people have trouble spotting the difference.
    - phailhaus 8y ago
      > Get rid of the blank screen in-between and tell me people have trouble spotting the difference. If you blink, you'll miss it. That's the problem: if you're not directly looking at the part that's changing (or near it), you'll miss it. Either way, our brains are not wired up to expect objects to suddenly blink into existence.

Retric 8y ago

Animations that change colors within a narrow range are fine, moving UI elements around is a huge anti pattern that annoys users without any benifits. It’s the same issue as flat buttons, users need to know what’s clickable, and what has been clicked. They don’t need shading etc, but feedback has masssive utility. Sadly, our field generally lacks the kind of real feedback that corrects such incompetence.

phailhaus 8y ago
> moving UI elements around is a huge anti pattern that annoys users without any benifits. Still disagree, and I think you're thinking of really obnoxious examples. I'm imagining about a ~150ms animation for the following: 1. A sidebar sliding out from the side 2. Dialogs swooping in and out from the top of the screen 3. Form panes sliding out when replaced These quick, almost-no-time visual cues are incredibly important at giving your interface a sense of presence and physicality. Without them, your UI elements are flickering in and out of existence without any perceivable reason, and can often leave the user wondering what changed.
- Retric 8y ago
  That still just adds perceived lag to the system slowing people down as you can’t read something that’s not yet rendered or sliding around that quickly. 150ms adds up. “Why did this get so slow?” Is a real and common complaint with such changes and why OS’s allow people do disable so many animations.
  - phailhaus 8y ago
    The "why did it get slow" complaints happen when the animations aren't fast enough. The brain doesn't need a lot of time to register motion, but many times designers will use a slow and laborious animation to really emphasize something appearing. See Google's material design: it is based on the philosophy that interfaces should behave physically, and you'll see that it feels incredibly snappy. Check out these demos: https://material.io/design/motion/speed.html https://material.io/design/motion/speed.html Example: you can't effectively convey a menu becoming a button without an animation. Without an animation, the menu disappears and a button appears, but there's no reason to believe that they're related. A 100ms tween from one to the other is all you need. Our brains are very good at relating motion, not objects blinking in and out of existence.
    - Retric 8y ago
      100ms * even a minimal 20 actions per minute = 16 minutes wasted in an 8 hour work day. Remember, those 100ms delay gaining information which also delays every action that happens after them. So, the cost is real. Worse, people can break 200 actions per minute for well known systems. Which makes this far worse as it’s slowing people down more as they try and get more done.

flukus 8y ago

The human brain dedicates quite a bit of hardware to some of the best visual diffing algorithms in the known universe. Animations just confuse those algorithms.

phailhaus 8y ago
Um, this is absolutely false. There's actually a very famous optical illusion that proves that humans are extremely bad at visually diffing without animations. If you switch between two pictures but separate them with a black screen, you will have a hard time figuring out what changed. The brain is extremely good at detecting movement, not "find the ten differences". Here's an article that shows gifs that demonstrate the illusion: https://www.thisisinsider.com/spot-the-difference-brainteaser-change-blindness-2018-1 https://www.thisisinsider.com/spot-the-difference-braintease...
- flukus 8y ago
  Separating things with a blank screen isn't representative of a visual element suddenly appearing/dissapearing though. If they have to resort to that to confuse you then it shows that the brain is good at spotting the difference, it's almost like adding an animation if anything, a fade out and back in. This is also with a far more complex scene than most programs, so again not representative. Get rid of the blank screen in-between and tell me people have trouble spotting the difference.
  - phailhaus 8y ago
    > Get rid of the blank screen in-between and tell me people have trouble spotting the difference. If you blink, you'll miss it. That's the problem: if you're not directly looking at the part that's changing (or near it), you'll miss it. Either way, our brains are not wired up to expect objects to suddenly blink into existence.