The UX of Lottie Animations

The recent addition of?the JSON files from Lottie to Adobe’s Experience Design was a massive addition to the XD lineup. Not because it is cool “tech” but due to the fact motion design, especially when it comes to UX Design was a rather large omission in the XD feature set. Until the release, motion, in XD, was linear and, I might add, the “time factor” was universal in that it was applied through easing. That has all changed.

Motion is becoming an increasingly important feature when it comes to UX prototyping. Unfortunately, when it comes to Lottie files there seems to be a lot of hype around the “fluff”. I regard "fluff" as being those cool animations at the top of this article. To me, they are nothing more than cute things you can freely download and use. They are ornamentation or eye candy. They are the designer showing off. Showing off is anathema when it comes to User Experience. Motion is not to be regarded as eye candy. Motion is behavior, and behaviors can only help or hinder the user experience.

Motion, when it comes to UX occurs in one of two ways. It happens in real time and non-real-time. Before you cross your eyes figuring that one out, real-time motion provides real-time feedback. Think of of a slider that changes opacity or resizes an element. The other one kicks off after the user does something. Think On-Boarding animations and you are on the right track.

This is where Lottie animations can be dangerous because their behavior can occur in both “times”. As such the motion has to support usability, not entertain. So how does motion support UX? According to Issara Willenskomer in his brilliant “UX In Motion Manifesto ”, it happens in four ways:

1. This support must happen intuitively. Click a Like icon and unicorns or confetti fly out. Not exactly intuitive. It is not what the user expected. This is not a delightful detail, it only confuses the user.
2. Does the motion support the UX narrative and move the action forward? Nothing is more frustrating than having a menu slide in when a “Next” button is clicked. That is not exactly a logical progression of the narrative.
3. Elements in motion should have a relationship with each other. I commonly demonstrate this using a Floating Action Button that, when clicked, has three icons move out from behind it. If I were to move them far from the button, the relationship between the button and the icons will be broken. If one icon is bigger than the other icons, its relationship with the icons would be broken.
4. There needs to be continuity of motion. An example of this would be a carousel that has an image move into the viewport and rotate clockwise while the other images rotated counter-clockwise as they moved into the viewport. That motion has no continuity.

As you can see the inclusion of the Json from Lottie offers the opportunity to include realistic motion and effects. That’s the good side. The bad side is to regard it as entertainment. Do that and motion loses its behavior and also does not support UX.

In the immortal words of Steve Jobs, “there is one more thing.”

When it comes to motion in UX Design, you can’t describe it. You have to show it.

When I give a presentation around this subject I play the “Dumb Canadian who knows hockey but is clueless around baseball” and I ask the audience to describe a curveball in baseball. I always get three or four vastly different descriptions from the audience because they are describing how they “see” a curveball. Then I show them a video clip of an actual curveball being thrown and the universal response is, “Got it.”

Let’s apply this to our poor suffering client: “So when the user clicks this button, three icons pop out and the plus sign in the button rotates to become an X.”

Then the feedback arrives. “Why do they all move at the same time?” “It seems to be too short.” “It seems to be a bit too long.” “Shouldn’t that plus sign rotate the other way?” This is all based on what they “saw” when it was described. Show it to them right off the bat and the response will most likely be,” Got it.” You now have a starting point for a focused discussion around your intention. Toss in the JSON and your development team has something to work with rather than asking, “Is this what you were looking for?”

I sometimes wonder why it took Adobe so long to add Lottie animations. Prototyping applications such as Figma have included a Lottie files feature for a while. Though Figma uses a GIF version of the animation that is no big deal. The GIF is based on the JSON, not the finished product, so animated vectors vs GIF is a non-issue. Everybody can see the motion regardless of the prototyping application used. These applications are nothing more than tools. XD is hammer. Figma is a wrench. PrincipleforMac is a screwdriver. They all do the same thing, just a bit differently.

Finally, as I am fond of saying, “Nobody cares how you did it. They just care that you did it.” Only in this case, you not only did it but they can also see it and its behavior.