15 Interface Animation Rules: What Does Each UX/UI Designer Must Know?
Animated user interfaces become more and more versatile. If earlier they could be considered mainly an attribute of gamification, today the animation of UI elements is more general and often used to facilitate onboarding. Below we will tell you about the main rules for creating effective animation in user interfaces.
Guide for Web Designers Who Are Going to Create Cool Animated UI
So, let’s find out what rules to follow to develop an outstanding user interface with animated elements.
Start with prototyping
It doesn’t matter if you’re a beginner or an experienced web designer, creating animation from scratch always requires prototyping. So you can understand how organically your idea is implemented and make changes before they cost you a lot of your time and effort.
Follow the laws of physics
This rule is to create an animation that complies with the laws of physics, whether it be the law of gravity, the law of inertia, the laws of friction, etc. This is especially important for animated objects consisting of several elements — in this case, each of them has to move along its own trajectory, taking into account the shape, size, and other physical features.
Remember that users should perceive interface elements as three-dimensional objects that weigh in proportion to their size. This commitment to the fundamentals of physics helps users apply interface elements as if they were dealing with them in real life, not in a digital environment. This means that handling them will be more intuitive than in the case of completely fictional two-dimensional counterparts.
Squeeze and stretch animated objects
Haha, we haven’t finished talking about the laws of physics. Just remember how objects behave in real life under the influence of external factors — they can shrink, expand, change their center of gravity, or do something else in response to any manipulation by the user. Keep this in mind to make your animation as realistic as possible.
Ensure smooth movement
In real life, objects move smoothly, often not in straight lines, but in a parabola. This physical property can be used to make interactive interfaces closer to what we are used to seeing in 3D space. This is just one of those features that are hardly noticeable to the average user, which allows the final solution to look professional and concise.
Prepare the user to transition between screens
Instead of abruptly changing from one screen to another, prepare the user for what is about to happen. The most trivial example is shown in older versions of Windows — we are talking about an overturning hourglass. However, you can use all your imagination to make this transition not only more creative but also fun.
Add some drama
To provide end users with a clear understanding of what’s going to happen in the next moment and get them to focus their attention on it, you can make this waiting a little more exciting. This rule especially works well in the case of describing erroneous user actions or waiting for confirmation of any operations within the interface. For example, you can use a bouncing exclamation mark or ‘x’ sign to indicate to users that something went wrong and the interface expects them to take a specific action.
Repeat the animation one more time
Another unobtrusive “trick” for screen transitions is to repeat the animation that users have just seen. This will help them understand that they are doing everything right and that the step they took brought them closer to completing the target action.
Remember hierarchy
In fact, the movement can quite reliably reflect which of the objects is more important, and which of them is secondary. Usually, the most important elements are brought up or forward by animation.
Use animation only where necessary
Perhaps you can get carried away with animating interface elements and set yourself the goal of making as many objects move as possible. However, turning an ordinary user interface into another work of the Disney studio is definitely not worth it. In fact, excessive animation will distract users from completing their intended actions, and you will significantly reduce the usability level of the project you are working on.
Provide visual cues to users
Depending on the purpose of your product, the onboarding process can be quite difficult for some new users. Animation can significantly reduce the entry threshold. In particular, you can use animated tooltips to explain to beginners how to handle interface elements.
Apply your wits
A successful animated interface requires wit on the part of the designer. If it does not cause any emotions in end users, your work can hardly be called high-quality. So, as we said above, don’t forget to add some humor and fun to the animated elements, even if you’re working on the most serious project in the world.
Make sure your animation duration matches your target audience
Think about how long the animation should last so that your users don’t have to wait until it ends. At the same time, an animation that ends too quickly may be incomprehensible to end users. Therefore, before launching the final version, test several options that differ from each other in duration on real representatives of the target audience of your project.
Choose the optimal motion speed
It is also important to keep a balance in animation speed. Animated objects that move too slowly, rendering each new frame at a speed of one second or more, can make your end users bored. Conversely, moving them too fast, at less than 100ms, won’t allow them to understand where the change has occurred at all. In general, the results of independent tests show that the optimal interface animation speed is from 200 to 500 ms.
Consider the language of movement
The nature of the movement of animated elements should match the style of the project you are working on. For example, bouncing elements are unlikely to be appropriate in a corporate application, and vice versa, too unobtrusive, strict animation will make an entertainment application uninteresting and dull.
Try to imagine your animation 50 years from now
Even though web design trends change at the speed of light, it’s important to try to create a product that will become exemplary for many years to come. To do this, try to imagine if your animation will look ridiculous for users who decide to use your product in half a century.
Final Thoughts
We hope that our fifteen tips for creating cool animations will help you achieve your goal as a web designer at the highest level. And of course, remember that mistakes are the best experience. And if you did something wrong today, thanks to this experience, tomorrow you will be able to improve your skills and do your job more professionally.
Great web design starts with planning. Great planning starts with FlowMapp
Meet the FlowMapp 2.0. Complex solution for all stages of planning process. From idea to clickable prototypes. Add FlowMapp to you toolkit.
Originally published at https://www.flowmapp.com.
