L’essentiel en bref
- Une landing page, ou page d’atterrissage, est une page autonome conçue pour un seul objectif : une inscription, une réservation ou un achat.
- Une structure fiable enchaîne hero, problème, fonctionnement, preuves, détails de l’offre, objections et un dernier appel à l’action.
- La page doit correspondre à la publicité, au post ou à l’e-mail qui a amené le visiteur, dans ses mots comme dans son style.
- Supprimer la navigation du site et les liens superflus garde l’attention sur la seule action pour laquelle la page existe.
- Testez les changements un par un face à vos propres chiffres plutôt que de vous fier à des moyennes générales.
Sur cette page
Une bonne landing page défend un seul objectif, dans l’ordre. Contrairement à une page d’accueil, qui s’adresse à tout le monde, une landing page existe pour un visiteur venu d’un seul endroit et qui doit faire une seule action : réserver le cours d’essai, rejoindre la liste d’attente, profiter de l’offre. La structure qui fonctionne encore et encore est un hero clair, le problème dans les mots du lecteur, le fonctionnement, les preuves, les détails de l’offre, les réponses aux objections et le même appel à l’action à la fin. Le rôle du design est de rendre cet ordre facile à suivre.
Une page, un objectif
Écrivez l’objectif en une phrase avant de dessiner quoi que ce soit : « Amener les nouveaux visiteurs venus de notre publicité Instagram à réserver un cours découverte gratuit. » Chaque section a alors un test. Aide-t-elle cette personne à franchir ce pas ? Sinon, supprimez-la ou déplacez-la sur le site principal.
Page d’accueil
- S’adresse à tous les visiteurs
- Navigation complète et nombreux liens
- Plusieurs produits ou services
- Explique toute l’activité
Landing page
- S’adresse à un public venu d’une seule source
- Pas de navigation, ou seulement un logo
- Une seule offre
- Défend un argument et demande une fois, puis encore
La structure d’une landing page, section par section
- 1
Hero
Un titre qui porte la promesse, une ligne de soutien, un bouton, un visuel. Le design de la section hero détaille cet écran.
- 2
Le problème
Deux ou trois phrases qui décrivent la situation du visiteur, avec ses mots. Vous montrez que vous comprenez avant de vendre.
- 3
Le fonctionnement
Trois étapes, chacune avec un titre court et une phrase. On s’engage plus facilement quand on se représente le déroulé.
- 4
Les preuves
De vrais témoignages avec des noms, des photos de vrais travaux, les logos de vrais clients ou une courte démo. Jamais inventés.
- 5
L’offre en détail
Ce que l’on obtient exactement, quand, et ce que cela coûte ou non. Des conditions claires lèvent les hésitations.
- 6
Les objections
Une courte FAQ qui répond aux raisons pour lesquelles on n’agit pas : le temps, le prix, l’adéquation, la résiliation, la suite.
- 7
Dernier appel à l’action
Reprenez la promesse du titre et le même bouton. Les visiteurs qui lisent jusqu’au bout sont prêts ; ne les obligez pas à remonter.
Toutes les pages n’ont pas besoin de toutes les sections. Une liste d’attente pour un lancement peut se limiter à un hero, trois lignes de fonctionnement et un champ e-mail. Une offre très engageante, comme une formation ou une consultation, demande en général les sept et davantage de preuves.
Exemple concret : l’offre découverte d’un studio de yoga
Ce que dit la page
Ce que dit la page
Ce que dit la page
Ce que dit la page
Ce que dit la page
Ce que dit la page
Ce que dit la page
Accordez la page à la publicité d’origine
La plupart des visiteurs d’une landing page arrivent de quelque part : une publicité Instagram, une publicité LinkedIn, un e-mail, un QR code sur un flyer. Dès leur arrivée, ils vérifient qu’ils sont au bon endroit. Reprenez l’offre exacte de la publicité dans le titre et conservez son style : le même fond, les mêmes couleurs, la même typographie. Une page sans rapport visuel avec la publicité donne une impression de tromperie, même quand ce n’en est pas une.
La publicité Instagram en 1080×1350.
Le hero de la landing page en 1920×1080 : mêmes mots, même style, pour que personne ne se demande s’il a cliqué sur le bon lien.
Concevoir les deux à partir d’une même source rend cela automatique. Dans Gradiently, avec Pro, une création se décline à toutes les tailles en une seule étape : le post, la story, l’en-tête d’e-mail et le hero de la page partagent un Mark et un titre. Un style, toutes les tailles montre la méthode, et la cohérence de marque explique pourquoi elle compte au delà d’une campagne.
Les choix de design qui font défiler
- Une seule couleur d’accent pour tous les boutons, utilisée nulle part ailleurs. L’œil apprend où cliquer. La règle 60 30 10 aide à trouver l’équilibre.
- De l’espace entre les sections, pour que chacune se lise comme une idée. Une page chargée semble pénible.
- Des intertitres qui ont du sens seuls. Beaucoup de gens ne lisent que les intertitres ; ils doivent raconter toute l’histoire.
- De vraies photos plutôt que des images de banque. Votre vraie salle, votre produit, votre équipe ou vos résultats.
- Des formulaires courts. Ne demandez que ce dont vous avez besoin maintenant. Une adresse e-mail se donne plus facilement qu’un numéro de téléphone.
- Pas de menu de navigation, ou juste un logo, pour qu’il n’y ait nulle part où s’égarer.
Le mobile d’abord, puis les tests
Le trafic venu des réseaux sociaux arrive surtout sur téléphone : concevez d’abord la version de 390 pixels de large. Gardez le titre et le bouton sur le premier écran, donnez aux boutons au moins 44 pixels de haut et n’utilisez un bouton collant que s’il ne masque pas le contenu.
À éviter
- Changer cinq choses à la fois et deviner ce qui a marché
- Prendre comme objectif un taux de conversion lu sur un blog
- Des popups qui s’affichent avant que le visiteur ait lu quoi que ce soit
- Un formulaire de dix champs pour télécharger un guide
À faire
- Changer une seule chose, comme le titre, et comparer
- Mesurer face à votre propre version précédente
- Laisser lire l’offre avant de demander quoi que ce soit
- Demander le minimum, puis en apprendre plus ensuite
Il n’existe pas de bon taux de conversion universel : il dépend de l’offre, du prix et du trafic. Ce que vous pouvez toujours faire, c’est rendre la version suivante plus claire que la précédente. Pour les couleurs derrière tout cela, voir les palettes de couleurs pour site web.
Les questions qu’on nous pose
Quelle est la meilleure structure pour une landing page ?
Hero, problème, fonctionnement, preuves, détails de l’offre, objections et dernier appel à l’action. Les offres simples peuvent sauter des sections ; les engagements plus importants les demandent toutes.
Une landing page doit-elle avoir une navigation ?
En général non. Supprimer le menu garde l’attention sur la seule action pour laquelle la page existe ; un logo suffit.
Quelle longueur pour une landing page ?
Le temps de répondre aux questions du visiteur. Une liste d’attente gratuite peut tenir sur un écran, alors qu’une formation payante demande souvent une longue page avec des preuves détaillées et une FAQ.
Quelle différence entre une landing page et une page d’accueil ?
Une page d’accueil s’adresse à tous les visiteurs et renvoie partout. Une landing page s’adresse à un public venu d’une seule source et demande une seule action.
Ma landing page doit-elle ressembler à ma publicité ?
Oui. Reprenez l’offre de la publicité dans le titre et gardez ses couleurs et son fond, pour que les visiteurs sachent tout de suite qu’ils sont au bon endroit.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil