Les clés pour auditer une landing page. Zoom sur 5 exemples

Les landing pages représentent les pages les plus importantes de votre site internet. Ce sont les pages sur lesquelles « atterrissent » vos internautes (à partir d’un lien, d’une publicité, etc.) pour acheter votre produit ou s’inscrire à votre service. De leur qualité de conception dépend en grande partie le niveau de conversion de votre trafic. Grosso modo, il y a quatre éléments, quatre catégories à prendre en compte dans la création d’une landing page : l’offre, le formulaire et le CTA (Call To Action), la confiance et la hiérarchie visuelle. La bonne conception de vos landing pages repose sur la prise en compte et l’audit de ces quatre éléments. Nous allons revenir en détail sur ces éléments, avant de vous proposer un zoom sur 5 exemples de landing pages.

L’audit d’une landing pages

Pour auditer correctement une landing page, encore faut-il connaître les éléments à évaluer. Ce qui revient à définir les éléments importants sur une landing page. Quels éléments auditer ?

Les composantes de l’audit

Que vous souhaitiez évaluer vos propres landing pages ou celles de vos concurrents, la première impression est importante. L’analyse des statistiques associées aux landing pages aussi. Ces statistiques permettent de savoir si une landing page est performante ou pas. Mais la question la plus importante à laquelle vous devez répondre, c’est celle-ci : « Pourquoi cette landing page marche ? » (ou, au contraire, pourquoi elle ne marche pas ?).

Ce qui suppose d’identifier les catégories clés d’une landing page. Ces catégories, on les a déjà énumérées. Elles sont nombre de quatre : l’offre, le formulaire (et le CTA), la confiance et la hiérarchie visuelle. Au sein de ces composantes, entrent en ligne de compte plusieurs éléments : la clarté, la pertinence, la visualisation, la visibilité du formulaire, le nombre de champs du formulaire, le titre du formulaire, la visibilité des CTA, la qualité du design en général, les icônes de réassurance, les témoignages clients, la clarté de la politique en matière de confidentialité, les illustrations, etc.

L’audit des landing pages vous permettra de les améliorer, pour optimiser les taux de conversion de votre site internet et de vos campagnes marketing. Revenons plus en détail sur chacune des quatre composantes inhérentes aux landing pages.

Pour compléter la lecture de cet article, découvrez les 3 erreurs dans la conception des landing pages qui nuisent à votre ROI.

Catégorie #1 : l’offre

L’offre est probablement la composante la plus importante, la plus « critique », sur une landing page. Vous pouvez avoir une landing page au design parfait, si l’offre que vous proposez n’est pas du tout intéressante, votre landing page affichera de mauvaises performantes.

Il y a trois éléments à considérer lorsqu’on audite l’offre d’une landing page :

• La clarté. L’offre doit être présentée de manière claire et concise. Il faut que les personnes qui arrivent sur la landing page puisse en quelques secondes savoir en quoi consiste l’offre et quels sont ses bénéfices.
• La pertinence. L’offre doit être pertinente. Ce qui signifie en réalité deux choses. Premièrement, il faut que l’offre réponde de manière pertinente au besoin auquel est censée répondre. Deuxièmement, elle doit correspondre aux besoins des personnes qui tombent sur la page.
• La visualisation. L’offre doit être clairement visible sur la page, ce qui suppose de bien la mettre en valeur par rapport aux autres éléments. Concrètement, cela implique par exemple un travail sur le choix et la taille de la police, sur l’emplacement du texte sur la page et sur le choix de la couleur.

Ces trois éléments vont de pair. Une offre claire, c’est une offre qui est bien mise en valeur visuellement et qui rencontre les attentes et les besoins des internautes qui atterrissent sur la landing page.

Catégorie #2 : le formulaire et le CTA

La plupart des landing pages contiennent un formulaire. Quand ce n’est pas le cas, le formulaire est remplacé par un CTA qui redirige vers un formulaire ou un espace de login. Si votre landing page contient un formulaire, vous devez veiller à ce que le formulaire soit facilement compréhensible et suffisamment court pour ne pas décourager les internautes. Même si la longueur du formulaire dépend du caractère attractif de votre offre. Si votre offre est exceptionnelle, les internautes seront plus enclins à remplir votre formulaire, même s’il est long et comporte un grand nombre de champs. On en revient à l’importance majeure de l’offre. Si l’offre n’est pas très attractive, vous devrez vous contentez de demander l’email de la personne.

