The advantages of using CSS Animations
With the progression of CSS and JavaScript, implementing animations on websites has become a lot easier. With adding animations, there is a question of whether the animations and transition are meaningful to users and not have them become an annoyance or too obtrusive. Below are some reasons as to why CSS animations are an advantage to user-experience.
Animations decrease cognitive load.
Animations have the ability to decrease cognitive load by making states of buttons or hovers or other interactive elements more natural. Changes of state can be rather abrupt to users when no animations are present, making them more jarring and hard to process. Animations can help users see the in-between of the states which helps decrease cognitive load. By doing this, the brain doesn’t have to interpret the states by itself, making the interaction more calming and less abrupt.
Animations Create Feedback
Animations can be used to build micro-interactions. This is similar to someone giving a response to a question and seeing their facial expression change just before giving it. The same can be applied to an interaction with a button or hover effect. After clicking on a button, the animation can indicate that “the action has worked and this is the response”. This makes the response feel fluid, creating the illusion of continuity. This brings responsiveness to the website or user interface. Giving a response via the interface responding to the user’s inputs, as opposed to responsive web development.
Predicting the outcome of an action
Animations are able to be used to signify the future state of an element. An example of this can be that a drag and drop feature can be created with animations that show where the user can drop the element, as if they’ve already added it, whilst the element is still being interacted by the user’s input method.
Animation catch the user’s attention
The human eye is attracted to moving objects. As a result, our brain is wired to react and notice motion. It is engrained without our DNA as an evolutionary advantage. It assists humans to be aware of danger and to protect themselves. Elements without a website that move around automatically grab the attention of a user. This can be used as an advantage when developing websites.
Animations avoid change blindness
Users can be prone to change blindness. This is where something is too far away from the user’s current focus, the change on the element may not be seen. Animation can help with this, by grabbing the user’s attention to the changes made. An example of this is where when a user adds something to their basket, the only thing that may change is the quantity of items next to the basket icon. This may be out of the user’s focus due to being in the corner of the screen. To alleviate the change blindness, an animation can be used after the “add to basket” button press to signify that the button has been clicked and an item has successfully been added to the basket. This attracts the user’s attention by showing that the quantity has been changed. It gives the usual visual feedback showing that the action of the add to cart button click has successfully worked. Without the animation, a user may have missed the change in quantity due to being so subtle without the animation assisting.
CSS Animations are able to give the user feedback and interact with a website that is usually static and somewhat boring. The use of transitions and hover effects are able to engage a user in using a website and keep them interested when scrolling through and navigating from page to page. With the ability to do this through the use of native CSS code is great for developers, as additional markup code isn’t needed and the ability to use classes help significantly when developing websites.
