Un spectre de possibilités : le guide des couleurs de l'interface utilisateur

Il n'y a pas moyen de contourner cela : la couleur est l'élément créatif le plus percutant dans la conception visuelle. Des décors scéniques enchanteurs de la scénographie aux compositions complexes du pixel art, une solide compréhension de la couleur est la clé principale d'une communication convaincante. Besoin d'une preuve ?

Lorsque les participants à une récente étude axée sur la marque ont été mis au défi de dessiner les logos de 10 entreprises emblématiques, seuls 16 % ont pu se rappeler des formes et des caractéristiques de conception précises. Cependant, lorsqu'on leur a demandé d'identifier la palette de couleurs d'une marque, le nombre de réponses correctes a grimpé jusqu'à 80 %.

La couleur joue également un rôle influent dans le monde de la conception d'interface utilisateur. Les produits numériques avec lesquels nous interagissons quotidiennement reposent sur l'utilisation stratégique de la couleur pour communiquer des informations importantes. Il est donc essentiel que les concepteurs UX et UI sachent comment manier judicieusement la couleur.

Dans ce guide, nous allons :

• Démystifier les bases de la théorie des couleurs,
• Fournir des principes solides pour travailler avec la couleur dans les interfaces numériques,
• Partagez des ressources utiles pour développer la sensibilisation aux couleurs, et
• Donnez aux concepteurs d'interface utilisateur les moyens de créer leurs propres combinaisons de couleurs remarquables.

L'objectif de ce guide est la compétence en matière de couleurs, suivie de la confiance en les couleurs, le tout dans le but d'une exécution étonnante des couleurs dans les interfaces utilisateur que nous rencontrons chaque jour.

Cours accéléré : théorie des couleurs pour les concepteurs d'interface utilisateur

La théorie des couleurs est un vaste domaine d'étude avec sa propre terminologie, sa méthodologie et ses fondements scientifiques. Cela peut être compliqué, mais ce n'est pas ce que nous voulons. Ce que nous voulons, c'est une compréhension de la couleur qui peut être appliquée avec une précision ultra-rapide. Nous voulons utiliser la couleur comme nous utilisons les formes, sans effort, avec audace et efficacité.

Pour utiliser la couleur de cette manière, les concepteurs d'interface utilisateur doivent avoir une solide compréhension de ces concepts fondamentaux de la théorie des couleurs :

• La couleur est relative.
• La surcharge de saturation tue la vivacité des couleurs.
• Le contraste simultané a des avantages et des inconvénients.
• Les schémas de couleurs de base sont les meilleurs.
• La teinte a toujours un impact sur la valeur.

Creusons.

La couleur est relative

La couleur n'est jamais seule. Comme l'œil et le cerveau humains travaillent ensemble pour voir une couleur, ils sont toujours influencés par :

• La lumière brille sur la couleur
• Autres couleurs entourant la couleur

Découvrez cet exemple tiré de la nature :

R : Le cerveau et l'œil travaillent ensemble pour nous aider à comprendre que la fleur dans son ensemble est en fait rouge vif.

B & C : Le brun foncé de l'ombre de la fleur (B) fait apparaître le reflet sur la crête du pétale (C) beaucoup plus lumineux que la couleur marron terne qu'il est en réalité. Essentiellement, la lumière qui brille sur la crête du pétale et la couleur de l'ombre travaillent en tandem pour tromper l'œil et intensifier la surbrillance.

Voici un autre exemple qui montre à quel point la couleur peut être trompeuse :

Dans la conception de l'interface utilisateur, la relativité des couleurs n'est pas toujours aussi évidente, de sorte que les couleurs d'un schéma doivent être testées les unes par rapport aux autres. Pourquoi? Parce que cette sélection de couleurs magnifiquement arrangée dans votre guide de style peut s'avérer problématique lorsqu'elle est appliquée à une interface.

Le gros plat à emporter ? Ne choyer pas vos concepts de couleur. Si un échantillon de jaune d'accent semble luxuriant lorsqu'il est entouré d'espaces blancs dans Sketch mais qu'il entre en conflit avec le schéma de couleurs dominant d'une interface utilisateur, trouvez une solution différente.

La surcharge de saturation tue l'éclat des couleurs

La saturation des couleurs fait partie intégrante de la vivacité des couleurs. Cependant, un schéma assemblé autour de rien d'autre que des couleurs hautement saturées submerge l'œil et le dynamisme est diminué. Avec la couleur, moins c'est plus. Une couleur hautement saturée devient vibrante lorsqu'elle est utilisée en tandem avec des couleurs moins saturées.