Pensez aussi à rendre le formulaire bien visible sur la page. Veillez à ce qu’il soit au-dessus de la ligne de flottaison. il faut que l’internaute puisse le voir et le remplir sans être obligé de descendre avec sa souris ou la barre de défilement en bas de la page. Soignez aussi le titre du formulaire. Ne copiez-collez pas une phrase déjà présente sur la page (dans la description de l’offre par exemple). N’utilisez pas non plus un titre neutre, du type « Remplissez ce formulaire ». Le titre du formulaire doit être attractif.

Si votre landing page contient, à la place du formulaire, un CTA (bouton ou lien call-to-action), veillez à ce que le CTA soit clairement visible. Nous revenons longuement sur la question des CTA dans l’article sur les 3 erreurs de conception des landing pages mentionné plus haut.

Catégorie #3 : la confiance

Il ne faut pas se voiler la face : beaucoup d’internautes n’ont pas encore tout à fait confiance sur internet, surtout lorsqu’il faut sortir sa carte bleue. C’est la raison pour laquelle l’un des principaux conseils donnés aux gérants de site ecommerce concerne la réassurance. Il en va de même pour les landing pages : vous devez intégrer des éléments de réassurance – visant, comme leur nom l’indique, à rassurer vos visiteurs et potentiels clients. Vous pouvez par exemple intégrer sur la page :

• Une icône de confiance (du type « Paiement sécurisé », « Site certifié X »).
• Des témoignages clients non anonymes.
• Des informations claires sur votre politique en matière de confidentialité.
• Des garanties pertinentes. Dans le ecommerce, la garantie la plus efficace réside dans les possibilités de remboursement ou d’échanges. Sur une landing page, la nature des garanties dépend de la nature de votre offre. Si vous proposez un service en ligne, le « sans engagement de durée » est une garantie pertinente.
• Des informations sur votre politique de retours – si cela est possible pour votre offre.

Plus généralement, le design de votre page compte aussi beaucoup dans la confiance de vos visiteurs. Un design à l’aspect professionnel et « classe » renforcera votre crédibilité et rassurera vos visiteurs.

La réassurance est un élément décisif pour la conversion des sites ecommerce. Pour en savoir plus sur la réassurance et sur ses enjeux, découvrez 7 conseils pour améliorer la réassurance de son site ecommerce.

Catégorie #4 : la hiérarchie visuelle

La hiérarchie visuelle est peut-être la catégorie qui a le moins d’importance, mais elle reste quand même importante. Une landing page contient de nombreux éléments, dont vos visiteurs prendront connaissance progressivement en scannant votre page. Travailler sur la hiérarchie visuelle de votre landing page permet de guider le regard de vos visiteurs et de mettre en avant les éléments les plus essentiels, ceux que vous voulez que vos visiteurs voient en premier, dès leur arrivée sur la page. La hiérarchie visuelle est au service de la clarté. Elle est d’autant plus importante que votre landing page contient d’éléments. Une landing page sans hiérarchie visuelle perd beaucoup en compréhension…et donc en efficacité. un visiteur qui ne comprend pas votre page a peu de chances de convertir.

Pour vous aider dans l’organisation visuelle de vos landing pages, voici quelques conseils généraux :

• Assurez-vous que le design de votre landing page ne perturbe pas la compréhension de votre offre. Il doit y avoir une articulation fine entre le design, la police de caractère choisie pour les zones de texte et vos illustrations.
• Veillez à ce que les images et illustrations contenues sur vos pages n’entrent pas en compétition avec vos CTA. De belles images permet d’enrichir visuellement vos landing pages, mais peut parfois contribuer à masquer les CTA.
• Assurez-vous que les contenus important ressortent bien sur la landing page. Travaillez l’emplacement et la forme visuelle et la couleur de vos contenus importants.

Ce travail sur la hiérarchie visuelle suppose une attention aigüe portée sur les moindres détails.

