Le job d'une hero : trois choses, dans cet ordre
Une hero section a exactement trois jobs à faire, et ils s'enchaînent : confirmer au visiteur qu'il est au bon endroit, lui faire comprendre la promesse de valeur en une phrase, et lui donner une raison d'agir maintenant. Si l'un des trois manque, le reste de la page travaille en désavantage.
La plupart des heros qu'on voit sur le web ratent l'étape 1. Le visiteur arrive, voit un titre vague genre « The platform for modern teams », et il doit deviner s'il est sur une boîte de gestion de projet, un CRM, un outil RH ou un wiki. Quand on a deux secondes d'attention, deviner est un coût trop élevé.
La règle qu'on applique : le titre doit nommer la catégorie ou le problème, le sous-titre doit nommer la différenciation. « Le CRM pour équipes commerciales en B2B » + « Pipeline visuel, scoring automatique, et zéro saisie manuelle. » Vous savez exactement où vous êtes, et vous savez pourquoi celui-là plutôt qu'un autre. C'est tout.
Les six composants canoniques
Une hero bien construite contient six éléments, dans un ordre de lecture maîtrisé : l'eyebrow (petite étiquette de catégorie au-dessus du titre), le titre principal, le sous-titre (parfois appelé deck), les CTAs (primaire plein, secondaire fantôme), la preuve visuelle (capture produit, illustration, vidéo), et les signaux de confiance (logos clients, badges, métriques).
L'eyebrow est sous-utilisé. C'est un outil puissant pour pré-qualifier le visiteur en deux mots : « Outil de design pour équipes produit », « Cybersécurité pour PME industrielles », « Marketplace freelance pour startups ». Quand l'eyebrow fait son boulot, le titre peut se permettre d'être plus poétique ou plus différenciant sans risquer la confusion.
Les deux CTAs ont des rôles distincts : le primaire pour l'action à haute intention (créer un compte, demander un démo, voir le produit live), le secondaire pour l'action à faible engagement (voir la démo, lire la doc, voir un exemple). L'erreur classique est de mettre deux CTAs primaires concurrents, ce qui transforme un choix simple en hésitation.
Le titre : court, concret, orienté résultat
Un bon titre de hero fait entre quatre et neuf mots, contient un nom et un résultat, et évite tout adjectif vague. « Modern », « powerful », « innovative », « next-gen » sont des bruits qui consomment des caractères sans informer. À chaque fois qu'on en supprime un, le titre gagne en force.
Comparez : « The modern, powerful platform for marketing teams » versus « Automatisez votre marketing email en 20 minutes ». Le premier est un nuage marketing, le second est une promesse vérifiable. Le second convertit mieux parce qu'il dit ce que ça fait, à qui, et combien de temps ça prend.
Stripe, qui est probablement l'exemple le plus copié, a longtemps eu pour titre « Financial infrastructure for the internet ». C'est court, c'est catégorisant (financial infrastructure = pas un autre dashboard analytics), c'est ambitieux. Linear a « Linear is a purpose-built tool for planning and building products ». C'est plus long, c'est plus descriptif, c'est tout aussi efficace pour son audience. Les deux suivent la même logique : nommer la catégorie + nommer la promesse.
Le sous-titre : différencier sans répéter
Le piège du sous-titre, c'est de paraphraser le titre. Si votre titre dit « Le CRM pour les équipes B2B » et votre sous-titre dit « Le meilleur CRM pour les équipes B2B qui veulent grandir », vous avez gaspillé une ligne. Le sous-titre doit ajouter de l'information : la différenciation concrète, le mécanisme, ou la preuve.
Trois patterns qui marchent bien :
Le pattern « mécanisme » : « Le CRM... Pipeline visuel, scoring IA, zéro saisie manuelle. » On donne trois éléments concrets qui répondent à la question « OK mais comment ? ».
Le pattern « contre-positionnement » : « Le CRM... Pas pour les commerciaux qui vendent du Salesforce, mais pour ceux qui ferment des deals. » On définit par opposition.
Le pattern « preuve » : « Le CRM... Utilisé par 400 équipes pour fermer 2x plus vite. » Métrique vérifiable + nom de la catégorie d'utilisateurs. Évidemment, ça ne marche que si la métrique est réelle.
La preuve visuelle : montrer plutôt que décrire
La capture produit dans le hero est l'élément le plus négligé. La majorité des sites mettent une illustration vectorielle abstraite, un mockup 3D générique, ou pire, un visuel stock avec des gens qui pointent un écran. C'est du remplissage.
Une capture produit vraie, avec une vraie UI, vaut dix fois mieux. Elle répond à la question silencieuse du visiteur : « À quoi ça ressemble ? Est-ce que ça a l'air sérieux ? Est-ce que ça a l'air rapide à prendre en main ? ». Quand Linear met une capture de son app dans le hero, c'est aussi une démonstration : regardez, on prend soin de notre UI, donc on prendra soin de la vôtre.
Si le produit n'a pas encore d'UI, on remplace par autre chose de concret : un graphique de résultats, une animation de workflow, une vidéo de 8 secondes du produit en action. La règle est : pas de stock photo, pas d'illustration abstraite, pas de mockup 3D générique. Soit on montre du réel, soit on n'occupe pas l'espace.
Les signaux de confiance : sous la ligne de flottaison du hero
Logos clients, badges (Y Combinator, ProductHunt, ISO 27001), métriques d'usage : ces signaux de confiance gagnent à être présents dans le hero, mais visuellement discrets. On les met typiquement juste en dessous des CTAs, en grayscale, avec un libellé sobre du type « Utilisé par 300 équipes produit, dont : ».
L'erreur classique est de mettre cinq logos énormes en couleur, ce qui parasite la hiérarchie visuelle et fait baisser le titre. L'autre erreur est de mettre des logos qu'on n'a pas le droit d'utiliser parce que ce sont juste des comptes gratuits — c'est un risque légal et un risque de crédibilité.
Quand on n'a pas encore de logos clients impressionnants, on peut substituer par : badges techniques (Stripe verified, AWS partner), badges de communauté (Y Combinator W24, top 10 ProductHunt du mois), ou métriques simples mais réelles (« 12k inscriptions en 30 jours », « 4.8/5 sur 200 reviews »). Ne pas en inventer. Si on n'a rien d'honnête à mettre, mieux vaut laisser vide.
La check-list qu'on applique dans le Hero Lab
Quand le Hero Lab d'Eufya génère ses quatre variantes, chacune passe une check-list de validation avant scoring. Voici les points qu'on vérifie systématiquement.
Lisibilité : titre lisible en moins de deux secondes, contraste AA, taille de titre cohérente avec la hiérarchie du reste. Concrétude : zéro buzzword dans le titre, sous-titre qui ajoute de l'information versus paraphrase, CTA primaire qui décrit une action concrète et pas « Get started ». Asymétrie : on évite le hero parfaitement centré sauf si le secteur l'exige (luxe, éditorial), on préfère une grille deux colonnes avec une asymétrie de poids visuel.
Preuve : présence d'une capture produit réelle ou d'un équivalent concret, présence de signaux de confiance discrets, cohérence entre la promesse du titre et la preuve visuelle. Différenciation : aucun pattern qui revient dans les trois autres variantes du même brief — l'idée est que les quatre soient distinctes, pas que la même structure soit déclinée en quatre palettes.