Romain Deschambres
Tu rêves d’un beau carrousel plein écran pour l’accueil de ton site web ? Je comprends l’envie, mais si tu me lis depuis un moment tu sais que ce n’est pas mon combat préféré. Je vais t’expliquer pourquoi je déconseille presque toujours le carrousel (et l’image pleine largeur qui va souvent avec) en hero, et surtout par quoi le remplacer pour un meilleur résultat plus clair, plus efficace, et surtout qui convertit mieux.
On va parler franchement et sans détour. La majorité de mes client·es vont aborder le sujet du carrousel qui occupe tout l’écran dès qu’on arrive sur leur site web. Je sais que mes client·es adorent et se projettent assez facilement dans ce type de site web. Parce que c’est ce qu’on connaît. Mais ça ne veut pas dire que c’est la meilleure solution pour ton site web.
Je ne vais pas être contre les carrousels par principe ou par snobisme de webdesigner (j’espère pas 😊). Mais parce qu’en plus de 8 ans à créer des sites web (et à en analyser des dizaines d’autres en formation ou pour mes client·es), j’ai vu ce choix créer les mêmes problèmes, encore et encore. Alors laisse-moi t’expliquer où et pourquoi ça coince. Et surtout, je vais te montrer ce qui fonctionne mieux à la place.
Un carrousel en hero, c’est souvent une façon élégante de ne rien décider. Le rôle d’un hero, ce n’est pas de montrer trois messages différents à la suite : c’est de trancher, et de poser la promesse principale de l’entreprise. Une seule. Celle qui répond à la question que tout visiteur ou visiteuse se pose en arrivant sur ta page d’accueil : « est-ce que je suis au bon endroit ? »
Quand tu proposes 3, 4 ou 10 slides, en réalité tu n’as souvent pas réussi à choisir le message principal que tu veux communiquer. Alors forcément, le carrousel, ça ressemble à une bonne idée.
Avant de designer le hero, écris en une phrase la promesse de l’entreprise. Si tu n’arrives pas à la resserrer en 1 ou 2 phrases, le problème c’est le positionnement. Et ça, ça se travaille en amont.
Dans la vraie vie, la plupart des slides suivantes d’un carrousel ne seront jamais vues. Les gens regardent la première, et passent à autre chose : ils ou elles scrollent, surtout en arrivant pour la première fois sur une page d’accueil. Très peu de monde attend sagement que la deuxième image s’affiche, ou clique sur les petites flèches pour découvrir ton contenu.
Ça veut dire une chose simple. Un carrousel est un bon outil pour du contenu secondaire, beaucoup moins pour ce qui est essentiel. Et sur la page d’accueil d’un site web, dans le hero, tout ce que tu montres doit être essentiel. Sinon ça n’a rien à faire là.
Une étude menée en 2013 par Erik Runyon, webmaster, l’a confirmé noir sur blanc. Sur le carrousel de la home de nd.edu, à peine 1% des visiteurs cliquaient dessus, et sur ce petit pourcentage de clics, 84% allaient sur la première slide. ça veut dire que les suivantes sont presques ignorées et oubliées. Une étude menée par l’université de York a trouvé un résultat proche : environ la moitié des clics allaient sur la première slide.
Et ce que je trouve le plus intéressant, c’est ce que le cabinet suédois Conversionista a comparé, sur un même site, un carrousel à une simple image statique. L’image statique récoltait des clics 40% du temps, contre seulement 2% pour le carrousel.
Tout est dit. 😊
L’image pleine largeur en hero force presque toujours à superposer du texte important par-dessus. Et là, tu te retrouves avec un double problème. On lit mal l’image parce qu’un texte est posé dessus et qu’on se retrouve obligé d’ajouter un filtre. ET on lit mal le texte parce que dessous t’as une image sans fond uni et vient créer un problème de contraste.
Résultat : ni l’image ni le message ne remplissent leur rôle correctement. C’est exactement l’inverse de ce qu’on cherche dans un hero, qui doit être lu et compris en une seconde. Et surtout, convaincre de rester sur le site web.
Composer texte et image en superposition, c’est bien plus exigeant qu’un côte à côte, surtout quand il faut gérer différentes mises en page selon les tailles d’écran. Sur desktop, ta superposition est peut-être lisible. Sur tablette, ça commence à être difficile de faire en sorte que le texte ne s’affiche pas sur le sujet principal du visuel. Sur mobile, c’est quasi impossible de gérer ça correctement.
Un côte à côte (texte d’un côté, image de l’autre) se comporte beaucoup mieux : chaque bloc garde son espace, et le responsive mobile et tablette devient une question d’empilement plutôt que de composition fine à recalculer à chaque changement de taille d’écran.
Dernier point, souvent négligé par les client·es et qui a toute son importance. Une image pleine largeur en hero impose une bonne qualité de composition. C’est facile à gérer au début si tu fais un shooting photo. Par contre, si tu as un carrousel que tu dois mettre à jour régulièrement, ça peut devenir compliqué de conserver une bonne qualité visuelle.
Le jour où il faut changer la photo (nouvelle collection, nouveau local, nouvelle équipe… peu importe), il faut retrouver un visuel de la même qualité, mais surtout avec le bon cadrage, la bonne zone de respiration pour le texte. Ce n’est pas toujours le cas. C’est même rarement le cas. Et un hero raté, ça se voit tout de suite. Pire : ça peut avoir une influence sur la conversion.
Je te promets que je ne suis pas anti-carrousel. On peut l’utiliser à des endroits bien stratégique sur ton site web. Pareil si tu veux une image pleine largeur (même sans carrousel). Plus loin dans la page, en rupture avec du texte, à un endroit où je sais que ça fera vraiment la différence : oui, complètement. Mais pour le hero, je mise sur l’efficacité et la clarté plutôt que sur l’accumulation d’infos.
Un bon hero, pour moi, coche trois cases :
Tiens, petite anecdote parce que ça tombe bien : je suis justement en train de travailler sur un projet où on a un peu sauté les étapes. Oups ! 😬 Grisé·es par l’envie d’avancer, on s’est retrouvé à construire directement la page d’accueil pour s’en servir de base d’inspiration pour le reste du design. Résultat : on a passé les trois quarts du temps du projet sur ce fameux hero.
Ce n’est pas un hasard. Le hero, c’est l’endroit où tout se joue. C’est là que la personne qui arrive sur ton site web, décide en quelques secondes si elle continue à naviguer ou si elle repart. Forcément, c’est l’espace le plus discuté d’un projet de création de site web.
Si on a passé autant de temps dessus, c’est surtout parce qu’en amont, le positionnement de l’entreprise n’avait pas été assez travaillé. On n’avait pas suffisamment préparé ce qu’on voulait vraiment dire sur ce site internet. Du coup, énormément de questions se sont posées sur la mise en page du hero, avec un·e client·e qui voulait absolument une image pleine largeur et un carrousel. Et le risque, dans ce cas-là, c’est justement de voir le message principal, la promesse de l’entreprise, devenir flou pour les utilisateurs et utilisatrices.
C’est exactement ce que je veux éviter à tout prix quand je construis un hero.
Il y a des compositions très simples qui fonctionnent toujours pour le hero d’une page d’accueil. Mais on peut aussi penser des compositions plus innovantes. Alors je t’ai fait une petite sélection commentée où je t’explique ce qui fonctionne. Tout ça… dans un carrousel. 😄
Et c’est l’endroit parfait pour te dire que le contenu d’un carrousel ne doit pas être obligatoire. Tu peux continuer la lecture de l’article sans avoir besoin de lire toutes les slides de ce carrousel.
Un hero simple et diablement efficace. Le texte est à gauche, la promesse de l’entreprise saute aux yeux, avec les mots-clés soulignés dans la couleur d’accent du site web. Le bouton d’action est dans cette même couleur, réservée uniquement pour guider le regard vers ce qu’on a envie de faire faire aux internautes. À droite, une vidéo tourne en fond sans qu’on ait besoin de la lancer : elle dynamise la page sans jamais prendre le dessus sur le message. Et tout en bas, un bandeau de preuve sociale, légèrement coupé, donne confiance dès l’arrivée sur le site web tout en donnant envie de scroller.
Ici, la promesse passe avant l’image : « A camera for their story », un petit texte qui précise que c’est un appareil photo pensé pour les enfants. L’image pleine largeur arrive juste après, en dessous, sans aucun texte posé dessus. On garde l’envie d’un visuel immersif, sans les contraintes de superposition, et bonus, ça donne même envie de scroller pour aller la découvrir. Autre détail malin : le CTA n’est pas dans le hero mais dans le header, et ce n’est pas un bouton d’achat, plutôt une inscription à la newsletter. Logique, lors d’une première visite, on est rarement prêt·e à acheter tout de suite. Autant créer le lien maintenant, et vendre plus tard.
Un site de banque, donc un secteur qui n’a rien de très visuel a priori. Ici, c’est le texte qui porte tout. La promesse tout en haut de page reste en tête, on comprend qu’on va être actif dans la construction même de sa banque. Le noir et blanc très sobre s’adresse clairement à une audience précise, pas à tout le monde. Et c’est justement dans cette sobriété que les détails prennent toute leur valeur : le choix des mots, la présentation des call to action, une animation très fine sur les boutons. En bas de page, une animation légèrement coupée donne envie de scroller, sans avoir besoin d’une image pleine largeur qui s’imposerait dès l’arrivée sur le site web.
Un site portfolio, qui répond à une autre logique : ici, le call to action n’a pas vraiment sa place, ce qu’on veut voir en premier, c’est le nom de la personne, écrit en très grand pour qu’on le retienne. Les domaines de compétences sont listés à gauche, bien lisibles, et le visuel est coupé en bas de page pour donner envie de scroller. Petit détail malin : un bouton « Featured Work » avec une flèche animée, posé au milieu, qui invite clairement à descendre tout en cassant un peu la rigueur de l’ensemble. Et surtout, beaucoup de vide, alors qu’on a souvent le réflexe de vouloir tout remplir : ça respire, et ça crée un contraste avec la suite de la page, plus dense. La preuve qu’on n’est pas obligé·e d’occuper tout l’espace avec un visuel pour avoir un hero qui fonctionne. 😊
Un portfolio à part, qui prend le contre-pied de tout ce qu’on vient de voir : plutôt qu’une image unique, on montre d’entrée une vraie palette de travail, avec plusieurs petits visuels qui donnent l’ambiance dès l’arrivée sur le site web. Pas d’image pleine largeur ici, mais une composition riche, clairement pensée pour marquer les esprits tout de suite. À prendre en compte si tu es tenté·e par ce type de mise en page : le responsive est bien plus complexe à gérer, et le temps de travail (donc le budget) n’a rien à voir avec un hero qui aurait une composition plus simple. Un choix à faire en connaissance de cause.
Si, dans certains cas. Sur une page produit par exemple, pour faire défiler plusieurs photos du même produit, c’est une bonne pratique courante. La règle à retenir : le carrousel doit rester du contenu en plus, jamais du contenu obligatoire. C’est le cas avec le carrousel que tu viens de voir. Tu peux lire l’article, sans passer du temps sur le carrousel.
Non, ce n’est pas grave. Mais avant de partir sur cette forme, il faut d’abord se poser la question du message que tu veux faire passer. Une fois ce message clair, on regarde ensemble quelle est la meilleure option. Et parfois (rarement quand même), le carrousel peut être une bonne idée.
Là je suis moins catégorique pour une image pleine largeur sans carrousel dans un hero. Pour une activité de photographe par exemple, ça peut avoir du sens. Pour un restaurant aussi éventuellement. Mais ça ajoute souvent des contraintes d’intégration qui sont liées à la superposition des éléments texte et visuels.
Oui, complètement, tout dépend de ton activité. Si elle est peu visuelle, un hero 100% texte n’a rien de choquant. Si elle est très visuelle (un restaurant par exemple), une image reste attendue. Dans tous les cas, mieux vaut aucun visuel qu’un visuel raté ou généré par IA de mauvaise qualité : ça décrédibilise plus que ça ne rassure.
Il n’y a pas de nombre figé, la vraie question c’est : ce contenu est-il important ou non ? Un repère simple : environ un tiers du contenu visible d’emblée, le reste dans les slides suivantes, ça reste confortable. Au-delà, mieux vaut scinder en 2 carrousels thématiques plutôt que forcer à défiler des kilomètres de slides.
Un carrousel en hero, c’est souvent une façon de ne pas choisir. Une image pleine largeur avec du texte dessus, c’est souvent un pari risqué sur la lisibilité. Dans les deux cas, ce qu’on perd, c’est la clarté du message principal, celui qui doit convaincre en une poignée de secondes.
Avant même de penser à la forme de ton hero, la vraie question à te poser c’est : pourquoi ce site web ? Qu’est-ce que tu veux qu’il fasse concrètement pour ton activité ? C’est ce travail en amont qui te dira ce dont ton hero a vraiment besoin, puisque c’est là que tout se joue. C’est là que tu vas poser le CTA qui doit amener vers l’action la plus importante de ton site web.
Les 5 exemples que je t’ai montré ne sont pas des modèles à copier tels quels, mais des pistes pour sortir des seuls réflexes carrousel et image plein écran qu’on connaît.
Si tu es en train de réfléchir au hero de ton site web (ou à toute la conception de ton site web), on peut en discuter ensemble : c’est justement le genre de détail qu’on prend le temps de bien poser avant de commencer à designer quoi que ce soit.
Prends l’habitude de regarder d’autres sites web, y compris récents, même en dehors de ton secteur. Plus tu regardes, plus tu élargis les possibles, et moins tu te sens obligé·e de reproduire ce que tout le monde fait.