5 exemples de landing pages analysés

Voici maintenant 5 exemples de landing pages analysés à partir des quatre composantes dégagées dans la première partie. Disons-le tout de suite, nous n’avons pas choisi que de « bons » exemples. Au contraire, nous avons inclus des exemples de mauvaises landing pages pour bien mettre en relief le propos.

100% gratuit - 3 min

   

Confiez les fondations de votre site web à un professionnel.            

Un prestataire certifié garantira la gestion des problèmatiques techniques dés la création de votre site web.

• Architecture du site
• Sécurité du site et sauvegarde des serveurs
• Base d'un bon référencement sur Google

Je fais une estimation

#1 Microsoft

Commençons justement par un exemple particulièrement mauvais de landing page : celle de Microsoft. Première composante : l’offre. Sa pertinence est discutable. Proposer un e-book – même gratuit – n’est certainement pas la meilleure manière de générer des leads. Car qui dit « livre » dit beaucoup de pages, et donc beaucoup de temps à dépenser. Par ailleurs, un e-book apporte rarement des éléments directement exploitables par les professionnels. De plus, l’offre n’est pas claire du tout. Il est étonnant qu’un e-book ne contienne que 7 éléments. « 7 Ways to Improve your Security Posture » ressemble plus au titre d’un article de blog que d’un livre. Bref, l’offre n’est clairement pas attractive. Passons maintenant à l’analyse du formulaire. Sans aucun doute, le formulaire est bien visible. Il apparaît tout de suite à l’arrivée sur la landing page. Maintenant, il est clair que le formulaire comprend beaucoup trop de champs à remplir au regard de l’intérêt de l’offre. 6 champs, c’est trop. D’autant qu’un des champs est très sensible : le numéro de téléphone. D’ailleurs, on ne voit pas l’intérêt de demander le pays si l’on demande le téléphone. La code pays du numéro de téléphone donne déjà l’information. Il y a donc un champ superflu. Le CTA, quant à lui, ressort plutôt bien mais n’est pas bien placé. Il est trop collé au formulaire, et aurait dût être centré pour plus de visibilité.

Concernant la composante « confiance » maintenant. L’image de marque de Microsoft suffit à rassurer, sans qu’il soit nécessaire de multiplier les éléments de réassurance. Malgré tout, étant donnée le nombre d’informations demandées dans le formulaire, on aurait pu être en droit d’attendre plus de précisions sur l’emploi des données personnelles transmises. Quant à la hiérarchie visuelle, elle laisse à désirer. Il n’y a pas vraiment de logique dans l’organisation des éléments. L’utilisation d’une police identique, dans sa forme comme dans sa couleur, n’est clairement pas une bonne chose. Sans compter le très mauvais choix au niveau de la taille de la police. Et sans parler de l’absence d’illustrations. Il aurait fallu au moins une image permettant de décrire visuellement l’offre. L’exemple Microsoft est l’exemple même de ce qu’il ne faut pas faire. Passons à un exemple site hubspot bien plus convaincant.

Vous êtes en recherche d’inspirations pour créer vos landing pages ? Pour vous aider, nous avons sélectionné pour vous plus de 30 exemples de landing pages réussies.

#2 Lyft

Ce qui saut aux yeux, ici, c’est la richesse et la singularité du template utilisé. Un template qui au service de la présentation de l’offre. Il contribue à la clarté et à la lisibilité de l’offre. Il rassure aussi, par son aspect très professionnel. Dans la partie centrale de la page, Lyft fait de gros efforts pour présenter l’offre de manière claire, aérée et structurée. C’est un vrai plus. « Make up to $35/hr Driving your Car » : l’offre est très claire et ne laisse aucune ambiguïté. Le formulaire est bien apparent et apparaît aux visiteurs dès l’atterrissage sur la page. Le nombre de champs est approprié au regard de l’intérêt de l’offre. Le nombre de champs est identique à celui du formulaire Microsoft. Sauf que là, remplir le formulaire permettra aux leads de gagner de l’argent. Ce qui est quand même plus intéressant que de télécharger un e-book au contenu incertain ! A noter aussi le placement d’un deuxième CTA tout en bas de la page. N’hésitez pas, quand votre page est longue, à placer plusieurs CTA. C’est une très bonne pratique.

