Que vous gériez un site e-commerce ou un site vitrine, vous savez à quel point il faut soigner votre bannière principale, ou hero pour les intimes. C’est le premier point de contact avec vos clients : en quelques secondes, elle conditionne la compréhension de votre offre et l’envie d’aller plus loin.

Le sujet dépasse d’ailleurs le seul e-commerce. Site de services, SaaS, média, portfolio ou page de collecte : la hero joue partout le même rôle stratégique. Ce guide fait le point sur ce que dit réellement la recherche UX (NN/g, Baymard, Google) et sur ce que nous observons sur le terrain, pour arbitrer les vrais choix de conception : carrousel ou statique, hiérarchie des CTA, performance et accessibilité.

Les fondamentaux

Le point de contact le plus visible de votre site

La bannière web principale, ou hero, concentre l’attention au-dessus de la ligne de flottaison, avant le moindre défilement, et reste souvent le seul écran que certains visiteurs jugeront vraiment. L’enjeu de conversion se joue donc en grande partie ici, et une hero confuse se paie cash : le visiteur qui n’identifie pas votre proposition en un regard s’en va.

L’erreur la plus courante n’est pas un manque de soin, mais un excès : vouloir tout faire tenir dans la hero, soldes, nouveautés, livraison offerte, collection capsule. C’est précisément cette surcharge que la recherche UX pointe du doigt.

Un principe transverse, pas une spécificité e-commerce

Quel que soit le secteur, la hero répond à la même question dans l’esprit du visiteur : ai-je compris, et où je clique ? Que vous vendiez des produits, un abonnement logiciel ou une prise de rendez-vous, les arbitrages qui suivent s’appliquent de la même façon.

Carrousel ou image statique

Le carrousel rotatif, ces slides qui défilent automatiquement, est l’un des patterns les plus étudiés, et les plus critiqués, de l’UX. Les données sont assez sévères.

Le carrousel, un pattern très critiqué

La fréquence. Selon l’institut de recherche Baymard, 33 % des grands sites e-commerce utilisent un carrousel sur leur page d’accueil, et 46 % de ces implémentations présentent des problèmes d’utilisabilité. Près d’un carrousel sur deux est donc mal conçu.

La perception. Le Nielsen Norman Group, référence mondiale en UX, documente depuis presque trente ans le « banner blindness » : les internautes ignorent tout ce qu’ils perçoivent, à tort ou à raison, comme une publicité. Or un bloc qui bouge, avec un gros visuel léché et du texte incrusté, coche toutes les cases du réflexe publicitaire, et se fait ignorer.

Le mouvement. Dans une étude de terrain du Nielsen Norman Group, une utilisatrice n’a pas trouvé une information pourtant affichée en très gros, parce que le panneau tournait toutes les cinq secondes. Verdict des chercheurs : le design a échoué. Ailleurs, une réduction n’était visible que 20 % du temps à cause de la rotation automatique.

L’exposition. Baymard observe que beaucoup d’utilisateurs lancent une recherche parfois avant même la fin du chargement de la page. Ils ne voient jamais la plupart des slides : la première capte l’essentiel de l’attention, et les slides 2, 3 ou 4 sont, en pratique, à peine vues.

À exposition égale, une image statique est plus vue, plus rapide et plus simple à réussir qu’un carrousel.

Comparaison entre un carrousel rotatif, dont les slides 2, 3 et 4 sont à peine vues, et une image statique plus vue, plus rapide et plus simple.

Le verdict de la recherche

La conclusion des chercheurs est claire : pour la plupart des sites, des sections de contenu statiques fonctionnent aussi bien auprès des utilisateurs, tout en étant beaucoup plus simples à réussir techniquement qu’un carrousel parfaitement implémenté.

Et si vous tenez vraiment à votre carrousel

C’est parfois justifié, par exemple pour mettre en avant plusieurs temps forts. Dans ce cas, respectez au minimum les exigences de Baymard. Soignez la première slide, puisqu’elle capte l’essentiel de l’exposition, et réservez-la à un message d’intérêt général comme les soldes ou une nouveauté. Ne faites jamais d’une slide le seul accès à une fonctionnalité : dupliquez toujours l’information ailleurs. Sur ordinateur, prévoyez un intervalle de cinq à sept secondes, jusqu’à dix pour une slide riche en texte, avec une pause au survol et un arrêt dès que l’utilisateur interagit. Et limitez-vous à cinq slides au maximum (Nielsen Norman Group).

Concevoir une hero qui convertit

