👉 11 principes de conception Web qui augmenteront votre taux de conversion

31 idées de génération de leads intelligentes que vous pouvez implémenter immédiatement (mise à jour)

Voulez-vous stimuler les conversions sur votre site Web? Comme le savent les spécialistes du marketing intelligent, votre conception peut faire toute la différence. Dans cet article, nous partagerons 11 principes de conception Web qui augmenteront votre taux de conversion.

De nombreux spécialistes du marketing insistent sur l'importance du référencement, des médias sociaux, de la création d'aimants principaux qui se convertissent et autres, mais le fait d'avoir une excellente conception de site Web est souvent négligé. Bien que tous ces composants soient importants, votre conception de sites Web n'est pas simplement un «joli visage»: elle peut réellement générer ou annuler vos taux de conversion.

Selon une étude de l'université de Stanford, 46,1% des personnes interrogées déclarent que la conception d'un site Web est le critère le plus important pour décider si une entreprise est crédible ou non. Il est donc extrêmement important que votre conception soit professionnelle.

Que votre site Web soit esthétique ou non joue également un rôle important dans l’optimisation du taux de conversion. Avec 15 minutes pour consommer du contenu, deux tiers des personnes préfèrent lire quelque chose de magnifiquement conçu que quelque chose de simple (selon cette étude d'Adobe). Donc, si vous voulez que les gens lisent vos articles, ils doivent être attrayants.

Mais ce n'est pas tout. Si votre site Web est peu attrayant, les gens quitteront votre site. 38% des personnes, pour être exact. C'est beaucoup de pistes perdues!

Donc, peu importe si le design est votre fort, vous ne pouvez pas vous permettre de le négliger. Apprendre la conception de sites Web, embaucher un pigiste, employer un concepteur ou faire tout ce qu'il faut!

Pour commencer, voici quelques principes de conception importants qui vous donneront un coup de pouce immédiat et durable en matière de conversions…

1. Suivez la loi de Hick

La loi de Hick est une théorie populaire citée par diverses personnes à des fins différentes, mais elle est fréquemment citée en termes de conception de sites Web. Nommée d'après le psychologue britannique William Edmund Hick, la loi stipule que le temps nécessaire à une personne pour prendre une décision est directement proportionnel aux choix possibles.

En d'autres termes, en augmentant le nombre de choix, le temps de décision est également augmenté.

Image via Usabilla

Vous avez peut-être entendu parler de la fameuse étude réalisée par les psychologues Sheena Iyengar et Mark Lepper. Ils ont découvert qu’une table avec 24 variétés de confiture suscitait moins d’intérêt qu’une table présentant seulement six variétés de confiture. En fait, les personnes qui ont vu le plus grand écran étaient seulement un dixième aussi susceptibles d'acheter que les gens qui ont vu le petit écran!

C'est un exemple de la loi de Hick en action: l'action est perdue proportionnellement au nombre de choix présentés.

En termes de conception Web, vous pouvez optimiser les conversions en limitant le nombre de choix des utilisateurs. La première chose qui vous vient à l’esprit lorsque vous réfléchissez à la réduction du nombre de choix sur votre site Web est la barre de navigation. De toute évidence, vous ne voulez pas avoir trop de liens à choisir, sinon l'utilisateur perdra tout intérêt pour eux.

En d'autres termes, ne faites pas ceci:

Cependant, la loi de Hick ne s'arrête pas là. Pensez à toutes les nombreuses décisions importantes que les utilisateurs doivent prendre sur votre site Web, à part le simple lien de navigation sur lequel vous devez appuyer.

Voici quelques exemples:

  • Décider d'utiliser la barre de navigation ou faire défiler la page plus
  • En parcourant les titres pour voir quel blog lire
  • Décider s'il faut télécharger votre aimant principal, partager votre message sur les médias sociaux ou laisser un commentaire
  • Choisir entre faire un achat, lire des critiques de produits ou parcourir d'autres produits

Ceux-ci ne font qu'effleurer la pléthore de décisions que vos utilisateurs doivent prendre. Il est normal de se sentir dépassé en essayant de savoir où commencer à réduire ces décisions. Cependant, il existe un moyen simple d'utiliser la loi de Hick's en un clin d'Ĺ“il…

Tout ce que vous avez à faire est d'installer une porte de bienvenue en plein écran sur votre page d'accueil. Une porte de bienvenue couvre la totalité de l'écran avec un seul appel à l'action, de sorte que l'utilisateur ne voit qu'un seul choix disponible au début. S'ils veulent voir plus de choix, ils devront faire défiler vers le bas.

Cela vous permet de minimiser les distractions sur votre page d'accueil, tout en conservant la fonctionnalité de votre page d'accueil intacte.

Dans l'ensemble, lorsque vous appliquez la loi de Hick à votre site Web, il est important que vous sachiez quelles actions sont les plus importantes pour votre résultat net. Par exemple, voulez-vous que les utilisateurs acceptent votre aimant principal ou voulez-vous qu'ils mettent un produit dans leur panier? Chaque page de votre site doit atteindre un objectif principal.

Plus vous pouvez limiter les choix de votre utilisateur, plus votre site Web sera facile à utiliser et vos conversions vont exploser.

2. Tirer parti de la règle des tiers

The Rule of Thirds est un principe de photographie populaire qui peut également être appliqué à la conception de sites Web. Avec la règle des tiers, vous êtes censé diviser visuellement une image (ou une page de site Web) en tiers (à la fois verticalement et horizontalement).

Cela vous donne neuf carrés égaux:

Selon la règle, les quatre intersections du milieu sont des lieux d’intérêt stratégiques. Lorsque des objets sont placés à ces points, l'image ou le dessin le plus percutant est créé.

En termes de conception de sites Web, vous pouvez placer les éléments les plus importants de la page à ces intersections pour que les utilisateurs se concentrent sur eux, stimulant ainsi vos conversions.

Par exemple, la page d'accueil de Chris Lema contient les éléments les plus importants (le témoignage et le bouton «Commencer ici») sur les deux intersections de gauche:

L'image de héros de John Lee Dumas contient un bouton d'appel à l'action en bas à gauche de l'intersection:

Kissmetrics place également son bouton d'appel à l'action en bas à gauche:

Remarquez qu'aucun de ces sites Web ne place leur barre de navigation à proximité des intersections.Cela aide à garder les visiteurs concentrés sur l'appel principal à l'action sur la page, plutôt que de conduire leur Ĺ“il à naviguer ailleurs.

Vous n'avez pas besoin de concevoir l'intégralité de votre site Web uniquement par la règle des tiers, mais vous pouvez l'utiliser comme outil pour vous aider à placer vos éléments les plus importants.

Essayez de prendre une capture d'écran de votre site Web (juste au-dessus du pli ou de votre en-tête, et non sur toute la longueur de la page, car personne ne regarde un site Web) et divisez-le en neuf carrés égaux. Ensuite, vous pouvez décider si vous souhaitez apporter des modifications.

3. Respectez la patience des utilisateurs

(Ou plutôt, je suispatience.) Il s’avère que les gens sont incroyablement impatients, surtout quand il s’agit de surfer sur le Web.

Selon une étude du groupe Aberdeen, un simple retard d'une seconde dans le temps de chargement des pages entraîne une réduction de 7% des conversions!

Ainsi, en ce qui concerne la vitesse de chargement des pages, chaque seconde compte. Pour vérifier la vitesse de votre page et résoudre les problèmes, exécutez votre site via un ou plusieurs de ces outils gratuits:

  • Google PageSpeed ​​Insights
  • Pingdom
  • GTmetrix
  • KeyCDN
  • Sucuri

4. Utilisez un espace négatif

Dans la conception de sites Web, les espaces sont souvent appelés espaces négatifs. L'espace positif est l'espace qui contient tous les éléments de votre site, tandis que l'espace négatif est l'ensemble de l'espace vide entre les deux.

Malgré le nom, l'espace négatif est en fait un positif chose dans la conception de sites Web, car sans elle, votre site Web serait illisible et inutilisable.

L'espace négatif ne fait pas uniquement référence à l'espace entre les éléments les plus importants de votre page, tel que l'espace entre votre en-tête et votre contenu, ou l'espace entre votre barre latérale et votre contenu. Il fait également référence à l'espace entre tous les éléments plus petits de votre page, comme l'espace entre les paragraphes, l'espace entre les lignes de texte et même l'espace entre les lettres.

Faire attention à tout des formes d’espace négatif sur votre site permettent de garder tout lisible, lisible (très important, parce que c’est ainsi que les gens lisent des sites Web) et facile à regarder. Et bien sûr, tout cela entraîne une augmentation des conversions.

Flat.io utilise une tonne d'espace négatif sur sa page d'accueil pour rester concentré sur son principal appel à l'action, qui consiste à s'inscrire sur Google ou Facebook.

Voici quelques conseils pour vous assurer d'utiliser suffisamment d'espace négatif:

  • Plus votre police est petite, plus vous avez besoin d'espace entre les lettres.
  • Votre hauteur de ligne (définit l'espace au-dessus et au-dessous des lignes de texte) doit être d'environ 150% de la taille de la police pour la copie du corps (en CSS, cela se lit comme suit:hauteur de ligne: 1,5;).Image via Pearsonified
  • Cependant, les polices plus petites nécessitent des hauteurs de ligne plus généreuses. Notez la différence que fait une plus grande hauteur de ligne dans les deux paragraphes ci-dessous:Image via W3.org
  • Divisez les grands blocs de texte en plus petits paragraphes pour augmenter l'espace négatif entre eux et rendre vos articles de blog plus lisibles.
  • Ajoutez un espace blanc entre les plus gros éléments de votre site (barre latérale, en-tête, corps, pied de page, etc.) en utilisant suffisamment de marges et de marges.

5. Considérez F-Layout

Les chercheurs ont constaté que le comportement naturel d'un utilisateur lors de la navigation sur le Web consiste à lire l'écran dans un modèle «F».

Voici une carte thermique montrant où les yeux de l'utilisateur atterrissent généralement sur une page Web:

Image via Envato

Et voici à quoi cela ressemble en tant que fil de fer:

Comme vous pouvez le voir, les gens regardent d’abord de gauche à droite en haut de l’écran. Ensuite, ils numérisent la page vers le bas, en faisant de petites incursions dans le contenu. La zone d'une page qui reçoit le moins de visibilité est en bas à droite.

Alors, qu'est-ce que cela signifie pour stimuler vos conversions? Eh bien, vous pouvez tirer parti de ce comportement en plaçant les objets les plus importants et les appels à l'action le long des lignes en forme de F, et en plaçant les objets de moindre importance dans les zones de moindre visibilité.

Par exemple, vous pouvez placer votre appel principal à l'action en haut de la page vers la gauche, car c'est là que l'utilisateur regardera en premier.

Ensuite, si vous souhaitez que vos utilisateurs continuent de lire vos derniers articles de blog, vous pouvez placer ces titres sur le côté gauche de la page. Des informations moins importantes (telles que les annonces sponsorisées) peuvent être insérées dans la barre latérale sur le côté droit de la page et vous pouvez placer les informations dont vous souhaitez obtenir la visibilité la plus faible (comme une politique de cookie) dans la partie inférieure droite. coin main de la page.

6. La couleur compte

«La couleur est un aspect souvent sous-estimé de la conception Web, mais elle peut jouer un rôle très important en termes de facilité d'utilisation et transmettre le sens général d'une marque ainsi que l'ambiance générale du site Web», explique le designer Tom Kenny. "Différentes combinaisons de couleurs peuvent susciter des émotions et des réactions différentes."

Lorsque vous choisissez un jeu de couleurs pour votre site Web, assurez-vous de choisir une combinaison qui évoque l'émotion que vous souhaitez que votre marque transmette.

Un moyen pratique de le faire consiste à organiser un tableau Pinterest avec des images qui reflètent votre vision de votre marque. Vous pouvez ensuite télécharger certaines de ces images sur la roue chromatique d'Adobe à l'aide de l'icône de l'appareil photo située dans le coin supérieur droit de l'écran.

Une fois l'image téléchargée, elle crée automatiquement un jeu de couleurs en fonction des couleurs de la photo. Vous pouvez également déplacer les sélections si vous souhaitez modifier les couleurs individuelles.

Une fois que vous avez créé votre schéma de couleurs, il y a une chose importante à garder à l'esprit qui fera ou défera vos conversions:

Contraste.

Utilisez le contraste pour que le texte, les titres et les boutons d'appel à l'action restent visibles et lisibles. En d'autres termes, les couleurs de vos polices et boutons doivent être très contrastées par rapport à l'arrière-plan (par ex.fond blanc avec du texte noir), et les éléments que vous souhaitez mettre en évidence (par exemple, les boutons d’inscription) doivent être de couleur différente du reste de votre site.

Donc, si nous utilisions le schéma de couleurs que nous avons créé ci-dessus, nous voudrions faire des nuances de bleu la couleur prédominante, et utiliser le jaune vif avec parcimonie comme un appel à la couleur d'action (car il fournit le plus de contraste).

Regardons MailChimp par exemple. Quels éléments attirent votre regard?

Bien sûr, l'image au centre de la femme est très attirante, mais les deux boutons d'appel à l'action orange attirent vraiment l'attention. C'est parce qu'ils contrastent fortement avec tous les bleus du reste de la page.

Quand il s'agit de choisir les bonnes couleurs pour vos boutons, vous voudrez peut-être consulter notre article sur le bouton de couleur qui convertit le mieux (voici ce que la recherche montre).

7. N'oubliez pas de K.I.S.S.

Vous avez probablement déjà entendu le mantra «Keep it Simple, Stupid». Eh bien, cela s'applique également à la conception de sites Web.

La simplicité est très importante pour la conduite des conversions. Chaque fois que vous créez une page, demandez-vous s'il existe un moyen de la simplifier. Le résultat est généralement plus esthétique et convertit presque toujours mieux.

Rappelez-vous la loi de Hick? Cela entre en jeu ici, mais la simplicité ne se limite pas à limiter les options. Il s’agit de créer un design global épuré qui minimise les distractions.

Semblable à la loi de Hick est le fait que les gens ne peuvent gérer autant d'informations à la fois. Visuellement, si nous voyons trop de choses entassées dans une seule page, nous sommes submergés et cela nous dérange. Créer une expérience utilisateur exceptionnelle sur votre site Web signifie vous débarrasser de n'importe quoi ce n'est pas absolument nécessaire pour la conception.

Apple est l'un des plus grands exemples de simplicité dans la conception de sites Web, et son efficacité est telle que d'innombrables autres marques ont emboîté le pas.

8. Utilisez la règle des 8 secondes

La règle générale est que vous avez seulement 8 secondes pour attirer l'attention d'un visiteur, car c'est la durée de la durée d'attention humaine. (Oui, c'est plus court que la capacité d'attention d'un poisson rouge!)

Vous n’avez qu’une toute petite fenêtre d’opportunité pour engager un utilisateur lorsqu’il atterrit pour la première fois sur votre site.

Voici quelques conseils pour attirer l'attention et stimuler les conversions dans les 8 premières secondes:

  • Utilisez un grand titre axé sur les avantages, bref et pertinent.
  • Utilisez des images accrocheuses qui transmettent le point ou l'objet principal de votre page et attirent votre attention sur votre appel à l'action principal.
  • Faites en sorte que les boutons d’inscription soient grands, simples et clairs.
  • Utilisez des mots puissants pour rendre votre copie plus attrayante et engageante.
  • Incorporer du multimédia tel que vidéo, audio ou autre contenu interactif.
  • Utilisez des effets de survol sur vos boutons (par exemple, faites-les changer de couleur au survol de la souris) pour les rendre plus agréables à cliquer.
  • Utilisez des popups de sortie animés pour réengager les visiteurs qui ont perdu tout intérêt.

9. Rappelez-vous le principe de similarité de la Gestalt

Les principes de conception de la Gestalt peuvent être résumés par cette déclaration du psychologue Gestalt Kurt Koffka: «L’ensemble est autre que la somme des parties. »Fondamentalement, l'Ĺ“il humain et le cerveau perçoivent une conception unifiée d'une manière différente de celle des composants individuels de cette conception.

Le premier principe de Gestalt est la loi de similitude, qui dit que l'Ĺ“il / cerveau humain aime grouper des objets similaires. C'est un mécanisme qui nous permet de comprendre les choses et d'organiser des environnements bruyants.

En termes de conception Web, vous pouvez exploiter cette loi en regroupant les éléments que vous souhaitez associer les uns aux autres, tels que les boîtes de témoignage, les boutons de conversion ou les images.

Par exemple, si vous avez un témoignage étonnant et que vous souhaitez l'utiliser pour stimuler les conversions sur votre formulaire d'adhésion, vous pouvez le placer directement sous le formulaire. Même si le témoignage n'a pas été écrit spécifiquement pour votre aimant principal, l'utilisateur associera les deux car ils sont proches.

via Chris Lema

La loi de similarité est également importante pour l'expérience utilisateur. En regroupant tous les principaux éléments de votre formulaire d’inscription (le titre, la description et le bouton d’inscription) et en les gardant suffisamment éloignés des autres éléments de votre page (en utilisant un espace négatif), le cerveau de l’utilisateur pourra traiter l'information plus rapidement et plus efficacement.

Ceci est bien sûr idéal pour les conversions, en particulier parce que, comme nous l’avons dit dans le point précédent, la durée d’attention est très courte!

10. Utiliser les visages pour augmenter la familiarité

Les gens aiment les visages humains. «Lorsque nous voyons un visage, nous sommes automatiquement amenés à ressentir quelque chose ou à faire preuve d'empathie avec cette personne», explique la designer Sabina Idler. «Si nous reconnaissons un contenu sur un site Web – tel qu'un problème, un dilemme, une habitude ou autre chose – nous nous sentons connectés et compris.»

Assurez-vous d'incorporer des visages dans vos articles, vos études de cas et vos témoignages, vos pages d'inscription et vos pages de destination pour stimuler vos conversions.

Si vous êtes le visage de votre marque, c'est simple à faire. Faites un photoshoot et assurez-vous que le photographe prend beaucoup de clichés horizontaux avec un espace négatif sur un côté de vous. De cette façon, vous serez en mesure de lancer un appel à l'action ou du texte.

Voici un exemple de Melanie Duncan:

Cependant, si vous n'êtes pas le visage de votre marque, vous pouvez toujours utiliser des visages sur votre site Web en louant des modèles ou en utilisant des photos. Assurez-vous simplement que les visages que vous choisissez représentent votre marque avec précision, afin que l'utilisateur puisse se connecter au visage.

Vendeve, un réseau social pour les femmes entrepreneurs, fait un excellent travail en utilisant des visages qui reflètent leur cible démographique:

11. Images de haute qualité source

S'il y a une chose qui peut vraiment réduire la qualité d'un article de blog ou d'un élément de contenu, ce sont les images de faible qualité.

En fait, les images peuvent faire ou défaire un accord. Bright Local a constaté que 60% des consommateurs sont plus enclins à prendre en compte les résultats de recherche incluant des images et 23% sont plus susceptibles de contacter une entreprise présentant une image.

Plus précisément, vous devriez éviter d'utiliser des photos sans vie qui ne sont ni pertinentes ni fades. Les recherches de Skyword ont montré que si votre contenu comprend des images convaincantes, vous obtiendrez en moyenne 94% plus de vues!

Ainsi, au lieu d'utiliser des images fades, procurez-vous des photos de haute qualité qui développent des associations positives avec le contenu et qui se sentent personnel. Rappelez-vous: les gens qui aiment les marques se sentent similaires. Si vos images sont trop «étouffantes» ou «corporatives», vous en éloignerez vos visiteurs.

Voici quelques-uns de nos endroits préférés pour trouver des photos de stock de haute qualité et personnelles:

  • Pexels
  • Mort à Stock
  • StockSnap
  • Unsplash
  • Studios Superfamous
  • Espace négatif
  • Gratisographie
  • Petits visuels
  • Picjumbo
  • Kaboompics

Maintenant que vous comprenez ces 11 principes de conception Web, utilisez-les en examinant attentivement votre conception existante. Quels principes casses-tu?

Avez-vous trop de liens de navigation? Pas assez d'espace négatif? Ou peut-être n'avez-vous aucun visage sur votre site?

Bon nombre de ces problèmes sont rapidement et facilement résolus en quelques modifications seulement. Vous pouvez exécuter un audit du taux de conversion pour voir où votre site pourrait utiliser un coup de pouce.

De plus, si vous avez aimé cet article, vous pouvez consulter notre autre article sur 4 conseils de conception pour améliorer les taux de conversion du site Web.

Voir la vidéo: La blockchain et nous (2017)

Like this post? Please share to your friends:
Laisser un commentaire

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: