Comment construire la meilleure landing page: les 4 clés du succès

La landing page, qui désigne la page sur laquelle arrive un internaute après avoir cliqué sur un lien, est un point important de toute stratégie digitale. Comment bien la construire?
Le chemin vers une landing page presque parfaite
Le chemin vers une landing page (presque) parfaite

(traduit de l’anglais, article disponible ici, écrit par Larry Alton)

Bien qu’il n’y ait probablement pas de formule parfaite pour construire une landing page parfaite, il est néanmoins vrai que l’on retrouve des points communs dans toutes les pages qui ont un fort taux de conversion. Si vous voulez que votre landing page soit performante, alors n’oubliez pas d’intégrer les 4 éléments suivants lors de la construction de la page:

1. Des images haute définition

En 2016, l’utilisation de visuels et images en haute définition est devenu indispensable en content marketing (marketing de contenu), Je vous invite à lire ces statistiques (ou celles là en anglais) si vous n’êtes pas convaincus 🙂
Voici un résumé des plus intéressantes:

  • Des recherches ont trouvé que les visuels en couleur augmentent jusqu’à 80% l’envie du lecteur de lire la suite
  • Si on associe une image pertinente avec les informations auditives qu’entendent les utilisateurs, les chances pour qu’ils retiennent l’information pendant au moins 3 jours passent de 10 à 65%
  • Le contenu avec des images pertinentes a jusqu’à 94% de vues en plus que le même contenu sans image
  • Le contenu visuel a 40 fois plus de chances d’être partagé sur les réseaux sociaux que tous les autres types de contenu

 

Comme vous pouvez le voir, avoir des visuels adaptés et des images HD est indispensable pour améliorer votre content marketing et engager votre segment cible. Ça s’applique donc également à votre landing page!

Voyons un exemple: regardez cette landing page de Luxury Estates International. La première chose que vous remarquez sont les images attirantes, vives du diaporama en haut de la page. En voyant ces images, on a tout de suite le sentiment d’être sur une page de haute qualité.

Du coup, une mauvaise landing page serait une page qui notamment manquerait d’images de qualité (quelques exemples ici, même si les images ne sont pas le seul problème). Quand on clique sur ce genre de pages, on ne ressent pas de sentiment de bien-être, une impression générale positive et agréable. Plutôt le contraire en fait, et on se sent parfois même confus, perdu, voire déçu.

La morale de l’histoire? Utilisez des images de grande qualité sur vos landing pages. Haute résolution, originales, attirantes et pertinentes.

2. Un CTA clair et précis.

Dès que vous entendez quelqu’un se plaindre que sa landing page a un mauvais taux de conversion, vous devriez tout de suite lui demander: « quel est votre CTA (Call To Action, appel ou incitation à l’action)? Et l’avez-vous testé? »
Dans la plupart des cas, le CTA a été mis après coup au hasard sur une page, et c’est ça le problème. Le CTA doit au contraire être la raison d’être d’une page, qui doit être construite autour et non le contraire!

Quelques suggestions:

  • Utilisez un vocabulaire d’action. Un appel à action fort utilise toujours un vocabulaire adapté. Dans l’idéal, il faudrait provoquer des réactions rapides, et donc utiliser des phrases familières que les visiteurs reconnaîtront tout de suite. Vous pouvez essayer des mots tels que commencez, arrêtez, augmentez, développez, maintenant, dépêchez-vous, découvrez, économisez, aujourd’hui, cette offre se finit dans…
  • Faites attention à vos visuels. Encore une fois, les visuels sont les éléments les plus importants! Votre appel à action doit être très visible et mis en avant. Dans la plupart des cas, vous pouvez utiliser des boutons colorés et des couleurs contrastées pour faire ressortir votre appel à action.
  • La taille compte! Un des éléments le plus oublié lors de la construction d’une page est la taille, alors que c’est un point très important de la structuration. En fait la clé est d’avoir un appel à action suffisamment gros pour ressortir, mais sans surcharger le lecteur. Il est vrai qu’il n’y a pas de règle universelle concernant la page, c’est particulier à chaque cas, il vous faudra donc faire de nombreux ajustements.
  • N’oubliez pas l’emplacement. Très souvent, les visiteurs parcourent une landing page en suivant un chemin en forme de F ou de Z. Ceci dit, il est généralement conseillé de mettre votre CTA en haut à gauche ou en bas à droite, cela permet d’engager votre utilisateur au tout début ou à la fin de leur parcours de consommation.

Lorsque vous concevrez le design de votre prochaine landing page, mettez cet élément en haut de vos priorités: reléguer pour plus tard est sans aucun doute l’un des meilleurs moyens de ruiner votre landing page.

3. Des témoignages de confiance

Ces témoignages sont un composant indispensable à n’importe quelle stratégie de marketing digital, et plus encore pour des landing pages. « Quand quelqu’un atterrit sur votre landing page, ils ne savent pas si votre offre vaut le coup ou pas: cela vous donne l’opportunité de les impressionner grâce à des témoignages de clients, des tweets qu’on aura intégré à la page et ainsi de suite » a écrit Lindsay Kolowich, chargée de marketing chez Hubspot.
Elle continue en disant « s’ils voient que d’autres gens qui ont profité de cette offre en parlent de manière positive, ils auront tendance à avoir une vision positive également, et sont donc plus enclins à remplir votre formulaire et devenir un lead. »

