Conversion

Les 7 principes d'un site web axé sur la conversion

Maxime Mroue Web Designer et UX Designer
Les 7 principes d'un web design axé sur la conversion

<category-tag-red>Pas besoin d'être un expert en design<category-tag-red>

Identifier si un design est bon est une chose plutôt compliquée pour la plupart des gens.

À moins que vous n'ayez étudié le design, ce n'est certainement pas votre spécialité.

Plus délicat encore, comment déterminer ce qui va réellement convertir ?

Voyons ensemble quelles sont les fondements d'un site web axé sur la conversion.

<category-tag-gold>C'est quoi un site web axé sur la conversion ?<category-tag-gold>

Vous voulez un site web qui soit non seulement magnifique, mais aussi source de ventes et de revenus ?

La création d'un site internet axée sur la conversion utilise des principes psychologiques pour inciter les utilisateurs à passer à l'action.

En utilisant des biais cognitifs, en minimisant les distractions et en optimisant l'expérience utilisateur, vous pouvez booster les conversions et les ventes.

<category-tag-red>Quels sont ces 7 principes qui convertissent ?<category-tag-red>

Principe n° 1 : structurer votre page - Structurez votre page pour guider vos visiteurs vers une action précise.

Principe n° 2 : attirer l'attention - Attirer l'attention de vos visiteurs sur les éléments les plus importants.

Principe n° 3 : susciter du focus - Focalisez vos visiteurs sur un seul et unique objectif.

Principe n° 4 : montrez vos avantages - Mettez en valeur vos avantages grâce à des visuels forts.

Principe n° 5 : susciter la confiance - Utilisez de la preuve sociale pour rassurer vos visiteurs.

Principe n° 6 : réduire la friction - Facilitez au maximum le passage à l'action.

Principe n° 7 : restez cohérent - Soyez cohérent dans toute votre communication.

<category-tag-gold>Principe n° 1 : strucutrez votre page<category-tag-gold>

Une page axée sur la conversion ne se contente pas d'être "belle", elle incite aussi subtilement les visiteurs à agir.

La clé est de structurer et de créer un flux naturel sur votre page.

Non seulement une bonne strucutre de page vous aidera à surmonter l'angoisse de la page blanche, mais elle vous épargnera bien des problèmes par la suite.

1) Structurez votre page de façon à privilégier la conversion

Ne sautez pas cette étape en vous jetant sur des templates génériques.

Commencez plutôt par réfléchir à votre propre structure adaptée à votre cible.

Il s'agit de l'ordre dans lequel vous présentez les informations sur la page, et l'obtention d'une hiérarchie correcte est un processus qui implique à la fois du web design, de la psychologie humaine et du copywriting.

Template de site web VS structure optimisée pour les conversions

2) Tout est une question d'équilibre

Il vous faut trouver un équilibre entre vos visuels et vos textes.

Une image vaut mille mots, alors imaginez que vos textes et vos images soient en parfaite harmonie, tous deux étudiés dans le but de convertir vos visiteurs.

3) Faites attention au flux de votre page

Une fois que vous avez décidé de l'ordre de chaque section, il est important de réfléchir à la manière dont vos visiteurs vont percevoir ce contenu.

Il faut évitre à tout pris d'éparpillé et surchargé votre site web de visuels et de textes.

Plusieurs études sur les Heats Maps ont mis en évidence que les visiteurs suivent deux schémas principaux lorsqu'ils parcourent un contenu.

Heatmap d'un site internet

4) Sens de lecture en Z (Z-Pattern)

Si votre page contient peu de texte, il est préférable de concevoir votre page selon le selon le sens de lecture en Z.

Vous pouvez utiliser ce modèle en alternant des blocs de contenu alignés à gauche et à droite dans la structure de votre page.

Cela permet de diviser la page de manière attrayante et de créer un flux naturel que l'œil humain peut facilement suivre.

Diagramme de Gutenberg (Z-Pattern)

