Article

16min lecture

Exemples des Meilleurs Design de Landing Page

Si vous gérez un site Internet (ou que vous prévoyez de le faire), alors vous savez à quel point il est peut-être difficile de convaincre un visiteur de rester sur votre page et encore plus de le convaincre d’acheter ! Le design de votre landing page joue un rôle important.

Comment choisir le design de sa landing page ?

Conçues dans le but de convertir vos visiteurs en leads ou clients, les landing pages sont des pages dont le design est travaillé pour focaliser l’attention des visiteurs sur votre proposition de valeur dans le but de les amener à réaliser une action que vous aurez déterminée auparavant : l’achat d’un produit, le remplissage d’un formulaire ou encore la participation à un essai gratuit.

Mais parmi toutes les offres disponibles et tous les concurrents qui existent sur le marché : il peut être difficile de se distinguer des autres.  Pour cela, il vous faut créer une landing page percutante et persuasive, spécialement adaptée à votre secteur d’activité.

Parce que nous savons qu’il peut être difficile de trouver l’inspiration avant de se lancer dans le design de votre future landing page, nous avons sélectionné pour vous dix landing pages modernes et efficaces qui convertissent.

Si vous vous posez des questions sur les landing pages et que vous souhaitez en apprendre davantage avant de vous lancer, consultez tous nos articles dédiés aux landing pages avec définition, bonnes pratiques et exemples concrets ou encore notre post sur les meilleurs outils pour créer une landing page.

Ces exemples sont tirés de sites que vous pouvez consulter. Bien évidemment, aucune de ces landing pages n’est parfaite : la perfection n’existe pas et c’est à vous d’adapter votre design aux exigences de vos clients. Nous vous conseillons également d’A/B tester différents design pour vos landing pages.

Arrêtez d’optimiser votre site sur la base d’intuitions ! Cliquez-ici pour mettre en place une vraie méthodologie d’optimisation basée sur la donnée !

10 exemples des meilleurs design de landing pages

LeadQuizzes

LeadQuizzes est une société spécialisée dans la vente de « quiz » conçus pour capturer des « leads ».  On remarque d’emblée la vidéo explicative (très bien conçue) du service qui répond aux questions basiques telles que :

  • À quoi ça sert ?
  • Suis-je concerné ?
  • Qu’est-ce que cela m’apporte ?

Deuxièmement, le call-to-action orangé détonne du reste de la page et invite très clairement au clic : « Try it Free » nous rassure sur le fait que nous ne payerons pas d’emblée et qu’il existe un essai gratuit. En savoir plus sur l’optimisation des call-to-action.

La preuve sociale est flagrante et bien mise en valeur : les références sont des acteurs connus du marché et le texte indique que plus de 3 millions de leads ont été générés via LeadQuizzes : ça donne envie !

Design Landing Page Lead Quizzes

Design Landing Page Social Proof

La suite de la landing page ne déçoit pas non plus : elle est construite autour de l’éducation du visiteur à l’utilité du produit.  Le but : convaincre avec une (grande) page que le service de LeadQuizzes est performant et utilisé par les grands acteurs du digital.

Design Landing Page Lead Quizzes Social Proof

La preuve sociale est fortement mise en valeur sur la landing page de LeadQuizzes. Elle répond à des questions concrètes et tangibles qui concernent les potentiels acheteurs :

  • Combien de ventes supplémentaires vais-je réalise ?
  • Combien de nouveaux prospects puis-je capturer ?

GrowthHackers

GrowthHackers est une société qui commercialise un logiciel qui augmente la productivité des équipes marketing et coordonne les actions de « business development » ainsi que les nouvelles idées des équipes innovantes.

Similaire à LeadQuizzes, le call-to-action orangé se démarque agréablement du reste des couleurs de la page et invite à l’action. Nous sommes également invités à un « essai gratuit » qui permet de rassurer un grand nombre de visiteurs qui ne seraient pas prêts à payer avant d’avoir été convaincus de l’utilité du service.

Landing Page Design Growth Hackers

La landing page se prolonge avec une navigation sous la forme d’un menu déroulant qui répond aux principales questions que se posent les potentiels utilisateurs de GrowthHackers Project.

  • « Pourquoi utiliser le service ? »
  • « Pourquoi les cadres aiment-ils le logiciel ? »
  • « Pour qui est ce service ? »

