Basics of Animation in UX
This is my first post in Medium, animation is one of my favorite topics from years, I was looking out for the very basic information about “animation in UX”, there are many sources explaining about functional animations, how to use Disney’s principles, etc…. but unfortunately I couldn’t find the basics which can be helpful for the better understanding about animations in UX. That is why I am drafting this post, please check and let me know if it helps :)

The animation is one of the major elements in UX, the intent of animation in UX is to solve design problems such as showing continuity and relationships between the objects with action and reaction interactions which help in reducing the cognitive load on a user in the process of decision making.
Why is animation important in UX?
Good UX is all about creating the intuitive and interactive experiences, animation helps to let the user know how the interface elements move and react to the user interactions when used in a purposeful and meaningful way animations enhance the user experience by bringing the interface to life and makes the experiences delightful.
However, animations can only enhance user experience if it’s incorporated in a subtle and consistent way throughout the application with right timings and at the right place.
Usability aspects under consideration
Animations can be created and used in numerous ways based on the requirement, but the subtleness of an animation depends on the functionality, meaning behind the interaction and delightful presentation. Below mentioned are the key usability aspects under consideration where animations should be used in order to improve the UX of Products.
Animations to Provide feedback
An interaction is made with a series of micro interactions and in order to keep the user informed about the interaction it is important to provide multiple layers of instinctive feedback, animations help to communicate these multiple layers of feedback clearly in a meaningful way without annoying or distracting the user’s focus.
Animations to provide spatial orientation
The way an interface is animated helps to provide spatial cues for the user about where an action is directing the user to and establishes a better recall relationships when used logically and consistently across the product. Animated special cues help to keep the user always in the context of interaction and make the interface intuitive by providing the sense of control over the interface, also helps to make the interactions feel structured and simple to understand.
Animations for tutorials and on-boarding
First-time users often need help to understand how to use an interface, especially for the interfaces which contain unfamiliar or unique interactions. Without help, users may get confused about how to interact with a product and end up having a horrible first-time experience.
When it comes to providing on-boarding or interaction tutorials for the users, it is important to make the process interactive with providing the set of animated visual hints which helps to make the process clear and intuitive in a quick time.
Animations for an accessible interface
Accessibility is a key consideration for the seamless usability of a product. Animation needs to be treated with care as the results can cause problems for a set of disabled users.
The WCAG 2.0 standards include guidelines for animation, which state that the web interfaces should not have any content that flashes more than three times in a one-second time frame. Moving, flashing and blinking content can cause a severe distraction for users, and at worst, seizures. The guidelines also say that the user should have controls to pause, stop or hide the content that either moves, blinks or scrolls.
As per the research, it is found that the animations like parallax scrolling effects have been found to induce motion sickness and causing nausea or headaches for a set of users. It is advised to either not use these types of animation for interfaces which deal with complex interactions, or if needed to use the system should provide a control for the user to turn them off.
Consistent application across all the products
However, even after considering all the above-mentioned aspects it is important to apply the motion consistently without overdoing across all the products. This in return helps to increase the brand value.
In this document, you can find an insight about the parameters that control the motion and guidelines to control them in order to incorporate the motion effectively along with a list of interactions were all the animations need to be applied across the products.
Basic Animation Parameters:
UI animations can be controlled with the help of the two basic parameters time and speed of an animation, and the two parameters can be controlled relatively in order to create the animations which look natural and realistic using an easing curve. Along with these two parameters “elevation” is the third parameter which helps to create a realistic simulation with the help of shadows.
Timing:
Timing is probably the most important parameter when creating an animation, it needs to be defined with utmost care in order to create smooth and appropriate animations. If the animation duration is too quick then there will be a high chance of possibility for users to miss the animation and loose the context with the interaction, and when the duration is too slow then the user might perceive that the system is slow. However, studies say that anything up to 100ms appears instantaneous to the users, a perceivable animation takes a bit long, and the time ranges from 150ms to 350ms. In order to achieve smooth motion, it is advised to keep the duration between 200ms-500ms based on the context of use.
Speed:
The speed of an animation is a relative parameter which depends on the timing and movement of an animation when multiple objects move between positions or transform between states. Speed can be used to create natural and realistic animations with the help of easing curves.
The easing curve is a line that defines the acceleration patterns on a graph whose X and Y axis are time and animation speed, the different shapes of easing curves graphically represents the ease in, ease out, or ease in out animations.
Elevation:
The elevation is a conceptual hierarchy that makes use of shadows logically to indicate various states of UI elements in order to allow users to interpret and understand which elements are interactive. Elevation is measured in the same units as the x and y axes of the 2d interface i.e. density-independent pixels (DP) with the help of an imaginary “Z” axis which is pointed out as a normal to the screen, thus provides the “depth” as the third dimension and helps to simulate a realistic visualization. In the motion, shadows provide useful clues about an object’s direction of movement and create a sense of breath in and breathe out.
Animation Types:
The below provide are the four types of categories that most of the animations that we see on a web interface fall under.
Entry and exit animations:
The appearance or disappearance of an object on the screen. (Ex: A panel that opens from left to right, a popup that fades in and fades out, etc.)
Transitional Animations:
Informing the user about a contextual change. (Ex: Color/shadow/shape changes of a button when hovered, etc.)
Emphasized Animations:
Drawing attention to an object that is already on the screen. (Ex: Notification bell to and fro animation, etc.)
Engaging Animations:
The sequences of animations that help to keep a user engaged with the system. Engaging animations can be designed to create a sense of the personality of the product brand. (Ex: Loading animation, onboarding animated hotspots, etc.).
Thanks for the read! this information is very generic. If you want any other resources or have questions feel free to write me “saraths362@gmail.com” or ping me in facebook.
