Top 6 of Motion Design Rules In Interfaces: Practical Tips For Creating Thoughtful UI Animations

Animations can help you improve you ui, but only if they are done right. Here are some rules to follow.

Animation or motion design is a powerful tool to engage your audience and create a unique user experience. Therefore, according to, more and more large brands, including Apple and Google, are actively using animation in operating system interfaces and applications. And when the guys from the front line try something new, this, of course, encourages more and more developers and designers from all over the world to strive for new experiments on UX.

In this article, we will look under the hood of modern applications and learn in detail the animations and how interface animations make communication with the client stronger.

1. The animation is not the final touch in application development

There is an opinion that the user experience is like a cake, and the animation in it is a cherry. But in reality, everything is completely different. The animation is not a cherry, but a secret ingredient in a biscuit. This is especially felt even in the early stages when testing interactive prototypes: when one behaves like a “live” topic with the AppStore and the other works like changing A4 sheets, there is a significant difference in the value and richness of the user experience.

My advice is this: animation is part of your design concept, part of your solution to a business problem. Therefore, do not think of it as a separate stage, do design. And if the animation is the best solution – implement it.

2. The animation is imbued with meaning

Just keep in mind in the next project on application design that animation needs to be applied for a specific purpose. And if you still do not understand where it is needed and why – keep a list of cases in mind:

Transition mitigation

Bet you’ve seen this before? You go to the application screen (A), click on the button, and there… You are already on the screen (B). The thought immediately flashes through your head: How am I here? Where am I? Which button to press to return?

Confusing ux

Submission of content and animation to attract attention

And it also happens – you get on the screen, and your attention freezes there. On the case with the ribbon of posts, it is noticeable that the approach of the posts one after another from below hints where to find more posts.

Continuous feedback

When the interface turns into a stream rather than a set of screens, the quality of the user experience is growing significantly.

Clear feedback on every action

Have you ever pressed the button twice to see if it worked or not? Has the process started or not? Press again or not? Surely the answer is “yes”, but why create situations that raise the user’s doubts?

Adding animation creates the feeling that something significant has happened!

Liven up the content

In applications where content is created in real-time, for example, on news resources, in social media feeds or in article comments, animation helps to achieve two goals at once. To soften the appearance of new elements and smooth out the possible delay when loading materials.

Animation and History

In almost every application, you need to explain it when something went wrong, or a new function appeared. In such situations, animated illustrations help relieve stress, and it is also accessible and easy to explain to the user what and where everything happened.

Explain Something has happenes

3. Animation captures the essence of the brand

There is still an infinite number of ways to do things differently. Therefore, do not forget to take into account the brand values ​​and its character when you are developing the next project.

4. Animation enriches the user experience

Thanks to the animation, all the interface elements work together as a one. Accordingly, the user experience is obtained smoothly, fast, and without any troubles.

Improve ux

5. Strive for natural animation

This does not mean that all applications should now work the same. In the real world, if you kick the ball, it will not move exactly the same every time. If you take into account your context to the maximum, then even standard animation, taking into account the tuning for the context, will look special.

6. The animation should not “burn” time

The animation is also suitable for visualizing status on long operations.

Remember that for our (human) perception, everything that lasts less than 0.1 seconds seems instantaneous, and everything that lasts less than 1 second is smooth.

Therefore, if you have a process that takes, say, 6 seconds – divide it into several separate animations. That way, the user will think that the process was faster, but at the same time exciting.

This approach helps create a sense of instant reaction in the application, and at that time, the application can perform a time-consuming operation, such as loading materials.

To summarize

If you need to increase metrics, for example, the Retention Rate for your applications, then take note of everything above and apply it, and try to work with it.

Have a Look at These Articles Too

Published on May 15, 2020 by Peter Hughes. Filed under: , , .

Peter Hughes is a digital marketing consultant and author. Peter has more than 10 years of experience in SEO and Internet marketing.

Leave a Reply