Carrousel automatique sur un site web : bonne idée ou fausse bonne idée ?

J’ai déjà par­lé ici de la place des vidéos dans le Hero des sites web. 

Un peu dans la même veine, j’a­borde aujourd’­hui la ques­tion de car­rou­sels auto­ma­tiques.

J’a­voue, je ne suis pas super fan quand il y a trop de choses qui bougent sur un site web. D’ailleurs, pour les per­sonnes qui ont un trouble de l’at­ten­tion cela peut-être perturbant. 

On en ren­contre beau­coup sur les sites web. On les voit sur les pages d’accueil, dans les sec­tions de témoi­gnages, dans les blocs d’articles récents, dans les gale­ries de pro­duits ou encore dans les bandes de logos clients qui défilent. Ils donnent une impres­sion de mou­ve­ment, de moder­ni­té et de dynamisme. 

À pre­mière vue, ils semblent pra­tiques : ils per­mettent d’afficher plu­sieurs infor­ma­tions dans un espace réduit, sans trop allon­ger la page.

Mais est-ce vrai­ment une bonne idée ? Un car­rou­sel auto­ma­tique sur un site web aide-t-il réel­le­ment les uti­li­sa­teurs et uti­li­sa­trices à trou­ver l’information, ou sert-il sur­tout à rendre la page plus ani­mée visuel­le­ment ? La réponse est : ça dépend. Le car­rou­sel auto­ma­tique n’est pas for­cé­ment à ban­nir, mais il doit être uti­li­sé avec beau­coup de pru­dence. Dans de nom­breux cas, il est choi­si par faci­li­té, ou juste parce qu’on aime quand ça bouge, alors qu’une mise en page plus simple, plus fixe et mieux hié­rar­chi­sée serait plus efficace.

Cet article n’en­gage que moi et reflète ce que je pense des car­rou­sels automatiques.

Qu’est-ce qu’un carrousel automatique sur un site web ?

Un car­rou­sel auto­ma­tique est une zone de conte­nu qui change toute seule, sans action de l’utilisateur. Il peut s’agir d’un sli­der d’images, d’un ban­deau d’actualités, d’une sélec­tion d’articles, de pro­duits qui défilent, de témoi­gnages clients ou d’une ligne de logos par­te­naires.
Le point com­mun est tou­jours le même : le conte­nu bouge, défile ou change à un rythme déci­dé par le site, et non par l’internaute. C’est cette auto­ma­ti­sa­tion qui pose sou­vent problème.

Il faut donc dis­tin­guer deux choses. 

• Un car­rou­sel manuel, que l’utilisateur contrôle avec des flèches, des bou­tons ou un geste tac­tile, peut être per­ti­nent dans cer­tains contextes. 
• Un car­rou­sel auto­ma­tique, en revanche, impose son rythme. Et sur le web, impo­ser un rythme à l’utilisateur est rare­ment une bonne idée.

Pourquoi les carrousels automatiques sont-ils autant utilisés ?

Si les car­rou­sels auto­ma­tiques sont si popu­laires, c’est parce qu’ils répondent à un vrai besoin côté concep­tion. Quand on crée une page web, on veut sou­vent mon­trer beau­coup de choses : plu­sieurs offres, plu­sieurs articles, plu­sieurs réfé­rences, plu­sieurs réa­li­sa­tions, plu­sieurs mes­sages commerciaux.

Le car­rou­sel auto­ma­tique donne alors l’impression de résoudre un pro­blème de place. Au lieu de choi­sir une seule infor­ma­tion ou d’allonger la page, on met tout dans un même bloc qui défile hori­zon­ta­le­ment. Visuel­le­ment, c’est sédui­sant. La page semble plus vivante. Le client voit que plu­sieurs conte­nus sont pré­sents. Le desi­gner peut ajou­ter du mou­ve­ment. Tout le monde a l’impression d’avoir gagné quelque chose.

Mais ce gain est par­fois trom­peur. Ce n’est pas parce qu’une infor­ma­tion est pla­cée dans un car­rou­sel qu’elle sera vue. En réa­li­té, les per­sonnes peuvent très bien pas­ser sur la page avant même que les conte­nus sui­vants ne soient appa­rus.

