How to Design UI and UX Animation to Enhance User Experience
Animation is commonplace in contemporary user interface design. It’s become much more challenging to impress visitors with UI animations, and in many cases, the animation becomes a distraction or simply gets in the way of a good user experience.
Web designers and developers require a certain level of experience and restraint to focus on creating a positive user interaction and avoid over-animating UI elements within user interfaces that can increase the user’s cognitive load.
Effective UX animation can enhance the user experience without getting in the way of what the visitor is trying to achieve on the website. Using UI animation to subtly draw attention to a focal point or provide appropriate visual feedback to the user as they interact with elements within the user interface is very effective in this context. Subtle UI animations can also add a tactile sensation to the user interface that enhances the overall experience with the brand and leaves a positive emotion with the viewer.
It’s important to weigh the impact of interactive elements or a particular element within the user interface and determine if the functional animation offers value to the user or introduces distraction.
To illustrate common types of UI and UX animation, we’ve created a comprehensive guide to using UX animation appropriately to encourage user input, enhance user experience and bring user interfaces to life without introducing distraction.
Best Practices for Effective UX Animation
1. Duration and speed of the animation
When UI elements change state or position, the duration of the animation should allow enough time for the user to notice and experience the transition but not move so slowly that the user’s ability to navigate the interface is impeded.
Loading animation or hover animations are common in the web designer’s toolbox. These UI animations offer effective ways to transition between pages and help maintain engagement while the user navigates your website.
Research suggests that the optimal speed for UI animation is between 200 and 500 ms. These figures are based on particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized, whereas an animation longer than 1 second will offer a sense of delay and frustrate the user.
On mobile devices, Material Design Guidelines suggest limiting the duration of the animation even further, with the sweet spot landing between 200–300 ms. As for the experience on tablets, the UI animation duration should increase by 30% to 400–450 ms.
Why do we see different animation durations for different devices?
The size and dimension of the screen the interface is viewed on dictates the length of the UI animation for that experience. By following the same statistical data, wearable technology’s duration would be 30% shorter, bringing us into the 150–200 ms range. This is because the distance from point A to point B on a smaller screen is shorter.
To add another layer to the duration of the UI animations, we can compare mobile application animation versus web animation. We are accustomed to web pages loading in 1-2 seconds in most cases, and we expect to be able to move from page to page quickly within a website as our intent is somewhat different than when using a mobile app.
The duration of web transitions should be about two times shorter than mobile apps. 150–200 ms is fairly standard for web-specific UI animations as the user intent in this case is more often to gather information or purchase a product or service.
Does a large computer screen mean slower animation?
Not at all. Regardless of the platform, the duration of the animation should depend not only on the distance UI elements travel but also on the size of the objects. Smaller elements or animation with smaller transitions should move faster, while a UI animation sequence with larger and more complex elements tends to look better when it lasts longer.
When a number of objects of similar weight and size are animated, the first to complete its movement should be the object that has passed the shortest distance.
Small objects, compared with large objects are moving slower since they require more significant offsets.
The duration of the UI animation will differ based on the size of the object and the distance it has travelled in its sequence.
When objects collide, the energy of the interaction should be evenly distributed between the two elements according to physical laws. This principle is easily employed using a bounce effect.
However, we should avoid over-using the bounce effect as it can become distracting and cumbersome.
The movement of the UI elements or objects should be crisp and avoid the use of motion blur to offer a clean, smooth experience to the user.
List items, such as news cards and email lists, for example, should have a short delay between their appearance. The introduction of each new element should last from 20 to 25 ms at the most to avoid friction within the user.
2. Easing
Easing helps to make the movement of objects appear more natural. It’s one of the basic principles of animation described in the holy grail of animation, The Illusion of Life: Disney Animation, written by renowned Disney animators — Ollie Johnston and Frank Thomas.
To avoid creating UI animations that feel mechanical or look artificial, the object should move with acceleration or deceleration as all objects move in our physical world, including any decorative animation or zooming animations within a scrolling interface.
Linear Motion
Objects that are unaffected by any physical force move in a linear nature with constant speed resulting in an unnatural and artificial feeling.
All applications for animation use animation curves, whether they are a simple loading animation or a decorative animation within the interface of a website. The animation curve uses Position and Time to show how the object’s position (on the y-axis) changes in relation to the time interval (on the x-axis). When the movement is linear, the object travels a time interval equal to the distance.
Linear motion can only be used only when an object changes colour or transparency. We can use linear for hover states on buttons or links and in feedback animations where an object does not change position.
Ease-in or The Acceleration Curve
To add a sense of realism to our UI animations, we can use easing or an acceleration curve. This means that the object animation accelerates over time, creating a natural curve on the Position versus Time scale.
This curve should be used, for example, when UI objects leave the viewable area or transition off-screen at speed. These types of UI elements can be system notifications or just information cards within the interface.
The animation curve helps to express a mood or evoke an emotion, making UI animation important. Below, we can see the duration of movement and the distance for all objects is the same, but even small changes in the curve change the visual feedback, giving you the possibility to influence the overall mood or experience of the animation within digital interfaces.
By changing the curves, we can move the objects more similarly to our physical world.
Ease-out or The Deceleration Curve
The opposite of the ease-in curve is the ease-out or deceleration curve. The ease-out curve allows the object to quickly cover a long distance and then slowly reduce the speed until the object comes to rest at the end of the interface animation.
The deceleration curve should be used when the element emerges on the screen. For example, the UI element may fly up on the screen at full speed and gradually slow down until it comes to a full stop. This can also be applied to different cards or objects that appear to come from off-screen.
Ease-In-and-Out or The Standard Curve
The standard or ease-in-and-out curve makes objects gain speed at the beginning of the UI animation and then slowly reduce speed as they come to a stop. This curve is the most common type of movement used in interface animation. Use a standard curve when you doubt what type of motion to use in your UI animation.
According to Material Design Guidelines, it is better to use an asymmetric curve to make the movement appear natural and realistic. The end of the curve must be more emphasized than its beginning so the acceleration duration is shorter than slowing down. In this case, the user will pay more attention to the final movement of the element and its final state.
The difference between the symmetric and asymmetric standard curves is quite obvious when sequenced together.
Ease-in-and-out is used when the objects move from one part of the screen to another and remain in view of the user at all times. In these instances, the UI animation is much less dramatic.
The same UI animation type should be used when the element disappears from the screen, but the user can bring it back on the screen through some form of interaction through the navigation or another form of interaction with the interface.
These examples follow a fundamental rule that many UI and UX designers neglect — the beginning of the UI animation sequence is not equal to the endpoint. As in the case of the navigation drawer above, it appears using a deceleration curve and disappears with the standard curve. According to the Google Material Design guidelines, the time of the object’s emergence should be longer to attract and hold the viewers’ attention.
A function cubic-bezier is used to describe the curves. It’s called cubic because it’s based on four points. The first point with coordinates 0;0 (bottom left) and the last one with coordinates 1;1 (top right) are already defined on the graph.
Based on this, we need to describe two points on the graph, which are given by four arguments of the function cubic-bezier; the first two are the coordinates x and y of the first point, and the second two are the x and y coordinates of the second point.
To simplify your work with curves, try using easings.net and cubic-bezier.com as reference points. The first site contains a list of the most frequently used curves, the parameters of which you can copy and create high-fidelity prototypes. The second site offers an opportunity to experiment with different parameters of the curve and explore how the objects will move in real time.
3. Animation Choreography in Interfaces
Just as a ballet choreographer would imagine and execute a dance to tell a story, as animators, our goal is to guide the viewer’s attention in one fluid motion during the transition from one state to another within the interface.
There are two types of choreography — equal and subordinate interaction.
Equal Interaction
Equal interaction means that the appearance of all objects within the UI animation follows a single rule.
In the example below, the appearance of all cards is perceived as one flow that guides attention in one direction, namely from the top to down. The user’s attention will be scattered if we don’t follow a natural order, while the appearance of all elements at the same time would create an overwhelming user experience.
In a tabular format, it becomes a bit more complicated. The user’s focus should be directed in one direction diagonally to follow the Z pattern we all read in. Revealing each element one by one will make the animation excessively long, and we’re apt to lose the user’s attention with this clunky user experience.
Subordinate Interaction
Subordinate interaction means that we have one central object which focuses the viewer’s attention, and all other interface elements are subordinate to it. This type of animation provides a stronger sense of order and draws more attention to the important content.
It would be very difficult for the user to know which object to follow if multiple elements were moving independently within the sequence, causing a dispersal of attention and generating confusion. Following this principle, if there are multiple elements you want to animate, you must clearly define the sequence of their motion and animate as few objects as possible at one time.
Choose the most important object in the interface and animate all other objects in relation to it to create clarity and focus within the UX animation.
According to Material Design, when the moving objects transform their size disproportionally, they should move along an arc rather than in a straight line. It helps make the movement more natural. To transform objects “disproportionally,” we change of height and width of the objects by increasing or decreasing their size asymmetrically using varying speeds. For example, a square element would become a rectangle.
The linear movement below is used most effectively when the UI object changes its size proportionally. Since the implementation of such a movement is much easier, the rule of disproportional arc movement is often neglected in this scenario. Studying examples of websites and mobile applications, you’ll often see the reliance on linear movement.
The motion on the curve can be achieved in two ways: the first, called Vertical out, where the object begins moving horizontally and terminates with a vertical movement; the second — Horizontal out, where the object begins to move vertically but finishes with a horizontal motion.
The object’s movement along the curve’s path must coincide with the scrolling interface’s main axis. For instance, on the next image, we can scroll the interface up and down and accordingly, the card unfolds in a Vertical out sequence, at first to the right and then down. The reverse movement is completed the opposite way; a card first rises vertically and ends up moving horizontally.
The direction of unfolding/folding the card should coincide with the axis of the interface.
If the moving objects’ paths intersect, they cannot move through each other. The objects should allow enough space for the movement of another object by slowing down or accelerating. Another option is they push other objects out of their path.
During movement, objects shouldn’t pass through each other but leave sufficient space for the movement of another object along its natural path.
In another case, the moving object can rise above other objects but should not dissolve or pass through other objects since we want the UI elements to behave according to the laws of natural physics.
In Summary
If we summarize these UX animation rules and principles, the animation in the interface should reflect the movements that we are familiar with in the physical world to mimic friction and acceleration. By imitating the behaviour of objects from the real world, we can create a more natural animation sequence that allows users to feel more comfortable and understand what to expect from the interface.
If the animation is designed correctly, it is unobtrusive and does not distract the users from their goals or intent. If the animation introduces distraction, it should be simplified, if possible or removed from the interface altogether. Remember, UX animation shouldn’t slow down or prevent the user from performing a task.
Animation is more of an art than a science. It’s important to continue to experiment and test your animations on live users and adapt to their feedback.
