5.3. Animations
Animations (especially in Javascript) weigh down the page, require calls to the server, and use resources to be displayed on a screen. Therefore, they should only be used if the need is justified and they improve the user experience.
Limit animations
Often, animations cause accessibility issues. It is not unusual to see animations that confuse users or worse make them nauseous. Spinning tiles, vertical and horizontal scrolling elements, chatbots jumping out of nowhere, and the like, are all good examples.
Remember the early days of PowerPoint when you had a different animation on each slide just because you could. Let's try not to repeat the mistakes of the past!
Avoid animated GIFs and autoplay carousels
As a general rule, animations should be able to be stopped par les utilisateurs. It is also a best practice for accessibility reasons.
As highlighted by the web quality Opquast checklist, animated GIFs which are not controllable can be particularly problematic:
Automatic carousels have a significant weight and use a lot of resources. It is recommended not to use them, as most of the time, they deteriorate user experience and reduce accessibility.
Find an alternative to chatbots
We see more and more chatbots offering us help as soon as we arrive on a site. Very often, these chatbots are more the result of a trend than a real help. Of course, their impact is not neutral. Besides, it is not uncommon that they fail to help and this leads to frustration for the user.
As suggested by the Nielsen-Norman Group, although in some cases chatbots can add value, it is better to invest in improving the user experience of the website which will bring a better return on investment, rather than creating a chatbot that isn’t used. (The User Experience of Chatbots, Nielsen Norman Group).
Example of a chatbot that can be replaced
In this example, the chatbot appears at the bottom of the page to offer help. It asks you a question and then you wait for an answer, or you leave your email to get the answer.
Chatbots like this can be replaced by a "Contact” button.
Favor instant changes rather than animated ones (Javascript)
To avoid unnecessary animation effects in JavaScript, it is better to favor an instant response. For example, when a registration form appears, the form can appear directly without fading to black before loading the form.