Le contraste simultané a des avantages et des inconvénients

Un contraste simultané se produit lorsque des compléments de couleur ayant exactement la même valeur sont placés les uns à côté des autres. L'effet est si intense qu'il fait vibrer ou pulser le point où les deux couleurs se rencontrent.

Pour les concepteurs d'interface utilisateur, le contraste simultané peut avoir des résultats positifs et négatifs, il est donc important de comprendre comment contrôler la puissance de ce phénomène visuel.

Par exemple, dans une interface conçue autour d'une variété de bleus, l'utilisation d'un orange complémentaire avec la même valeur que la couleur d'ancrage bleue serait un excellent moyen d'attirer l'attention sur les icônes de notification.

Cependant, ce même combo orange et bleu provoquerait des migraines s'il était utilisé pour le texte et l'arrière-plan des menus déroulants.

Les schémas de couleurs de base sont les meilleurs

Les arcs-en-ciel sont beaux dans la nature. Dans la conception de l'interface utilisateur, la couleur doit être utilisée de manière plus sélective ou elle submerge l'expérience. Même lorsque les marques ont des palettes à fort impact avec un large éventail d'options, il est préférable de faire preuve de retenue et de créer des interfaces utilisateur autour de schémas de couleurs simples.

Voici deux plans infaillibles pour créer un jeu de couleurs de base pour l'interface utilisateur :

1. Schémas de couleurs d'interface utilisateur analogues

• Ces schémas agréables à l'œil consistent en des couleurs étroitement regroupées sur la roue chromatique.
• Des combinaisons de couleurs analogues sont faciles à trouver sur les photos d'environnements naturels, en particulier de plantes, et elles ont tendance à être visuellement apaisantes.
• La variété des schémas analogues provient de changements de saturation et de luminosité, et non de changements de teinte majeurs.
• Lorsque vous utilisez un schéma analogue, essayez d'ajouter une couleur hautement saturée directement sur la roue chromatique pour créer une accentuation dans une interface.

2. Schémas de couleurs complémentaires de l'interface utilisateur

• Les schémas de couleurs complémentaires sont basés sur l'interaction de couleurs froides et chaudes complémentaires qui existent les unes en face des autres sur la roue chromatique.
• La variété des couleurs est obtenue en modifiant la saturation et la luminosité entre les extrêmes complémentaires.
• L'utilisation de trop de couleurs vives et hautement saturées nuit à l'impact des schémas complémentaires.

La teinte a toujours un impact sur la valeur

Cela peut sembler étrange, mais les couleurs ont des valeurs de gris correspondantes. Voici la preuve :

Dans l'image ci-dessus, nous avons une gamme de teintes à 100 % de luminosité et de saturation, mais regardez ce qui se passe lorsque ces couleurs sont converties en niveaux de gris :

Boom! Toute une gamme de niveaux de gris est révélée. Pourquoi est-ce important pour les concepteurs d'interface utilisateur ? Un seul mot : Contraste .

Changez votre esprit en niveaux de gris pendant un moment. Si vous cherchiez à créer un contraste, utiliseriez-vous une valeur de gris de 40 % en plus de 50 % ? Bien sûr que non, mais c'est exactement ce qui est risqué lorsque la teinte est exclue de l'équation de contraste des couleurs.

N'oubliez pas que la teinte a toujours un impact sur la valeur.

4 principes de couleur essentiels pour les interfaces numériques

Maintenant que nous avons simplifié la théorie des couleurs et lié ses concepts de base à la conception de l'interface utilisateur, il est temps d'examiner de plus près le rôle que joue la couleur dans les interfaces numériques. Ce sont les quatre principes de couleur qui doivent être pris en compte dès les premiers efforts de chaque projet de conception d'interface utilisateur.

1. La relation entre le texte et la couleur est cruciale.
2. L'accessibilité des couleurs ne peut être ignorée.
3. Le contraste est essentiel, mais ce n'est pas une panacée en matière de design.
4. La couleur fonctionne mieux lorsqu'elle est appliquée proportionnellement.

La relation entre le texte et la couleur est cruciale

La couleur affecte la lisibilité. La plupart des concepteurs d'interface utilisateur comprennent cela en principe, c'est pourquoi nous ne voyons pas beaucoup d'interfaces avec un corps de texte vert sur fond rouge. Au lieu de cela, la tension entre le texte et la couleur apparaît subtilement, s'infiltrant dans les composants d'interface utilisateur courants tels que les formulaires, les boutons, les en-têtes et les icônes.

