Vous connaissez cette sensation. Vous tombez sur un site, et en moins d'une seconde votre œil a déjà décidé si vous alliez rester ou repartir. Pas besoin de lire un mot. Le cerveau a tranché. Ce qui a tranché, dans 90 % des cas, c'est ce qu'on appelle la section hero — ce grand bloc visuel tout en haut de la page.
Je conçois et je démonte des pages d'atterrissage pour des clients depuis un moment maintenant. Et franchement, la section hero est la partie où je vois le plus de dégâts. Pas parce qu'elle est difficile techniquement. Parce que tout le monde la traite comme une décoration, alors que c'est un argumentaire de vente qui doit tenir en trois secondes.
Points clés à retenir
- La section hero est le premier écran vu par le visiteur : elle porte la promesse, pas seulement l'esthétique.
- Sur mobile, elle est souvent le seul élément visible avant le premier scroll — donc votre unique chance.
- Une image hero mal optimisée est l'une des causes les plus fréquentes de lenteur au chargement.
- Le contraste texte/fond et le texte alternatif de l'image ne sont pas des détails : ce sont des obligations d'accessibilité.
- Un hero qui essaie de tout dire ne dit rien. Une seule idée, un seul bouton.
La section hero, c'est quoi exactement (et pourquoi ce n'est pas juste une « belle image »)
Une section hero, c'est le bandeau qui occupe le haut d'une page web. Elle couvre généralement toute la largeur de l'écran, se place juste sous (ou parfois intègre) la barre de navigation, et concentre l'attention avant que le visiteur ne descende. Vous la croiserez aussi sous les noms de hero header, hero banner, hero image ou hero section. Le terme « hero » vient du théâtre : le personnage principal entre en scène, le rideau s'ouvre sur lui. Ici, c'est pareil — c'est l'élément principal de la page.
Spoiler : ce n'est pas la même chose qu'un slider ou qu'une bannière publicitaire. Un hero a une mission narrative. Il doit répondre à trois questions en quelques secondes.
- Où suis-je ? (le visiteur doit comprendre le secteur en un regard)
- Qu'est-ce que j'y gagne ? (la promesse, concrète)
- Et maintenant, je fais quoi ? (l'action, unique et évidente)
Une bannière promo dit « -30 % jusqu'à dimanche ». Un hero dit « voilà pourquoi vous êtes au bon endroit ». La nuance paraît mince. Elle change tout dans la façon dont on écrit le texte.
Image hero site web : de quoi parle-t-on vraiment ?
L'image hero, c'est le visuel de fond ou d'accompagnement de cette section. Elle peut être une photo, une illustration, une capture de produit ou même un fond uni avec une grosse typographie. Je vais être direct : dans mon expérience, le fond uni bien composé bat la photo de banque d'images dans la grande majorité des cas. Une photo corporate générique de gens qui se serrent la main, tout le monde l'a vue mille fois, et personne ne la retient.
Ce que je recommande à mes clients quand ils n'ont pas de budget photo : un aplat de couleur de marque, une typographie franche, et une seule phrase. Résultat, la page se charge plus vite et le message passe mieux. J'ai refait le hero d'un site d'artisan l'an dernier de cette façon. On a remplacé une photo floue de chantier par un fond bleu nuit et une question en gros. Le temps passé sur la page a grimpé. Pas de magie, juste moins de bruit.
Un hero qui rapporte : ce qu'on peut réellement mesurer
Le problème avec ce genre de conseils, c'est qu'ils restent souvent théoriques. « Captez l'attention », « faites bonne impression ». D'accord, mais comment savoir si ça marche ?
La bonne nouvelle, c'est que le hero est l'un des rares éléments d'une page qu'on peut tester proprement. On peut faire varier uniquement le titre, ou uniquement le bouton, et comparer. C'est un test A/B presque idéal parce que tout le reste de la page ne bouge pas.
Les indicateurs que je regarde en premier
Quand je pousse une nouvelle version de hero, je ne regarde pas le taux de conversion dans l'heure — c'est une erreur que j'ai faite au début. Je regarde d'abord trois signaux plus fins, dans cet ordre :
- Le taux de rebond sur mobile, souvent le plus réactif au changement.
- La profondeur de scroll : jusqu'où les gens descendent après avoir vu le hero.
- Les clics sur le bouton principal, séparés par appareil (desktop / mobile).
Sur un projet de SaaS B2B que j'ai accompagné, la version initiale avait un titre de douze mots noyé dans une image de fond chargée. On l'a réécrit en cinq mots, on a retiré le fond photo et ajouté un aplat. Le bouton est passé d'un « En savoir plus » à une phrase qui décrivait l'action. Le taux de clic sur ce bouton a progressé de façon nette, et surtout, il a progressé sans qu'on touche au reste de la page. C'est ça, la beauté du hero : il isole une variable.
Attention, cependant. Un hero qui brille ne sauve pas un site lent. Et c'est justement là que la plupart des gens se plantent.
Le piège que personne ne voit : le poids de votre hero
Voici une vérité désagréable. L'élément le plus lourd d'une page web, dans l'immense majorité des sites vitrine, c'est la grande image du haut. Celle qu'on a choisie avec soin, exportée en plein format depuis l'outil de design, et posée là sans réfléchir.
Cette image, c'est souvent le premier élément que le navigateur doit aller chercher pour afficher quelque chose. Si elle pèse plusieurs mégaoctets, tout le reste attend. Le visiteur voit un écran blanc, puis un écran qui saute. Ce décalage visuel — quand le texte apparaît décalé d'un coup — est une des choses les plus irritantes qui existent.
Ce que je fais systématiquement, sans exception
- J'exporte l'image dans un format moderne (WebP, AVIF) plutôt qu'en gros JPG. Je gagne souvent plus de la moitié du poids.
- Je réserve la place de l'image dans le code, pour éviter que la page ne sursaute quand elle arrive.
- Je ne charge jamais le visuel en plein écran sur mobile si un recadrage serré suffit.
- Je définis toujours un texte alternatif : il aide les lecteurs d'écran et sert de repli si l'image ne charge pas.
Le dernier point, je le répète à chaque projet et on me regarde souvent comme si je parlais une langue étrangère. Le texte alternatif n'est pas une case à cocher pour faire plaisir. C'est la seule chose qu'une personne malvoyante « entendra » de votre hero. Si votre message principal est enfermé dans une image, et que cette image n'a pas d'alternative, alors pour une partie de vos visiteurs, la section hero n'existe pas.
Les erreurs que je vois le plus souvent (et que vous faites peut-être)
J'ai compilé mentalement les récidives. Les mêmes reviennent projet après projet. Si vous en reconnaissez une, ce n'est pas grave — mais corrigez-la.
| Erreur observée | Conséquence concrète | Ce que je fais à la place |
|---|---|---|
| Trop de texte dans le hero | Personne ne lit au-delà du titre | Une phrase courte, un sous-titre d'une ligne |
| Deux boutons ou plus, de même importance | Le visiteur hésite, donc ne clique pas | Un seul bouton principal, un lien secondaire discret au maximum |
| Texte posé sur une photo détaillée | Lisibilité catastrophique, surtout sur mobile | Voile sombre, aplat uni, ou texte déplacé à côté de l'image |
| Image hero plein format non compressée | Chargement long, impressions de site « cassé » | Format moderne + dimensions adaptées à l'affichage réel |
| Message identique sur toutes les pages | Le hero perd tout pouvoir de contextualisation | Adapter le texte à la page (accueil, produit, contact…) |
Je vais insister sur le cas du double bouton. C'est mon pet peeve absolu. « Demander une démo » et « Découvrir nos solutions » côte à côte, de la même taille. Le visiteur se retrouve devant un choix qu'il n'a pas envie de faire. Un hero, c'est une injonction, pas un menu.
Et le message unique pour tout le site ? Je l'ai vu sur un site de cabinet médical : la même grande photo et le même slogan sur la page d'accueil, la page tarifs et la page contact. On aurait dit trois copies de la même page. Le hero n'avait plus aucun rôle. Il était devenu du papier peint.
Le hero typographique : moins de pixels, plus de mots
Une tendance que je vois solidement installée et que j'approuve : mettre la typographie au premier plan et reléguer l'image au second. Pas de photo du tout, parfois. Juste un fond net et une phrase énorme qui occupe l'espace.
Pourquoi ça marche ? Parce que ça élimine d'un coup deux problèmes. Le poids de la page chute, et le message devient impossible à manquer. Vous n'avez plus à trouver la photo parfaite qui « évoque » votre activité — vous dites simplement ce que vous faites. C'est reposant, franchement, des deux côtés de l'écran.
La contrepartie, c'est que tout repose sur les mots. Et là, pas de triche. Si votre phrase d'accroche est creuse, un hero typographique l'exposera au grand jour. Une belle photo peut cacher un mauvais texte. Un aplat de couleur, non.
Alors la vraie question devient : comment écrire cette phrase ? Je n'ai pas de formule magique, mais j'ai un filtre. Je me demande toujours : « si un ami me lisait ça à voix haute, est-ce qu'il comprendrait ce que je vends ? » Si la réponse est non, je réécris.
Et sur mobile, ça donne quoi ?
Sur un téléphone, votre hero tient dans un rectangle vertical étroit. Ce qui reste de votre belle mise en page en trois colonnes disparaît. La photo panoramique se retrouve recadrée n'importe comment. Et le titre qui respirait sur grand écran se casse en cinq lignes illisibles.
La majorité du trafic passe par le mobile sur la plupart des sites que je vois. Donc dans les faits, votre hero est d'abord un hero mobile. Le desktop est presque devenu le cas particulier. Je conçois donc souvent la version étroite en premier, puis j'élargis. C'est contre-intuitif quand on baigne dans le design depuis des années, mais ça évite de bricoler un mobile après coup.
Concrètement, sur mobile : un seul bouton, un texte qui ne dépasse pas deux ou trois lignes, et surtout une vérification du contraste. Le blanc sur une photo claire, ça marche sur votre écran de bureau bien calibré. Sur un téléphone en plein soleil, ça devient invisible.
Les questions qu'on me pose souvent
Hero banner, c'est quoi la différence avec une bannière classique ?
Une bannière classique cherche à vendre quelque chose tout de suite : une promo, un événement, une inscription. Le hero banner, lui, installe le contexte et la promesse de la page. La bannière interrompt, le hero accueille. C'est pour ça qu'un hero qui ressemble à une pub agressive met mal à l'aise : il utilise le ton de l'interruption là où on attendait une entrée en matière.
Faut-il dire hero ou header ?
Le header, c'est la barre de navigation — le menu, le logo, la recherche. Le hero, c'est ce qui vient juste en dessous. Les deux sont souvent confondus parce qu'ils occupent la même zone visuelle en haut de l'écran. Mais leur fonction n'a rien à voir : le header sert à naviguer, le hero sert à convaincre.
Une section hero a-t-elle toujours besoin d'une image ?
Non, et c'est peut-être le mythe le plus tenace. Un fond coloré avec une bonne accroche peut suffire, et même mieux fonctionner qu'une image générique. L'image n'est utile que si elle apporte une information que le texte ne donne pas : un aperçu du produit, une ambiance réelle, un visage identifiable. Une photo décorative qui ne dit rien est un poids mort à tous les sens du terme.
Je finirai là-dessus, parce que c'est ce qui m'a le plus marqué en observant les gens utiliser des sites : le visiteur ne « lit » pas votre hero. Il le ressent. Il ne se dit jamais « tiens, joli dégradé ». Il se dit « c'est pour moi » ou « c'est pas pour moi », et ça se joue avant même qu'il ait conscience d'avoir décidé. Tout le travail de conception consiste à rendre cette décision instantanée, et favorable. Le reste de la page n'aura jamais l'occasion de rattraper un hero raté.