On remarque également qu’une bulle de « chat » est disponible pour poser des questions : une fonction bien utile lorsqu’on est indécis ou qu’une question nous taraude.

Landing Page Design Growth Hackers

Quant à la preuve sociale, elle est mise en valeur de deux façons :

  • On voit qu’une « communauté » existe autour du service.
  • On voit que de nombreuses personnes utilisent le service et sont actives dans la communauté.

On pourrait cependant reprocher que les nombres ne sont peut-être pas assez visibles.

Landing Page Design Growth Hackers

ElegantThemes

ElegantThemes est une entreprise spécialisée dans la vente de templates ou « thèmes » WordPress et commercialise également un « builder » appelé Divi, qui permet de créer visuellement des pages sous WordPress. A ce sujet, consultez nos exemples de templates de landing pages pour WordPress.

On remarque d’emblée la preuve sociale : c’est le premier élément mis en avant qui vient rassurer le visiteur sur la popularité du service : plus de 400.000 utilisateurs selon le site.

Landing Page Design Elegant Themes

On remarque ensuite que la proposition de valeur est double et que deux call-to-actions séparés ont été créés pour l’occasion : un pour découvrir les templates prêts à l’emploi et un autre pour découvrir les Plugins de la marque.

Autre élément intéressant : on voit apparaître sur le côté droit inférieur une bulle de conversation prête à répondre aux questions qu’un visiteur pourrait se poser.

Le module de chat est particulièrement intéressant puisqu’il permet également d’envoyer des pièces-jointes, Emojis et GIFs ce qui ne peut que renforcer la richesse de l’interaction.

Design Landing Page Divi Builder

En naviguant sur la landing page, les visiteurs se voient offrir la possibilité d’essayer en « live » une démonstration du Builder Divi. Il s’agit d’une proposition de valeur conséquente et très convaincante puisque les utilisateurs peuvent découvrir directement le produit, sans payer ni même s’inscrire.

Example Landing Page Design

Plus bas dans la landing page, la preuve sociale est remise en avant et le paragraphe contient un élément destiné à rassurer les potentiels acheteurs : une offre de remboursement valable 30 jours.

De plus, le call-to-action rouge-rose vient contraster avec le fond bleu de la page, renforçant l’effet de curiosité : on est visuellement attirés vers le bouton placé en position centrale sur la page.

Shopify

Shopify est un CMS qui permet de créer rapidement et simplement des sites e-commerce sans connaissance en programmation. Ils se démarquent par leurs nombreuses ressources mises à la disposition des utilisateurs (guides, vidéos, podcasts, forums) ainsi que des services additionnels complémentaires à leur cœur d’activité : magasin de « thèmes » prêts à utiliser, librairie de photos gratuites…

Sur la landing page, la proposition de valeur est tout de suite mise en avant : « the e-commerce platform made for you ».  L’idée est donc de d’adresser à une clientèle large, souvent indépendante comme en témoigne la photo d’illustration.

Particularité de cette landing page, le call-to-action contient un champ pour l’adresse e-mail. Ce champ est donc la condition d’accès à l’essai gratuit de 14 jours proposé juste en dessous qui précise qu’aucune carte bancaire n’est requise pour l’essai : c’est un argument majeur.

La suite de la landing page met l’accent sur les caractéristiques du service de Shopify.

Grâce à des illustrations uniques et la bonne utilisation de courts paragraphes, l’entreprise présente les fonctionnalités et les bénéfices tirés de l’utilisation de Shopify dans le but de convaincre les visiteurs de passer sur l’essai gratuit voire d’acheter l’abonnement mensuel.

Argument majeur dans le secteur des CMS, l’utilisation massive du service est mise en valeur grâce à deux éléments :

  • la représentation graphique du nombre d’utilisateurs et des revenus générés
  • des témoignages de vrais clients dont les sites sont en ligne.

L’idée est de créer un sentiment de mimétisme dans l’esprit des visiteurs : « si 1.000.000 de personnes utilisent Shopify et créent de vraies boutiques sans programmer ; alors moi aussi je peux le faire ».

Salesforce

On ne présente plus Salesforce. Roi du « CRM » (Customer Relationship Management), la société américaine possède plusieurs landing pages particulièrement travaillées qui méritent le coup d’œil.