Maintenez une relation texte/couleur saine en suivant ces directives simples :

• Évitez toujours un faible contraste entre le texte et l'arrière-plan.
• N'utilisez pas de couleurs complémentaires pour le texte et l'arrière-plan, en particulier lorsque les couleurs sont de luminosité et de saturation similaires (par exemple, texte jaune sur fond violet).
• Même sur des fonds blancs, ne définissez pas le corps du texte dans des couleurs vives. Le noir et le gris foncé sont les plus faciles à lire.

L'accessibilité des couleurs ne peut être ignorée

La couleur est communicative, mais elle ne peut pas être le seul élément de conception utilisé pour transmettre des informations dans une interface utilisateur. Pourquoi pas? Parce que certains internautes perçoivent la couleur différemment (ou pas du tout) de la majorité de la population.

Par exemple, une personne qui souffre de daltonisme peut ne pas être en mesure de dire quand une icône de produit est dans son état "appuyé" si la seule différence dans l'icône est un changement de couleur.

De plus, certaines personnes ont du mal à voir les composants importants de l'interface utilisateur qui présentent un faible contraste de couleur avec l'arrière-plan d'une interface. Des sites comme Colorable et Contrast Ratio permettent aux concepteurs de tester rapidement une gamme d'associations de couleurs pour l'accessibilité au contraste.

Le contraste est essentiel, mais ce n'est pas une panacée de conception

Oui, le contraste des couleurs dans la conception de l'interface utilisateur est important. Planifiez-le, mettez-le en œuvre, profitez-en. Mais ne vous attendez pas à l'agiter comme une baguette magique et à réparer une mauvaise conception.

La forme, l'espace, la taille et les autres éléments de conception ne doivent pas être ignorés. Le contraste des couleurs peut rendre une interface utilisateur horrible attrayante, mais cela ne résoudra pas une mauvaise expérience utilisateur.

La couleur fonctionne mieux lorsqu'elle est appliquée proportionnellement

Imaginez une application d'actualités où chaque instance de texte est définie dans la casse du titre ou un site Web de commerce électronique conçu sur une grille d'images 9x9. Les deux seraient terribles !

Les concepteurs d'interface utilisateur avertis utilisent des éléments de conception tels que la typographie et la répétition proportionnellement pour améliorer la hiérarchie de conception. La couleur mérite la même considération réfléchie. Dans la conception de l'interface utilisateur, l'utilisation de trop de couleurs perturbe la façon dont les informations sont perçues.

Ressources de couleur pour un progrès continu

Voici une vérité qui dérange : Concevoir avec la couleur est une compétence, et des compétences doivent être développées. La plupart des concepteurs d'interface utilisateur ont un sens inné des couleurs qui vont bien ensemble (c'est-à-dire le goût des couleurs), mais cela ne se traduit pas toujours par une application.

Pour vraiment maîtriser la couleur et voir son plein impact sur la conception de l'interface utilisateur, les concepteurs doivent s'entraîner. Heureusement, il existe de nombreuses ressources pour vous aider à continuer à apprendre les couleurs et à développer vos compétences.

Ctrl+Peindre

Si vous êtes un concepteur d'interface utilisateur qui cherche à acquérir une confiance immédiate en matière de couleurs, commencez par ctrlpaint.com, un site Web dédié aux instructions de peinture numérique. Peinture numérique? Vraiment?

Absolument. L'artiste conceptuel professionnel Matt Kohr enseigne l'utilisation de la couleur numérique par le biais de didacticiels vidéo rapides et d'exercices pratiques. Le programme est merveilleusement simple et centré sur « peindre ce que vous voyez », à la fois dans le monde physique et dans l'imagination.

Commencez par la vidéothèque gratuite (section 11) avant de passer aux exercices plus intensifs du kit de démarrage couleur .

Josef Albers et l'application Interaction of Color

La compréhension contemporaine de la relativité des couleurs a été largement explorée et avancée par l'approche pratique avant la théorie de l'artiste/éducateur Josef Albers.

Albers a proposé qu'une seule couleur puisse avoir "plusieurs visages" et a encouragé le jeu et l'expérimentation approfondis parmi ses élèves dans l'espoir que "les yeux s'ouvriraient" pour voir la couleur telle qu'elle se comporte vraiment dans le monde réel (par opposition aux couleurs symboliques que nous envisageons dans notre tête).

