7.3 Animations

Animations (especially Javascript) make pages heavy, require server queries, and extra resources to be displayed. They must therefore be used only when user experience justifies it.

Keep animations to a minimum

Animations also bring accessibility issues. It is not rare to see animations bother users, or worse, making them feel nauseated: spinning tiles, horizontal and vertical scrolling elements, chatbot pop-ups, etc. Often used as simple "ornaments" for a webpage, these animations disturb the user experience and make the page unnecessarily heavy.

Everyone remembers their early days on PowerPoint, where each slide had a different animation just because it could be done. It is best not to repeat those mistakes! Ideally, only animations that really improve user experience should be retained, for instance a loading bar.

RGSEN Criterion 4.6
Using animation only when they deliver information would partly fulfill the recommendations of Criterion 4.6 of the General Repository for the Eco-design of Digital Services (Référentiel Général de l'Ecoconception des Services Numériques - RGESN).
See the repository (French)

Avoid animated GIFs and carousels in autoplay

Generally speaking, users should be able to stop animations.

The problem lies with animated GIFs and other animations that cannot be controlled, as highlighted by the Opquast web quality assurance checklist:

Whenever a visual animation lasts more than 5 seconds or a sound lasts more than 3 seconds, systematically provide the multimedia object with the means to control it: start, stop, mute or volume.

Do not use animated graphics that cannot be controlled, or even only partially controlled by the user (animated gif images in particular).

Video content and animations, sounds and flashes can be paused, Opquast (consulter en ligne)

Carousels in autoplay should also be avoided because of their weight and the resources they employ. They also degrade the user experience and accessibility more often than not.

You can’t count on people seeing the information in carousels on websites and intranets. Whether looking at content on a 30-inch or 3-inch display, people often immediately scroll past these large images and miss all of the content within them.

Carousel Usability: Designing an Effective UI for Websites with Content Overload, Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility, Nielsen Norman Group, traduction par Anne Faubry (consulter en ligne)

RGSEN Criterion 4.1
Turning off autoplay for animations would partly fulfill the recommendations of Criterion 4.1 of the General Repository for the Eco-design of Digital Services (Référentiel Général de l'Ecoconception des Services Numériques - RGESN).
See the repository (French)

Finding alternatives to chatbots

Chatbots are becoming more and more common as tools offering help as soon as a page is loaded. They present several issues:

Environmental impact: Coded in Javascript, using queries to external servers, or even resorting to artificial intelligence, these chatbots have a negative impact on the size of the page and the number of queries sent.
Worsening browsing experience: Unwanted pop-ups, floating menus hiding content, jiggling animations to draw attention, "fake waiting time" (to simulate a human-like response), etc. These chatbots often hurt the comfort of the user while browsing.
Frustration: Not understanding user prompts, lack of a human representative outside business hours, etc. Chatbots are often a source of frustration and a waste of time.
Personal data collection: Often handled by third-party companies, these chatbots require sharing user data with another company, and therefore accepting cookies.
Cost: Not only is the added value brought by chatbots debatable, but they are also quite costly. Between the fees paid to third parties for licensing and per-user interactions, and the artificial intelligence that can cost millions to develop in the first place, exploring alternatives can prove very economically savvy.

As suggested by the Nielsen-Norman Group, even in cases where a chatbot could actually have added value, it would be preferable to invest in improving user experience on the website, which ensures a better return on investment, rather than creating an often overlooked chatbot. (The User Experience of Chatbots, Nielsen Norman Group)

Example

Replaceable chatbot

In this example, the chatbot appears in the lower part of the page to provide assistance. This actually is done by asking a question and waiting, or leaving an email address to receive the answer.
Chabots like this one can easily be replaced with a "Contact" button in an easy-to-see location on the page.

Chatbot appearing in the bottom of a page to provide assistance

Prioritize instant transitions over animated ones (Javascript)

To avoid useless Javascript animation effects, it is best to prioritize making things appear instantly. For instance, a registration form can be made to appear without a fade-to-black effect in the background.

Pour aller plus loin :

Eco-design: 115 best practices - 4th edition on github - GreenIT (github) (French)