Le prin­ci­pal pro­blème des car­rou­sels auto­ma­tiques : les uti­lis­teurs uti­li­sa­trices ne contrôlent pas le rythme.

Le défaut majeur d’un car­rou­sel auto­ma­tique sur un site web est qu’il impose un rythme de lec­ture. Or, tout le monde ne lit pas à la même vitesse. Cer­tains uti­li­sa­teurs lisent vite, d’autres prennent plus de temps. Cer­tains com­prennent immé­dia­te­ment un visuel ou un logo, d’autres ont besoin de s’arrêter pour iden­ti­fier l’information.

Si le car­rou­sel défile trop vite, l’utilisateur n’a pas le temps de lire. S’il défile trop len­te­ment, il ne ver­ra peut-être jamais les élé­ments sui­vants. Et s’il arrive au milieu d’un mes­sage, il doit attendre que le cycle recom­mence.

C’est par­ti­cu­liè­re­ment gênant pour les conte­nus tex­tuels : témoi­gnages clients, extraits d’articles, des­crip­tions de pro­duits ou argu­ments com­mer­ciaux. Un texte qui dis­pa­raît pen­dant qu’on le lit crée de la frus­tra­tion. L’utilisateur et l’u­ti­li­sa­trice ne devrait jamais avoir à se battre contre l’interface pour accé­der à une information.

Le carrousel automatique attire l’œil, mais pas toujours au bon endroit

On uti­lise sou­vent le mou­ve­ment pour atti­rer l’attention. C’est vrai : un élé­ment qui bouge capte le regard. Mais ce n’est pas tou­jours une qua­li­té.

Sur une page web, l’attention du visi­teur est pré­cieuse. Si un car­rou­sel bouge en per­ma­nence pen­dant que l’internaute essaie de lire un conte­nu, il peut deve­nir une dis­trac­tion. Le mou­ve­ment attire l’œil, mais il peut aus­si le détour­ner de ce qui est vrai­ment impor­tant : com­prendre l’offre, lire un texte, cli­quer sur un bou­ton, rem­plir un for­mu­laire ou prendre une décision.

Un site web effi­cace n’est pas for­cé­ment un site qui bouge beau­coup. C’est un site qui guide clai­re­ment l’utilisateur. Le mou­ve­ment peut accom­pa­gner cette expé­rience, mais il ne doit pas la perturber.

Les logos clients qui défilent : utile ou inutile ?

Le car­rou­sel de logos clients est un cas très cou­rant. L’idée est com­pré­hen­sible : affi­cher des réfé­rences per­met de ras­su­rer. Voir que d’autres entre­prises ont déjà fait confiance à une marque peut créer un sen­ti­ment de cré­di­bi­li­té.

Mais le défi­le­ment n’est pas tou­jours néces­saire. Si les logos sont impor­tants, pour­quoi les cacher dans un mou­ve­ment conti­nu ?

Pour moi, une grille fixe peut être plus effi­cace. Elle per­met de voir immé­dia­te­ment les réfé­rences, sans attendre, sans perdre un logo qui passe trop vite, sans devoir suivre un mou­ve­ment hori­zon­tal.

Un car­rou­sel de logos peut res­ter accep­table s’il est très lent, dis­cret et pure­ment déco­ra­tif. Mais la per­sonne qui visite votre site, n’a peut-être pas le temps d’at­tendre pour voir le reste, elle peut aus­si sen­tir de l’im­pa­tience. Si ce car­rou­sel contient des réfé­rences impor­tantes pour ras­su­rer, mieux vaut, pour moi, les affi­cher clai­re­ment. Là encore, il faut se deman­der si le car­rou­sel sert vrai­ment l’internaute ou s’il sert sur­tout à rendre la sec­tion plus animée.

Les carrousels d’articles : une fausse bonne idée ?

Les car­rou­sels d’articles sont éga­le­ment très fré­quents. On les uti­lise pour affi­cher les der­niers articles du blog, les conte­nus à la une ou les res­sources recom­man­dées. L’intention est bonne : don­ner accès à plu­sieurs conte­nus sans prendre trop de place.
Mais dans la pra­tique, le car­rou­sel peut réduire la visi­bi­li­té des articles. Le pre­mier élé­ment est géné­ra­le­ment vu. Les sui­vants dépendent du temps pas­sé par l’utilisateur dans cette zone. Si la per­sonne scrolle rapi­de­ment, elle ne ver­ra jamais les autres articles.

