Curseurs de carrousel de site Web: Pourquoi, comment et quand les utiliser (y compris 13 exemples)

Parlons des carrousels de site Web, aka curseurs, aka diaporamas, aka galeries.

Il semble que l’ensemble d’Internet ait sa propre variation, mais collectivement, nous voulons tous dire que l’élément de conception avec le contenu en mouvement et souvent, affiche trois petits points en bas.

En ce qui concerne les carrousels, vous êtes soit en équipe 👏 soit en équipe 🙅. La première équipe comprend généralement les clients, la deuxième équipe les concepteurs Web.

Chez Ycode, nous sommes la Suisse. Nous pensons que les carrousels peuvent être les pièces maîtresses qui rendent la conception de votre site Web plus attrayante, mais qu’ils ont également le potentiel de réduire la convivialité de votre site Web.

Dans cet article, nous examinerons les meilleures pratiques du carrousel (et ce qu’il faut éviter). Puisque les carrousels peuvent être utilisés à de nombreuses occasions, nous vous montrerons différents exemples de curseurs bien réalisés.

Meilleures pratiques de conception de carrousel (ou surtout, ce qu’il ne faut pas faire)

Bien qu’elles soient utilisées sur de nombreux sites Web, les conceptions de carrousel peuvent facilement manquer la cible. Il y a quelques bonnes raisons pour lesquelles. Commençons par certaines choses à éviter avant de vous parler des meilleures pratiques de carrousel que vous devriez utiliser.

Don À ne pas faire: Erreurs de carrousel à éviter

1. Contenu: Lorsqu’un carrousel veut en faire trop en trop peu de temps, cela peut faire tourner les yeux des visiteurs du site Web. Le texte ne peut pas être lu correctement, les informations sont manquées et les visiteurs perdent tout intérêt.

2. Conception: Si un curseur est mal conçu et ne se fond pas dans la conception de votre site Web, il peut être confondu avec une annonce. En conséquence, les gens défilent juste après le contenu. C’est ce qu’on appelle la cécité des bannières, un phénomène de conception Web où les gens ignorent le contenu qui ressemble à une publicité — consciemment ou inconsciemment.

3. SEO: Du point de vue SEO, évitez les en-têtes H1 multiples si vous utilisez des curseurs comme première chose sur la page. Chaque page Web doit avoir un H1 dans son code HTML. Si vous utilisez plusieurs H1 en raison des différentes diapositives, Google peut être confus quant aux mots clés les plus importants pour cette page Web. En outre, la structure du site Web peut ne pas être claire. Ces deux facteurs pourraient avoir un impact négatif sur votre classement.

4. Mobile: Pour les appareils mobiles, il est préférable d’opter pour des curseurs manuels. Assurez-vous que les gestes sont pris en charge (par exemple, les utilisateurs mobiles glissant pour afficher la diapositive suivante) et que les flèches sont clairement affichées et suffisamment grandes pour appuyer. Si vos diapositives contiennent du texte, vérifiez s’il est lisible sur les écrans mobiles.

5. Rotation: Avec notre durée d’attention limitée de nos jours, il est difficile de garder l’intérêt de l’utilisateur plus de quelques secondes. Puisque nous avons tous des endroits où être, gardez la quantité de curseur faible (moins de cinq) et donnez aux visiteurs la possibilité de contrôler le carrousel en affichant les commandes de curseur. Cela garantit que les gens n’ont pas à s’asseoir et à attendre la prochaine diapositive.

👍 À faire : Les meilleures pratiques du Carrousel

1. Gardez chaque diapositive simple afin que les informations puissent être digérées en quelques secondes.

2. Intégrez le design au reste de votre site Web.

3. Laissez les gens contrôler la rotation avec des flèches claires.

4. Ayez suffisamment de temps entre les diapositives (5 à 10 secondes), ou mieux encore, abandonnez complètement la lecture automatique.

5. Moins c’est plus (à la fois dans la conception et la quantité de diapositives).

6. Avant d’insérer un carrousel, demandez-vous: Cela ajoutera-t-il plus de valeur que le contenu statique?

Vous avez des doutes ?

En cas de doute, testez les deux options et voyez quelle option génère un taux de conversion plus élevé. Souvent, les clients demandent des diaporamas parce qu’ils ne sont pas clairs sur le message qu’ils veulent avant tout promouvoir. Pourquoi ne pas tout montrer ? Ils pensent.

Si c’est le cas, le travail consiste à créer un message plus ciblé — sans utiliser de curseur. Ou, choisissez l’USP (Point de vente unique) important et mentionnez les autres plus bas sur la page. Les gens sont plus susceptibles de faire défiler que de parcourir vos diapositives.

Si vous décidez que c’est un enfer oui, choisissez chaque diapositive intentionnellement. N’ajoutez pas seulement tous vos nouveaux blogs ou produits, mais choisissez soigneusement le contenu le plus important qui pourrait générer le plus d’interactivité de la part des utilisateurs.

