Conversion de Page d'Atterrissage et UX
Règles pour les pages dont le travail est d'obtenir une action : se connecter, s'inscrire, laisser un email, demander quelque chose. Distillées à partir d'une bibliothèque de livres marketing, conversion et UX (UserTesting, UXPin, SmartBug, Usabilla et autres, environ 2014 à 2016). Les chiffres qu'ils citent sont anciens. Le comportement derrière eux ne l'est pas.
Chaque règle est une instruction, une brève raison et un exemple. Pour un audit, commencez par la checklist à la fin.
1. Proposition de valeur et au-dessus de la ligne de flottaison
-
Réussissez le test des cinq secondes. Pourquoi : les visiteurs décident en quelques secondes si une page est pour eux. S'ils ne peuvent pas dire ce que vous faites d'ici là, ils cliquent sur Retour. Exemple : montrez la page à quelqu'un pendant cinq secondes, cachez-la et demandez « Qu'est-ce que c'est et à qui ça s'adresse ? » S'il ne peut pas répondre, réécrivez le titre avant de toucher à quoi que ce soit d'autre.
-
Écrivez le titre à propos du résultat du visiteur, pas à propos de vous. Pourquoi : une page qui parle de « nous » oblige le lecteur à faire la traduction. « Vous » et un résultat concret le font pour lui. Exemple : « Nous organisons les emails marketing » devient « Voyez comment 400 marques écrivent leurs emails, triés et consultables. »
-
Soutenez le titre par deux ou trois raisons concrètes d'agir. Pourquoi : le titre motive ; les raisons convertissent les indécis. Exemple : sous le titre, trois lignes courtes : « Nouvelles marques chaque semaine », « Emails complets, pas des miniatures », « Gratuit à parcourir. »
-
Montrez la vraie chose, pas une photo de stock. Pourquoi : les images génériques ressemblent à du remplissage et rendent la page moins digne de confiance. Une capture d'écran du produit prouve qu'il existe. Exemple : remplacez une photo d'équipe souriante par une vraie grille d'emails archivés.
-
Laissez le premier écran énoncer l'offre, puis laissez les gens défiler. Pourquoi : le héros doit porter la proposition de valeur et l'action principale, mais entasser toutes les fonctionnalités au-dessus de la ligne de flottaison crée du désordre. Les gens défilent quand la hiérarchie est claire. Exemple : le héros contient le titre, le sous-titre, un bouton et un aperçu du produit. Les fonctionnalités, la preuve et la FAQ vivent en dessous.
-
Concevez d'abord pour le petit écran. Pourquoi : la mise en page du téléphone vous oblige à classer le contenu. Ce qui survit sur mobile est ce qui compte, et la version desktop en découle proprement. Exemple : maquettez la version 375px avec seulement le titre, le bouton et une ligne de preuve, puis élargissez jusqu'à ce qu'il y ait trop d'espace vide et ajoutez l'élément suivant.
-
Gardez le héros rapide. Pourquoi : des retards de plus d'une seconde environ font que les gens se sentent hors de contrôle, et les pages lentes perdent à la fois les visiteurs et le classement dans les recherches. Exemple : une image d'aperçu compressée, pas de vidéo en lecture automatique, pas de curseur.
[Sources : Inbound Marketing's Most Wanted 33 Website Design Crimes ; Lead Generation Techniques for High Conversions and Great UX ; The Elements of Successful UX Design ; Timeless UX Design Trends: Responsive and Adaptive ; Responsive Web Design Best Practices]
2. Appels à l'action
-
Donnez à une page d'atterrissage un seul objectif et un seul CTA principal. Pourquoi : chaque action supplémentaire entre en compétition avec celle que vous voulez. Une page qui demande de regarder une vidéo, lire six témoignages puis remplir un formulaire les perd en chemin. Exemple : un seul bouton « Ouvrir l'archive », répété en haut et en bas, et rien d'autre stylisé comme un bouton.
-
Étiquetez le bouton avec ce qui se passe ensuite. Pourquoi : « Envoyer » et « Cliquez ici » décrivent le mécanisme, pas la récompense. Un verbe plus la chose rend l'objectif de la page évident. Exemple : « Envoyer » devient « Demander cette marque » ; « Se connecter » devient « Ouvrir l'archive ».
-
Dites ce que le visiteur obtient avant qu'il ne s'engage. Pourquoi : les gens demandent « Qu'est-ce que j'échange contre mon email ? » Répondez-y par du texte et, si possible, une image du résultat. Exemple : à côté d'un bouton verrouillé, une ligne comme « Gratuit. Connectez-vous avec Google. Prend dix secondes. » et un aperçu de l'archive derrière.
-
Faites ressortir le CTA par le contraste, pas par l'agressivité. Pourquoi : un bouton saturé sur une page calme attire l'œil. Une couleur criarde qui détonne avec la marque donne un aspect bon marché à l'ensemble du site. Exemple : gardez l'interface utilisateur environnante désaturée et donnez seulement au bouton principal la couleur la plus forte de la marque.
-
Seuls les boutons doivent ressembler à des boutons. Pourquoi : le texte encadré ou les faux boutons qui ne font rien gaspillent les clics et apprennent aux gens à se méfier du reste de la page. Exemple : ne mettez pas de pilule bordée autour de « 400+ marques » ; stylisez-le comme une étiquette ou du texte brut.
-
Faites en sorte que les cibles tactiles soient grandes et bien espacées. Pourquoi : les doigts sont moins précis que les curseurs. Des cibles petites ou serrées provoquent des erreurs de tap et des doubles taps. Exemple : au moins 44 par 44 points pour le bouton principal, avec un espace clair depuis le lien le plus proche.
-
Ne cachez rien d'important derrière un survol. Pourquoi : les écrans tactiles n'ont pas de survol. Les informations qui n'apparaissent qu'au survol de la souris sont invisibles pour les utilisateurs de téléphone. Exemple : montrez la note « ce que vous obtenez » sous le bouton, pas dans une infobulle.
-
Offrez un chemin plus doux pour ceux qui ne sont pas prêts. Pourquoi : la plupart des visiteurs ne sont pas prêts pour l'action principale lors de leur première visite. Une option secondaire, à moindre engagement, les empêche de repartir les mains vides, mais elle doit rester visuellement secondaire. Exemple : un lien texte « ou recevez un email quand de nouvelles marques arrivent » sous le bouton principal.
[Sources : 33 Website Design Crimes ; The Elements of Successful UX Design ; Designing Better UX with UI Patterns ; Responsive Web Design Best Practices ; Timeless UX Design Trends: Responsive and Adaptive]
3. Capture de leads et formulaires d'inscription
-
Ne demandez que ce que vous utiliserez tout de suite. Pourquoi : chaque champ réduit le taux de complétion. Dans un test, réduire un formulaire de 11 à 4 champs a augmenté les inscriptions de bien plus de 100 % sans baisse de la qualité des leads. Exemple : un formulaire « Demander la prochaine marque » a besoin d'un nom de marque et d'un email. Pas d'un nom, pas d'une entreprise, pas d'un téléphone.
-
Supprimez les champs qui prêtent à confusion. Pourquoi : un seul champ ambigu peut faire couler un formulaire. Un cas célèbre a supprimé un seul champ optionnel « Entreprise » que les gens lisaient mal et a gagné des millions de revenus. Exemple : si vous ajoutez « Site web » à la demande de marque, les gens ne sauront peut-être pas si vous voulez dire leur site ou celui de la marque. Supprimez-le ou étiquetez-le exactement.
-
Collectez plus tard, pas tout en une fois. Pourquoi : demander un peu à chaque visite (profilage progressif) obtient plus de complétions et des données plus propres qu'un long formulaire que les gens remplissent de données aléatoires. Exemple : la première demande demande seulement l'email ; un email ultérieur demande « Dans quel secteur travaillez-vous ? »
-
Acceptez les entrées dans tout format raisonnable. Pourquoi : rejeter « Nike.com » parce que vous vouliez « Nike » punit l'utilisateur pour votre analyseur syntaxique. Nettoyez-le côté serveur. Exemple : supprimez les espaces, retirez « www. » et « .com », gérez la casse de manière insensible.
-
Placez le formulaire à côté de la valeur qu'il déverrouille. Pourquoi : un formulaire placé juste après un contenu utile convertit bien mieux qu'une boîte générique dans la barre latérale que les gens ont appris à ignorer. Exemple : placez « Une marque manquante ? Demandez-la » juste sous l'aperçu de l'archive, pas dans le pied de page.
-
Gardez la connexion et l'inscription visuellement distinctes. Pourquoi : lorsque les deux formulaires sont empilés, de nombreux nouveaux visiteurs commencent à remplir le mauvais. Exemple : un seul bouton « Continuer avec Google » qui gère les deux cas, ou deux panneaux clairement séparés.
-
Donnez un bouton pour afficher le mot de passe et un lien « mot de passe oublié » visible. Pourquoi : des mots de passe mal tapés sur mobile poussent les gens vers des emails de réinitialisation qui les sortent du flux. Exemple : une icône d'œil dans le champ du mot de passe ; le lien de réinitialisation juste en dessous.
-
Confirmez le succès sur la page, en mots simples. Pourquoi : les gens ont besoin de savoir que le formulaire a fonctionné et ce qui se passe ensuite. Exemple : « Compris. Nous vous enverrons un email quand Glossier sera dans l'archive. »
-
Expliquez en une courte ligne ce que vous faites avec l'email. Pourquoi : l'inquiétude concernant la vie privée est une raison courante pour laquelle les gens s'arrêtent au dernier champ. Un langage simple bat un lien vers un texte juridique. Exemple : « Un email quand votre marque est ajoutée. Pas de newsletter sauf si vous le demandez. »
[Sources : 3 Common UX Mistakes Killing Good Design ; 33 Website Design Crimes ; The Elements of Successful UX Design ; Lead Generation Techniques for High Conversions and Great UX ; Designing a Checkout Flow That Converts (règles de formulaire uniquement)]
4. Preuve sociale et confiance
-
Utilisez des chiffres réels quand vous en avez. Pourquoi : les gens font plus confiance aux chiffres précis qu'aux adjectifs. Exemple : « 2 140 emails de 312 marques » bat « une énorme bibliothèque ».
-
Attribuez chaque témoignage à une personne réelle. Pourquoi : un nom, un rôle et une photo rendent une citation pertinente. Une citation anonyme semble inventée. Exemple : « M'a fait gagner des heures sur notre série de bienvenue. » Priya S., spécialiste du cycle de vie chez une marque DTC, avec photo.
-
Montrez des logos reconnaissables discrètement. Pourquoi : la crédibilité par association fonctionne, mais les logos colorés entrent en compétition avec le CTA. Exemple : une seule rangée de logos de marques en niveaux de gris juste en dessous du héros.
-
Placez la preuve là où le doute surgit. Pourquoi : un témoignage à mi-chemin de la page, à côté de l'affirmation qu'il soutient, fait plus qu'un mur de citations à la fin. Exemple : après « emails complets, pas des miniatures », une citation de quelqu'un qui a utilisé la vue en taille réelle.
-
Testez la preuve sociale au lieu de supposer qu'elle aide. Pourquoi : les comptes d'abonnés réduisent parfois la conversion, surtout quand le nombre est petit. Exemple : testez A/B le héros avec et sans « Rejoignez 800 spécialistes du marketing ».
-
Gagnez la confiance avec le soin et l'honnêteté. Pourquoi : la qualité visuelle est la première chose que les gens utilisent pour juger de la crédibilité. Les fautes de frappe, les boutons cassés et l'alignement désordonné sont tous perçus comme « pas légitimes ». Exemple : relisez chaque chaîne, cliquez sur chaque lien avant le lancement.
-
N'utilisez jamais de schémas manipulateurs (dark patterns). Pourquoi : des astuces comme les inscriptions cachées ou les liens d'annulation difficiles à trouver gagnent une fois et perdent l'utilisateur pour toujours. Exemple : une case non cochée, clairement étiquetée « Envoyer aussi le digest hebdomadaire », jamais une case pré-cochée cachée dans les petits caractères.
-
Soyez transparent sur le coût et les conditions. Pourquoi : les gens préfèrent voir le prix tôt, et les affirmations « gratuit » qui s'avèrent conditionnelles détruisent la confiance. Exemple : si la navigation est gratuite mais que les téléchargements sont payants, dites-le sur la page d'atterrissage, pas après la connexion.
[Sources : The Elements of Successful UX Design ; Lead Generation Techniques for High Conversions and Great UX]
5. Flux de page et structure
-
Cartographiez le chemin avant de concevoir la page. Pourquoi : sans un plan « que font-ils ensuite », les pages deviennent des impasses. Exemple : écrivez-le : arriver, lire le titre, voir l'aperçu, cliquer sur « Ouvrir l'archive », se connecter, atterrir dans l'archive.
-
Supprimez la navigation principale des pages d'atterrissage à objectif unique. Pourquoi : chaque lien de navigation est une sortie de l'offre. Exemple : logo plus un CTA dans l'en-tête, pas de menu « Blog / À propos / Tarifs ».
-
Ne mettez jamais de page splash devant la vraie page. Pourquoi : cela ajoute une étape et n'apprend rien au visiteur. Exemple : pas de porte « Entrer sur le site ». La page d'atterrissage est la porte d'entrée.
-
Faites en sorte que chaque page se termine par une prochaine étape. Pourquoi : une page qui s'arrête simplement laisse le visiteur chercher. S'il ne trouve pas où aller en quelques secondes, il part. Exemple : la FAQ se termine par le même CTA que le héros.
-
Écrivez pour les scanneurs. Pourquoi : la plupart des gens ne lisent que les titres, sous-titres et premières phrases. Exemple : paragraphes courts, sous-titres clairs, listes à puces pour les fonctionnalités.
-
Regroupez et espacez le contenu pour réduire la charge cognitive. Pourquoi : les espaces vides améliorent la compréhension, et le regroupement d'éléments connexes permet aux gens d'en absorber plus sans rien supprimer. Exemple : regroupez les fonctionnalités en trois cartes au lieu de neuf lignes isolées.
-
Utilisez des motifs familiers sauf si vous avez la preuve que le vôtre est meilleur. Pourquoi : les motifs reconnaissables permettent aux gens d'agir sans réfléchir. Les briser force l'apprentissage et provoque des erreurs. Exemple : mettez la connexion en haut à droite, pas dans un geste caché. Si votre règle pour un motif a besoin de « sauf » ou « excepté », c'est le moment de la repenser.
-
Étiquetez les liens par ce qui se cache derrière. Pourquoi : des étiquettes claires donnent un « parfum d'information ». Les étiquettes mignonnes le cachent. Exemple : « Parcourir les marques », pas « Le bon plan ».
-
Respectez l'accessibilité de base. Pourquoi : c'est une bonne UX pour tout le monde, y compris les gens en plein soleil ou sur un téléphone lent. Exemple : contraste du texte d'au moins 4,5:1, texte du corps d'au moins 16px, hauteur de ligne d'environ 1,5, véritables étiquettes sur les champs du formulaire.
-
Concevez intentionnellement les états vides et d'attente. Pourquoi : un écran blanc après la connexion semble cassé. Un état vide ou de chargement clair indique aux gens à quoi s'attendre et les maintient en contrôle. Exemple : « Chargement de 2 140 emails... » avec une grille squelette, pas une page blanche.
[Sources : 33 Website Design Crimes ; 3 Common UX Mistakes Killing Good Design ; Designing Better UX with UI Patterns ; The Elements of Successful UX Design ; Responsive Web Design Best Practices ; Idiot Buttons: The Placebo in UX Design]
6. Les erreurs de conception à éviter
Une liste rapide des erreurs qui coulent le plus souvent une page. Chaque ligne dit quoi faire à la place.
-
Curseurs et carrousels. Très peu de gens cliquent sur les diapositives après la première, et ils ralentissent la page. Montrez une seule image forte à la place.
-
Vidéo ou son en lecture automatique. Cela surprend les gens et ils partent. Utilisez un bouton de lecture et laissez-les choisir.
-
Photos de stock ringardes. Elles semblent suspectes sur une page qui demande des données. Utilisez de vraies photos du produit.
-
Plusieurs CTA concurrents sur une page d'atterrissage. Choisissez-en un.
-
Boutons « Envoyer » par défaut. Renommez avec l'action.
-
Formulaires plus longs que l'offre ne vaut. Réduisez au minimum.
-
Encombrement. Chaque bloc doit mériter sa place. Supprimez jusqu'à ce que ça fasse mal.
-
Murs de texte. Divisez en titres, paragraphes courts et puces.
-
Texte à faible contraste ou minuscule. Du gris clair sur blanc échoue en lisibilité.
-
CTA sans rapport avec le contenu de la page. Une offre dans une barre latérale globale qui ne correspond pas à la page convertit mal. Faites correspondre l'offre à la page.
-
Parler de vous. Remplacez « nous » par « vous » et le résultat du visiteur.
-
Ignorer le mobile jusqu'à ce que...
… [tronqué pour la traduction]