Pour des articles de blog, une grille de cartes est sou­vent plus claire. On peut voir ain­si plu­sieurs titres en même temps, com­pa­rer les sujets, choi­sir ce qui l’intéresse et garde le contrôle. Un car­rou­sel manuel peut aus­si fonc­tion­ner, mais la rota­tion auto­ma­tique n’apporte pas tou­jours de valeur.

Si l’objectif est de faire lire les articles, il faut d’abord les rendre visibles.

L’accessibilité : un point à ne pas négliger

Les car­rou­sels auto­ma­tiques posent aus­si des ques­tions d’acces­si­bi­li­té. Les conte­nus qui bougent, défilent ou se mettent à jour auto­ma­ti­que­ment peuvent gêner cer­taines per­sonnes : per­sonnes ayant des troubles de l’attention, per­sonnes mal­voyantes, per­sonnes uti­li­sant un lec­teur d’écran, per­sonnes navi­guant au cla­vier ou per­sonnes qui ont sim­ple­ment besoin de plus de temps pour lire.

Les recom­man­da­tions WCAG indiquent que lorsqu’un conte­nu bouge, cli­gnote, défile ou se met à jour auto­ma­ti­que­ment pen­dant plus de cinq secondes, l’utilisateur doit pou­voir le mettre en pause, l’arrêter ou le mas­quer, sauf cas par­ti­cu­lier où le mou­ve­ment est essen­tiel. Voir, en par­ti­cu­lier les cri­tères 2.2.1 et 2.2.2.

Le W3C rap­pelle aus­si qu’un car­rou­sel acces­sible doit notam­ment pou­voir être mis en pause, être uti­li­sable au cla­vier et trans­mettre cor­rec­te­ment les chan­ge­ments de conte­nu aux uti­li­sa­teurs de lec­teurs d’écran.

Autre­ment dit, un car­rou­sel auto­ma­tique ne devrait jamais être ajou­té sans réflé­chir à ces aspects. Un simple sli­der visuel­le­ment joli peut deve­nir un obs­tacle pour une par­tie des visiteurs.

Le carrousel pourrait-il correspondre à un problème de hiérarchisation dans un site web ?

Le vrai sujet est peut-être là. Très sou­vent, on uti­lise un car­rou­sel parce qu’on n’a pas vou­lu choi­sir. On veut mettre plu­sieurs mes­sages en avant, plu­sieurs pro­duits, plu­sieurs offres, plu­sieurs articles, plu­sieurs réfé­rences. Alors on les empile dans un bloc qui défile.

Mais quand on crée un site web, on doit faire des choix. Il doit hié­rar­chi­ser l’information. Il doit aider les per­sonnes à com­prendre ce qui est prio­ri­taire.

Si une infor­ma­tion est essen­tielle, elle doit être visible immé­dia­te­ment. Elle ne doit pas dépendre d’une ani­ma­tion ou d’un cycle de défi­le­ment. Si un bou­ton d’action est impor­tant, il ne doit pas dis­pa­raître dans une slide. Si un mes­sage com­mer­cial est fort, il mérite une place claire et fixe.

Le car­rou­sel auto­ma­tique donne par­fois l’illusion de tout mon­trer. En réa­li­té, il peut sur­tout cacher une par­tie du contenu.

Dans quels cas un carrousel automatique peut-il être acceptable ?

Il ne faut pas non plus tom­ber dans l’excès inverse. Tous les car­rou­sels ne sont pas mau­vais. Un car­rou­sel auto­ma­tique peut avoir sa place s’il est uti­li­sé pour des conte­nus secon­daires, courts et essen­tiel­le­ment visuels.

Par exemple, une gale­rie de visuels peut appor­ter du rythme si elle ne contient pas d’information essen­tielle. Une mise en avant de pro­duits peut fonc­tion­ner si l’utilisateur peut aus­si retrou­ver ces pro­duits ailleurs, de manière fixe et claire. Per­son­nel­le­ment, je trouve inté­res­sant d’af­fi­cher dans un sli­der les chambres d’un hôtel, car on voit rapi­de­ment si le stan­ding cor­res­pond à nos attentes.

