Comment créer une landing page ? Partie II - astuces de design

Dans cet article, nous allons présenter différentes astuces et règles de création d'une landing page qui la rendront plus accessible à vos utilisateurs. Après tout, tout comme un homme d'affaires a besoin du bon costume, une femme de la robe parfaite, la landing page a besoin du bon design et d’un contenu bien placé.

Si vous ne savez pas comment créer une landing page à partir de zéro, rendez-vous sur notre article “Comment créer une landing page ? Partie I”, dans lequel nous décrivons tout le processus en détail.

Gardez à l’esprit qu’à la différence de la lecture de cet article, concevoir votre propre site web est un processus qui prend du temps. Cependant, ne vous découragez pas. En créant vous-même votre site, vous pouvez économiser jusqu’à 5 000 $. Alors, on commence ?

Astuce 1 - Les quatre points de force

Vous est-il déjà arrivé de voir une "grille" à l'écran en prenant une photo ? Cela est lié à la "règle des tiers" et il se trouve qu’elle est également utilisée dans la conception de sites web. Selon cette règle, la page est visuellement divisée en trois parties et se compose de 9 carrés identiques.

Les points au centre des quatre intersections des lignes sont précisément les "points de force". Tout ce qui se trouve dans ces limites sera capté en premier par l'œil humain. Lors de la création de votre landing page, essayez de placer les éléments les plus importants à ces intersections.

Astuce 2 - La loi de Hick

Une autre astuce qui pourrait vous être utile vient de William Edmund Hick, un psychologue britannique. Il a affirmé que le temps nécessaire pour prendre une décision augmentait avec le nombre de choix possibles. Cela signifie que plus nous avons d'options, plus il nous faudra de temps pour décider.

Au cours de recherches, Mark Lepper et Sheen Iyengar ont découvert qu’une table avec 24 types de confitures était moins attractive qu’une table avec 6 types de confitures. Lorsqu’une personne avait trop de choix, la probabilité d’acheter chutait de 10 fois. Comment utiliser cela lors de la création de votre landing page ? Limitez le nombre de CTA et de boutons et concentrez-vous sur un seul objectif. Réfléchissez à toutes les décisions possibles de l’utilisateur sur la page et réduisez-les autant que possible.

Astuce 3 - Le modèle en “F”

De nombreuses études montrent que lors de la lecture d’un texte, le regard humain se déplace inconsciemment selon un certain schéma. D’abord, nous regardons de gauche à droite, puis nous descendons, et nous prêtons le moins d’attention au coin inférieur droit - nous le survolons simplement.

Si vous souhaitez faciliter l’assimilation de l’information à votre utilisateur et améliorer la conversion, placez les éléments les plus importants le long de la lettre F et tout ce qui est moins important en dehors. Les moyens de contact doivent être bien visibles : réseaux sociaux, téléphone, etc.

Astuce 4 - La règle des 8 secondes

Vous n’avez que 8 secondes pour intéresser l’utilisateur (voire moins, selon les dernières recherches). Nous sommes désolés de le dire, mais c’est la capacité d’une personne à se concentrer sur une seule chose. Alors, comment capter l’attention de l’utilisateur en 8 secondes ?

• Rendez le titre accrocheur et intéressant, et il est également important qu’il informe rapidement et de manière concise sur les avantages du produit/page et touche les problèmes auxquels le client est confronté.
• Complétez votre message avec des images attrayantes qui transmettent le but principal du produit.
• Créez un bouton CTA visible et court.

Astuce 5 - La loi de similarité

L’humain perçoit l’ensemble de la structure différemment de ses éléments individuels. Nous aimons avoir à proximité des objets similaires mais regroupés séparément.

Profitez de cette règle. Supposons que votre produit ait d’excellents avis. Mettez cela en avant et placez l’application ou un formulaire à côté du témoignage.

Astuce 6 - La preuve sociale

La preuve sociale regroupe différents certificats et diplômes. Une étude de Data Insight et AliExpress a montré que 9 achats sur 10 sont finalisés après lecture des avis par le client. Comment l’utiliser lors de la création d’un site web ? Ajoutez des avis clients à votre site.

Astuce 7 - Above the fold

Vous en avez déjà entendu parler ? Sinon, laissez-nous vous expliquer. Above the fold désigne la partie du site visible sans avoir à faire défiler la page.

Cela ne vous surprendra probablement pas d’apprendre que les gens lisent de moins en moins chaque année. En général, nous ne faisons que survoler l’article du regard. The Nielsen Norman Group Research a prouvé que le contenu placé above the fold est 84 % mieux reçu par les utilisateurs que celui placé en dessous.

Pourquoi ? La réponse est simple : consulter le contenu en dessous demande un effort supplémentaire (faire défiler la page). Cela signifie que plus votre contenu est long, moins il y a de chances que les utilisateurs le lisent en détail.

Landing Page - Design et UX

