Pages d'atterrissage (mode Persuasion)
La page a une seule mission : amener le bon visiteur à effectuer une action. Tout mérite sa place par rapport à cette mission.
Hero : ouvrir avec l'élément le plus caractéristique
Choisissez le type de hero à partir du produit, pas par habitude.
| Type de hero | Quand l'utiliser | Construisez-le comme |
|---|---|---|
| Product-led | logiciels, CRM, applications | un écran UI réel et lisible (HTML, pas une image floue) montrant le produit effectuant sa tâche principale avec des données crédibles |
| Proof-led | services locaux, artisans, agences | une photo forte du travail réel + le résultat en mots + note/avis clients si réels |
| Promise-led | nouvelle catégorie, marque | une seule grande déclaration typographique ; le type lui-même est le visuel |
| Demo-led | outils, jeux, interactif | la chose elle-même, jouable ou interactive au-dessus de la ligne de flottaison |
| Offer-led | e-commerce, événements | la photo/prix/date du produit au premier plan |
Le hero « grand titre + blob dégradé + deux boutons + rangée de statistiques factices » est le défaut. Utilisez-le uniquement si rien ci-dessus ne correspond.
Liste de contrôle du hero : le titre dit ce que c'est et pour qui (moins de 10 mots) ; le sous-titre dit le résultat (moins de 25 mots) ; un seul CTA principal nommant l'action (« Réservez un devis gratuit », « Commencez votre essai de 14 jours ») ; un secondaire facultatif pour les hésitants (« Voir les tarifs ») ; le visuel occupe 40 à 60 % du hero.
Menu de sections (choisissez-en 5 à 8, variez leurs formes)
- Bande problème → solution (l'avant/après dans les mots du client)
- Comment ça marche (uniquement s'il s'agit vraiment d'étapes ; dans ce cas, la numérotation convient)
- Vitrine des fonctionnalités : alternez large image + rangées de texte, ou une grille bento avec une vraie UI dans les tuiles. Évitez trois cartes d'icônes identiques.
- Preuve sociale : témoignages réels avec nom, rôle/ville, photo si disponible ; logos uniquement si clients réels
- Tarifs : 2 à 3 formules, la recommandée marquée par la mise en page, pas seulement un badge ; liste simple de ce qui est inclus ; bascule annuelle si elle existe
- Zone de service / horaires / carte pour les entreprises locales
- FAQ qui répond aux objections réelles (prix, contrat, délais, et si)
- Bande CTA finale qui répète l'action principale
Variez le rythme : alternez pleine largeur et contenu, surfaces claires et teintées, sections textuelles et visuelles. Pas deux sections adjacentes avec la même mise en page.
Rédaction
- Les mots du client, pas du système. « Voir chaque tâche pour aujourd'hui » bat « Visibilité opérationnelle unifiée ».
- Le spécifique bat l'ingénieux. Les chiffres uniquement s'ils sont vrais.
- Casse de phrase pour les titres et les boutons. Pas de points d'exclamation dans l'interface.
- Même nom pour la même action partout.
Détails de conversion
- En-tête collant avec le CTA principal après que le hero a défilé.
- Numéro de téléphone tactile pour appeler sur mobile pour les entreprises locales.
- Formulaires : aussi peu de champs que nécessaire pour l'entreprise ; étiquettes au-dessus des champs ; dites ce qui se passe après la soumission.
- Confiance près du CTA : garantie, temps de réponse, licence/assurance (uniquement si vrai).
- Poids de la page : image du hero sous 200 Ko (AVIF/WebP), polices préchargées, rien ne bloque le premier affichage.
Budget d'animation
Un seul moment signature (entrée du hero ou UI du produit animant son action principale). Tout le reste est statique ou réagit à l'utilisateur. Voir le skill motion.