zlacker

>>jakela+(OP)
Clickbaity title; more like "things to consider when designing animations."

I appreciate subtle animations like the button press. Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll.

But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation?

Also, I think a lot of people would be happier if web apps exposed settings like zero animation / mild animation/ full animation. Power users could speed up their workflows by turning off animations. Kinda like my phone UI settings.

>>wonger+sp
It might be kind of interesting to see a well-done usability study around animations. I tend to assume they are pretty useless, but I guess I can see some point in drawing the eye from a button you press, to some UI component that it generates.

OTOH, it isn’t clear what the baseline should be. The easy way to do an incorrect study would just be to toggle off animations and have the very dynamic design with components popping into existence without any hints. But, that’s flawed, a UI made from the ground up with the assumption of “no animations” should just be less dynamic, rendering the whole concern moot…

>>bee_ri+Nt
In my opinion the bare minimum for UI animations is where a large percentage (30%-40% or above) of the screen changes. This kind of thing doesn’t faze even moderately advanced users, but for many below that level it’s confusing because there’s not necessarily anything that ties the two UI states together.

>>cosmic+IF
Hmm. That isn’t my preference—animation is best used to draw attention to something where I might noticed the cause-and-effect. If nearly half of the screen has changed after I hit a button, I hope to notice that!

>>bee_ri+sK
Like I said, there’s a split between those who are and aren’t technically inclined.

The issue for non-technical users is that without an in-between state, UIs can be confusing because it’s not clear what triggered the dramatic change. If we take a typical mobile app as an example, the animations that occur when a user drills down communicates a couple of things:

- The list item in the screen being pushed out of view maintains its pressed-down highlighted state through the transition, making it clear what was tapped to trigger the action

- The horizontal animation of the following screen pushing the previous screen out of view makes it clear that the how the two screens are connected and that the user is traversing a hierarchy, similar to going through a series of doors (which in turn, communicates how to get back out)

Similar principals apply to sheets/drawers animating in. Without this animation, it can be unclear if the screen appeared as the result of a user action (and if it did, what action) or if the app just did it of its own volition.