Carrousel : Les bonnes pratiques

A l’origine, le web était HTML. Puis vinrent les Javascripts. Ces petits bouts de codes ont largement amélioré la consultation des sites, notamment sur le rapidité d’exécution de nos navigateurs préférés. C’est un peu comme si vous rajoutiez une batterie de foils sur chaque coque d’un trimaran.

L’un des javascripts favoris est le carrousel. Cet élément est aujourd’hui standardisé sur la majorité des sites web à contenus et permet de valoriser les contenus stars, généralement par un défilement horizontal du plus bel effet, si l’on respecte quelques règles de base…

1. Laissez l’internaute prendre la main sur l’outil.
   Lorsque l’utilisateur clique sur les flèches (ou numéros) de défilement, le mécanisme de passage à la slide suivante doit s’arrêter, sinon l’utilisateur sera perdu ! Par ailleurs, certains utilisateurs parcourent les éléments à leur rythme, notamment si des vignettes permettent de prévisualiser les contenus.
2. Soignez la présentation des vignettes
   Il arrive que votre carrousel comporte un nombre important de slides. La consultation peut s’avérer pénible et des regroupements s’imposent. Vous avez donc le choix de proposer des « groupes de slides », avec ou sans visuels, sur le côté – positionnés verticalement – ou en dessous du contenu star – en rangée donc -. Lors du défilement, pensez à appliquer le glissement sur tout le groupe (généralement 3 à 5 articles), ce qui limitera le nombre de clics.
3. Affichez des repères de navigation
   Les carousels sont comme des mini-sites à plat. Il convient donc de placer des repères de navigation, notamment lorsque les contenus sont multiples. Une surbrillance, un cadre, un élément en position ON, … Le choix est vaste, just do it.
4. Tiens, je l’ai déjà vu, non ?
   Un carrousel est un élément qui tourne en boucle. Pensez donc à en indiquer la fin, où a minima à indiquer à l’internaute qu’il a fait un tour complet de manège et qu’il recommence … si vous l’y autorisez. Car finalement c’est aussi drôle de défiler à l’envers donc de supprimer la flèche « suivant » au dernier élément, tout comme vous l’aviez fait pour la flèche « précédent » au premier, no ?
5. De l’air !
   Les boutons de navigation doivent être « calibrés » pour toutes les tailles de doigts et toutes les variations de vue : Soignez le contraste (avec des outils de test ici ou là), la position (plutôt au-dessus).