Remix.run Logo
bee_rider 6 days ago

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…

cosmic_cheese 6 days ago | parent [-]

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.

bee_rider 6 days ago | parent [-]

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!

cosmic_cheese 6 days ago | parent [-]

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.

gblargg 5 days ago | parent [-]

I am pretty anti-animation, but you make the point well. Animation allows apps to be more featured, using animation to help new users follow what's happening. As long as it can be turned off, experienced users benefit from the extra features. I had never thought of it as a learning aid, rather just an unnecessary distraction to make the app look cool.