5) Sens de lecture en F (F-Pattern)

Si vous devez créer une page contenant beaucoup de texte, le F-Pattern est certainement celui qu'il vous faut.

Les visiteurs commencent traditionnellement dans le coin supérieur gauche, regardent vers la droite de l'écran, puis vers la gauche jusqu'à ce qu'un autre élément ou une ligne de texte attire leur attention.

Si votre page contient beaucoup de texte, vous devez garder cela à l'esprit et placer vos informations les plus importantes en tenant en compte de cela.

F-Pattern

6) Faut-il créer un Wireframe ?

Avant de démarrer la création de votre page axée la conversion, un Wireframe peut vous aider à vous projetez afin d'identifier les problèmes de conception potentiels que vous pourriez rencontrer.

Vous pouvez créer un simple Wireframe en utilisant un stylo et du papier ou essayer un outil en ligne comme Figma pour créer quelque chose de plus fidèle.

Wireframes site internet

<category-tag-red>Principe n° 2 : attirer l'attention<category-tag-red>

L'attention est un élément important qui vous permet d'attirer subtilement le regard de vos visiteurs sur certains points importants de votre page.

Vous pouvez utiliser certains principes pour mettre en valeur ce qui compte le plus sur votre page : votre appel à l'action (CTA).

1) Utilisez les couleurs pour influencer vos visiteurs

Lorsqu'on parle de psychologie des couleurs, il existe de nombreuses fausses idées.

Vous pouvez passer un après-midi entier à lire des articles sur les émotions que les gens associent à différentes couleurs, ou à creuser une étude de cas où un bouton vert a mieux converti qu'un bouton rouge.

Prenez tout cela avec des pincettes.

Bien que la couleur puisse avoir un impact sur vos taux de conversion et influencer vos visiteurs à un niveau subconscient, il n'y a pas de règle absolue.

Cela dit, voici quelques-uns des éléments les plus importants à garder à l'esprit lorsque vous choisissez votre palette.

Psychologie des couleurs en marketing

a) Choisissez des couleurs qui contrastent

Pour choisir les couleurs à utiliser sur votre page, commencez par les couleurs propres à votre marque.

Vous pouvez utiliser l'outil : la Color Wheel de Canva pour trouver des couleurs assorties qui vont bien ensemble et des couleurs qui contrastent pour faire ressortir certains éléments.

Évitez d'ajouter trop de couleurs, sinon votre page web ressemblera à un sapin de Noël ce qui risque de perturber vos visiteurs.

b) Utilisez une couleur qui contraste votre CTA

Lorsque vous appliquez vos couleurs à votre page web, il y a une règle importante à garder à l'esprit.

Vous devez toujours réserver une de vos couleurs (idéalement, la plus vive et la plus attirante) et l'appliquer uniquement à vos appels à l'action.

De cette façon, il sautera plus naturellement  aux yeux de vos visiteurs ce qui augmentera les chances qu'ils passent à l'action.

4) Utilisez les espaces blanc pour attirer l'attention

Vos visiteurs ont une charge mentale limitée, trop d'images et de textes peuvent les submerger et leur faire perdre leur attention.

Cela peut les inciter à quitter rapidement votre site web.

Essayez plutôt de donner à vos éléments les plus importants (proposition de valeur, CTA) plus d'espace pour respirer.

Espace négatif en web design

5) Utilisez la typographie pour créez du contraste

Personne ne va lire tous les textes de votre page (vous le savez très bien).

C'est pourquoi il est utile de mettre en place une forte hiérarchie visuelle afin que les visiteurs aient plus de facilité à repérer les informations importantes.

Identifiez le contenu indispensable à vos visiteurs sur votre page et utilisez la strucutre de vos section, la taille de votre police, le gras et les couleurs pour les mettre en valeur.

6) Utilisez le regard du sujet de vos images pour guider vos visiteurs

