Le rôle de la couleur dans l'UX

Comprendre la psychologie des couleurs est un aspect clé de la création d'une palette de couleurs qui fonctionne bien dans la conception numérique. Si la couleur est parfois considérée comme un choix purement esthétique par certains designers, elle est en fait un élément clé de l'impact psychologique d'un design sur les utilisateurs, et à ce titre, de son UX.

Une palette de couleurs bien pensée peut faire passer un design de "bon" à "excellent", tandis qu'une palette de couleurs médiocre ou mauvaise peut nuire à l'expérience globale d'un utilisateur et même interférer avec sa capacité à utiliser un site ou une application.

Alors que la théorie des couleurs en général est un sujet complexe, et que l'utilisation de la couleur dans la conception UX couvre bien plus que la simple création d'une palette qui a l'air agréable (comme l'accessibilité et les effets psychologiques de nuances même différentes dans la même teinte) ; les concepteurs peuvent progressivement intégrer une meilleure utilisation de la couleur dans leurs conceptions sans avoir à repenser l'ensemble de leur processus. Une fois qu'un designer maîtrise les bases, l'une des parties les plus gratifiantes de la théorie des couleurs consiste à apprendre à incorporer des couleurs plus inattendues dans ses créations.

La psychologie de la couleur

La théorie des couleurs et les effets psychologiques que la couleur peut avoir sur les utilisateurs est un sujet complexe et souvent subjectif. Mais certains aspects peuvent être abordés à un niveau plus universel.

Des choses comme les significations communes des couleurs principales (primaires, secondaires et tertiaires), les palettes de couleurs traditionnelles et les variations culturelles dans les significations des couleurs sont toutes assez simples. Les concepteurs peuvent facilement apprendre ces bases et les appliquer à leur travail. Mais il y a des points plus fins à apprendre lorsqu'il s'agit d'utiliser les couleurs dans la conception UX .

L'impact émotionnel des couleurs de l'interface ne doit pas être négligé. Et bien que certaines couleurs soient "universelles" dans la conception UX (comme le noir, le blanc et le gris, dont au moins une est utilisée dans pratiquement toutes les bonnes conceptions), les couleurs avec lesquelles elles sont combinées peuvent avoir un impact énorme sur la perception d'un utilisateur.

Bien sûr, la manière dont la couleur est utilisée peut également avoir un impact considérable sur la façon dont elle est perçue. Par exemple, le bleu utilisé comme couleur primaire dans un design moderne et minimaliste aura une sensation très différente du même bleu utilisé comme couleur d'accent dans un design d'entreprise plus complexe.

Différences culturelles de couleur

Un problème que les concepteurs ont tendance à négliger est les différences culturelles qui peuvent exister autour de différentes couleurs. Par exemple, dans de nombreuses cultures occidentales, le blanc est associé à des choses comme la pureté, l'innocence et l'espoir. Mais dans certaines régions d'Asie, le blanc est associé à la mort, au deuil et à la malchance.