En 1963, Albers est l'auteur de Interaction of Color , un manuel qui continue d'être très influent dans l'enseignement mondial de l'art et du design. Pour célébrer le 50e anniversaire de la publication du livre, l'Université de Yale a publié une application iPad interactive qui contient le texte intégral mais permet également aux utilisateurs de jouer et d'expérimenter avec les plaques de couleurs d'Albers.

Pour les concepteurs d'interface utilisateur, l'application Interaction of Color offre la possibilité de faire l'expérience d'exercices de couleurs analogiques dans un environnement numérique et de voir de première main comment la relativité des couleurs affecte les interfaces utilisateur.

André Loomis

Au cours de la première moitié du XXe siècle, Andrew Loomis était un éminent illustrateur et instructeur à l'American Academy of Art de Chicago, mais son héritage durable est celui d'auteur. Loomis a écrit six livres sur l'art et le design commerciaux et a couvert une gamme de sujets allant du dessin de personnages au placement de produits.

Dans ses livres Creative Illustration et Eye of the Painter (tous deux disponibles sur archive.org), Loomis laisse tomber un certain nombre de lignes durables qui restent pertinentes pour le domaine moderne de la conception d'interface utilisateur :

La plus grande erreur de couleur, et celle qui cause le manque d'unité et d'harmonie, est d'avoir trop de couleurs sur la palette.

Deux couleurs seront harmonieuses lorsque l'une ou les deux contiennent une partie de l'autre.

La couleur se prête à l'expérimentation plus que tout autre élément de beauté.

Interfaces d'autres concepteurs

Une fois qu'un niveau de compétence de base en matière de couleurs est atteint, la création de schémas de couleurs s'épanouit en une quête fascinante. Chaque interface rencontrée devient une opportunité d'apprentissage et de critique, et les observations ne manquent pas.

C'est l'étape du développement d'un concepteur d'interface utilisateur lorsque le référencement du travail d'autres concepteurs devient stimulant. Comment? Parce que le référencement va de la destination au voyage, du point final à l'inspiration.

Les concepteurs d'interface utilisateur de tous les niveaux de compétence ont intérêt à conserver un enregistrement continu des schémas de couleurs d'interface utilisateur trouvés. Prenez des captures d'écran, tenez un journal physique des couleurs, démarrez un tableau d'humeur - tout ce qu'il faut pour imprimer des moments d'illumination des couleurs pour une mise en œuvre future.

La couleur est trop importante pour être ignorée

Lorsqu'il s'agit de la conception d'interfaces numériques, la couleur n'est pas une considération facultative. Même dans les interfaces utilisateur qui utilisent un minimum de couleur (ou celles qui sont entièrement en noir et blanc), il est impératif que les concepteurs d'interface utilisateur comprennent pourquoi la couleur est ou n'est pas utilisée et comment cela affecte l'expérience utilisateur.

Il est également important que les concepteurs d'interface utilisateur aient la capacité de générer et de mettre en œuvre des schémas de couleurs originaux. Référencer le travail d'autres designers et produits numériques est une pratique intéressante, mais cela devient limitant lorsqu'il s'agit de la seule méthode d'exploration des couleurs entreprise au cours du processus de conception. Il est extrêmement important de pouvoir capturer des paires de couleurs vues dans le monde réel ou dans l'esprit.

Si vous êtes un designer qui a du mal à utiliser habilement la couleur ou si vous avez déjà pensé : « Je n'ai pas vraiment de talent pour la couleur », ne vous découragez pas. Concevoir avec la couleur n'est pas une forme de magie créative ou un cadeau spécial; c'est une discipline pratique fondée sur des techniques simples qui peuvent être répétées et améliorées.

N'oubliez pas que la couleur est la clé principale d'une communication de conception claire et convaincante. Qu'elle soit mise en œuvre avec précaution ou avec un abandon téméraire, elle a un impact sur la conversion, la notoriété de la marque et l'expérience utilisateur. Pour le concepteur d'interface utilisateur, la couleur est un outil puissant qui ne peut tout simplement pas être ignoré.

• • •

Pour en savoir plus sur le blog Toptal Design :

1. Le rôle de la couleur dans l'UX
2. Création d'un guide de style d'interface utilisateur pour une meilleure UX
3. UX et l'importance de l'accessibilité Web
4. Art vs. Design – Un débat intemporel
5. Conception pour les environnements interactifs et les espaces intelligents