12 ms·

I used to have a bad rep at my last job for always being a negative nancy about animations in our UI. In my opinion it's extremely easy for people to get overze

I used to have a bad rep at my last job for always being a negative nancy about animations in our UI. In my opinion it's extremely easy for people to get overzealous with them and abuse them, which just makes an interface feel sluggish. It's especially annoying when a common action is animated and I'm sitting there waiting for the animation to finish over and over. Animations can be useful to prevent disorientation during a transformation of the UI - hinting at something disappearing or perhaps showing the difference between two states when that difference in important. But I find all too often people simply put them in because they can and I feel like I'm back in 4th grade watching my classmates' Powerpoint 2003 presentations.

surfmike 9y ago
Jump cuts in UI can be very disorienting however. I think animations are at their best when they're short and help tell the spatial model. Otherwise only used when the UI will take a while anyway such as loading in new content, or as small cue to get the user's attention. Agree that many people use it gratitously for no good reason however.
manigandham 9y ago
You're correct - animations should be used to convey some information, such as letting the user know something is happening if there's a high latency operation loading, but animations purely for visuals are incredibly annoying and a waste of time and resources.
cjcenizal 9y ago
I completely agree with you. This principle is why I'm so opposed to the trend of using labels as form input placeholders, and animating them into place when the input takes focus. What information is that supposed to communicate to the user?
jszymborski 9y ago
I agree with your general point but I will say that the "State Circle Pack" demo is actually a great use of animation; particularly when you slow down the animation to ~2sec. You can see which groups resize or drop out, and which groups take there place. Much more illustrative than most animated pie charts or bar graphs you'd normally would see for the same info. https://sghall.github.io/resonance/#/redux-examples/packed-by-age https://sghall.github.io/resonance/#/redux-examples/packed-b...
- artursapek 9y ago
  Yep, I'm not trying to talk down this library (some of the examples do look nice). And React's core is a UI diffing engine so it lends itself nicely to the useful types of animation I was trying to describe.
onion2k 9y ago
It doesn't have to be one way or the other; there's a CSS feature that enables the user to tell a browser that they don't want to see motion - prefers-reduced-motion. https://css-tricks.com/introduction-reduced-motion-media-query/ https://css-tricks.com/introduction-reduced-motion-media-que...
- artursapek 9y ago
  I saw that Stripe is using that now, but it's meant to be used as an accessibility option: > ... to disable motion effects for those with vestibular disorders I'm complaining about tasteless/pointless animation, not animation in general. Several other people in this thread point out good use cases for it.
eddyg 9y ago
I wish more people were vocal about gratuitous (and especially slow!) transitions. For example, the animations at https://getfinal.com https://getfinal.com (for the Final credit card) are very annoying. You can't even select the "Sign In" option until the "fade in" has finished.
- artursapek 9y ago
  Dear god that's awful
cel1ne 9y ago
A couple of animation that feel good to me are: * fading the screen around a popup or other notification that must be acknowledged. I think this serves well to direct the attention. * moving/shooting a message out of the screen to show it's being send somewhere. Apple Mail does that as well. * Highlighting a part of a list that was changed by an action. Fading it out after a single row has been deleted for example. None of this should ever take more than about 0.5-1 seconds, with the exception of the send-notification maybe, that signals/celebrates the end of a longer task.

surfmike 9y ago

Jump cuts in UI can be very disorienting however. I think animations are at their best when they're short and help tell the spatial model. Otherwise only used when the UI will take a while anyway such as loading in new content, or as small cue to get the user's attention. Agree that many people use it gratitously for no good reason however.

manigandham 9y ago

You're correct - animations should be used to convey some information, such as letting the user know something is happening if there's a high latency operation loading, but animations purely for visuals are incredibly annoying and a waste of time and resources.

cjcenizal 9y ago

I completely agree with you. This principle is why I'm so opposed to the trend of using labels as form input placeholders, and animating them into place when the input takes focus. What information is that supposed to communicate to the user?

jszymborski 9y ago

I agree with your general point but I will say that the "State Circle Pack" demo is actually a great use of animation; particularly when you slow down the animation to ~2sec. You can see which groups resize or drop out, and which groups take there place. Much more illustrative than most animated pie charts or bar graphs you'd normally would see for the same info. https://sghall.github.io/resonance/#/redux-examples/packed-by-age https://sghall.github.io/resonance/#/redux-examples/packed-b...

artursapek 9y ago
Yep, I'm not trying to talk down this library (some of the examples do look nice). And React's core is a UI diffing engine so it lends itself nicely to the useful types of animation I was trying to describe.

onion2k 9y ago

It doesn't have to be one way or the other; there's a CSS feature that enables the user to tell a browser that they don't want to see motion - prefers-reduced-motion. https://css-tricks.com/introduction-reduced-motion-media-query/ https://css-tricks.com/introduction-reduced-motion-media-que...

artursapek 9y ago
I saw that Stripe is using that now, but it's meant to be used as an accessibility option: > ... to disable motion effects for those with vestibular disorders I'm complaining about tasteless/pointless animation, not animation in general. Several other people in this thread point out good use cases for it.

eddyg 9y ago

I wish more people were vocal about gratuitous (and especially slow!) transitions. For example, the animations at https://getfinal.com https://getfinal.com (for the Final credit card) are very annoying. You can't even select the "Sign In" option until the "fade in" has finished.

artursapek 9y ago
Dear god that's awful

cel1ne 9y ago

A couple of animation that feel good to me are: * fading the screen around a popup or other notification that must be acknowledged. I think this serves well to direct the attention. * moving/shooting a message out of the screen to show it's being send somewhere. Apple Mail does that as well. * Highlighting a part of a list that was changed by an action. Fading it out after a single row has been deleted for example. None of this should ever take more than about 0.5-1 seconds, with the exception of the send-notification maybe, that signals/celebrates the end of a longer task.