13 exemples de carrousel de site Web

Maintenant que vous savez quoi ne pas faire, regardons les exemples de carrousel qui le clouent. Voici 13 exemples de carrousels de site Web, de la page d’accueil aux diaporamas de produits et d’images.

Carrousels de page d’accueil

Si vous pensiez que les camps étaient déjà assez divisés, vous n’avez pas rencontré de curseurs de page d’accueil. Certains root pour les placer directement en haut (souvent vu dans les modèles de blog), tandis que d’autres ne veulent pas les voir implémentés n’importe où au-dessus du pli.

La raison pour laquelle les gens évitent de placer un carrousel de page d’accueil directement en haut est qu’ils pensent que cet espace devrait être réservé à un message clair qui incite le lecteur à faire défiler vers le bas et à en savoir plus. Avec les carrousels, il est difficile de transmettre un message fort. De plus, vous ne savez pas si les gens voient toutes les diapositives ou défilent juste après.

Cependant, il y a aussi beaucoup de gens qui aiment accueillir les visiteurs avec un carrousel de page d’accueil pour montrer instantanément des histoires ou des produits en vedette.

Exemple 1 : Nicole Gibbons Studio

Le carrousel de la page d’accueil de Nicole Gibbons Studio fonctionne très bien! C’est bon pour plusieurs raisons.

• Il a une bonne fonctionnalité et ajoute de la valeur. La designer Nicole montre rapidement différents exemples d’intérieur directement lorsque les gens entrent sur son site Web

• Les diapositives sont manuelles, de sorte que l’utilisateur décide si et à quel rythme il souhaite les parcourir

• Il n’y a pas de chevauchement de texte à enlever de l’imagerie

Exemple 2: Urban Skin RX

Nous adorons ce carrousel compact d’Urban Skin RX, car il est très accessible.

Il intègre deux diapositives, toutes deux joliment conçues dans le même style que le reste du site Web. Le temps de rotation est réglé suffisamment longtemps pour lire le texte. Les grandes polices et les boutons clairs d’appel à l’action (CTA) facilitent la digestion de la diapositive.

Remarque: Si vous parcourez la page d’accueil de la marque, vous verrez qu’elle est adaptée aux personnes qui connaissent déjà Urban Skin RX. L’accent est mis sur la présentation des produits, sans expliquer pourquoi quelqu’un en a besoin en premier lieu. C’est pourquoi un curseur de produit s’adapte à la page — ils n’ont pas besoin de l’espace d’en-tête pour afficher un message clair qui motive les visiteurs à en découvrir plus.

Exemple 3: Mejuri

Ce que nous aimons dans ce carrousel de la bijouterie Mejuri, c’est qu’il montre deux choses différentes à la fois, sans se sentir écrasant.

L’ensemble du carrousel contient trois diapositives, dont chacune a deux options — voir la campagne ou acheter les bijoux. Les lignes de progression sont subtilement affichées en bas, bien que vous ayez peut-être besoin d’yeux d’aigle pour le repérer. Cela pourrait être un point d’optimisation.

Exemple 4: Pizza Fresh Brothers

Qui a dit qu’un curseur doit couvrir toute la largeur d’une page? Vous pouvez également diviser des sections en grilles et utiliser des curseurs plus petits, comme sur la page d’accueil de Fresh Brothers Pizza.

Certes, avec cette mise en page de conception Web, les choses peuvent aller un peu plus loin. Bien que les curseurs affichent des informations sur les visiteurs, l’œil est attiré par la grande image de gauche. Tout le monde ne verra pas les informations du curseur. Cependant, puisque les informations concernent les mesures COVID et les nouvelles pizzas que les gens verront de toute façon lors de leur commande, ce n’est pas grave.

Carrousels de produits

Les carrousels de produits sont là pour inciter visuellement les gens à en apprendre davantage sur le produit et, espérons-le, à l’acheter!

Ces types de carrousels sont généralement placés sur l’un des deux spots des sites de commerce électronique: la page d’accueil ou la page produit. Le curseur peut afficher différents produits ou un produit de différentes manières (montrant ses caractéristiques).

Exemple 5 : Keys Soulcare

Sur cette page produit Keys Soulcare, un carrousel est utilisé pour afficher chaque élément inclus dans le package rituel Harmony. Un curseur s’adapte parfaitement à la conception du site Web, car il permet aux visiteurs de voir toutes les informations pertinentes sans avoir à faire défiler.

Exemple 6: KeepCup

Ce carrousel de produits de KeepCup est placé au milieu du site e-commerce et vous permet de parcourir facilement les gobelets à emporter les plus populaires de la marque. Prenez note de la façon dont le nom, le prix, le bouton d’achat et les flèches sont placés – super élégant (accessoires pour les graphistes).

Exemple 7: Mal du pays

La société de bougies homesick utilise une variété d’éléments de curseur sur son site Web de commerce électronique, pour présenter ses bougies ainsi que des critiques et des citations de marques.

