Lors du développement d’un site, il n’est pas rare que le client nous demande d’intégrer des carrousels pour afficher la plupart du temps des images en pleine largeur. Mais ces bannières prennent généralement une place conséquente de l’écran et peuvent causer entre autres, des problèmes d’accessibilités. Nous allons voir pourquoi le carrousel est une mauvaise pratique, comment pallier à ces problèmes et les utiliser à bon escient.
Nous déconseillons les carrousels pour plusieurs raisons.
L’utilisation de composant dynamique peut gêner la lecture de l’utilisateur.
- Le défilement automatique des slides sans moyen de le mettre en pause risque de déconcentrer le visiteur, allant jusqu’à le voir quitter le site si cela devient trop gênant.
- La navigation entre les slides peut ne pas être optimale si elle n’est pas claire ou si des éléments sont manquants. La pagination à point matérialisée la plupart du temps par des petits rond de couleur n’est pas toujours facile à voir et à utiliser.
- Il n’est pas rare de rencontrer des problèmes de contraste si du texte ou des boutons sont affichés par-dessus une image du slider.
- Enfin, les carrousels peuvent se révéler impossibles à utiliser par des lecteurs d’écran si rien n’est mis en place dans le code pour leur permettre de naviguer dessus.
De nombreux tests utilisateur révèlent généralement un faible taux de clic sur les slides de carrousels, en particulier après le deuxième élément.
Les utilisateurs identifient assez vite les carrousels et essaient ensuite de les éviter, car ils ne contiennent généralement pas d’informations utiles, mais le plus souvent du contenu promotionnel ou des éléments purement graphiques.
Nous nous posons généralement la question suivante : si le contenu est pertinent et utile pour l’utilisateur, pourquoi le cacher sur plusieurs slides dans un carrousel, au risque que toutes ne soient pas vu.
Nous préférons mettre en avant ces informations par des designs plus statiques et sans actions de la part de l’utilisateur afin d’être sûr que toute l’information soit vu.
L’utilisation de carrousel nécessite l’utilisation de Javascript. Or ce language peut alourdir le site et prolonger les temps de chargement.
Ce qui peut nuire au référencement puisque Google pénalise les sites dont l’affichage est trop lent.
Nous avons donc tout intérêt à limiter le nombre de scripts dans nos applications, quitte à trouver des alternatives aux carrousels.
Les carrousels doivent être réservés pour l’affichage de contenu esthétique ou secondaire, car nous savons que rares sont les utilisateurs qui prennent le temps de voir tous les éléments d’un carrousel.
Il est pertinent d’avoir recours à un carrousel pour afficher une galerie d’image. Nous en utilisons par exemple pour afficher les images d’un produit. Ainsi, nous pouvons afficher plusieurs images au même endroit sans que l’utilisateur n’ait besoin de scroller pour voir chaque image, surtout si le produit en contient beaucoup.
Nous utilisons également les carrousels pour afficher des informations complémentaires mais pas prioritaires comme des avis clients par exemples.
Enfin, il est aussi intéressant d’utiliser des carrousels seulement en mobile afin de limiter la longueur du scroll vertical et rendre la navigation sur mobile plus agréable. Nous en utilisons pour afficher des cartes d’actualités par exemple. Le contenu est alors concentré au même endroit, ce qui rend aussi la lecture plus facile.
Si le site nécessite l’utilisation d’un carrousel, certaines règles doivent être respectées
- Il ne doit pas inclure plus de 4 ou 5 éléments. Il est à noter que plus les éléments sont éloignés du premier élément affiché, moins ils seront consultés. Les utilisateurs allant rarement au-delà du deuxième élément.
- Ne pas utiliser de défilement automatique, ou mettre à disposition un moyen de stopper l’animation automatique.
- Mettre en place des animations de défilement agréable avec un temps de défilement raisonnable.
- Donner à l’utilisateur des repères de lecture afin qu’il sache à quel slide il se trouve.
- Utiliser une navigation claire et logique avec des flèches et des points suffisamment grands servant à la fois de pagination et pour passer les slides.
- Structurer le carrousel avec des attributs pour le rendre accessible à tous. Orange met à disposition un guide sur ce sujet.
L’utilisation de carrousel doit avant tout servir l’expérience utilisateur en proposant un affichage logique et pratique. Cependant, il faut se souvenir qu’il est rare que l’intégralité du contenu soit lue par le visiteur. Il faut donc limiter son utilisation à des contenus secondaire et dans des environnements particuliers où sa prise en main est plus logique (tablette, mobile).