Are your animations slowing down your user experiences? - Martin Mark - Design and User Experience (UX) - Designer Toronto

Are your animations slowing down your user experiences?

Give this a try:

  • Activate developer tools for Android (or Enable Developer Settings in Android if they’re not currently activated for you)
  • Go to developer tools -> Animation Scale -> and select 0.5x

You may be wondering to yourself, “Martin how could you have possibly just made my phone twice as fast?” – the answer is, I didn’t (and magic). If you take a look at the settings you’ve selected, you’ll notice that what’s actually happened is that you’ve sped up the transition animation speeds between actions.

It kind of makes you wonder about adding animations between application actions…

What could this tell us about animations and user experience?
The main take away I’m trying to emphasize is that animations can drastically affect perceived performance.
In general, I like to think that animations can emphasize and educate (the good), or delay and distract (the bad).

Some use cases:

+ Emphasizing that a state or perspective has changed.
+ Educating the user that something behind the scenes has happened (system’s feedback).

Delaying a segue transition with a drawn out transition.
Distracting from the content by “scroll-jacking” (like an unexpected scrolling behaviour).

UPDATE: Another article posted recently that is also well worth a read.
“Your UI Isn’t a Disney Movie”

“Animation is like cursing. If you overuse it, it loses all its impact.”

UPDATE: Attended a talk by Teresa Man of Brainstation yesterday where she had a couple great examples of effective uses of animations:

Instagram’s use of instantly “Liking” items (before processing is complete).
Doesn’t block the user from continuing, feels instantaneous while the technical processing happens in the background.

Just looked up where Instagram’s original technical talk was from – their phrasing for the lightweight interaction model was “performing actions optimistically“.

Twitter’s new “Like” animation.
Also non-blocking, instantaneous feedback, and gives the user an emotional feeling of joy after selection.