Certaines couleurs ont généralement des connotations positives quelle que soit la culture (comme l'orange), tandis que d'autres, comme le blanc, varient considérablement d'un pays à l'autre. Cela peut certainement compliquer la vie d'un designer lorsqu'il essaie de créer un design qui plaira au plus large public possible.

Il est important que les concepteurs examinent les implications culturelles de leurs palettes de couleurs en fonction du public visé par le produit ou le site Web. Si un produit cible un public mondial, assurez-vous d'équilibrer les couleurs et les images utilisées pour éviter les connotations culturelles négatives. Si un produit ne ciblera principalement qu'une culture particulière, les concepteurs peuvent accorder moins d'attention aux implications que la palette choisie peut avoir dans d'autres cultures.

Faire correspondre les couleurs UX à la marque

Les valeurs de la marque doivent jouer un rôle clé dans la création d'une palette de couleurs. Mais ils ne sont pas le seul facteur important. Les normes de l'industrie sont également essentielles, tout comme les couleurs déjà utilisées par les concurrents. L'utilisation d'une palette de couleurs presque identique à celle de la concurrence principale d'une marque est un excellent moyen de semer la confusion et de s'assurer que la marque ne se démarquera pas.

Certes, il y a des exceptions à cela. Prenez, par exemple, McDonald's et Wendy's. Les deux sont des restaurants de restauration rapide qui sont en concurrence directe les uns avec les autres. Et les deux utilisent une palette de couleurs rouge et jaune. Cependant, en regardant leurs logos, le logo de Wendy's est principalement rouge avec des accents jaunes, tandis que McDonald's est à l'opposé. Leurs emballages utilisent également ces couleurs de différentes manières, différenciant davantage les marques. De ce fait, aucun des deux ne serait facilement confondu avec l'autre, même si les logos et autres marques d'identification étaient retirés de leur emballage.

La première étape pour créer une palette de couleurs de marque qui soutient les valeurs de la marque est de comprendre la signification des différentes couleurs et comment les rendre plus claires/plus lumineuses/plus sombres/plus ternes/etc. peuvent les affecter. Voici une ventilation de base de ce que signifient les différentes couleurs :

• Rouge - Le rouge est la couleur du danger et de la passion, ainsi que de l'excitation. C'est une couleur très forte et peut provoquer de fortes réactions chez les gens. L'éclaircir au rose le rend plus féminin et romantique tandis que l'assombrissement de la teinte au marron le rend plus discret et traditionnel.
• Orange - Orange est une couleur très créative qui est également associée à l'aventure et à la jeunesse. C'est aussi très énergique. En raison des liens étroits de l'orange avec le style des années 70, il peut également évoquer une sensation rétro.
• Jaune — Le jaune est joyeux, optimiste et joyeux. Il est populaire dans les designs pour enfants et adultes. Des teintes plus pastel sont souvent utilisées comme couleur de bébé non sexiste, tandis que les jaunes plus vifs sont populaires dans les conceptions créatives. Les nuances plus foncées de jaune deviennent de l'or, ce qui est associé à la richesse et au succès.
• Vert - Le vert a des associations variées. D'une part, il provoque des sentiments de richesse et de tradition (en particulier les teintes plus foncées), tandis que d'autre part, il est fortement associé à l'environnementalisme et à la nature. Les verts citron sont souvent associés au renouvellement et à la croissance.
• Bleu — Le bleu est le plus souvent associé à la loyauté et à la confiance. Les bleus plus brillants peuvent être associés à la communication, tandis que les bleus plus ternes et plus sombres peuvent être associés à la tristesse et à la dépression. Le bleu est la couleur la plus universellement appréciée au monde, ce qui peut expliquer pourquoi tant d'entreprises optent pour des nuances de bleu pour leur image de marque.
• Violet - Le violet est une autre teinte aux significations variées. Il a longtemps été associé à la royauté et à la richesse (puisque la teinture violette était rare dans de nombreuses civilisations anciennes, elle était réservée à la royauté). Mais il est également associé au mystère et à la spiritualité. Le violet peut également évoquer la créativité.
• Noir — Le noir implique sophistication et luxe. Cependant, cela peut aussi être lié au chagrin et à la négativité. Selon les autres couleurs UX utilisées avec le noir, il peut sembler moderne ou traditionnel, formel ou décontracté.
• Blanc - Le blanc est lié à la pureté, à l'innocence et à la positivité. Le blanc est également très populaire dans les designs minimalistes, en raison de sa neutralité et de sa simplicité. Comme le noir, le blanc prend facilement les caractéristiques des autres couleurs avec lesquelles il est utilisé.
• Gris - Le gris a des significations variées, selon le contexte. Il peut être conservateur et sophistiqué ou terne et terne. Il peut être sans émotion ou de mauvaise humeur. Il peut également être associé au chagrin et à la tristesse.
• Marron - Le marron (qui est en fait une teinte orange foncé) est associé au fait d'être terre-à-terre et ancré. Il est également associé à la nature et même au confort. Et, bien sûr, cela peut être affilié au fait d'être sale ou terne.

Connaître ces significations de base des couleurs donne aux concepteurs une base solide sur laquelle construire des palettes de couleurs pour n'importe quelle marque ou produit.

La théorie des couleurs, cependant, est à la fois science et art. Ce n'est pas parce qu'une couleur est généralement associée à un sentiment ou à une humeur particulière qu'elle ne peut pas être perçue d'une autre manière en la combinant avec différentes couleurs, en modifiant la teinte exacte ou en variant la façon dont elle est utilisée parmi d'autres éléments de conception.

Utilisation de couleurs UX non conventionnelles

L'utilisation non conventionnelle des couleurs UX est un excellent moyen de différencier une marque. Et même s'il faut plus de finesse que de simplement combiner toutes les anciennes couleurs qu'un designer a envie de combiner, il n'est pas si difficile d'apprendre à utiliser des couleurs inattendues dans les conceptions UX.

Les couleurs d'accent sont le point de départ le plus simple lorsqu'il s'agit d'ajouter des couleurs non conventionnelles à un design. Par exemple, le site Web d'un cabinet d'avocats peut utiliser une palette de couleurs traditionnelle de bleu marine et de gris. Mais ajoutez quelques accents vert citron et tout à coup, le design se distingue de la mer des autres cabinets d'avocats avec des sites Web bleu marine et gris. Ou regardez cet exemple de Hogan Lovells, qui utilise une palette de couleurs blanche, grise et vert citron pour créer un site Web moderne qui se démarque définitivement des autres sites de l'industrie juridique. Cela plairait à une foule plus jeune et plus moderne que votre site juridique moyen.

Berdan Real Estate est un autre site qui utilise une palette de couleurs inattendue. Le site immobilier utilise des nuances de jaune et de pêche, qui sont toutes deux beaucoup plus énergiques que votre site immobilier moyen (où dominent de grandes étendues de bleu, de rouge et de vert).

L'assurance n'est généralement pas considérée comme une industrie moderne et révolutionnaire, mais cela ne signifie pas que leurs conceptions ne peuvent pas l'être. Le site Web de Lemonade utilise une palette de couleurs grise et blanche avec des accents fuchsia. C'est complètement inattendu dans une industrie qui n'est pas connue pour prendre des risques.

Il existe une multitude d'autres exemples de couleurs UX non conventionnelles utilisées dans la pratique sur le Web qui peuvent être utilisées comme source d'inspiration.

La règle du 60-30-10

La règle 60-30-10 est une théorie simple pour créer des palettes de couleurs bien équilibrées et visuellement intéressantes. L'idée est qu'une couleur - généralement quelque chose d'assez neutre (littéralement ou psychologiquement) - représente 60% de la palette. Une autre couleur complémentaire représente 30% de la palette. Et puis une troisième couleur est utilisée comme accent pour les 10% restants du dessin.

Cette méthode permet aux concepteurs de commencer beaucoup plus facilement à expérimenter des palettes de couleurs non conventionnelles sans s'éloigner trop des normes attendues au sein d'une industrie ou d'une marque. L'ajout d'une touche d'une teinte inattendue peut rehausser un design qui correspond autrement à ce que l'on attend d'une entreprise particulière. Cela peut également être la première étape vers la création d'une palette de marque beaucoup plus avant-gardiste que ses concurrents, ce qui distingue la marque et la rend plus mémorable.

Conclusion

Alors que la théorie des couleurs est un sujet complexe, il n'est pas particulièrement compliqué d'apprendre les bases. À partir de là, les concepteurs peuvent s'appuyer sur leurs connaissances pour créer des palettes de couleurs plus variées et sophistiquées pour leurs conceptions.

Une palette de couleurs bien conçue, en particulier celle qui comprend des teintes inattendues, n'est pas simplement un choix esthétique. Cela peut avoir des effets psychologiques importants sur les utilisateurs, sur lesquels les concepteurs UX devraient capitaliser afin de créer de meilleures expériences.

• • •

Pour en savoir plus sur le blog Toptal Design :

• La psychologie du design et les neurosciences de l'expérience utilisateur impressionnante
• Interfaces utilisateur sombres. Le bien et le mal. À faire et à ne pas faire.
• Image de marque émotionnelle pour la conception de produits durables
• Utilisez votre inspiration - Un guide des planches d'humeur
• Design persuasif : Utiliser efficacement la psychologie avancée