Au milieu de la page d’accueil, il y a ce diaporama — une galerie émouvante de leurs bougies les plus vendues (nous adorons le concept de parfum!). Une fois que vous survolez un curseur d’image, il s’arrête et une image légèrement différente s’affiche (par exemple, montrant la bougie allumée).

Exemple 8: Milk Bar

Les pages produits de Milk Bar sont un plaisir à parcourir, et pas seulement parce que les images sont alléchantes. Prenez la page Web de Pom-pom girl ci-dessous, avec l’élément de curseur à gauche et tous les détails du produit à droite, les visiteurs voient tout au premier coup d’œil.

Cependant, lorsque vous faites défiler vers le bas, vous verrez des bannières interactives et plus d’informations sur les produits comme la livraison, les ingrédients, les friandises similaires et un autre carrousel affichant les avis des clients.

Carrousels de contenu

Si vous souhaitez ajouter un carrousel de contenu à votre site Web, gardez à l’esprit que le contenu le plus précieux doit se trouver dans la première diapositive. La diapositive initiale sera toujours la plus exposée et les impressions diminuent après chaque diapositive supplémentaire.

Exemple 9: Art of Tea

Sur le site Web ci-dessous de Art of Tea, vous verrez de nombreuses choses différentes dans un seul curseur plein écran.

Le curseur d’ouverture est un CTA pour rejoindre leur programme d’affiliation. Ensuite, des diapositives montrant de nouvelles boîtes à thé, sacs, paquets et shakers. Une diapositive est également dédiée à l’adhésion à leur club de thé mensuel.

Ce que cette conception Web de carrousel fait bien, c’est que l’imagerie montre de quoi parle chaque diapositive et que le texte de support est réduit au minimum. Une chose à améliorer est les boutons. Lorsque vous choisissez des boutons qui n’ont qu’un contour, il est difficile de les voir clairement sur l’image.

Exemple 10: Canva Design School

La page de l’École de design de Canva est un bon exemple de cas où un carrousel est plus efficace que tout autre élément de site Web.

Comme il y a beaucoup de contenu à afficher sur la page de destination, un carrousel permet d’afficher les différents parcours de manière plus compacte. Par exemple, la section tutoriel ci-dessous prend beaucoup plus de place par rapport au diaporama.

Carrousels de blog

Plusieurs fois, les modèles WordPress pour les blogs sont livrés avec un élément de curseur interactif qui affiche automatiquement les derniers articles.

Bien qu’il s’agisse d’une fonctionnalité intéressante, sachez quels articles sont affichés. Certains peuvent ne pas être aussi dignes d’un clic, mais affichés en premier dans votre curseur de page d’accueil, car ils ont été publiés le plus récemment. Dans ce cas, il est préférable de sélectionner manuellement les blogs qui, selon vous, inciteront les visiteurs à cliquer.

Exemple 11: COCOCOZY

Colette Shelton, blogueuse de design d’intérieur, ouvre son blog avec un curseur montrant une sélection de ses blogs. Une fois que vous survolez, le titre du blog s’affiche. Sur mobile, l’image est affichée avec le titre en dessous.

Carrousels d’images

Les carrousels d’images sont souvent vus dans des sites Web de type portfolio, où ils sont utilisés pour afficher des œuvres de l’artiste. Assurez-vous que vos images sont de haute qualité et parlent d’elles-mêmes, sans avoir besoin de texte supplémentaire.

Exemple 12: Mix Design Collective

Mix Design Collective est une entreprise de design. Comme leur travail est très visuel, il est logique d’ouvrir le site Web avec la navigation et un curseur photo directement en dessous.

Le diaporama présente un mélange d’images, des cuisines aux salles de bains en passant par les salons, afin que les visiteurs aient une idée du style de conception et des services du collectif.

Carrousels de comparaison

Les curseurs fonctionnent bien lorsque les utilisateurs ont besoin de parcourir rapidement une variété de contenus ou de produits. C’est exactement le cas lorsque les gens comparent des articles. Jetons un coup d’œil à quelques exemples.

Exemple 13: Amazon

L’exemple de comparaison le plus connu provient sans doute d’Amazon. Sur chaque page produit, vous trouverez un carrousel avec tous les produits connexes que vous pouvez également acheter. Dans ce cas, un curseur est plus efficace que les images statiques, car il permet aux utilisateurs de parcourir rapidement de nombreux produits similaires.

Quelle est votre opinion sur les carrousels du site Web?

Comme vous l’avez lu, les curseurs Web peuvent être un oui s’il vous plait ou un non s’il vous plait. Tout dépend de la façon dont l’élément est utilisé dans votre conception Web et de la convivialité du curseur pour naviguer. Assurez-vous que chaque diapositive sert un objectif clair et que l’expérience utilisateur globale est excellente. Si vous pouvez affirmer en toute confiance qu’un curseur est le meilleur élément pour afficher le contenu, vous êtes prêt à partir.