Vous cherchez quelque chose ?

Landing page : 15 exemples de design réussi


Cet article a été revu et mis à jour la dernière fois le 22 Septembre 2017 à 17:44

Une page de destination bien pensée et optimisée est l'assurance d'un meilleur taux de conversion. Nous vous présentons ici une liste de sites ayant parfaitement compris cette nécessité.

Wistia est le premier de la liste avec une page de destination sobre et bien pensée. L'internaute tombe directement sur une page dédiée à la création de compte et dotée d'un fond bleu visuellement réussi. La couleur contraste avec le champ de formulaire en blanc dont la taille et l'emplacement au premier plan garantissent un taux de conversion optimal. Difficile de se tromper sur la démarche à suivre une fois arrivé sur cette page de destination. Wistia propose néanmoins les réponses aux FAQ les plus courantes sous le formulaire, pour ne laisser planer aucun doute. Le site a même eu la bonne idée de séparer ces deux sections par des couleurs différentes.

Wistia

Il n'est pas étonnant de voir Unbounce dans la liste des premiers sites ayant une page de destination réussie. Le site a en effet écrit l'ouvrage traitant de la création de pages de destination optimisées pour la conversion. Deux éléments se démarquent sur la page : les flèches pointant vers le titre ainsi que le navigateur et les informations détaillées sous le formulaire. En tant que signaux directionnels, les flèches attirent directement l'attention sur l'objectif de la page. Les informations renforcent quant à elles le SEO en fournissant aux moteurs de recherche du contenu à référencer.

Unbounce

C'est la page qui a inspiré cet article puisque tous les éléments essentiels à une page de destination réussie s'y retrouvent. On peut entre autres citer une mise en page parfaite, depuis la bannière en haut à gauche signalant la récente mise à jour de l'ebook, jusqu'aux témoignages qui défilent à l'écran, et des contours sublimant parfaitement les éléments de la page. On sent dès le premier coup d'œil que la page est à la fois fonctionnelle et attrayante. Tous les sites devraient pouvoir proposer une page de destination similaire, car leur taux de conversion n'en serait que meilleur.

Impact

La page de destination de WebDAM possède de nombreuses fonctionnalités réussies. Cependant, c'est au niveau de l'aspect visuel qu'elle se distingue. WebDAM a en effet réussi à créer des icônes suffisamment explicites pour que l'on ne soit pas obligé de lire les textes du champ de formulaire pour savoir ce qu'il faut faire. Il suffit de voir les icônes au niveau du nom et du prénom pour s'en rendre compte. Par ailleurs, il faut noter que le champ de formulaire est une flèche bleue avec, au bout, un bouton orange pour télécharger le guide du site. L'utilisation des couleurs bleu et orange est pertinente puisqu'elles sont complémentaires.

WebDAM

À l'instar de Unbounce, Basecamp propose une page de destination longue et suffisamment détaillée avec de nombreuses informations sous le formulaire. Le petit plus reste le dessin de l'homme pointant du doigt les différents champs à remplir. Il remplace en effet les signaux indicateurs et attire directement l'attention du visiteur sur le formulaire. Comme pour la page de destination d'Impact, cette image est visuellement attrayante et favorise la conversion. Difficile de faire mieux !

Basecamp

On pense souvent que les pages de destination sont statiques. Pourtant, il suffit d'avoir les bons outils pour les personnaliser et les rendre interactives. Bills.com a par exemple suivi cette voie en proposant une page de destination animée : deux questions sont posées à l'internaute afin de savoir comment le site peut l'aider. Si cette première étape entraîne souvent quelques doutes – notamment si l'on ne remplit pas le profil attendu -, toute appréhension disparaît dès lors que le formulaire apparaît. Il ne s'agit d'ailleurs certainement que d'un détail puisqu'il est sûr que la plupart des internautes verront le formulaire. Autrement, la conversion sera impossible.

Bills.com

Selon une étude réalisée par Chartbeat, les internautes sont plus attentifs au contenu situé autour et en dessous de la ligne de flottaison. Ces parties du site sont celles générant le plus d'engagements et insérer un formulaire ailleurs n'aurait aucun intérêt. Contently s'est ainsi plié à cette règle avec l'exemple ci-dessous. Il propose deux différentes pages accessibles par scroll aux visiteurs, mais garde le formulaire en bas de page. La localisation du formulaire fait d'ailleurs partie des éléments les plus réussis de cette page de destination.

Contently