Design Landing Page Salesforce

La première chose qui saute au regard est le travail des illustrations et des couleurs. Un aperçu des solutions sur Ordinateur-Tablette-Mobile est présenté sur un fond qui inspire le calme et la sérénité.

On remarque également que deux call-to-action sont présents sur la partie supérieure gauche au-dessus de la ligne de flottaison : un premier pour une démonstration et un deuxième pour un essai gratuit.

Aillant un positionnement double, Salesforce propose également une solution pour les grandes entreprises, dont le call-to-action est placé à droite de l’essai gratuit : pratique pour éviter de perdre de potentiels leads issus de grands groupes.

Subscription Form Design Landing Page Salesforce

Lorsqu’un visiteur clique sur un des call-to-action, il passe de la page d’accueil à une landing page créée spécifiquement pour convaincre un maximum de personnes de s’inscrire à l’essai gratuit.

Parmi les éléments marquants, on remarque :

  • Le rappel de la proposition de valeur « 30 jours d’essai gratuit »
  • La mise à disposition d’un service d’assistance téléphonique
  • La mention « aucun téléchargement, aucun logiciel » en majuscules
  • La preuve sociale avec l’insertion des logos de références connues
  • Une inscription simplifiée via Google+, Facebook & LinkedIn

Neil Patel

Neil Patel est un consultant en marketing digital qui possède une très forte notoriété aux États-Unis et dans le monde. Son site reçoit plusieurs millions de visites par mois grâce à une stratégie de contenu accessible et de nombreuses ressources créées pour ses visiteurs : articles de blog, vidéos sur YouTube, guides pratiques…

Neil Patel Design Landing Page

Ce qui frappe en premier sur le site de Neil Patel, c’est son approche décomplexée et franchement directe sur la question.

Le thème couleur est extrêmement simple et joue sur le contraste entre le fond orangé et le texte blanc. L’idée : poser une question directe, simple et courte aux visiteurs afin de les engager au maximum.

On constate également que la landing page propose d’emblée (au-dessus de la ligne de flottaison) un champ conçu pour réaliser une analyse de votre site en direct : c’est une démonstration de force qui amène le visiteur à découvrir par lui-même ce qui pourrait être amélioré sur son site.

Design Landing Page Benefits Neil Patel

La particularité du site de Neil Patel, c’est que presque toutes les pages sont conçues sur le modèle d’une landing page avec un seul objectif : convertir le maximum de visiteurs.

La page « Services » par exemple (au-dessus) affiche un long texte qui agit comme une preuve d’autorité sur les visiteurs. Elle expose donc ce que Neil peut faire pour vous mais également ce qu’il a réussi à faire (voir en dessous) et les clients pour lesquels il a travaillé.

Design Landing Page Proof Neil Patel

L’approche est toujours très directe et focalisée sur les résultats et bénéfices.

L’idée de Neil est de prouver par A+B qu’il est compétent pour vous aider à améliorer votre référencement.

Neil Patel Call to Action Design Landing Page

Toujours sur la même page « Services », le call-to-action n’arrive ici qu’à la fin (et on peut se demander si c’est une bonne idée ?). Il est structuré en plusieurs étapes qui invitent le visiteur à renseigner ses informations afin d’être contacté ultérieurement.

UpWork

UpWork est une plateforme de freelances mondialement connue. Elle permet aux entreprises de trouver rapidement de la main d’œuvre qualifiée pour des missions diverses et permet aux indépendants de s’inscrire sur la plateforme pour proposer leurs services.

Design Landing Page Upwork

Sur la page d’accueil, on remarque d’emblée que la charte graphique est claire et que c’est l’aspect « professionnel » qui est mis en avant. De façon intéressante, la tagline choisie ne s’adresse pas aux freelances mais bien aux entreprises.

Le ton est direct, efficace et clair : on comprend instantanément la proposition de valeur : sous-traiter du travail de façon efficace.

Le call-to-action est placé sur le côté gauche au-dessus de la ligne de flottaison. Sa couleur verte le distingue du reste de la landing page et il est constitué d’une barre de recherche qui sert à indiquer le type de travaux que les visiteurs cherchent à externaliser. Si l’on paye attention aux détails, on remarque que le fond utilisé est en réalité un témoignage client dont on peut visionner l’histoire : c’est très percutant !

