Usability and experience

Motion design can help guide the user through the experience. With the right use of movements, animations, and transitions we can make our product more intuitive, more humane, and generally clearer to use.

To date, this is one of the most common gaps I’ve found in product designers.
There are several reasons why you should care about having motion design as part of your skillset as a product designer.

I wrote this article about using the right transition in the right situation, so have a look for a deeper dive into this specific topic. But the point is that each transition between screens conveys a message. It illustrates the architecture of our product. How a modal screen appears should be and feel different than navigating through tabs, for example.

‍

We all know feedback is a must. And we can provide feedback to a user’s interaction in many different ways: visually (the simple change of color, for instance), with a sound, with haptic feedback, with motion, and, of course, a combination of some or all of these.

I talk extensively about what feedback is, why it’s important and how it should be provided in apps for children in my book, but actually, pretty much everything I say in the book is valid for any kind of user.

Motion can play a key role when it comes to feedback. The most basic and maybe common example is a button animation that makes it look like the button is being physically pressed. Changing the color might be enough, but we know that a change in color is not really the most accessible choice to indicate the state of a component; adding motion can help to overcome this. And even though we are well past skeuomorphism in UI, adding that little bit of physicality to an interface never hurts. You can keep your UI design minimalistic but still make it feel tangible.

‍

Polish and delight

If you follow me, you know I advocate for designers to foster their visual design skills, even if they focus on UX (that UX designers shouldn’t care about the visual side of things is a common misconception. UX design is ALSO UI design). When it comes to make an experience feel polished and professionally designed, give a sense of delight and pleasure, nothing helps like motion design.

‍

‍

Besides all the usability benefits mentioned above, we should not forget that a better-looking, more pleasant UI feels more usable than an ugly one.

Adding animations to icons, buttons, cards and other components, as well as carefully crafted transitions, can really make your product go from average-looking to outstanding.

Furthermore, motion design can help you establish the mood of your design language. More bouncy and springy motions help you convey an idea of a fun and lighthearted product, more rigid and basic animations can be for a more serious tone. Animations in a productivity app might need to be quicker than the ones in a meditation app which should probably feel more calming and soothing, and so on.

Some tips

• Be coherent. Once you’ve established the style of your motion design, be consistent. Define its principles and stick to them throughout the entire product.
• Be mindful of the timing of each animation. Don’t make transitions too long or your product will feel slow and sluggish. Too fast and it’ll look jittery and unpleasant to look at.
• Don’t overdo it. The benefits of motion design are many, but this doesn’t mean that every single component and interaction should trigger a bunch of animations all over the screen. Your motion design should (almost) never take the center stage, in most cases it’ll be subtle, something the user will perceive at an almost subconscious level.
• It often helps to rely on the classic principles of animation, even when animating a button or an icon.
• Start thinking about how things will animate and move as you design the UI, not at the end of the process. Don’t take motion design as a final pass to add to your UI, but have an idea of how a card will expand, a button will react, a screen will transition to another, as you design them. Motion design shouldn’t be an afterthought.
• Understand what is actually doable and how. At the end of the day, users will use a real product, not an After Effect’s file. Working on the motion design of a product with prototyping tools like ProtoPie, Principle or Figma, will surely help to keep things grounded and realistically feasible in code. But sometimes you need to go beyond those basic things if you really wanna add personality to the product. In this case define in advance with the engineering team which technologies you can rely on. Lottie, Rive (more on this down in this article), Unity… depending on how the product will be developed, there are different ways of adding magic to it. Understanding which one is paramount to avoid overdesigning things that won’t be achievable in code.

While some animations could be designed by a dedicated motion designer (things like animated icons, animated spot illustrations… think Duolingo for example), for UI components and transitions a product designer should be responsible. If the team is very small, in an early-stage startup, for example, having a product designer capable of doing motion design, means being able to achieve that level of polish and delight without the need for an additional motion designer in the team (or external help).

Some design agencies, like Cuberto and Tubik (which I had the great pleasure of working with during my time at Huawei) made a name for themselves also thanks to the high quality of their motion design work in products.

Tools

Besides the classic prototyping tools, here are some others more specific for animation and motion design:

• After Effects + Bodymovin. This is the classic combo to create and export lottie animations.
• Cavalry. Cavalry is another alternative to AE, that, like Fable, strips away millions of features AE offers that are unrelated to motion design to focus just on that. Think Figma to Photoshop. Many things that are quite tedious to achieve in AE are made way more simple in Cavalry, as the tool has been designed specifically for motion design and just that.
• Rive. Rive is another fairly new one that shows incredible promises. It’s a completely different technology than lottie and it’s said to be way more efficient in terms of the weight of the animations you create with it. But the most interesting aspect of this tool is interactivity. You don’t just create animations to play like a movie, but you can add interactions to them and create state machines to define which animations to play depending on given conditions and interactions.
  This is a simple example of what you can do:

To better understand interactivity and state machines in Rive, you can check this simple introduction by School of Motion:

‍

The example in the video is the most basic thing you can achieve with state machines, but you can really go crazy with inputs and conditions and create almost gaming experiences. Plus, take a look at these guys:

Where to learn

Besides motion design courses, that you can find anywhere, from School of Motion mentioned above, to Udemy, Skillshare, etc, one interesting resource that really focuses on the use of motion in UX and Product design is UXinmotion.com, they also have a publication on Medium.

A final note for motion designers

If you’re a motion designer, please consider specializing in animating UIs. I swear there’s a huge opportunity in the market for skilled motion experts that understand product and UI design!