Lyft jouit d’une bonne image de marque, ce qui, en soi, joue sur la confiance des visiteurs. Mais à la différence de Microsoft, la marque ne se repose pas sur sa bonne image. Au contraire, toute la partie inférieure de la landing page est dédiée à la réassurance : informations sur la politique d’assurance, notes des clients et FAQ. Le tout mis en valeur par l’utilisation d’icônes parlantes. Seul petit bémol : l’absence de témoignages clients. La hiérarchie visuelle est particulièrement efficace. Il n’y a à vrai dire pas grand-chose à redire sur ce point. La structuration de la page en sections est très logique. Il y a une suite logique entre le haut de la page, qui présente l’offre en une phrase et intègre le formulaire, le milieu de page, qui donne plus d’informations sur l’offre et le bas de page consacré à la réassurance.

#3 Fiverr

Fiverr est un exemple de landing page plutôt ratée. L’offre n’est vraiment pas claire du tout. C’est le point noir de cette landing page. Dans la partie supérieure, le titre et le sous-titre juste au-dessus du formulaire sont très flous sur les bénéfices réels du service.  Le titre est particulièrement incompréhensible : « What do you need done ? » ??? Le sous-titre ne donne pas vraiment plus d’informations. Qui donnera son email à la lueur de ces informations ? La partie médiane de la page donne quelques précisions sur le fonctionnement du service, mais ne répond pas vraiment à la question de savoir quels « things » peuvent être « done at an unbeatable value ». Gros point noir au niveau de l’offre.

Le formulaire ne comporte quant à lui qu’un seul champ : l’email. L’ensemble formulaire + CTA est excellent d’un point de vue design.  Le CTA est très visible, et très propre. Il manque simplement un élément de réassurance sur la politique de confidentialité. Justement justement à la catégorie « Confiance ». Clairement, le compte n’y est pas. Comme vous pouvez le constater, il n’y a absolument aucun élément de réassurance. Fiverr ne peut compter que sur son image de marque pour rassurer les visiteurs (« Millions of services », « Over 3 million services »…), ce qui est clairement insuffisant. La hiérarchie visuelle est plutôt bonne. A noter la présence de 3 CTA, ce qui est très bien pensé. 4 CTA aurait peut-être été un peu trop agressif. Le nombre de CTA, si vous en placez plusieurs sur la page, doit être un minimum proportionnel à la longueur de la page. Plus largement, le template utilisé est plutôt qualitatif. Le formulaire, on l’a dit, est bien mis en valeur.

Venez partager votre expérience et vos problématiques en rejoignant gratuitement notre communauté Slack. Nous nous feront un plaisir d’échanger avec vous.

 #4 Trulia

L’offre de Trulia, sur cette landing page, est très claire : savoir combien coûte ma maison. Trulia, sur cet aspect, marque des points.  Le caractère très concis de la présentation de l’offre a un objectif évident : inciter le visiteur à remplir le formulaire et à donner son adresse email très rapidement. En revanche, le coeur d’activité de Trulia n’est pas du tout évoqué. Trulia est un service de transactions immobilières. Il n’y a pas mensonge par omission, car les visiteurs sont censés savoir ce qu’est Trulia : une agence immobilière. Mais bon… L’estimation proposée ici ne constitue qu’une première étape dans l’utilisation du service. L’image de fond, très générique, n’est pas très pertinente non plus.

Plutôt que d’utiliser cette photographie de fond, il aurait été plus pertinent d’illustrer le service, de présenter  d’une manière ou d’une autre le moteur de calcul par exemple. Concernant le formulaire : clairement, un  seul champ est insuffisant, au regard de la valeur du service proposé. La raison est simple : il ne s’agit pas du vrai formulaire. Les visiteurs qui donneront leur adresse seront pas la suite invité à donner davantage d’informations. On en revient là encore sur le manque de transparence de cette landing page. Voici le formulaire que doivent remplir les visiteurs une fois avoir donné leur adresse :