La première étape pour choisir le design de votre site est de déterminer qui fait partie de votre groupe cible. Femmes ou hommes ? Que font-ils ? Que font-ils pendant leur temps libre ? Quel est leur objectif et qu’attendent-ils ? En répondant à ces questions, vous vous facilitez la tâche. Vous saurez s’il faut utiliser des couleurs pastel et relaxantes ou plutôt des couleurs sombres et mystérieuses. Une fois que vous connaissez les bases de votre site et que vous avez une première vision, suivez les règles ci-dessous.

Règle n°1 - Images de haute qualité

Une étude de Bright Local a montré que 60 % des personnes préfèrent les résultats de recherche qui contiennent des images. À son tour, une étude de Skyword a démontré que des images intéressantes généraient en moyenne 94 % d’impressions en plus. Donc, lors du choix des images, essayez d’éviter celles qui sont ennuyeuses et stéréotypées, trouvez quelque chose d’original et d’intéressant. Habituellement, il faut payer pour ce type d’images, mais de nombreux sites proposent des images de haute qualité gratuitement. Voici quelques exemples :

• Pexels,
• Unsplash,
• StockSnap,
• Negative Space,
• Superfamous Studios,
• Little Visuals,
• Gratisography,
• Kaboompics,
• Picjumbo.

Taille des images

Un autre facteur important qui influe sur l’expérience utilisateur est la vitesse du site, et donc la taille des images et des vidéos. Elles doivent être aussi légères que possible sans perte de qualité.

Pour compresser les images si vous êtes utilisateur Windows, nous recommandons :

• Riot,
• File Minizer Pictures,
• Caesium Image Compressor,
• File Optimizer,
• Pingo,
• JPEG mini.

Pour compresser les images si vous êtes utilisateur MacOS, nous recommandons :

• JPEG mini,
• ImageOptim,
• TinyBeest,
• Photo Size Optimizer.

Logiciels de compression d’images en ligne :

• TinyJPG.com,
• Compressor.io,
• Kraken.io.

Taille des vidéos

Concernant la taille des fichiers vidéo, le cas est similaire à celui des images. Cependant, c’est un peu plus compliqué. Les photos peuvent ne faire que quelques Mo, alors que les vidéos dépassent souvent la centaine de Mo, ce qui peut considérablement ralentir votre site.

Les meilleurs compresseurs vidéo :

• Any Video Converter Free,
• Leawo Prof. Media,
• Freemake Video Converter,
• WinX Video converter,
• MediaCoder (Windows uniquement),
• AVS Video converter (Windows uniquement),
• Total Video Converter,
• HandBrake.

Règle n°2 - Les couleurs

Les couleurs en marketing jouent un rôle très important et leur choix doit être mûrement réfléchi. Elles influencent principalement la façon dont l’utilisateur perçoit votre entreprise. Si vous souhaitez en savoir plus sur la psychologie des couleurs dans le marketing d’affiliation, consultez notre article “La psychologie des couleurs dans le marketing d’affiliation. Comment les détails peuvent changer vos gains ?”.

N’oubliez pas que les couleurs de la marque doivent être en accord avec sa mission, et surtout, elles doivent plaire à votre groupe cible. Cependant, le plus important reste votre offre et la qualité de vos services.

De plus, l’utilisation des couleurs est importante en matière d’accessibilité pour les personnes en situation de handicap, dont nous parlons dans la 4ème règle. Évitez de placer deux couleurs vives différentes côte à côte, en particulier le bleu et le vert, car cela peut poser problème aux daltoniens. La combinaison de couleurs la plus lisible est noir sur blanc.

Règle n°3 - Titres clairs et lisibles

L’utilisateur doit se souvenir de votre page et vouloir y revenir. En misant sur un titre clair (non intrusif) et lisible, vous l’aidez énormément. Il est important de prêter attention aux personnes en situation de handicap ou en difficulté numérique et de leur faciliter l’accès à votre site. Voici à quoi cela devrait ressembler.

Règle n°4 - Accessibilité pour les personnes en situation de handicap

Pour faciliter la navigation des personnes en situation de handicap, nous avons compilé une liste de points à prendre en compte lors de la conception d’un site web. De plus, un contenu adapté aura un impact positif sur le SEO, ce qui se traduira par un meilleur positionnement sur Google ou d’autres moteurs de recherche.

Descriptions ALT

Les descriptions ALT sont des descriptions alternatives des images publiées sur votre site. Cela permet au logiciel de lecture d’écran d’indiquer à l’utilisateur ce qui s’y trouve. Et en cas de mauvaise connexion Internet, vous verrez ce que contient l’image, donc cette solution n’est pas seulement lisible par les logiciels.

Sous-titres pour les vidéos

Si votre site contient beaucoup de vidéos, il est conseillé d’y ajouter des sous-titres pour aider les personnes sourdes. Pour les enregistrements audio plus longs, il est pertinent de les transcrire. Un programme en ligne qui peut vous aider à ajouter automatiquement des sous-titres est par exemple veed.io.

Liens correctement édités et signalés