Avec quelques astuces, on peut facilement raccourcir une page de destination pour qu'elle paraisse moins longue. Peu d'internautes accepteraient en effet de remplir plusieurs champs sur une seule page. Webprofits nous montre ainsi son astuce : un champ de formulaire pour la saisie email est disponible sur la première page. En la remplissant, on fait apparaître d'autres champs, ce qui est relativement pratique, puisque l'internaute ne se rend pas compte de la longueur réelle du formulaire. Des informations détaillées sur les avantages de cette démarche sont disponibles en bas de page. Webprofits a même eu l'idée d'insérer différents boutons call-to-action pour pouvoir revenir au formulaire à tout moment.

Webprofits

Bien que le site soit en Espagnol, il est tout à fait possible de découvrir ses capacités de conversion. Les deux éléments les plus marquants sur cette page ? Le formulaire qui reste en place même si on scrolle, et la main servant de signal directionnel. La main attire l'attention sur le formulaire et les boutons de partage sociaux situés sous la ligne de flottaison, dès qu'on fait défiler la page.

Inbound Emotion

Parfois, on est tenté de se laisser aller et d'admirer une page de destination uniquement parce qu'elle est visuellement attrayante. H.BLOOM est le meilleur exemple d'une belle page de destination, dans la mesure où le site utilise des photos en haute définition et conserve de nombreuses parties en blanc. Même les champs du formulaire sont blancs. Mis à part ces détails importants, il faut également noter que la page possède de nombreux éléments propices à la conversion : un formulaire accessible au-dessus de la ligne de flottaison, une description claire et concise de ce qui se produit si on remplit les différents champs, et un bouton « Soumettre » en orange. La seule chose qu'il faudrait modifier ? Le texte sur le bouton « Soumettre » qui devrait être plus adapté à l'offre proposée.

H.Bloom

Ce sont souvent les petits détails qui font une grande différence. C'est ce qui rend cette page de destination si particulière. La petite icône PDF sur les images permet par exemple de savoir en quel format sera téléchargé le document. Il en est de même pour la flèche sous l'image du cosmonaute, qui attire l'attention de l'internaute sur le formulaire et l'incite à le remplir. Le fond orange est un élément supplémentaire qui invite le visiteur à débuter sur cette partie du site. S'il semble s'agir de menus détails, ce sont pourtant ces éléments qui contribuent à l'efficacité ainsi qu'au design réussi de la page de destination.

Velaro

Le site web de Conversion Lab se distingue par son formulaire situé sur la page d'accueil et non sa page de destination. Ce n'est cependant pas le seul élément particulier du site, puisqu'il s'avère que tous ces éléments sont réunis au sein d'une même interface. Les liens de navigation renvoient ainsi aux informations situées plus bas. Lorsqu'on clique sur le bouton de rappel, l'ensemble du site laisse place au formulaire, ce qui est relativement pratique puisqu'on ne quitte pas la page pour y accéder. Certains visiteurs diront qu'il s'agit d'une forme d'intrusion, mais on ne peut que saluer le côté pratique.

Conversion Lab

Litmus propose des newletters intéressantes, mais ce qui est encore plus intéressant, c'est la page de destination servant à promouvoir ces produits. L'utilisation des couleurs est tout simplement incroyable. Il faut noter à quel point une bonne partie de la page de destination – où se trouve le champ servant à renseigner son adresse email – possède un fond sombre : l'œil est naturellement attiré vers cette partie du site. Le bouton « Souscrire » est dans une couleur complémentaire à celle du reste de la page, ce qui lui permet de se distinguer davantage. Enfin, Litmus a pris soin d'animer les images représentant les newsletters pour une page de destination particulièrement réussie.

Litmus

Dès le premier coup d'œil, la page de destination en met plein la vue avec le slogan : « Don't make me zoom. » On notera la référence directe – et pertinente - aux internautes utilisant leur smartphone ou tablette pour se connecter à Internet et devant régulièrement zoomer pour lire. On notera également la couleur rouge utilisée à des emplacements stratégiques : sur l'en-tête du formulaire et le bouton invitant l'internaute à télécharger les documents disponibles. Le site d'Industrial Strength Marketing est de plus adapté pour une navigation mobile. Il reste donc toujours lisible quel que soit le terminal utilisé.

Industrial Strength Marketing

À l'instar des différentes pages de destination proposées dans cet article, la page de destination de Shopify privilégie la simplicité. L'en-tête est composé de quelques mots, tandis que les informations se présentent sous forme de puces et non de paragraphes. Seuls quelques champs doivent être remplis avant de passer à l'étape suivante qui est la création de son compte. La cerise sur le gâteau ? La page de destination de Shopify est adaptée à tous les appareils : le responsive design est en effet au rendez-vous.

Shopify


Si vous ne trouvez pas la chronique correspondante à votre recherche, c'est peut-être l'occasion de la rédiger ;-)

Proposer ma chronique

Aimez-vous cet article ?

Nos réseaux préférés

Sur le même sujet

Ajouter un commentaire