De nombreuses études ont montré, à l'aide d'outils d'oculométrie (eye-tracking), comment le regard humain peut influencer le comportement des utilisateurs.

Ils ont découvert qu'il est possible d'utiliser le regard humain pour attirer leur attention, et le diriger vers votre CTA, ce qui permet d'améliorer votre taux de conversion.

Voyez par vous-même avec cet exemple.

Comme vous pouvez le constater, les utilisateurs se sont concentrés sur le visage du bébé et ont suivi son champ de vision directement jusqu'au titre et au texte d'introduction.

Même la zone de texte pointée par le menton du bébé a été lue davantage !

7) Créez vos boutons CTA pour obtenir plus de clics

  • Taille du bouton :

Votre bouton CTA (et la taille de la police) doit être environ deux fois plus grand que le corps du texte pour attirer l'attention.

Idéalement, il faut que ce soit le second élément que les visiteurs regardent après avoir lu le titre de la section.

  • Effets sur le bouton :

Une icône, une flèche, une animation ou tout autre élément qui peut contribuer à rendre votre bouton plus attrayant pour inciter au clic.

Effets sur des boutons (CTA) pour obtenir plus de clics

  • Placement du bouton :

En général, il est bon d'avoir un CTA "au-dessus de la ligne de flottaison", mais également juste au-dessus du footer pour les visiteurs qui défileront entièrement votre page.

Si votre page implique un défilement important, vous pouvez inclure davantage de fois votre CTA (le même : pour rester cohérent et consistant) pour rappeler à vos visteurs de passer à l'action.

Vous pouvez également utilisé le diagramme de Gutenberg pour inciter les utilisateurs à passez à l'action en plaçant votre CTA dans la zone optique finale.

Exemple du diagramme de Gutenberg avec Facebook

<category-tag-gold>Principe n° 3 : susciter du focus<category-tag-gold>

Le troisème principe d'un design centré sur la conversion, c'est d'avoir un unique objectif sur votre page.

Évitez toute distraction qui pourrait détourner vos visiteurs de l'objectif de votre page.

1) Pourquoi le focus est-il si important ?

En psychologie, c'est ce qu'on appelle la Loi du Hick. Plus vous donnez de choix aux visiteurs sur une page, plus il sera difficile pour eux d'agir.

Par exemple, des études ont démontré que plus il y a de liens sur une page, plus le taux de conversion a tendance à chuter.

Taux de conversiion VS Nombre de lien sur la page
Taux de conversion VS Nombre de pages sur la page (Unbounce)

2) Visez un ration d'attention de 1:1 sur vos designs

Le taux d'attention est le ratio entre le nombre de choses que vous pouvez faire sur une page et ce que vous devriez faire.

Un mauvais taux d'attention peut avoir un impact direct et négatif sur les performances de conversion de votre page.

Les plus performantes ont toujours un taux d'attention de 1:1, car elles sont axées sur le même objectif.

Si un élément de votre page ne les amène pas au résultat souhaité, supprimez-le.

Visez un ration d'attention de 1:1 sur vos designs

3) Comment viser un ration d'attention de 1:1 ?

Commencez par répondre à la question suivante : "Quelle est l'action principale que nous voulons que nos visiteurs fassent sur cette page ?"

Cela doit de devenir votre seul objectif, afin d'augmenter vos chances de convertir vos visiteurs !

Appliquez ces éléments à votre page :

  • Supprimez les liens inutiles (vous pouvez même supprimer votre menu si possible).
  • Ne proposez qu'un seul "chemin" à vos visiteurs pour qu'ils passent à l'action (par exemple : remplissez ce formulaire).
  • Utilisez des principes psychologiques (hiérarchie visuelle, contraste, preuve sociale, etc.) pour faciliter la navigation sur votre page.

6 principes à suivre pour une bonne hiérarchie visuelles

<category-tag-red>Principe n° 4 : montrez vos avantages<category-tag-red>

Avez-vous déjà entendu l'expression "Une image vaut mille mots" ?

