Our customers interact with the products we create, through carefully crafted journeys and experiences. We can see this interaction as a conversation that each user has through the touchpoints in our User Interface (UI). It is fascinating how animations in UI design can take the customer experience to the next level. It adds life to any design, engages users and it helps to make our products stand out from the crowd. Let us see how this can be done.

If you have not already, make sure to read the previous Motion Design blog, in which we discussed the need for Motion Design in creating dynamic digital experiences, and how to apply animations thoughtfully.

Guidelines in Motion Design

Subtle use of motion in UI design can make using an interface more understandable, more engaging, and easier to use. Google has created guidelines to capture what works and what does not in applying motion. It can be easily overdone and abused, and it is easy to spend time implementing the wrong thing. Many people think motion is just for ‘polish’. I do not agree, certain levels of motion are key to improving the usability of a product.

According to Google, Motion Design follows three basic principles. Motion is Informative, Focused, and Expressive.

Informative motion informs the user by highlighting relationships between elements, actions available, and action outcomes. A good example is to show the hierarchy in the information structure of the interface. As you can see in the example below, motion helps orient users by showing how elements in a transition are related. It reflects the hierarchy between a parent element, which is the inbox. And the child element, which is the inbox message itself.

As we have previously discussed, motion can, and always will attract the user’s attention. Focused motion attracts the user’s attention to what is important without creating a distraction. A good example is a call screen as seen below. Firstly, the arrows next to the pickup button are subtly animated to indicate to the user that a swipe action can be performed on the button. Secondly, the arrows pulse in the color of the action they point to. Finally, when sliding the call button to the action, the button itself transitions to the color of the action that will happen next.

Motion can also be expressive, this means that it can celebrate moments in the user journeys, adds character to common interactions, and can express a brand’s style. A good example is subtle animations in icons, illustrations, and product logos. It adds both polish and an extra moment of delight to express the company’s brand. On top of that, animating icons can playfully reinforce or add to the icon’s meaning.

Finally, as is important with any design process, it’s important to thoroughly prototype and test motion and micro-interactions with users. Luckily, there are many tools available to help us with that. Let us see how to apply motion from a design perspective.

Applying Motion Design from a Design perspective

Just like the importance of Motion Design is growing, so is the software for its creation. Nowadays there are quite a few options for creating animations in your designs. Let’s look at the four most used tools for designers.

After Effects is the commonly used animation tool. Even though is mainly tailored towards video production, it gives you the most granular control in creating animations and micro-interactions. The downside is that it is hard to translate the animations into an interactive prototype to test with users.

Lottie is a tool that can be used in conjunction with After Effects. It allows lightweight, scalable animations for websites and apps. Lottie is a library that renders animations exported from After Effects through a plugin. It allows you to export animations from After Effects to JSON files that developers can easily implement.

Principle is perhaps one of the most popular tools for creating animations specifically for interface prototyping. It comes with a lot of predefined animations, allowing designers to create animated prototypes quickly and easily. A big advantage is that it is rather easy to import screens from design tools, like Sketch and Figma. And it is possible to export the file as an interactive clickable prototype or video.

Figma is a tool that is becoming increasingly popular among designers. It is mainly used to create wireframes, visual designs, and prototypes. It also has an animation aspect that allows designers to incorporate animations directly into a prototype. Lottie animations can also be used directly in these prototypes.

Next to the items mentioned above, there is a wide range of other tools that can be used. All with their benefits and drawbacks. Flinto, Framer, Origami Studio, and Kite Composer are other popular apps that let you create motion in your designs.

Applying Motion Design from a Development perspective

When it is time to start the technical implementation, the front-end developer must receive precise data for the desired animation behavior. Even though motion is becoming more and more popular, it is still one of the hardest challenges to incorporate its specifications into an iterative design workflow. There is no standardized way how to do this and just handing over a video or animated prototype is certainly not enough. Let us see how we can close the gap between designers and developers.

Let us start with the basics. For every animation, we have a few sets of variables to keep in mind. Firstly, objects can be transformed in four different ways; Translation (X, Y, and Z value), rotation, opacity, and scale. Secondly, each animation happens for a specific duration. Researchers have discovered that the optimal speed for interface animation is between 200 and 500 milliseconds. Finally, each transformation has its animation curve. This animation curve specifies the acceleration and deceleration of a transformation in a specific duration.

When doing the handover to developers, my recommendation is to create a document in which we specify common variables of animation curves and durations. These variables can then be used to document each animation per screen state. For an example of how animations can be specified, I’d like to refer to this article. As you can see, each state has a small script in which the different animated properties are outlined. As a final recommendation, it’s important to also keep the UX designer involved during the development and QA process, to steer and give guidance on the implementation of the animations.

Bottom line

We have seen that Motion Design can play a significant role in improving the usability of a product. It makes your products more understandable, more engaging, and easier to use. Nowadays, many tools are available for designers to create, prototype, and test motion in UI design. Even though there is still a gap in handing off these design specifications to developers, there are certainly ways to overcome this.

It is time to say goodbye to static user interfaces and start thinking about how interfaces should feel. By adding motion to your designs, we can create those moments of delight, that separate a good experience from a great one.

Are you ready to apply animations to your design and development phase? Do not hesitate to get in touch!