Design Landing Page Upwork

La suite de la landing page est assez classique : elle détaille les différents services proposés par les freelances et fait découvrir les offres payantes destinées aux utilisateurs.

CodeCombat

CodeCombat est un exemple intéressant. Il s’agit d’un jeu éducatif qui permet aux enfants (et aux moins jeunes) d’apprendre à programmer à l’aide d’un jeu vidéo. Le principe est simple : on programme soi-même son avancée dans le jeu.

Code Combat Landing Page

Le premier point intéressant de la landing page de CodeCombat est que la cible est double : elle vise à la fois les enseignants (qui souhaitent l’utiliser en classe) et les enfants (qui découvrent par eux-mêmes ou grâce au bouche-à-oreille).

L’accent de la landing page est donc mis sur la pédagogie et sur la simplicité d’utilisation du programme. On remarque donc un double call-to-action : un pour les enseignants et un pour les enfants/joueurs.

Design Landing Page Code Combat

La suite de la landing page présente les avantages et bénéfices tirés de l’utilisation de CodeCombat ainsi que des captures d’écran pour rendre plus « tangible » le service.

Testimonial Design Landing Page Code Combat

De façon assez classique, la suite reprend les points forts du service et inclut un témoignage client adapté à la cible : celui d’un directeur d’école.

MailChimp

MailChimp est une entreprise de marketing et d’emailing automatisé extrêmement populaire. Leurs services sont utilisés massivement pour créer des campagnes e-mails, marketing et des newsletters depuis des sites e-commerce.

De façon aussi directe que Neil Patel, la landing page est extrêmement claire et directe : elle s’adresse aux visiteurs d’une manière franche tout en restant vague : « Build your brand, Sell more stuff. ».

Cela permet à MailChimp de s’adresser de façon globale aux visiteurs en évitant d’en exclure une trop grosse partie d’emblée.

La proposition de valeur est simple au possible : construire sa marque, vendre davantage.

Cette approche directe et décomplexée est répandue auprès des solutions SaaS (Software as a Service) : le but est de parler directement aux chefs d’entreprises de toutes tailles en allant droit au but.

On remarque que le call-to-action est très visible : il est situé en position centrale au-dessus de la ligne de flottaison et propose un essai gratuit (encore ?!).

Comme sur Plated, la suite de la landing page détaille les bénéfices tirés de l’utilisation du service. Cela permet aux visiteurs de « visualiser » rapidement la valeur ajoutée du service et de se faire une idée claire sur la question suivante : « Ce service est-il fait pour moi ? »

En construisant une longue landing page, vous permettez à vos visiteurs de « scroller » autant qu’ils le souhaitent : cela permet de répondre à un maximum de questions tout en faisant office de brochure commerciale afin de mettre en avant votre valeur ajoutée.

En utilisant des captures d’écrans, MailChimp permet aux visiteurs de se projeter plus facilement. L’idée est donc d’aider les visiteurs à mieux comprendre le service en visualisant un échantillon. Cette technique peut être adaptée en vidéo ou même sous la forme d’une démonstration en live comme le fait ElegantThemes.

On remarque que le call-to-action de l’essai gratuit est toujours accessible, où que l’on se situe sur la page, ici en haut à droite.

Une fois pris dans le tunnel de conversion, les visiteurs atterrissent sur la page de formulaire nécessaire pour activer l’essai gratuit. Afin de maximiser la conversion, le formulaire d’inscription de MailChimp est volontairement :

  • Court
  • Clair
  • Précis

En limitant le nombre de champs à trois, MailChimp permet aux visiteurs hésitants de sauter le pas plus facilement : l’engagement demandé est gardé au strict minimum : un e-mail, un nom d’utilisateur et un mot de passe.

S’il devait être amélioré, on pourrait regretter l’absence d’une inscription rapide via Facebook ou Google qui faciliterait encore plus la conversion.

Vous avez aimé cet article ? Si vous êtes inspirés et que vous souhaitez sauter le pas, découvrez notre article dédié aux templates de landing pages Bootstrap : l’atout parfait pour une landing page réussie.

Abonnez-vous à
notre Newsletter

bloc Newsletter FR

AB Tasty traite et stocke vos données personnelles pour vous envoyer des communications tel que détaillé dans notre politique de confidentialité ici.