Les visuels sont une occasion unique de montrer à vos visiteurs ce que vous ne pouvez pas exprimer pleinement avec du texte seul.

Il ne s'agit pas de choisir des images parce qu'elles sont belles ou correspondent à la palette de couleurs de votre marque.

Vous devez montrer vos avantages afin que les visiteurs puissent visualiser ce que votre offre leur apportera et comment elle améliorera leur quotidien.

Les gens n'achètent pas des produits, mais une meilleure version d'eux-mêmes.

1) Comment choisir votre hero image ?

L'hero image est le premier élément visuel que les visiteurs voient. Elle se doit attirer l'attention, mais aussi montrer clairement les avantages de votre offre.

C'est de loin le visuel le plus important de votre page, alors consacrez-y du temps pour vous assurer qu'il soit efficace.

Avant tout, vous devez être clair, vos visiteurs doivent comprendre immédiatement de quoi parle votre page.

Ne cherchez pas à faire quelque chose de joli ou d'intelligent, évitez à tout prix de dérouter vos visiteurs.

2) La clareté avant tout

La grande majorité des sites web (au moins 80 %) ne sont tout simplement pas clairs.

Il s'agit d'une erreur fondamentale que beaucoup de gens ne cessent de commettre.

Une page n'est efficace que si ce que vous vendez et pourquoi ils devraient s'y intéresser sont faciles à comprendre.

3) Photos de personnes VS de produits

De nombreuses études indiquent que la photo d'une personne réelle, plutôt que la simple photo d'un produit, permet d'obtenir un taux de conversion bien plus élevé.

En effet, les photos de personnes sont généralement plus mémorables et suscitent l'empathie de vos visiteurs, ce qui les incite à convertir.

Utilisez donc des photos de clients réels interagissant avec votre produit ou service.

Evitez à tout prix les banques d'images, elles ne permettent pas à vos visiteurs de se projeter sur le bénéfice réel de votre offre.

Exemple de hero image qui convertit montre le produit en action avec le client final
Exemple d'image mettant en avant le produit en action, son bénéfice tout en montrant le client final.

4) Utilisez des images pour exprimer les bénéfices émotionnels

Si vous voulez créer un lien fort avec vos visiteurs, choisissez des visuels qui mettent en scène des émotions positives comme la joie.

Tout en gardant à l'esprit le fait de permettre à vos visiteurs de se projeter dans leur quotidien avec votre produit.

Utilisez des images pour exprimer les bénéfices émotionnels
Exemple de l'article : Comment les visages humains influencent l'expérience utilisateur ?

<category-tag-gold>Principe n° 5 : susciter la confiance<category-tag-gold>

L'internet regorge de sites web douteux et d'offres spammy.

Si c'est la première fois qu'une personne interagit avec votre marque, vous devez concevoir un site qui inspire la confiance.

Prouvez votre crédibilité en mettant en avant de la preuve sociale qui soit non seulement convaincante, mais aussi crédible.

1) Des avis clients dignes de confiance

Si vous n'incluez pas certains éléments de confiance, les visiteurs supposeront que vous avez écrit l'avis vous-même.

  • Utilisez une photo de votre client :

La photo de votre client est le premier élément qui prouve que l'avis provient d'une personne réelle.

  • Souligner les détails clés :

Il est important d'indiquer le nom et le prénom du client. Mais aussi d'autres détails tels que son poste, le nom de son entreprise si vous êtes en B2B.

Dans l'avis lui-même, vous pouvez également utiliser du texte en gras ou de la surbrillance pour attirer l'attention des visiteurs sur vos avantages tout en facilitant la lecture.

Exemple d'avis client bien conçu et digne de confiance

En psychologie sociale, cela s'explique par ce que l'on appelle de la preuve sociale (ou social proof en anglais).

Nous faisons confiance aux avis clients parce qu'ils ont fait l'expérience du produit ou du service, contrairement à nous.

