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:

As soon as a visual animation lasts more than 5 seconds or a sound lasts more than 3 seconds, systematically provide the multimedia object with the necessary control means: start, stop, mute, or volume.

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

Translated from the French - Animations, sounds, and flashes can be paused, Opquast

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.

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, or at least the content that’s in any frame other than the first.

Carousel Usability: Designing an Effective UI for Websites with Content Overload, Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility, Nielsen Norman Group

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.

Chatbot appearing at the bottom of the page, offering help to the user.

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.

More info

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 4.0 International license.

Come talk with us on https://slack.designersethiques.org, channel #projet_ecoconception (in French).

Authors of the guide: Aurélie Baton and Anne Faubry.