Les six règles essentielles

  1. Une image forte et statique : Savoir qu’on n’a qu’un seul visuel pousse à en choisir un vraiment démonstratif, et l’utilisateur se concentre au lieu de diviser son attention (NN/g).
  2. Une proposition de valeur claire : Le visiteur doit comprendre en une phrase ce que vous proposez et pourquoi vous.
  3. Un seul CTA principal : Un bouton d’action évident, lisible, sans concurrence visuelle.
  4. Ne pas ressembler à une pub : Reprenez la typographie et les couleurs de votre navigation : la hero passe alors pour du contenu, pas pour une bannière publicitaire (NN/g cite Best Buy en exemple).
  5. Un texte en HTML, pas incrusté dans l’image : Plus lisible sur mobile, accessible, et meilleur pour le SEO (Baymard).
  6. Une image optimisée : La hero est souvent l’élément le plus lourd de la page : elle doit se charger vite (voir plus bas).

Un repère utile : l’attention se concentre majoritairement sur la partie gauche de la page (Nielsen Norman Group). Placez-y votre message et votre bouton, et gardez la droite pour le visuel.

Le format idéal : message et CTA à gauche, visuel humain à droite, l’essentiel au-dessus de la ligne de flottaison.

Maquette du format idéal d'une hero : titre clair, description courte et un seul CTA à gauche, visuel humain à droite, l'essentiel au-dessus de la ligne de flottaison.

Notre retour d’expérience

La recherche confirme ce que nous constatons projet après projet chez Timna. Notre règle tient en une phrase : plus la bannière est facile à comprendre et plus le nombre d’éléments est limité, plus le taux de conversion grimpe.

Concrètement, nous privilégions toujours un titre simple qui met en avant votre proposition de valeur en un clin d’œil, une description courte, et un seul appel à l’action bien lisible. Rien de plus. Pour l’image, nous regroupons tous les éléments visuels à un seul endroit, idéalement à droite du texte. Ne vous éparpillez pas : le cerveau et l’œil n’aiment pas faire d’efforts sur le web. La lecture doit rester très simple, un balayage de gauche à droite, sans obstacle. Votre visuel comme votre message doivent se trouver sur la ligne de flottaison, jamais en dessous.

Un point revient systématiquement dans nos tests : les visuels qui montrent des humains, ou même seulement une partie du corps, convertissent mieux. L’effet est encore plus net avec des visages heureux. Le regard humain attire le regard, c’est aussi simple que cela. Dernier conseil, et sans doute le plus important : testez votre hero en A/B. S’il ne fallait investir que dans une seule création graphique sur tout votre site, ce serait celle-là.

Un seul CTA ou plusieurs ? La vraie règle

On lit souvent qu’une hero ne doit contenir qu’un seul bouton. C’est une simplification. Le bon principe n’est pas « un seul CTA » mais une seule action prioritaire par écran. La nuance change tout.

Le vrai risque, ce sont deux CTA concurrents : « Acheter maintenant » et « En savoir plus » côte à côte, même taille, même couleur. Là, l’internaute hésite, et l’hésitation coûte des conversions (c’est la loi de Hick : plus il y a d’options équivalentes, plus la décision est lente). La solution n’est pas de supprimer un bouton, mais d’instaurer une hiérarchie visuelle : un CTA principal plein et contrasté, un CTA secondaire discret en contour.

Deux CTA rivaux font hésiter. Une hiérarchie ou une segmentation claire, non.

Trois cas de CTA : deux boutons rivaux qui font hésiter, une hiérarchie avec un CTA principal et un secondaire, et une segmentation L'homme / La femme.

Deux CTA ne posent aucun problème quand ils ne sont pas en concurrence. Le hero d’Asphalte en est l’illustration : « L’homme » et « La femme » ne sont pas deux actions rivales, mais une seule décision (qui es-tu ?) avec deux chemins mutuellement exclusifs. Loin d’ajouter de la friction, cette segmentation envoie chaque visiteur vers le bon catalogue en un clic. Enfin, répéter le même CTA au fil d’une page longue n’est pas un défaut : c’est capter l’intention d’achat au moment précis où elle se forme.

À retenir : un CTA unique s’impose quand deux objectifs se disputent l’attention. Deux CTA restent efficaces lorsqu’ils segmentent l’audience ou lorsque l’un est clairement subordonné à l’autre.

La technique : performance et accessibilité

Performance : votre hero est souvent votre point le plus lent

