Si vous êtes ici, vous comprenez déjà comment le design influence nos décisions et permet de mieux convertir sur une landing page.
Le problème est que la majorité des conseils sur internet à ce sujet vous diront :
“Faire un design simple, avec des belles couleurs dans un ensemble cohérent pour que les gens se rappellent de vous.”
C’est très bien, mais ça ne dit pas comment le faire concrètement.
Heureusement, dans cet article je vais vous montrer 9 astuces concrètes avec des exemples pour vous aider à créer un design qui converti sur une landing page.
C’est parti.
Pourquoi le design est-il important sur une landing page ?
Si vous êtes familier avec les landing pages, vous savez que leur but principal est d’obtenir plus de prospects et de clients en proposant une expérience particulièrement efficace pour favoriser la conversion.
Vous pourriez alors être tenté de vous dire que le design n’est pas si important, tant que votre page est performante.
Mais ne vous leurrez pas.
Le design d’une landing page est primordial.
Des études montrent que :
- 50% des gens ne recommanderaient pas un site web avec un mauvais design.
- 38% des gens quittent un site ou une landing page mal designé.
- 75% des gens se font une idée de la crédibilité du site, juste grâce au design.
En bref.
Même s’il est difficile de quantifier la part exacte que prend le design dans la performance de votre landing page, retenez juste que cette part est importante.
Quel type de design pour une landing page ?
L’objectif n°1 d’une landing page est de convertir.
Donc, le design d’une landing page doit également être optimisé pour cet objectif.
Pour ça, une seule règle :
Une landing page doit aller droit au but.
Concrètement, les landing page qui fonctionnent le mieux sont souvent les plus épurées.
C’est parce que les landing pages qui ont un design minimaliste arrivent à mettre facilement en avant l’objectif.
Ça marche parce que le minimalisme permet de réduire la charge cognitive de vos visiteurs.
De plus, le minimalisme est plus facile à embellir.
Voici comment faire pour créer un design minimaliste et performant sur votre landing page.
1. Avoir un design minimaliste
Attention.
Faire du minimalisme n’est pas une bonne excuse pour en faire le moins possible.
C’est d’autant plus difficile qu’il faut en montrer suffisamment pour être performant tout en restant efficace.
Bref : plus d’impact en moins d’éléments.
Concrètement, un design simple c’est :
- Des espacements
- Des titres efficaces
- Des appels à l’action évidents
- Des couleurs bien dosées
- Des contrastes élevés
- Une très bonne lisibilité
Apple est un exemple parfait de minimalisme.
Voici un autre exemple avec Masteos.
Tout ça pour dire :
Un bon design pour une landing page se concentre sur la création d’une bonne expérience de l’utilisateur et permet d’influencer le visiteur à accomplir l’action visée.
Voyons maintenant quelques principes pour optimiser le design de votre landing page.
2. Penser au sens de lecture en F (F-Pattern)
Dans une étude de 2006 basée sur 232 analyses de eye tracking, il a été démontré que les gens ont tendance à consulter les pages web en prenant la forme de la lettre F.
Ce qui veut dire que la plupart des gens voient d’abord le coin en haut à gauche de votre site, avant de lire ligne par ligne.
Concrètement, il y a deux choses à retenir.
D’abord, qu’il est judicieux de placer les informations les plus importantes immédiatement pour aider vos visiteurs à comprendre un clin d’oeil de quoi parle votre page.
Mais également, que le design doit permettre d’influencer et guider le visiteur sur la landing page. À défaut, le visiteur ira au plus simple et portera son attention à l’endroit où la lecture commence (en haut à gauche).
Autrement dit, le F pattern (2006) est aujourd’hui un peu désuet parce qu’en réalité il est surtout question d’optimiser le design pour aider vos visiteurs à scanner la page.
3. Optimiser le contenu pour les scanneurs
Sur internet, vos visiteurs veulent voir en un coup d’oeil si le contenu est intéressant.
Autrement dit, votre design doit capter l’attention.
Mais comment capter l’attention du visiteur ?
D’abord, la proposition de valeur doit être évidente.
Par exemple Shopify va droit au but.
Ensuite, la landing page doit montrer comment le produit fonctionne ou donner suffisamment de contexte pour que l’on comprenne l’offre en un clin d’oeil.
Par exemple, Intercom montre ses fonctionnalités avec une animation :
.gif)
Enfin, il faut rendre la lisibilité parfaite pour aider à la compréhension du message.
Par exemple avec des phrases courtes, des bulletpoints ou des espacements.
4. Optimiser votre landing page pour le ratio d’attention 1:1
Qu’est-ce que la ratio d’attention 1:1 ?
Ce ratio fait référence au nombre de liens ou actions disponibles par rapport à votre objectif principal.
Votre objectif est que la personne clique sur votre appel à l’action.
Si vous avez d’autres liens, comme des boutons de partage sur les réseaux sociaux, un menu ou un footer, alors vous pouvez distraire votre visiteur sans qu’il n’ait eu le temps d’accomplir l’objectif principal.
Or, l’objectif d’un menu est de laisser la personne naviguer sur un site.
Ces deux objectifs sont incompatibles et c’est pourquoi vous devez supprimer tout menu de navigation sur une landing page.
Comme Zoho qui va droit au but.
Ou encore Dalma qui ne garde que l’essentiel.
Est-ce que ça marche ?
Yep.
Dans une étude, Hubspot à montré qu’en supprimant la navigation, la conversion avait doublé.
5. Avoir un contraste suffisant sur les appels à l’action
Si vous voulez que les gens cliquent, bien rédiger votre appel à l’action ne suffit pas.
Il faut leur montrer où ils doivent cliquer.
Pour ça, il faut des boutons qui sortent du lot.
La couleur n’est pas si importante que ça, tant qu’elle est cohérente avec le design global.
En revanche, vous avez besoin d’un excellent contraste pour rendre votre bouton évident.
Par exemple, le bouton sur cette landing page est particulièrement flashy.
Ou la page de Dollar Shave Club avec un appel à l’action rouge vif.
6. Soigner la cohérence du design à travers toutes vos plateformes
Derrière cette phrase un peu compliquée se cache un concept simple :
Quand les gens cliquent de votre pub (ou d’ailleurs), ils ne doivent pas être surpris en arrivant sur votre landing page.
Pour ça, le design doit être similaire :
- Mêmes couleurs
- Même typographie
- Même univers graphique
Autrement dit, assurez-vous que l’expérience visuelle soit similaire entre vos sources de trafic et votre landing page.
Il doit y avoir une continuité entre les offres et les promesses, mais également avec le design.
Ça peut même aller jusqu’à utiliser les mêmes images, les mêmes titres ou des éléments graphiques identiques.
Par exemple, on reconnaît immédiatement la personne sur cette publicité et sur la landing page :
Ou Wix, qui utilise le même univers graphique.
7. Utiliser les bonnes images
Et là, vous vous dites…
C’est quoi une “bonne” image ?
Spoiler :
Ce n’est ni une image de bonne qualité, ni une image avec de l’humain, ni une image stylé…
Ce sont des images qui donnent de l’information.
Autrement dit, ces images doivent appuyer et compléter votre message.
Par exemple Elmut montre une gamelle de croquettes : on comprend immédiatement ce que vend l’entreprise.
Autre exemple : Freebe montre directement son outil.
8. Penser d’abord au mobile
Si vous voulez que votre landing page soit performante, pensez votre design comme si les gens y accédaient exclusivement depuis leur mobile.
C’est radical, mais c’est primordial parce qu’une partie non négligeable de votre audience accédera à votre landing page sur un smartphone.
3 choses à faire pour optimiser une landing page sur mobile :
- La page doit être super simple
- La page doit charger ultra vite
- La page doit afficher l’essentiel uniquement
Les meilleures inspirations que vous pourrez trouver sont des applications natives.
Par exemple, le site de Airbnb sur mobile ressemble de plus en plus à une application.
C’est aussi le cas pour Netflix.
Donc n’ayez pas peur d’avoir des landing page ultra simples : elles cartonnent sur mobile.
Par exemple, voici une landing page que j’utilise sur mon site et qui converti à +60%.
Pour terminer, voici une petite checklist que vous pouvez utiliser dans votre prochain projet de landing page :
- Utiliser une design minimaliste
- Optimiser pour le sens de lecture en F
- Rendre la landing page scannable
- Supprimer le menu et le footer
- Augmenter le contraste avec les CTAs
- Assurer la cohérence du design
- Utiliser des images qui apportent de l’information
- Penser d’abord au mobile
