Hacker News Reader

Comment by artursapek | Hacker News Reader

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.

View on HN

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

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.

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.

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.

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?

I wish more people were vocal about gratuitous (and especially slow!) transitions. For example, the animations at 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.

Dear god that's awful

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.

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

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.

Reply on news.ycombinator.com