Article

9min lecture

Tunnel de conversion e-commerce : le guide de survie

Qu’est-ce qu’un tunnel de conversion ?

Tous les business en ligne possèdent un certain nombre d’étapes qui font passer une personne du visiteur au client. D’ailleurs si vous êtes en train de lire cet article, c’est probablement que vous êtes concernés par une question entêtante : « comment convertir mes visiteurs en clients ? » et encore plus important « comment en faire des clients fidèles ? ».

Que vous souhaitiez que vos visiteurs vous donnent leur adresse e-mail, téléchargent un e-book ou achètent vos produits; ceux-ci passeront par un certain nombre d’étapes avant de réaliser votre objectif : ces étapes définissent le tunnel de conversion de votre site.

Exemple de tunnel de conversion pour un site e-commerce

L’idée derrière le « tunnel de conversion » est la métaphore de l’entonnoir de conversion : un grand nombre de visiteurs arrivent sur votre site et peu nombreux seront ceux qui achèteront au final.

Pour optimiser votre tunnel de conversion, télécharger notre guide de l’abandon de panier.

La raison ? Vos visiteurs passent par plusieurs étapes déterminantes dans le processus d’achat.  Celui-ci est souvent décrit à l’aide du modèle AIDA pour Attention – Intérêt – Désir – Action :

  • Attention. C’est la première étape de votre tunnel de conversion. Vous attirez vos visiteurs en créant de la visibilité pour votre site afin de leur faire prendre conscience de vos produits. Vous y parvenez grâce à la publicité, les réseaux sociaux, le marketing de contenu etc.
  • Intérêt. Une fois que vous attirez des visiteurs sur votre site, les choses sérieuses commencent. Vous devez construire l’intérêt de vos visiteurs pour vos produits. Pour y parvenir ; du contenu pertinent, des visuels percutants et des offres spéciales sont de bons atouts pour commencer. L’idée est de susciter de l’engagement entre vous (le site) et vos visiteurs qui ne vous connaissent probablement pas. Proposer de souscrire à une newsletter est également un bon point de départ pour susciter l’intérêt.
  • Désir. L’étape suivante tourne autour de la création d’une relation de confiance et d’un désir d’achat. L’idée est de créer un environnement rassurant et pertinent qui permet d’accompagner votre prospect toujours plus bas dans le tunnel de conversion. Des campagnes d’e-mails personnalisés et intéressants vous permettent cela : vous pouvez proposer des offres spéciales, des études de cas ou des témoignages clients qui rassureront vos visiteurs et leur donneront envie de passer à l’acte.
  • Action. Le nerf de la guerre, l’étape finale et cruciale de votre tunnel de commande. À cette étape, vos visiteurs ont descendu le tunnel de conversion et commencé à interagir avec votre marque (ils ont téléchargé, souscrit ou encore appelé). Dès lors, votre objectif est de convaincre vos prospects de convertir en effectuant un achat ou l’action que vous désirez. Il s’agit par exemple de ne pas surcharger vos pages de paiement et de n’affichez que les informations pertinentes et convaincantes qui aideront vos prospects à devenir clients.

Parce que le but ultime de votre site e-commerce est de convertir, les professionnels de l’e-commerce utilisent le tunnel de commande pour analyser la capacité d’un site à convertir ses visiteurs en clients à chaque étape du processus.

Quel est l’intérêt d’un tunnel de conversion ?

Le tunnel de conversion est un outil très performant et simple à mettre en place qui vous permet de comprendre quels sont les blocages que rencontrent mes visiteurs dans le tunnel de commande et comment les résoudre.

Regardez plutôt par ici :

Fitzroy's Flower London
source: fitzroysflowers.com

Sur ce site de livraison de fleurs à Londres, la moitié des produits affichés sur la partie droite du site a un problème d’affichage : impossible de voir et de cliquer sur le call-to-action « BUY », problématique non ?

L’idée derrière l’utilisation du tunnel de conversion est donc de mieux comprendre les étapes que traversent les visiteurs de votre site internet :

  • Quelles sont les pages du site qui posent des problèmes ?
  • Quel est le taux de conversion de chaque étape ?
  • Combien de personnes quittent le site après une, deux, trois étapes ?
  • À quelle étape ou sur quelle page mes visiteurs fuient-ils ?

