L’impact des couleurs sur les taux de conversion
L’impact de la couleur sur les taux de conversion
La couleur est l’un des outils les plus puissants dont disposent les designers. Elle permet d’attirer l’attention, de créer une ambiance et d’influer sur les émotions, perceptions et actions d’un utilisateur.
« La couleur n’ajoute pas un agrément au dessin ; elle le renforce. » Pierre Bonnard
Saviez-vous que la couleur compte pour 90 % dans ce qui motive l’achat d’un produit particulier ? Ou que les publicités couleur dans les magazines sont 26 % plus faciles à identifier que les publicités noir et blanc ?
Cela paraît évident : utiliser les bonnes couleurs est la garantie d’un succès assuré. Certes, mais la vraie question qui vient à l’esprit est : comment trouver la « bonne » couleur ? Pour y répondre, nous devons analyser les associations de couleurs traditionnelles, les différences de perception des palettes chromatiques entre les hommes et les femmes, et les questions d’accessibilité.
Psychologie des couleurs
En plus de nous fournir des informations objectives sur un produit, la couleur exerce une puissante influence psychologique sur le cerveau humain. Certaines couleurs peuvent susciter différentes émotions, en fonction de la partie du monde qui verra votre design. Voici quelques-uns des sentiments que les couleurs peuvent faire naître dans le monde occidental :
Rouge
Danger, importance, passion
Le rouge est la couleur du feu et du sang. Il s’agit de l’une des couleurs les plus puissantes. Elle est à la fois associée à l’amour et à la guerre (l’expression courante « voir rouge » souligne le lien entre cette couleur et la colère).
Le rouge est une couleur intense sur le plan émotionnel. Elle peut avoir un effet physique sur les personnes en augmentant leur pression artérielle et leur rythme respiratoire.
Le rouge est énergisant et stimulant ; il donne une impression de vitesse et de puissance. Netflix et YouTube l’utilisent comme couleur principale.
Le rouge est également connu pour attirer le regard. Dans le design, le rouge peut être une puissante couleur d’accentuation. À l’instar des tapis rouges des cérémonies de remise de prix et des événements mondains, le rouge est parfait pour _souligner _les éléments les plus importants de votre page.
Orange
Confiance, énergie, optimisme
L’orange est une couleur vive. Il partage les effets stimulants du rouge, mais dans une moindre mesure : il possède une aura énergisante sans l’agressivité du rouge et peut véhiculer une atmosphère ludique.
Tout comme le rouge, l’orange bénéficie d’une grande visibilité, ce qui vous permet de l’utiliser pour attirer l’attention et souligner des éléments importants, tels que des boutons d’appel à l’action. Certaines recherches indiquent qu’il dénote ce qui est bon marché, mais de nombreux sites et applications utilisent cette propriété de façon positive.
Le bouton orange du design de Hipmunk renforce l’intérêt visuel.
Soleil, bonheur, attention
Curieusement, le jaune représente à la fois le bonheur et l’anxiété. Dans le design, le jaune est très efficace pour attirer l’attention, ce qui explique que cette couleur soit souvent choisie pour les signaux d’avertissement (elle peut être associée au danger, quoique moins fortement que le rouge).
Combiné avec le noir, il peut servir à capter l’attention. Un excellent exemple en dehors de la création digitale est fourni par les taxis new-yorkais.
Placé sur un fond noir, le jaune est perçu avant les autres couleurs. Breitling utilise cette propriété pour que l’attention du visiteur se focalise sur le bouton « Discover the Entire Range ».
Vert
Nature, croissance, réussite
L’association la plus évidente du vert est la nature. Comme la plupart des plantes sont vertes, cette couleur fait également penser à la croissance et à la santé.
Dans le design, le vert peut avoir un effet équilibrant et harmonisant. L’équilibre du vert se prête bien aux appels à l’action, mais en tant que designer, vous devriez prêter attention à la saturation des couleurs. Les couleurs vertes saturées sont stimulantes et dynamiques ; elles captent l’attention. C’est pourquoi elles conviennent parfaitement pour les boutons d’appel à l’action
Bleu
Confort, relaxation, confiance
Le bleu est la couleur de la mer et du ciel. Il s’agit de l’une des couleurs les plus importantes et fréquemment utilisées dans le design d’interface. La nuance exacte de bleu que vous sélectionnez aura un impact considérable sur la perception de vos créations :
- Le bleu clair peut évoquer la fraîcheur, la liberté et le calme. Cet effet relaxant se traduit également par un sentiment de confiance. C’est pourquoi cette nuance est souvent utilisée par les banques.
- Les bleus foncés sont excellents pour les designs dans lesquels la force et la fiabilité sont des valeurs importantes.
Violet
Luxe, spiritualité, créativité
La rareté du violet dans la nature et l’effort de création de cette couleur lui confèrent un rôle particulier dans le design. Historiquement lié à la royauté, le violet véhicule aujourd’hui encore un sentiment de luxe. Le violet suggère qu’un produit ou un site est haut de gamme, même s’il ne l’est pas.
Il est intéressant de noter que près de 75 % des enfants préfèrent le violet à toutes les autres couleurs.
La plupart des enfants considèrent que le violet est une couleur gaie.
Puissance, élégance, raffinement
Le noir est la plus forte de toutes les couleurs. Elle est la plus fréquemment utilisée pour rédiger un texte et mettre l’accent sur un élément, car elle attire rapidement l’attention.
Lorsqu’il est utilisé comme principal composant d’une palette chromatique, par exemple comme arrière-plan, le noir crée des liens émotionnels. Il peut facilement évoquer un sentiment de raffinement et de mystère dans un design.
Blanc
Santé, propreté, vertu
Le blanc est souvent associé à la pureté, la propreté et la vertu. Le blanc étant souvent associé aux services de santé et à l’innovation, vous pouvez employer cette couleur pour suggérer la sécurité dans la promotion de produits médicaux ou high-tech.
Dans le design, comme le blanc accentue les couleurs qui l’entourent, il est fréquemment utilisé comme couleur secondaire. L’utilisation judicieuse de l’espace blanc est une technique de design efficace. Prenez par exemple la page d’accueil du moteur de recherche Google. À l’évidence, le blanc met en valeur les autres couleurs d’un design :
Un généreux espace blanc entoure les éléments du design pour les faire ressortir ou les séparer les uns des autres.
Gris
Solennité, neutralité, professionnalisme
Le gris représente la neutralité. Il peut facilement s’employer avec d’autres couleurs. Lorsqu’il est utilisé comme couleur principale, le gris donne une impression de solennité, ce qui n’est pas forcément négatif. À l’instar du blanc, vous pouvez utiliser un arrière-plan gris pour faire ressortir d’autres couleurs.
Le gris est souvent combiné avec des couleurs d’accentuation plus vives. Dropbox utilise le gris pour mettre en évidence les boutons d’appel à l’action.
Genre et couleur
Bien qu’il n’y ait pas de règles concrètes sur les couleurs exclusivement féminines ou masculines, des études réalisées au cours des huit dernières décennies permettent d’établir certaines généralités. Malgré leurs conclusions ambiguës, de nombreuses études indiquent que des différences existent entre les genres concernant les couleurs préférées :
Couleurs les plus appréciées
Couleurs les moins appréciées
Crédit image VALUE
- Le bleu est la couleur la plus appréciée chez les hommes et les femmes. Les hommes sont beaucoup plus susceptibles que les femmes de préférer les variantes de la couleur bleue.
- Les couleurs les moins appréciées par les hommes et les femmes sont le marron, l’orange et le jaune. Le gris est l’une des couleurs les moins appréciées par les femmes et le violet les hommes.
- Concernant les nuances, teintes et tons, les hommes préfèrent généralement les couleurs vives, tandis que les femmes aiment les couleurs plus douces.
- La plupart des individus pensent que la couleur préférée de toutes les femmes est le rose, mais il n’en est rien. Seul un faible pourcentage de femmes ont choisi le rose comme couleur favorite. Par conséquent, bien que le rose puisse évoquer la féminité dans la psychologie des couleurs, cela ne signifie pas que cette couleur plaise à toutes les femmes, ni même à la plupart des femmes.
Couleur et entreprise
L’importance des couleurs dans l’identité visuelle
La couleur occupe une place centrale dans la philosophie du design de nombreuses marques. Chaque couleur que nous voyons évoque quelque chose, directement ou indirectement, qui guide notre perception de chaque marque. Certaines couleurs vont au-delà des marques et définissent tout un secteur d’activité, telles que le bleu pour les voyages, le vert pour la santé et le rouge pour la restauration rapide.
Toutefois, lorsqu’il s’agit de choisir une palette chromatique pour votre marque, il n’existe pas de règle stricte. Certaines entreprises optent pour des couleurs couramment utilisées dans leur secteur d’activité ; d’autres se sont rendus compte que le fait d’aller à l’encontre des attentes conventionnelles pouvait constituer un moyen efficace de se démarquer. Par exemple, Virgin America a choisi d’aller à contre-courant pour le design de son site et de son application. Bien que son site web ne corresponde pas à ce que les utilisateurs pourraient attendre d’une compagnie aérienne, il sort indéniablement du lot.
Il n’y a aucune trace de bleu dans l’application de Virgin America pour iOS.
Par conséquent, le choix de couleurs inattendues peut constituer un moyen efficace pour que les utilisateurs se souviennent de votre entreprise.
Couleur et optimisation du taux de conversion
Comment utiliser la théorie et la psychologie des couleurs pour inciter les utilisateurs à cliquer sur un bouton ? La couleur des boutons d’appel à l’action est au cœur de l’un des plus longs débats sur la conversion et l’optimisation. Pour chaque expert qui prétend qu’un rouge attirant le regard est la meilleure couleur pour un bouton, il y en a un autre pour affirmer que le vert est préférable parce que cette couleur est sécurisante et signifie « Allez-y ».
HubSpot a partagé un test montrant comment le changement de couleur d’un bouton d’appel à l’action a eu un impact considérable sur le nombre de signataires.
Test A/B de Performable pour la couleur des boutons.
Bien qu’ayant initialement prédit que le bouton vert serait plus efficace, le bouton rouge a généré 21 % de clics supplémentaires. Parallèlement, HubSpot a prévenu ses lecteurs que les résultats du test étaient subjectifs (son audience a vraisemblablement préféré le bouton rouge parce que cette couleur était la seule à ressortir de la page).
À elle seule, la couleur du bouton n’a que très peu d’effet, voire aucun. Ce qui est efficace sur un site ne l’est pas nécessairement sur un autre. Dire qu’une couleur enregistre un meilleur taux de conversion qu’une autre est tout simplement faux, car il n’existe pas de meilleure couleur universelle. Toutefois, certaines règles empiriques peuvent vous aider à utiliser la couleur à votre avantage. L’une d’entre elles est le principe psychologique appelé effet d’isolement, qui affirme qu’un article qui sort du lot est plus susceptible d’être mémorisé.
Par exemple, si votre site ou application utilise beaucoup de vert, les utilisateurs ne remarqueront probablement pas immédiatement un bouton vert, quels que soient les résultats enregistrés par les boutons rouges dans le test A/B réalisé par une autre entreprise.
Le bouton d’appel à l’action « Get Evernote, It’s Free » est caché, car il est de la même couleur que l’arrière-plan. Ce bouton est tout simplement perdu dans le design. Les utilisateurs ne le voient pas.
Il est donc essentiel d’établir une hiérarchie visuelle de toute la page pour faire ressortir l’appel à l’action. Le contraste de la couleur est important, car si la couleur du bouton n’attire pas l’attention du client potentiel, la vente ou l’abonnement ne se fera pas.
La couleur du bouton d’appel à l’action qui retient vraiment l’attention des utilisateurs est celle qui contraste par rapport à la palette chromatique du reste de la page.
Couleur et ergonomie
Limitez le nombre de couleurs
Une trop grande diversité de couleurs produit un résultat inesthétique, quelles que soient les couleurs employées.
Une règle simple de design d’intérieur — celle du 60-30-10 — peut s’appliquer à de nombreux designs. Cette technique de décoration intemporelle peut vous aider à créer facilement une palette chromatique. _60 % de teinte dominante, 30 % de couleur secondaire et 10 % de couleur d’accentuation. _Cette formule fonctionne, car elle crée un sentiment d’_équilibre _et permet au regard de passer confortablement d’un point focal à l’autre.
La proportion 60 % + 30 % + 10 % est conçue pour équilibrer les couleurs. Crédits image : Facildecoracion
Design et accessibilité
De nombreuses personnes souffrant de daltonisme ont des difficultés à distinguer le rouge et le vert.
Penchons-nous sur un cas fréquent : lorsque vous remplissez un formulaire, avez-vous déjà reçu un message d’erreur du type « Les champs marqués en rouge sont obligatoires » ? Bien qu’il paraisse anodin, ce message d’erreur associé à un formulaire dans l’exemple ci-dessous peut être extrêmement frustrant pour des personnes ayant des difficultés à percevoir les couleurs.
Le design du champ de formulaire utilise uniquement le rouge et le vert pour signaler les champs comportant ou non une erreur. Les utilisateurs souffrant de daltonisme ne peuvent pas distinguer les champs signalés en rouge.
Comme spécifié dans les consignes du consortium W3C, la couleur ne doit pas être utilisée comme seul moyen visuel de communiquer des informations, d’indiquer une action, de demander une réponse ou de distinguer un élément visuel. Pour le formulaire susmentionné, le designer doit fournir des messages d’erreur plus précis, par exemple, « L’adresse e-mail que vous avez saisie n’est pas valide », ou au moins afficher une icône en regard du champ qui requiert l’attention de l’utilisateur.
Des indices visuels supplémentaire ou des messages d’erreur en regard du champ à modifier peuvent faciliter la compréhension.
- WebAIM Color Contrast Checker permet de vérifier vos combinaisons de couleurs.
- Adobe Photoshop permet aux designers de tester des images avec Color Universal Design afin de s’assurer que les informations graphiques sont précisément communiquées aux personnes souffrant de problèmes de perception des couleurs, tels que le daltonisme.
Nous avons abordé plusieurs facteurs liés à la couleur pouvant affecter l’expérience utilisateur sur votre site ou application. Mais nous ne savons toujours pas comment trouver la « bonne » couleur. Vous connaissez probablement déjà la réponse : il n’existe pas de « couleur idéale » pour les conversions. La vraie valeur ajoutée de la couleur dans le design ne réside pas dans les couleurs à elles seules, mais dans les couleurs que vous avez et la façon dont vous les combinez. Cette idée est clairement exprimée dans cette citation extraite de Material Design :
« Il n’existe pas de mauvaises couleurs. Ce qui compte est la façon dont vous les utilisez. »
Si vous projetez de doper votre taux de conversion, vous devez effectuer des recherches sur ce sujet. Vous pouvez augmenter votre taux de conversion en analysant ce dont vos utilisateurs ont vraiment besoin, la langue qu’ils parlent et comment ils veulent acheter le produit. La bonne décision de design est celle que vos utilisateurs estiment être la bonne.