Le car­rou­sel auto­ma­tique peut donc être un com­plé­ment. Il ne devrait pas être le cœur de l’expérience uti­li­sa­teur. Il est accep­table quand il ajoute un peu de mou­ve­ment sans nuire à la lisi­bi­li­té, sans cacher une infor­ma­tion impor­tante et sans empê­cher les visi­teurs de gar­der le contrôle.

Quelques bonnes pratiques si l’on utilise un carrousel automatique

Si l’on décide mal­gré tout d’utiliser un car­rou­sel auto­ma­tique sur un site web, il faut res­pec­ter quelques prin­cipes simples.

• Le car­rou­sel doit pou­voir être mis en pause. 
• Les flèches ou bou­tons de navi­ga­tion doivent être visibles. 
• On doit pou­voir pas­ser d’un élé­ment à l’autre lui-même. 
• Le conte­nu ne doit pas défi­ler trop vite. 
• Les textes doivent res­ter courts, pour lais­ser le temps de lire. 
• Sur mobile, il faut véri­fier que le car­rou­sel est lisible, facile à mani­pu­ler et qu’il ne gêne pas le défi­le­ment de la page.
• Il est aus­si pré­fé­rable d’éviter les car­rou­sels auto­ma­tiques pour les conte­nus stra­té­giques. Une offre prin­ci­pale, un appel à l’action, un mes­sage de réas­su­rance impor­tant ou une infor­ma­tion de ser­vice ne devraient pas dépendre d’une animation.
• Enfin, il faut tes­ter. Un car­rou­sel peut sem­bler joli au moment de la créa­tion, mais se révé­ler pénible à l’usage. Le bon réflexe est de se deman­der : est-ce que ce car­rou­sel aide vrai­ment l’utilisateur, ou est-ce qu’il ajoute sim­ple­ment du mouvement ?
  

Quelles alternatives aux carrousels automatiques ?

Dans beau­coup de cas, il existe des solu­tions plus simples et plus effi­caces.

Pour des logos clients, une grille fixe est sou­vent plus lisible. Pour des articles, une sec­tion avec trois ou quatre cartes visibles fonc­tionne très bien. Pour des témoi­gnages, on peut affi­cher un témoi­gnage fort, puis pro­po­ser un lien vers une page dédiée. Pour des pro­duits, une sélec­tion claire avec des cartes fixes per­met de com­pa­rer plus faci­le­ment.

Ces alter­na­tives ont un avan­tage majeur : elles laissent les per­sonnes qui visitent le site, maître de leur lec­ture. Elles choi­sissent l’information, ce qu’elles veulent regar­der, elles avancent à leur rythme.

Un bon desi­gn web ne consiste pas à tout ani­mer. Il consiste à rendre l’information claire, acces­sible et facile à comprendre.

Alors, faut-il utiliser un carrousel automatique sur un site web ?

Le car­rou­sel auto­ma­tique n’est pas for­cé­ment une mau­vaise idée, mais il est sou­vent uti­li­sé pour de mau­vaises rai­sons. Il per­met de gagner de la place, de mon­trer plu­sieurs conte­nus et d’ajouter du mou­ve­ment à une page. Mais il peut aus­si nuire à la lisi­bi­li­té, détour­ner l’attention, poser des pro­blèmes d’accessibilité et cacher des infor­ma­tions impor­tantes.
On doit se poser des ques­tions telles que :
« Est-ce que je peux mettre un car­rou­sel ? »
« Est-ce que ce car­rou­sel aide réel­le­ment l’utilisateur ?« 

Si la réponse est oui, il faut le conce­voir avec soin, pré­voir des contrôles, pen­ser à l’accessibilité et évi­ter d’y pla­cer des infor­ma­tions essentielles. 

Si la réponse est non, mieux vaut choi­sir une mise en page plus simple : une grille, un encart fixe, une sélec­tion visible ou une hié­rar­chie de conte­nu plus claire.

Sur un site web, tout ce qui bouge attire l’attention. Mais atti­rer l’attention ne suf­fit pas. Encore faut-il aider à com­prendre, à choi­sir et à agir.

Cré­dit image à l » Une : Ran Berkovichs