For example - I think it's on Windows where I keep running into this - on notification popups from some apps, you can't click "X" to close until sufficient time has passed after the popup animation. If you try to close it in that time, it instead acts as if you clicked the notification to open it. Super annoying.
Another, on Mac, when switching desktops, sometimes an app will show on the screen briefly before flashing to another app. The animation is slow enough that it often tricks me into thinking it's ok to do stuff and then nope the app changes. Even worse, I think it occurs randomly.
Note to designers: if you do choose to include an animation, it better be the most rock solid implementation ever or I will immediately think you're a twat and your app is a buggy pile of crap.
This means, if you turned animations off you would still work as fast and understand the flow the same as if animations were enabled.
For me, the purpose of animations is to soften the UX journey, and to confirm what I already knew, by giving me small indications that yes, the UI is truly in the state I expect it to be.
Such as fast highlighting of on hover items, so I don't have to correlate the mouse position to the control.
I love that example of tool tip popups taking 0ms once you have popped up one, that is a clear signal that the UX understands you are trying to learn more about the controls you're hovering over.
That's a perfect representation of how animations signal understanding of your UX journey.
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.
This exists as a browser setting, it's called "prefers-reduced-motion", an example usage in my code: https://github.com/mickael-kerjean/filestash/blob/master/pub...
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…
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.
I have a blog post draft called, “5 principals of interactive animation” aping the “12 principles of animation” from the 80's that I thought every would-be UX designer might learn from. It mirrors a lot from this post!
1. Purpose over ornament.
2. The more often, the less.
3. Timing shapes perception.
4. Motion adapts to state.
5. Silence is an option.
When you're the only person using the computer, UI animations are pure time-wasting anti-features. You obviously know how the UI state changed because you're the one who requested the change. If the UI state changed without your explicit request, that's a bug that needs fixing. But somebody viewing your screen remotely can't see which keys you're pressing, and they don't know what you intend to click on before you've actually clicked it, so to them UI state changes can be surprising. Animations can help them follow what's happening.
Of course, animations should be disabled by default, because most computer use is not performed for an audience, but having the option to enable them is occasionally useful.
We must be using different devices because mine often fail to register my intent and in that case the failure to animate is often the only signal I have (that doesn't take more than a few seconds to register)
And if you're using animations as indications of correctly functioning hardware, why not just use useful work as the indication instead?
Since the website had been around for a very long time, I wonder how many millions of seconds had been wasted on this animation to complete.
Every time you want to type in a product by name, you must endure a 2 second slide-in of the keyboard before you can start typing on it. It's so slow that I feel that I could have completed the search and started on the next item before it's even done animating, if there was a way to disable it.
I sincerely hope employees don't have to use systems like this all day that reduce their throughout by more than half.
But me, being a bit more pragmatic, instantly benchmarked it, saw the search backend was responding quickly and it was just the animating menu that showed the results that was slow to animate. I changed 1.6 second animation to a 0.2 second animation, a change that look maybe 5 minutes to benchmark, find the code, and then change it,
The tech manager refused to accept that the solution was that simple, and only confonted with irrefutable evidence (direct client feedback AND benchmarks that showed that the search backend was already fast) that he accepted.
> When done right, animations make an interface feel predictable, [...]
Predictable how? If you anticipate the animation, then you will have predicted it. But you also could anticipate the lack of an animation, and you will have predicated that.
> When done right, animations make an interface feel [...] faster,
Do they make the interface feel faster because no transition ever occurs in less time than the animation? Or is it that literal motion on the screen tricks us into thinking something is "going fast"? A nearly instantaneous, unanimated change in view must feel faster than an animation, no?
> When done right, animations make an interface [...] more enjoyable to use. [...]
This is true sometimes. It's particularly true when you're interacting with controls that have a "real physical world" analogy, like buttons, sliders, and page flips. On the other hand, if I click a button and a bunch of sparkles happen, that's not enjoyable to me.
> When done right, animations [...] help you and your product stand out.
If your product has animations and competing products do not, then yours stands out insofar that it has animations.
> But they can also do the opposite. [...]
Correct!
> So how do you know when and how to animate to improve the experience?
> Step one is making sure your animations have a purpose.
Or... don't use animations unless the app involves animation. Or do, there's nothing I can do about it.