Le nombre de champs est ici approprié. Sur ce deuxième formulaire, on notera la mise en valeur très efficace du CTA. Efficacité due en grande partie à sa couleur. Le wording du CTA est bien choisi également : il n’est pas trop agressif, trop direct. Le design de cette deuxième page est très sobre. Le fond blanc fait bien contraste avec la première landing page, mais donne peut-être un côté trop minimaliste.

Le petit conseil de La Fabrique du net
Pour le choix de la couleur du CTA, n’hésitez pas à choisir une couleur que l’on ne retrouve pour aucun autre élément de la page. Cela permet de bien le faire ressortir.

Pour cet exemple encore, les éléments de réassurance brillent pas leur absence. Trulia joue aussi sur son image de marque déjà bien établie. On ne sait pas du tout comment seront utilisées les données récupérées grâce au formulaire. On ne sait pourquoi on devrait plutôt choisir Trulia qu’un autre concurrent. On ne sait pas ce que pensent les autres clients de Trulia…Concernant la hiérarchie visuelle, pas grand-chose à dire si ce n’est qu’elle est plutôt bonne. En même temps, lorsqu’une landing page comporte très peu d’éléments, il n’est pas très difficile d’obtenir un bon résultat sur ce point.

Vous disposez d’un site de logiciel SaaS ? Pour améliorer votre page d’accueil, découvrez notre analyse des pages d’accueil des éditeurs de logiciel SaaS.

#5 Resume Help

Terminons par cet exemple de Resume Help. Les autres exemples concernaient des marques assez connues. Resume Help, quant à lui, ne peut pas se reposer sur son image de marque. Le service est relativement peu connu. Concernant l’offre, le gros point noir réside dans le manque d’informations concernant le caractère gratuit ou payant du service. Aucune mention des tarifs sur cette landing page, alors que cela devrait apparaître clairement. Si le service est gratuit, cela devrait constituer un argument clé. Si c’est payant, l’absence d’informations sur la page ou de page Tarifs témoigne d’un manque de transparence évident. Concernant le contenu de l’offre : ce service permet de créer en CV en ligne. Mais quid des templates proposés par Resume Help ? Il aurait été bon d’en présenter un ou deux pour que l’internaute puisse se faire une idée des formats de CV proposés.

Il n’y a pas de formulaire sur cette landing page, mais un CTA. Le CTA est très visible et très claire du fait du wording choisi (« Create a resume »). C’est un des points positifs de cette landing page. Le clic sur le CTA permet d’accéder directement à l’assistant qui explique comment utiliser le service  :

Ce choix, ajouté à l’absence de formulaire et de demande d’informations personnelles, est excellent pour la conversion et la rétention. Il est possible que Resume Help soit dans une phase d’acquisition d’utilisateurs et cherche par conséquent à limiter au maximum les freins à la conversion. il est possible que le formulaire soit « imposé » aux utilisateurs pour le téléchargement du CV. Ce qui est plutôt une bonne idée, car les utilisateurs auront eu le temps de se faire une bonne idée des bénéfices du service avant de devoir entrer leurs informations personnelles.

Concernant la composante « confiance », le compte n’y est pas vraiment. Il n’y a aucun élément de réassurance. A noter d’ailleurs que la version précédente de cette landing page mettait en avant les marques connues utilisant le service :

On ne comprend pas très bien pourquoi ces mentions n’apparaissent plus. Quant à la hiérarchie visuelle : l’organisation de la page est plutôt agréable. Le CTA est clairement mis en valeur. Il est par ailleurs intégrer une deuxième fois en bas de page. La présence de CTA secondaires permettant de voir les templates et les exemples est une excellente idée. Sauf que les liens redirigent vers l’assistant logiciel dont nous avons parlé tout à l’heure. Ce qui est assez problématique…Il doit toujours y avoir une adéquation entre le wording du CTA et la page sur laquelle il redirige. Sinon, il y a de fortes chances que cela agace bon nombre de visiteurs et nuise à la conversion.

Voici pour les exemples. Nous espérons que notre grille d’audit des landing pages et que les 5 exemples présentés vous aideront à optimiser vos propres landing pages.

Pour aller plus loin, découvre 10 techniques simples pour augmenter le taux de conversion de votre site internet.