Au lieu d’inclure un lien sur les mots « Cliquez ici », il vaut mieux écrire « Pour plus d’informations, visitez [adresse du site] », cela aidera grandement les personnes aveugles. De plus, mettez les liens hypertextes en couleur différente du texte normal. Ainsi, les utilisateurs n’auront pas à les chercher à la souris.

Taille des boutons

Si les boutons redirigeant vers les autres pages de votre site sont trop petits, cela peut poser problème aux personnes ayant des difficultés de navigation. Assurez-vous que la zone "cliquable" du bouton soit toujours suffisamment grande.

Navigation au clavier

Votre site doit être structuré de façon à ce qu’en appuyant sur la touche "TAB", l’utilisateur passe logiquement et intuitivement de la barre d’adresse au menu et aux autres zones du site. Ainsi, les personnes en situation de handicap pourront naviguer confortablement sur votre site.

Règle n°5 - L’espace

Un autre point concerne l’espace sur votre site, l’utilisateur doit rapidement et sans effort superflu comprendre de quoi il s’agit et ce qu’il peut y trouver. Évidemment, vous ne voulez pas que votre landing page ressemble à une page de 2010 où il y a du texte et des pubs partout et où l’utilisateur ne sait pas quoi faire. Ce genre de situation est aujourd’hui très rare. Regardez cependant l’exemple ci-dessous d’une page qui aurait pu être bien mieux conçue.

Le début n’est pas si mal, une information simple sur l’activité de l’entreprise et ce à quoi s’attendre. Maintenant, concentrez-vous sur ce qui est en dessous. L’utilisateur est bombardé de liens et de phrases qui rappellent le spam. C’est ce qu’il faut éviter.

Règle n°6 - Menu transparent et symétrie

Tout comme l’en-tête doit être simple, le menu doit l’être aussi. Aujourd’hui, la norme est une barre de menu principale en haut, claire et facile à naviguer. Veillez à ce que votre landing page soit symétrique, l’œil humain apprécie cela.

Règle n°7 - Le pied de page

Enfin, le pied de page. À quoi doit-il ressembler et que doit-il contenir ? Le pied de page doit avant tout être réfléchi, simple et intéressant. Il faut penser à ce que vous attendez des utilisateurs qui arrivent en bas de la page. Si vous connaissez la réponse à cette question, il vous sera beaucoup plus facile de concevoir un bon pied de page. Habituellement, les visiteurs font défiler la page pour trouver les informations de contact.

Cela ne signifie pas que vous ne pouvez pas y placer des éléments très importants pour vous. N’oubliez pas que le pied de page doit répondre aux besoins des utilisateurs tout en vous permettant d’atteindre vos objectifs. Voici quelques exemples d’informations que le pied de page peut contenir :

• politique de confidentialité et conditions d’utilisation,
• coordonnées de contact,
• navigation,
• liens vers les réseaux sociaux,
• abonnement à la newsletter.

Landing Page - contenu textuel

Après avoir créé les bons titres et boutons, l’étape suivante consiste à créer le contenu de la page. Il est logique que tout soit en lien avec l’offre que vous promouvez et encourage l’achat de ce produit.

Les principaux principes de création d’un contenu clair sont la hiérarchie et le système : chaque bloc doit être à sa place. Vous pouvez faire un croquis dans PowerPoint ou sur une feuille de papier pour essayer de reproduire la structure. Une interface claire ne peut être obtenue que si vous répondez aux questions principales : quoi, où, quand et pourquoi. L’information doit être séquentielle : quel produit, pourquoi l’utilisateur en a besoin. Vous pouvez spécifier des références pour augmenter la confiance. Les sites LeadGeneration doivent publier le contenu étape par étape, aussi court et simple que possible. Minimiser les étapes augmentera vos taux de conversion.

Sur le marché, vous trouverez des solutions attractives pour vous aider à créer et personnaliser votre site web, qui sera parfait sur tous les appareils. Un exemple est Kubio - un plugin de création de site qui étend Gutenberg pour offrir une liberté de conception totale et une expérience de création fluide. Il permet d’éditer des pages entières dans une seule interface intuitive, sans avoir à comprendre la structure des templates WordPress.

Ce site propose une vaste galerie de modèles pour vous donner un point de départ rapide pour votre nouveau site. Il offre également une bibliothèque de blocs étendue avec des éléments comme des tableaux de prix, des galeries d’images, des sliders et des accordéons pour vous aider à construire rapidement des pages avancées. Il est à noter que le site enregistre automatiquement chaque zone de page, comme l’en-tête, le pied de page et le contenu, dans les bons templates.

Principales fonctionnalités de Kubio Builder :

• créez des pages entières dans une interface intuitive,
• options avancées de design et de responsivité,
• créez des pages en combinant des sections prédéfinies,
• vaste galerie de modèles,
• bibliothèque de blocs étendue.

Vous êtes déjà arrivé ici ?

Nous espérons qu’en arrivant à ce point, vous savez déjà comment concevoir votre site comme un professionnel. Il ne vous reste plus qu’à vous souhaiter bonne chance !