Remix.run Logo
cosmic_cheese 6 days ago

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.