Designer des sections d'avis clients dignes de confiance

2) Tout est question de confiance

Vos clients peuvent très rapidement déceler si un témoignage est faux.

Ne leur fournissez pas une raison de quitter votre site web d'entrer de jeu.

Le cas échéant, vous pouvez même inclure d'autres types de preuve sociale, notamment des études de cas, des avis vidéo, des logos de partenaires, etc.

Autre exemple de preuve sociale avec les avis vidéos

<category-tag-gold>Principe n° 6 : réduire la friction<category-tag-gold>

Parfois, nous sommes tellement préoccupés par l'esthétique de nos pages que nous oublions de prendre en compte l'expérience utilisateur (UX).

Or, tout problème rencontré par vos visiteurs sur votre page, peut finir par vous coûter des conversions.

Voici quelques conseils pour offrir à vos visiteurs une expérience mémorable.

1) Simplifiez vos formulaires

Personne n'aime remplir des formulaires, n'est-ce pas ?

Il existe quelques améliorations simples que vous pouvez apporter pour réduire la friction et offrir une meilleure expérience à vos clients.

Simplifiez vos formulaires

2) Minimiser l'effort de la tâche

L'erreur la plus courante lors de la conception d'un formulaire est de demander trop d'informations.

Réduisez le nombre de champs, mais conservez les champs indispensable que vous ne pouvez pas vous permettre de perdre.

3) Utilisez des formulaires à plusieurs étapes

Vous avez plus de chances d'obtenir des taux de conversion plus élevés si vous utilisez un formulaire à plusieurs étapes.

C'est moins intimidant et ce n'est pas qu'une question d'esthétique.

Il s'agit surtout d'un moyen psychologique pour inciter vos visiteurs à remplir complètement votre formulaire.

4) Faites en sorte que votre page soit responsive

Près de 70 % du trafic web provient d'appareils mobiles.

Vous devez donc vous assurer que votre site web s'affiche correctement sur téléphone.

Pour ce faire, vous devez :

  • Simplifiez votre design
  • Réduire la quantité de texte
  • Faire attention à la ligne de flottaison

Faites attention à l'expérience utilisateur (UX) que vous offrez à vos clients.

Trop de pages web offrant un excellent contenu, mais dont la mise en page rend le contenu difficile à consommer, dégradent votre UX.

Faites en sorte que votre page soit responsive

5) Attention à la vitesse de chargement de votre page

La vitesse de chargement de votre page a un impact direct sur l'expérience utilisateur, votre SEO et vos conversions.

Les utilisateurs frustrés par un site qui se charge lentement sont susceptibles de le quitter et de ne jamais revenir.

Vitesse de chargement de la page VS Conversion

6) L'accessibilité de vos pages

Tenez compte des personnes souffrant d'un handicap.

Vous pouvez vérifier le contraste à l'aide d'outils pour vous assurer de la lisibilité de vos textes.

Veillez à inclure des balises alt text pour toutes vos images.

Pensez à l'accessibilité en vérifiant le taux de contraste

<category-tag-red>Principe n° 7 : restez cohérent<category-tag-red>

Considérez l'ensemble de l'écosystème de votre marque et tous les points de contact avec vos clients potentiels.

Restez cohérent dans toutes vos communications : contenu organique sur les réseaux sociaux, publicité, site web, etc.

Vos visiteurs auront alors l'impression d'être "arrivés" au bon endroit, ce qui les rassurera.

1) Créer une expérience de marque cohérente

Chaque point de contact que vous avez avec vos clients contribue à définir la façon dont ils perçoivent votre entreprise.

Vous devez donc utiliser les mêmes polices, couleurs et styles sur les différentes pages de votre site web.

Résistez à l'envie d'expérimenter quelque chose de différent, vous risquez de les perturber.

Créer une expérience cohérente de marque

2) Utilisez votre site web comme identité de marque

Les grandes marques créent souvent un design system pour assurer une communication de marque cohérente.

