Get your copy of the book

Transforming the Purchasing Experience

Download
Ebook Retail Transformation Technology

How Motion Design Applies to UI Design

  —  
 read

Some smart-sounding people will tell you that animation is the exploitation and management of still images to generate the illusion of movement.

In plain English, it is the combination of visual elements that move in space and time.

Motion design 101

Since the introduction of smartphones, motion design has become a vital UX tool. When utilized right, it makes using technology feel natural, responsive, and more enjoyable.

Adding motion to user interfaces means doing a lot more than decorating.

Animation is a functional element used for giving feedback to an action and helping users understand the app's hierarchy and flow of information. Needless to say, good motion design can make your app or website stand out from the competition.

Versatile application of motion design in UI design

The relationship between the user and an interface, whether human or digital, always combines a set of actions and reactions.

Motion design enhances and facilitates the connection between these actions and the expected reaction on the user side.

Just like people have expectations when clicking the elevator button, they expect a certain reaction when they click a button in an application.

There are several examples in which we can observe the use of animation in applications and websites. In the following paragraphs, we'll go through some examples of animation application in our projects.

Easing transitions

If the transition between screens takes a lot of time, users start losing focus.

Motion design comes in to help users understand the app flow between screens, making the navigation easier and more appealing.

Another way to use motion design in transitions is during loading times. Why not shorten the waiting time with an interesting animation? Animations help hold users' focus while the device is downloading the necessary data.



Engaging micro-interactions

Micro-interactions are events used to create an engaging moment with the user.

You can find these micro-interactions all over apps and websites. Most of the time, the animation starts with a trigger (user action) that causes a reaction, letting the user know what’s happening, making the navigation inside an app or a website easier.

These micro-interactions could happen without any kind of animation, but motion design appears here with the purpose to make this interaction more interesting and engaging.



Playful branding

With the help of animation, we can set the tone of a brand’s identity – be it fun, playful, professional etc. The role of animation is being the personality booster.

With animation, designers can evoke emotions. When we think of a person, we automatically associate them with their way of speaking, walking, laughing etc. It's the person's personality that makes him or her memorable. The same logic applies to brands.

With motion design, we can make a brand more human, evolving from the static to the dynamic, giving it personality.


Just-for-fun animations

Surely, animations can also be simply decorative – as long as they don’t negatively affect user experience.



Decorative animations aren't a vital feature but they make the whole look more appealing.

Next time you want to experiment with motion design, try adding a decorative animation to the classic 404 page. Since it's not the most pleasant page to see, why not make it less unpleasant?

With a funny animation or by using small interactions, we can create a positive experience for the user on a page that's inherently negative.

When (not) to use animations?

From the moment we begin to see the elements that complete an app or a website, our first instinct might be to animate everything! This will not work. I repeat: This will not work.

Motion design emerges in interface design as a tool to enhance user experience, not as a distraction maneuver. As a first step, it's important to understand in which cases animation might be useful, so start by identifying the main problems.

The most useful animations solve users' problems, so it's important to identify these problems in the design phase of the interface.

Based on my experience and the most common issues that arise in interface design, I think you’re doing it right when you’re using animation in some of the following scenarios.

To enhance usability

Apps and websites that use animation generally feel sophisticated and of higher quality.

When clicking a button, users expect to see the confirmation of that action. Motion design brings this expectation fulfillment into the digital realm, enhancing the usability, and making the user really feel that they are interacting with the app.



To add speed to interactions

Modern users are looking for fast and efficient information consumption and aren't ready to wait. Motion can come as the solution to deliver the information immediately – or at least give the user that impression.

As we talked before, loading times can ruin user experience, and animated transitions can help solve the problem. With engaging animated loaders, you can create the impression that the user is saving time, catching their attention and focusing on the animation.

If we entertain the user during this time, we’re actually adding speed to the interaction, making the user more patient.



To make the experience unique

Motion design comes as a useful resource for offering a unique experience. Smooth animations and joyful animations, can make your app stand-out before all the others, increasing the user’s satisfaction.

At the end, it’s all about the user happiness. If you can make them happier with the help of motion design, you’re doing it right.



Motion comes as a problem solver, making every interaction smoother and faster.

Do not exaggerate in your animations, making them too flashy. Yes, users like animations, but as everything else, they can be too much and the user gets tired of them.

So, don’t overcomplicate. Find the problem you want to solve and make the solution clean,smooth and fast, using simple animations. If you’re creating more problems than you're solving, maybe you should not use the motion elements.

The best motion design tools

Just like motion design is constantly growing as an important part of creating user interface design, the software for its creation is constantly evolving.

These are several options for creating motion design, and based on the projects I have done at Infinum, these are the most important for creating the best interactions.

Principle

Principle could be one of the best tools for interface animation and interface prototyping animation EVER.

The ease of creating animated flow from different applications or web screens through predefined animations allows motion designers to quickly and easily create an animated prototype.

Another big advantage of this software is the easy way of importing screens from the other design software, such as Sketch and Figma. This makes Principle one of the most loved tools among motion designers.

After Effects

Adobe After Effects has always been the most widely used animation tool. Being a more complex tool than Principle, more oriented towards explanatory videos and long-term animations, it is emerging as an essential interface animation tool.

While Principle allows us to create a fast flow and prototypes to present the main interactions of an application, After Effects lets us explore the creation of more complex effects and interactions.

One of the main reasons for the popularity of this software among motion designers is the Bodymovin plugin, which allows the export of more complex shape animations to code, making it easier for developers to implement them.

Lottie

In the past, using animations in applications or websites was a nightmare. GIF issues, code issues, and too much memory space usage made user experience slow and painful.

Lottie emerges as one of the best solutions for this problem. It is a library that renders animations exported from After Effects through the bodymovin plugin. This makes using animations in apps and websites quick and easy.

Although some After Effects features are not yet supported, this library is growing, allowing for the export of more complex shapes, masks, trim paths, solids, and alpha matte effects.

The community is constantly growing – check out more great examples already created by the Lottie community.

Why motion design is worth learning about

Design is all about solving problems, and motion design is a strong tool for that.

At a time when everything is interactive and reactionary, user experience tends to be faster and more effective, and motion design solves problems and adds new interface design solutions that provide a better and more effective user experience.

There are a lot of online platforms, such as motiondesignchool, where you can learn motion design through simple tutorials. The demand for this skill is growing, as you can see from dribbble's latest review.

Here are a couple more useful resources:

Get movin'

With the culture of interaction and movement growing, and every company trying to find new ways to create better and different experiences, we can say that the future of motion design is starting now.

Are you ready to start moving in the right direction?

Too bad we don't support animated cover illustrations to see André Ferreira's design in motion.