It is not easy to surprise or even wow someone these days with an interface animation. It guides the user’s attention, demonstrates how to use the application, and highlights interactions between screens.
If executed correctly, they can significantly improve the user experience. They can enhance understanding while simultaneously better capturing the user’s interest. And there’s the indisputable fun factor. Let’s face it: The majority of people prefer watching an animation to reading a page of dull, dry text. In this situation, animation UX is useful.
The feelings, preferences, and needs of the user should always be taken into account while creating animations for your website, e-commerce business, or blog. Online retailers that use animated content can see a 20% increase in leads and conversions. In light of the increasingly competitive digital industry, it is crucial to consider animation in user experience (UX).
Animation Best Practice to Use Animation In UX
Here, we have shared the animation best practices you can follow to ensure that your website’s animation delivers the most incredible user experiences possible:
1. Duration and Speed of The Animation
Elements that change in position or state should have animations that are both fast enough to avoid making users wait and slow enough to allow them to detect the change.
Several studies have found that 200–500 milliseconds are the ideal speed range for interface animation. These numbers are derived from the unique qualities of the human brain. Any UX animation that lasts less than 100 milliseconds occurs instantly and is completely unrecognizable. On the other hand, an animation that takes longer than a second to load can make the user feel as though there is a wait.
The Material Design Guidelines further suggest keeping animation on mobile devices to no more than 200–300 milliseconds. For tablets, the time should be approximately 400–450 milliseconds, or thirty percent longer. The explanation is simple: because the screen is larger, things may travel a shorter distance when changing positions. Due to the shorter distance to travel on a smaller screen, the duration on wearables should be 30% shorter, or 150–200 milliseconds.
An alternative approach can be taken using web animation. We also expect to switch between stages swiftly because we are used to websites opening in browsers instantly. Therefore, smooth UX transitions should only take between 150 and 200 milliseconds, which is nearly twice as long as they do on mobile devices. In other situations, the user will unavoidably believe that there is a problem with the internet connection or that the machine freezes.
However, if you are aiming to draw the user’s attention to specific components on your website or if you are making an attractive animation, forget about these principles. In certain situations, animation may last longer.
It is essential to keep in mind that the length of the animation should be determined by the object’s size as well as the distance traveled, regardless of the platform. Smaller components or UX animations with subtle adjustments should load faster. As a result, an animation with a lot of intricate details seems better after a little longer. The object that has traveled the smallest distance among moving objects of the same size will halt first.
Due to their bigger offsets, little objects move more slowly than large objects. Physical laws require that the energy of a collision be dispersed equally amongst the colliding objects. Therefore, it is best to ignore the bouncing effect. Use it selectively and only when it makes sense.
Remember that objects should move clearly and sharply for proper use of animation in UX, so avoid using motion blur (this is an After Effects user tip). Even on modern mobile devices, it is a challenging effect to duplicate, and interface animation makes no use of it.
Items in lists, such as email lists and news cards, should display one after the other relatively. The new element should appear once every 20 to 25 milliseconds. The user may become annoyed by the items’ delayed appearance.
2. Easing
Easing contributes to the object’s more organic movement. It is one of the fundamental ideas of animation that is covered in detail in the book The Illusion of Life: Disney Animation, which was co-authored by Ollie Johnston and Frank Thomas, two crucial Disney animators.
Like all living things in the real world, the object in the animation needs to accelerate and decelerate in order to avoid appearing robotic and unnatural. This practice helps make impactful UX animations.
3. Linear Motion
When an object is not affected by any physical force, it moves linearly or at a constant pace. The only reason they appear so fake and unnatural to the human eye is because of this.
The animation curves are used in all animation applications. The curve displays the changes in the object’s position (y-axis) across the same time intervals (x-axis). The object moves linearly in this instance, covering the same distance in the same amount of time.
For example, linear motion can only be applied when the object’s transparency or color changes. In general, it can be used in situations in which an object remains in the exact location.
You can also run through animation website design techniques to make the best sites for your brands.
4. Ease-In or Acceleration Curve
The curve shows us that the object’s position moves slowly at first, then its speed increases progressively. That indicates a specific acceleration of the object’s motion.
When objects are shooting out of the screen at full speed, this curve needs to be applied. These can be interface cards or system notifications. But bear in mind that this kind of curve should only be applied in situations where the objects are lost forever from the screen and cannot be found again.
The animation curve aids in conveying the appropriate tone. As we can see in the example below, all objects move for the same amount of time and distance, but even slight adjustments to the curve might affect the animation’s mood.
Naturally, you may also move the object to resemble the real world as much as possible by adjusting its form. This approach can help in enhancing UX with animation.
5. Ease-Out or Deceleration Curve
In contrast to an ease-in curve, it occurs when an object moves swiftly across a large distance before gradually slowing down until it stops.
When an element first appears on the screen, a curve of this kind should be used. It should fly up on the screen at high speed before gradually slowing down and stopping altogether. This also applies to other cards and objects that emerge from the screen’s borders.
6. Ease-In-Out or Standard Curve
The objects’ speed increases first due to this curve, but it gradually decreases back to zero. The most prevalent form of movement in animated user interfaces is that one. Use the standard curve whenever you’re unsure about the motion type to use in your animation.
It is preferable to employ an asymmetric curve, according to Material Design Guidelines, to make the movement appear more authentic and natural. The curve’s finish needs to be highlighted more than its beginning to ensure that the acceleration phase lasts longer than the slowing phase. In this instance, the user will focus more on the element’s final movement and, consequently, its new state.
When objects travel from one area of the screen to another, ease-in-out is used. Modern UX animation techniques avoid the dramatic and attention-grabbing effect in such a situation.
When an element leaves the screen, the same movement type should be used, but it may always be brought back to its original place by the user. It affects a few things, like the navigation drawer.
Adheres to a fundamental rule for responsive UX animation that many beginners overlook: the animation at the start and the animation at the end are not the same. Similar to how the navigation drawer emerges and vanishes, it does so using a deceleration curve.
A cubic-bezier() function is used to describe the curves. Because it is based on four points, it is known as cubic. On the graph, the initial point at coordinates 0;0 (bottom left) and the last spot at coordinates 1;1 (top right) is predefined.
Because of this, we only need to describe two points on the graph, which are represented by the four arguments of the cubic-bezier() function: the first two are the first point’s coordinates (x and y), and the second pair is the second point’s coordinates (x and y).
To make your work with curves easier, the first one includes a list of the most popular curves whose parameters you can import into your prototyping tool. With the second source, you may experiment with the curve’s parameters to watch how the objects move right away.
7. Choreography in Interfaces Animation
The primary goal is to lead the user’s attention through consistency in UX animation in a flowing direction as they move from one state to another, much like in ballet choreography.
There are two kinds of interaction in choreography: equal and subordinate.
· Equal Interaction
Equal interaction means that the appearance of all objects is governed by one particular rule.
Under such circumstances, the appearance of every card is seen as a single flow that directs the user’s attention in a single direction, precisely down. The user’s attention will become dispersed if we don’t follow the sequence. It would also appear unprofessional if all the components appeared at once.
It’s a little trickier using the tabular view. Here, it is not a good idea to present things one at a time because the user’s attention should be directed diagonally. If every piece is revealed one at a time, the animation will become unnecessarily lengthy, and the user’s attention will be divided, which is incorrect and not proper use of animation.
· Subordinate Interaction
When we have one core object that commands the attention of every user and all other elements are subordinate to it, we have subordinate interaction. This kind of animation for usability emphasizes the primary topic and provides a sense of order.
In other situations, the user’s attention can be divided because it can become challenging for them to figure out which object to focus on. As a result, if you want to animate multiple elements at once, you must specify each element’s motion in detail and move the smallest number of objects at once. You can also get assistance from professionals for top-notch 3D animation services.
Moving objects should follow the arc instead of moving in a straight line when their sizes change disproportionally. It facilitates a more organic movement. When I say “disproportionally,” I mean that the object’s height and width change asymmetrically—that is, at a different rate—for instance, when a square card becomes a rectangle.
When an object changes size proportionately, the movement along the line is employed. The disproportional arc movement rule is frequently disregarded since it is considerably simpler to apply. It is evident from real-world application examples that linear movement is dominant.
There are two ways to move an object on a curve: the first is called “Vigilant out,” in which the object moves horizontally before ending in a vertical motion, and the second is called “Horizontal out,” in which the object moves vertically before ending in a horizontal motion.
The scrolling interface’s primary axis and the object’s travel route along the curve must line up. For example, the next image’s interface allows us to scroll up and down, and in line with that, the card unfolds vertically, first to the right and then down. The card moves in the opposite direction during the reverse movement, rising vertically at first and then going horizontally.
The moving objects cannot pass through each other if their routes cross across. By reducing or increasing their own speed, the objects should make room for the movement of another object. They might also merely shove other objects away. Why is this the case? Given that we consider every object in the interface to be in just one plane.
In another case, the object in motion may surpass nearby objects. Again, though, there is no dissolution or passing through other objects. Why? Since none of the physical objects in the real world are able to behave in a way that deviates from the laws of physics, we believe that the elements of the interface do.
Final Takeaway!
In light of the mentioned guidelines, we’ve explained how to animate good in UX. Just keep in mind that the interface’s animation must replicate the motions that are familiar to us from the real world, such as friction, acceleration, etc. By mimicking the actions of real-world items, we may construct a flow that enables users to know what to anticipate from the user interface.
When an animation is well-designed, it is inconspicuous and doesn’t divert users from their objectives. If so, you should either remove it entirely or soften it. This implies that the animation shouldn’t hinder the user’s ability to complete the task or slow them down.
However, don’t forget that animation is more of an art than a science, so it’s best to try things out and gather user feedback before coming to any conclusion.
Furthermore, you can always connect with the leading animation experts, Anideos, and make use of motion graphics in marketing or create the best UX animations for your audience.
