Ergonomie des carrousels : 10 principes à respecter
Publié par Jean-Marc Hardy le 30 janvier 2012
Depuis quelques années déjà, le carrousel s’est imposé comme une excellente solution pour mettre en avant les actualités principales d’un site web. Le principe est le suivant : afficher des sujets en grand format qui « tournent » en alternance, l’un après l’autre. Une bonne manière de gérer l’espace limité de l’écran et d’en augmenter l’impact. C’est prouvé : un grand format attire davantage l’attention qu’un puzzle d’informations qui se font concurrence. Cependant, la qualité des carrousels que vous rencontrerez sur le web apparaît très variable. Certaines critiques régulièrement entendues, l’expérience de tests utilisateurs et le bon sens m’amènent à proposer 10 recommandations.
1. Le rythme
C’est la critique la plus fréquemment exprimée. « Le carrousel tourne trop vite ! ». Rarement l’inverse. Très souvent, l’utilisateur n’a même pas le temps de lire le quart du texte affiché que le diaporama l’entraîne ailleurs. Un carrousel qui tourne trop vite gêne également la lecture des autres éléments de la page. Les utilisateurs détestent le mouvement nerveux et les effets d’animation extravagants, qui sonnent trop publicitaires. Veillez à ce que le carrousel tourne calmement. 8 à 10 secondes d’affichage s’avèrent souvent nécessaires. Testez le rythme du carrousel dans plusieurs environnements, afin d’en jauger la fiabilité.
2. La transition
Dans certains cas, l’utilisateur n’aura même pas remarqué que l’affichage a changé. Un effet de transition explicite, sous la forme d’un fondu enchaîné par exemple, marquera plus clairement le mouvement de carrousel. La fluidité de la transition a de l’importance. Pour cette raison, le fondu enchaîné a ma préférence : il permet de quitter un sujet avec douceur et de glisser vers le sujet suivant. Un bref passage au noir peut également convenir. Évitez par contre les effets folkloriques, du genre « spirale » ou « bienvenue à la foire ».
3. Le contrôle utilisateur
Le mouvement imposé à l’utilisateur reste une attitude « offensive » susceptible de générer des frustrations. La seule manière de le compenser est de redonner ce contrôle à l’utilisateur sous la forme d’éléments d’interaction intuitifs et explicites.
L’utilisateur doit pouvoir :
- Stopper l’animation. Y mettre une pause.
- Revenir en arrière.
- Parcourir le diaporama à son rythme et à sa manière.
Plusieurs solutions existent…
Ci-dessous, la barre de contrôle indique clairement le nombre de sujets disponibles et propose un contrôle sur la navigation. Le bouton « pause » est particulièrement précieux.
Les petites flèches latérales restent également un moyen de contrôler le défilement.
Les petits ronds sont devenus presqu’un standard. Je dis « presque », car ils restent moins explicites. Si vous en faites usage, veillez à les rendre suffisamment présents.
Ci-dessous, la barre de contrôle proposée sur Arte.tv présente le désavantage de dépendre de la couleur de fond. Sur fond clair, les petits ronds deviennent quasi invisibles.
Lorsque l’utilisateur fait le choix d’afficher un sujet, le carrousel devrait s’arrêter. De nombreux sites web relancent l’animation après quelques secondes, à la grande frustration des utilisateurs.
Un passage de la souris sur le sujet affiché devrait en stabiliser l’affichage. La plupart du temps, un utilisateur bouge sa souris sur un élément parce qu’il s’y intéresse.
4. Le nombre de sujets en alternance
Si les sujets sont trop nombreux, la navigation devient compliquée. Les sujets en fin de liste se retrouvent très déforcés et le cycle, trop espacé. Ci-dessous, le choix se disperse et les petits ronds en viennent à mordre le contenu du carrousel.
En-dessous de trois sujets, le carrousel perd son sens. Il m’est arrivé de voir des carrousels à un seul sujet, tournant sur eux-mêmes. Absurde.
Derrière un carrousel, il y a donc une ligne éditoriale.
Dans la plupart des cas, optez pour 3 à 5 sujets.
Certaines formules d’affichage des sujets à la verticale, comme ici sur Yahoo! Health, permettent de lister une dizaine de sujets.
5. La position du carrousel dans la page
Le carrousel, comme élément de l’interface, s’est imposé au centre de l’écran, dans la partie haute.
Lorsque le carrousel est positionné sous la ligne de flottaison, ou encore dans une zone latérale, il perd énormément de son impact et provoquera une expérience utilisateur déroutante.
Le but du carrousel est de focaliser le centre de l’attention.
6. La quantité de texte
En dix secondes, vos visiteurs liront 20 à 30 mots.
Ci-dessous, la quantité de texte moyenne affichée sur le carrousel d’Arte TV, pendant environ 10 secondes. Le texte peut être lu de bout en bout par un utilisateur attentif. Mais il ne faudrait pas faire plus long.
Ci-dessous, quel est le carrousel le plus lisible ?
« Wrath of Heroes » n’accroche pas aussi bien que « Truth About Beer ».
Car trop de texte induit aussi une police de caractère trop petite.
Notez aussi la redondance : « Wrath of Heroes » apparaît deux fois, dans le texte et dans la partie graphique. Une telle redondance ne devrait pas être permise dans l’espace limité du carrousel.
7. Le visuel
Mieux vaut un seul visuel impactant qu’un effet de montage.
Privilégiez les visuels concrets qui représentent le contenu plutôt que les effets de style.
Ci-dessous, sur le site officiel de la présidence française, le choix d’un visuel unique nous semble plus porteur que la tentation de réaliser un patchwork. Une mise en page en puzzle va à contre-sens de l’intérêt du carrousel qui consiste précisément à exploiter un large format.
8. La clarté de l’interaction proposée
En dehors de la possibilité d’interagir avec la navigation au sein du carrousel (voir point 3 ci-dessus), l’utilisateur peut généralement cliquer dans la zone de contenu pour accéder au détail de l’information.
Nous recommandons :
- Une seule zone de clic de préférence
- Visuellement présente (suffisamment grande et contrastée)
- Offrant une interaction explicite (par exemple un bouton, une flèche,…)
- Positionnée de préférence en bas à droite
Ci-dessous, le bouton « Play video » répond aux bonnes pratiques : contrasté, bien positionné dans le flux de lecture, libellé explicitement, invitant au clic.
Ci-dessous, le carrousel d’Umicore ne laisse pas apparaître la possibilité d’une interaction. Peu d’utilisateurs seront enclins à cliquer. Ce type de présentation avec du texte fondu dans le visuel et aucune zone de clic explicite sera reçu comme un placard publicitaire, même si le contenu mène en réalité vers de l’information.
9. La cohérence
D’un sujet à l’autre, mais aussi d’un jour ou d’une semaine à l’autre, il importe de respecter une cohérence pour créer des repères et la sensation d’un environnement éditorial maîtrisé.
La cohérence se vérifie à différents niveaux :
- Cohérence graphique (typographie, coloris, traitement des photos,…)
- Cohérence fonctionnelle (zones d’interaction, zones de clic,…)
- Cohérence éditoriale (nature des contenus abordés, ton utilisé,…)
Ci-dessous, dans son carrousel, Arte TV fait varier la position de son descriptif texte, mais la typographie ainsi que le volume de texte restent cohérents. Une bonne manière de créer un fil rouge tout en s’accordant des variations visuelles qui relancent l’attention.
10. L’accessibilité de la technologie adoptée
Plusieurs moyens existent de créer un carrousel : Flash, CSS, Javascript,… Le choix de la technologie influencera plusieurs facteurs :
- Accessibilité du contenu par les environnements les plus variés (mon iPad ne supporte pas Flash, par exemple)
- Indexation par les moteurs de recherche (de nombreux carrousels présentent le désavantage d’intégrer du texte non reconnu comme tel, non indexable)
- Facilité d’édition par le client (un carrousel en Flash avec des transitions méga fluides, c’est très bien, mais si les contributeurs de contenu sont incapables de l’alimenter, on perd en réactivité)
Pour l’entreprise qui ne dispose pas d’un graphiste sous la main, certaines solutions plus sobres ou plus formatées peuvent s’avérer intéressantes. Ci-dessous, Google Analytics propose un carrousel quasi full text.
Tenez, par rapport à ce dernier point (les solutions techniques), je suis preneur de vos avis et réactions !
Pour en savoir plus (en Anglais) :
Et si vous désirez établir une ligne éditoriale pour alimenter votre carrousel en contenus efficaces, contactez-moi !