Ces lignes directrices peuvent être appliquées à tous les visuels et documents de marque.

Si cela n'est pas possible, vous pouvez toujours vous référer à votre site web comme source ultime de vérité.

En pratique, nous vous recommandons de vous en tenir à 1 ou 2 polices (une pour les en-têtes, une pour le corps du texte) et de ne pas utiliser plus de 3-4 couleurs sur votre page.

tilisez votre site web comme identité de marque

3) Faites matcher vos publicités avec votre site web

De nombreux marketeurs connaissent déjà l'importance de la cohérence des messages, mais ils ont tendance à négliger l'importance de la cohérence du design.

En psychologie, c'est ce qu'on appele le biais de cohérence.

Concrètement, cela signifie que vous devez avoir une certaine cohérence dans vos messages et vos visuels avec ceux de votre annonce et de sa page de destination.

4) Pourquoi est-il important qu'ils matchent ?

Notre cerveau traite les informations visuelles jusqu'à 60 000 fois plus vite que le texte, ce qui signifie que le design est la première chose que les visiteurs remarqueront dans leur parcours, du pré-clic au post-clic.

Pour que votre page de destination soit pertinente par rapport à ce qu'ils ont vu auparavant, vous devez créer ce fort sentiment de corrélation dans le cerveau de vos visiteurs.

Si vous faites du paid sur les réseaux sociaux, incluez une partie du texte ou de l'image utilisé dans la publicité sur la page vers laquelle l'utilisateur sera redirigé.

<category-tag-red>One more thing<category-tag-red>

Créez une structure. Créez un objectif. Attirez l'attention. Montrez les avantages. Suscitez de la confiance. Réduisez la friction. Restez cohérent.

Ces sept principes sont les armes d'influence des plus performantes pages du web.

Ne vous sentez pas obligé de créer une page parfaite directement. Lancez votre produit minimum viable (MVP) dès que possible, puis testez, testez, testez !

---

Je tiens à remercier Unbounce et leur article en anglais sur les 7 principes d'une conception axée sur la conversion, cet article est fortement inspiré du leur.

Ils partagent régulièrement de l'excellent contenu, alors n'hésitez pas à y jeter un œil (vous ne le regretterez pas).

Service de création site internet

FAQ : les points essentiels d'un design axé sur la conversion

💡 C'est quoi un design axé sur la conversion ?

Le design axé sur la conversion est une discipline visant à concevoir des expériences permettant d'atteindre un objectif commercial précis. Elle cherche à guider le visiteur vers l'accomplissement de cette action spécifique, en utilisant un design persuasif et des déclencheurs psychologiques comme outils pour booster les conversions.

🚀 Comment créer un site web qui convertit ?

Une mise en page attrayante : Les sites web à forte conversion utilisent des mises en page qui permettent aux internautes de trouver facilement les informations sur la page. Ils utilisent également des images, des graphiques et des vidéos accrocheurs.

🎯 Quels sont les 7 principes des plus performantes pages du web ?

Ne laissez pas votre manque de compétences en matière de web design freiner votre potentiel de conversion. Apprenez à penser comme un designer et à créer des pages qui non seulement sont belles, mais qui convertissent tout aussi bien. Créez une structure. Créez un objectif. Attirez l'attention. Montrez les avantages. Suscitez de la confiance. Réduisez les frictions. Restez cohérent.
À Propos :

"J’aide les entreprises à enfin libérer le véritable potentiel de leur site web grâce à la psychologie humaine et une expérience utilisateur mémorable."

Icone LinkedInIcone Twitter
Plus d'articles de la catégorie 
Conversion
Tout voir

Une approche unique en création de site internet qui combine UX/UI Design performant, psychologie humaine avancée pour une expérience web mémorable.

Désinscription à tout moment. Jamais de spam.
Votre demande a bien été prise en compte, bienvenue dans le Verse !
Oups !
La soumission du formulaire a échoué.