C’est l’angle mort le plus coûteux. La grande image de votre bannière est fréquemment l’élément qui déclenche le LCP (Largest Contentful Paint), l’indicateur de Google qui mesure le temps d’affichage du plus gros élément visible à l’écran.

Jauge des seuils de LCP de Google : bon jusqu'à 2,5 s, à améliorer de 2,5 à 4,0 s, mauvais au-delà de 4,0 s.

L’impact business se mesure. Sur le site de mode Farfetch, la conversion recule d’environ 1,3 % pour chaque tranche de 100 ms de LCP supplémentaire. À l’inverse, Rakuten 24 associe un bon LCP à une hausse de conversion pouvant atteindre 61 %. Ce sont des mesures propres à chaque site, à lire comme des exemples d’impact plutôt que comme des moyennes universelles, mais la direction ne fait aucun doute.

Côté technique, trois bonnes pratiques suffisent à faire la différence. Préchargez l’image de la hero (preload) pour qu’elle s’affiche au plus tôt. Utilisez des formats modernes comme le WebP ou le SVG, bien compressés. Et n’appliquez jamais le lazy loading à cette image : elle est au-dessus de la ligne de flottaison, elle doit charger en priorité.

Mobile et accessibilité

Sur mobile, oubliez la rotation automatique. Il n’y a pas de survol pour la mettre en pause, et l’utilisateur fait défiler si vite qu’il est déjà plus bas quand la slide change (Baymard). Prévoyez plutôt le swipe, un texte lisible et un chargement rapide.

Côté accessibilité, respectez les ratios de contraste WCAG de niveau AA : au moins 4,5:1 pour le texte courant, et 3:1 pour le grand texte (à partir de 18 pt, ou 14 pt en gras). Le texte blanc posé sur une image claire et chargée reste l’erreur la plus fréquente, et elle exclut une partie de vos visiteurs.

Des exemples à observer

À l’international

Le Nielsen Norman Group cite la hero statique de Best Buy comme un modèle du genre : visuel lisible, typographie et couleurs cohérentes avec le reste du site, appel à l’action fort. Baymard met en avant H&M et Living Spaces pour leurs sections statiques efficaces, ainsi qu’Amazon et Home Depot pour leurs bonnes pratiques de carrousel, notamment l’arrêt du défilement après interaction et un texte en HTML bien lisible.

En France

Côté français, plusieurs marques appliquent très bien ces principes.

  • Asphalte : Segmentation « L’homme / La femme » : une seule décision, deux chemins clairs. (Logique des CTA)
  • Respire : Proposition de valeur limpide (« la dermocosmétique naturelle et haute performance »), visuel épuré et un seul message par écran. (Proposition de valeur claire, règle 2)
  • SVR : Hero sobre, cohérente avec l’identité clinique de la marque : elle ressemble à du contenu, pas à une pub, et met en avant un bénéfice produit clair. (Ne pas ressembler à une pub, règle 4)

FAQ

Carrousel ou image statique pour ma hero ?

Dans la grande majorité des cas, une image statique, ou des sections statiques, est préférable : elle est plus vue, plus rapide, plus accessible et plus simple à réussir.

Combien de slides si je garde un carrousel ?

Cinq au maximum, la première étant de loin la plus importante.

Qu’est-ce que le « banner blindness » ?

C’est la tendance des internautes à ignorer les éléments qui ressemblent à une publicité, un piège fréquent pour les hero trop « pub ».

Ma bannière peut-elle ralentir mon site ?

Oui. Elle est souvent l’élément le plus lourd de la page, et un mauvais temps de chargement (LCP) pèse directement sur la conversion.

Une hero ne concerne-t-elle que l’e-commerce ?

Non. Tout site a une hero : services, logiciel en ligne, média, portfolio. Les mêmes principes de clarté, de performance et d’accessibilité s’appliquent.

Quelle taille de texte et quel contraste ?

Un contraste d’au moins 4,5:1 pour le texte courant, avec un texte en HTML plutôt qu’incrusté dans l’image.

Conclusion

Concevoir une hero efficace n’est pas une affaire de goût, mais une suite de décisions qui se tiennent : un message clair plutôt qu’un carrousel qui tourne, une seule action prioritaire, un visuel humain bien placé, une image qui se charge vite et un contraste accessible. Prises ensemble, ces décisions font la différence entre une bannière qu’on ignore et une bannière qui vend. Et si vous ne deviez soigner qu’un seul écran de votre site, ce serait celui-là.

C’est exactement ce que nous concevons chez Timna : bannières de site, landing pages et boutiques pensées pour convertir, sur des bases UX solides.

Sources

Partager :