Du coup, comment utiliser ces témoignages à votre avantage?
Il vous faut regarder les différents types de témoignages que vous possédez: cela peut être des témoignages directs de clients, des citations type livre d’or mais aussi des des études de cas, des certifications ou des statistiques. Chaque page est différente, mais nous vous conseillons d’inclure au moins un type de témoignage sur chaque landing page.

4. Une mise en page et un flow clair

Bien que les points précédents soient indispensables, ils ne suffiront pas pour convertir vos visiteurs si votre site n’a pas une mise en page claire et un flow efficace. De même qu’il y a des formats d’articles de blog plus efficients que d’autres (les listes, les tests de produits, les tutoriels…), les landing pages ne sont pas en reste. Vous vous souvenez qu’on a parlé de chemin de lecture en F ou Z?
Voilà un point sur lequel vous devez vraiment prendre le temps de réfléchir, de penser stratégiquement à la manière dont vos visiteurs « consomment » votre contenu et ainsi organiser les différents éléments qui composent votre page de manière à maximiser la lecture.

Voici un bon exemple: cette page de WebDAM présente un titre clair en haut à gauche, un questionnaire rapide d’inscription à droite, le contenu clé au milieu, et divers témoignages de confiance en bas.
On apprend beaucoup de ce genre d’exemple, prenez votre temps pour déterminer ce qui sera efficace pour votre page.

Mettre tout ça ensemble

La magie des landing pages est que malgré ces points en commun, il n’en existe pas 2 semblables!

Bref, les clés du succès pour développer votre business en 2016 et après sont vos visuels, appels à action, témoignages et mise en page, ne l’oubliez pas!

► UX design, UI design, qu’est-ce que c’est?

UI et UX design sont 2 termes que l’on croise beaucoup ces temps-ci.
Ça parle de quoi?
Keep calm and call a designer
Keep calm and call a designer

Prenons donc la situation suivante: vous voulez développer un site internet pour votre nouveau projet de, disons, découverte de nouveaux artistes et mise en vente de leur œuvres sous forme de posters, tasses à café etc.
Vous décidez donc de faire appel à une entreprise de création de sites internet, et on vous parle d’UX, d’UI…
Déjà, expliquons ces acronymes pas forcément évident.
UX vient de l’anglais User eXperience, et UI, User Interface, user signifiant utilisateur, ces termes étant utilisés dans le cadre de création de logiciels, ou de sites internet par exemple.

UI/UX par Userexperiencerocks.com
UI/UX par Userexperiencerocks.com

L’UX désigne donc l’expérience générale que l’utilisateur a en se servant de votre logiciel/en visitant votre site, et il faut y réfléchir presque dès le début du projet.
En définissant l’UX, vous décidez des différentes stratégies concernant le contenu, comment suivre les axes de communication et  l’image de marque que vous avez défini en amont, le chemin que vous voulez que le visiteur suive dans votre site.
Concrètement, établissez l’architecture et les fonctionnalités, notamment en fonction de tous les types de visiteurs qui vont utiliser ce site: les artistes, les clients… Pour ces derniers, comment les utilisateurs ont accès aux produits, doit-on leur faire créer un profil? Pour les artistes, désirez-vous que les créateurs puissent avoir un profil personnel? Qu’ils puissent vous soumettre des oeuvres directement depuis leur compte?
Sans oublier de faire la même chose pour vos produits: quels produits mettre en ligne? Quelle description devriez-vous inclure pour chaque produit?
Bien sûr, vous devez également définir l’ambiance de votre site: comment trouver le bon compromis entre l’ambiance un peu galerie d’art et une boutique en ligne? Comment organiser mon site, quelles catégories, quelle page d’accueil? Vous pouvez choisir de commencer par un diaporama (slider) de photos haute qualité des œuvres ayant eu le plus de succès; ou choisir d’exposer directement des produits mis en scène avec des prix très attractifs… En fonction de ce que vous souhaitez montrer à vos visiteurs.
Cela inclut également les prototypes de votre site, à tester sur les tous les différents terminaux que vous aurez choisi (n’oubliez pas qu’aujourd’hui, un site non responsive, c’est à dire qui s’adapte à tout appareil et taille d’écran, sera moins bien classé par Google!), ainsi que les tests utilisateurs, pour vérifier l’utilisabilité du site.

Bref tout cela est à étudier et à définir tôt dans le projet.

L’UI quant à elle est en fait une partie de l’UX. Bien que l’interface soit souvent la première chose à laquelle on pense, particulièrement quand on conçoit un site, cela vient après une définition de l’expérience que l’on veut proposer à nos futurs utilisateurs.
L’UI est la partie visuelle, créative: cela inclut la définition du design visuel du site, comme par exemple les couleurs, la typographie…
Si vous avez décidé d’opter pour un slider photo sur la page d’accueil, vous pouvez ensuite décider de quelles photos choisir; à quelle taille elles apparaîtront et quelle transition il y aura entre chaque.