En analysant ces problématiques, vous obtenez rapidement une meilleure idée de ce qui fait la force et la faiblesse de votre site.

Mieux : vous savez sur quelle(s) étape(s) du tunnel d’achat vous devez travailler pour obtenir plus de commandes, plus d’e-mails ou plus d’appels.

En analysant votre tunnel de conversion, vous remarquerez qu’une toute petite partie de vos visiteurs atteignent effectivement la dernière étape (Action). C’est pourquoi même des changements mineurs à chaque étape de votre tunnel d’achat vous aideront à améliorer grandement votre conversion. Vous pouvez recourir à l’a/b testing pour tester ces changements et en mesurer l’impact.

Comment mesurer et améliorer la performance de son tunnel de conversion ?

Vous avez pris connaissance de l’importance du tunnel de conversion en e-commerce et vous avez raison.

L’objectif de l’analyse du tunnel de conversion est d’améliorer la conversion de votre site (et donc de générer davantage de ventes) tout en analysant les comportements de vos visiteurs pour limiter les « fuites » à chaque étape du tunnel d’achat.

En fonction de la nature du site que vous voulez analyser, vous pouvez mettre en place des tunnels de conversion plus ou moins large.

Tunnel de Conversion Decathlon
Un tunnel large sera intéressant pour un site e-commerce de produits qui souhaite avoir une vue d’ensemble du parcours de ses visiteurs depuis la Page d’Accueil jusqu’au Panier, comme ici sur le site de Décathlon.

 

Tunnel de conversion pour Ebook
Un tunnel restreint sera intéressant pour un site qui comporte peu de pages (et donc peu d’étapes) ou pour un site qui souhaite analyser une seule étape de son processus d’achat, comme ici sur ce site de jardinage qui propose un e-book.

De façon générale, il existe plusieurs « bonnes pratiques » qui permettent de fluidifier son tunnel de conversion et d’augmenter ses ventes.

L’idée principale est simple : simplifier au maximum le parcours client et supprimer les obstacles qui empêchent vos prospects de convertir ou d’abandonner leur panier d’achat.

Simplifier la navigation et être clair

Une navigation compliquée ou pas claire est un frein à la conversion. Vos visiteurs doivent pouvoir trouver ce qu’ils cherchent de façon intuitive et être guidés dans le processus d’achat. Cela implique de mettre en avant les liens et sections utiles de votre site et de supprimer les zones d’importance secondaire voire totalement inutile.

Payplug
Sur le site PayPlug, la navigation est épurée et la proposition de valeur est simple : « Tester » ou « En savoir plus ».

Ne pas surcharger d’informations

Trop d’informations tue l’information. Essayez de classer les informations que vous soumettez à vos visiteurs par ordre d’importance. Concentrez-vous sur les informations essentielles en début de navigation et laissez les visiteurs les plus curieux creuser d’autres informations plus en profondeur.

Homly You
Sur le site Homly-You, l’information est classée en catégorie afin de mieux orienter les visiteurs : ceux-ci sont libres de choisir la catégorie d’information qui les intéressent et d’ignorer les autres.

Proposer une aide visible

De nombreux visiteurs aimeraient poser quelques questions avant de passer à l’achat et d’encore plus nombreux visiteurs ne finalisent pas leur achat car ils n’ont pas pu accéder à une aide au moment clé. Mettre en place un service ou un « chat » d’aide permet d’augmenter la conversion tout en rassurant vos visiteurs.

Ma Petite Culotte
Sur le site Ma P’tite Culotte, les visiteurs se voient proposer de l’aide de façon spontanée et peuvent ainsi poser des questions relatives aux produits (taille, livraison etc.)

Mettez en avant des éléments rassurants

La « preuve sociale » est un élément très puissant pour améliorer votre conversion. Afficher des témoignages clients, des exemples de réalisations ou des notations par un tiers permet de rassurer le visiteur sur le sérieux du site qu’il visite ce qui contribue fortement à l’augmentation de votre conversion.

Trello
Sur le site de Trello, de nombreuses références prestigieuses de clients sont affichées. En voyant ces références, un sentiment de confiance inconscient naît.

Pour aller plus loin dans l’optimisation de votre site e-commerce, consultez tous nos conseils pour limiter l’abandon de panier.