Faire son design sans penser à l'UX: les résultats
Faire son design sans penser à l’UX

En conclusion, l’UX désigne l’expérience générale que vous voulez offrir à vos visiteurs/utilisateurs, et l’UI est la partie visuelle de la réalisation de l’UI.
Les 2 sont importantes, mais attention à ne pas se focaliser trop sur l’UI, qui est plus concrète mais n’intervient qu’assez tard dans le projet, sous peine de se retrouver avec des pelouses complètement piétinées!

Park-king, louez ou trouvez votre place de parking partout dans le monde

Park-king propose aux propriétaires de places de parking de les mettre en location, pour une durée comprise entre 30 min et un an. C’est un peu le Air BnB des places de parking !

 

Park-king, page d'accueil
Park-king, page d’accueil

Le site offre donc 2 types de profil: les propriétaires et les locataires, tous les 2 gratuits. 2 types d’annonces sont possibles:
Annonce avec abonnement, qui s’applique à tout type de place (avec accès libre, ou avec bornes rétractables par exemple). Plusieurs formules d’abonnement sont proposées (1 mois, 3 mois, 6 mois ou 1 an).
Annonce sans abonnement, qui s’applique également à tout type de place. Les places peuvent alors être réservées en ligne sur Park-King, les informations détaillées relatives aux places étant transmises après paiement. Les loueurs peuvent exiger de recevoir au préalable une demande de réservation qu’ils pourront accepter ou refuser. Les utilisateurs pourront à cette occasion converser en tout anonymat à travers la messagerie interne de Park-King pour discuter des formalités de la réservation. Une fois la demande acceptée, le locataire pourra alors procéder au paiement de la ou des place(s) en question via Park-King. La mise en ligne de ce type d’annonce est gratuite pour le loueur, mais une commission de 20% sur la transaction est prélevée par Park-King afin d’assurer le fonctionnement du site.
Le grand plus du site, c’est qu’il est tout à fait adapté pour une utilisation internationale : il n’est pas limité à une ville ou un pays.

► Olivier a récupéré le projet déjà commencé, et s’est donc attelé notamment à la création des comptes, loueurs et locataires, le système de réservation ainsi que les SMS et mail automatiques envoyés après réservation.
• Ce projet demandait une interface très particulière qui a nécessité pas mal de recherche.
• C’était le premier projet sous Symfony pour Olivier.

Razer: l’expérience immersive

Razer, l’une des marques préférées des gamers, produit un bracelet connecté (comme une smart watch mais en bracelet!), et la page de leur site qui y est consacrée est plutôt originale.

 

Le bracelet connecté Nabu par Razer
Le bracelet connecté Nabu par Razer

Razer a sorti sa nouvelle version du Nabu, leur bracelet connecté maison, permettant de calculer le nombre de pas que l’on fait, les calories brûlées etc, mais aussi de recevoir ses messages privés et notifications, ainsi que d’échanger des infos des réseaux sociaux d’une poignée de main avec un autre porteur de Nabu. Il peut également détecter les autres Nabu à proximité.
Le bracelet est bien entendu à coupler avec une application à installer sur son smartphone. D’ailleurs il est compatible avec tous les terminaux sous Android 4.3 et versions ultérieures, ainsi qu’à partir de l’iPhone 5.
Bref, voilà pour les caractéristiques techniques.

Ce qui nous intéresse ici, c’est le site web qu’ils ont développé autour de ce produit qui se veut accessible et grand public.

Le site a été développé sur le thème des 5 règles de survie en cas d’attaque de zombies, dans un univers rappelant The Walking Dead, ou Shawn of the Dead pourquoi pas.
► Attention âmes (très) sensibles, il y a quelques montages sanguinolents évidemment!

D’ailleurs, première remarque, le site permet de choisir si l’on veut un affichage avec ou sans membres pourrissants et chair déchiquetée.

Razer mode de survie on-off
Razer mode de survie on-off

Ensuite, le thème des mangeurs de cerveaux a été suivi dans le reste du site.
Sous forme de parallaxe, les différents thèmes (sport, connectivité, santé…) ont été déclinés avec des visuels en accord tiré du film promotionnel avec la thématique, des icônes vertes fluo rappelant la couleur de la marque.
Là pour les options liées au sport (distance parcourue, nombre de pas etc), on a un visuel avec une jeune fille souriante en tenue de sport, écouteurs sur les oreilles… Et zombies la poursuivant en arrière-plan. Pas de quoi s’inquiéter apparemment, elle garde le sourire.

Razer Nabu, pour le sport
Razer Nabu, pour le sport

 

Ici un extrait de l’illustration du système de notifications, pour ne pas perdre le fil des événements.

Razer Nabu
Razer Nabu

Bref, le site est court mais sympa, ils ont vraiment voulu créé une ambiance particulière, et c’est plutôt réussi pour nous.