Interface utilisateur et couleurs adaptées

En tant que designers, nous avons un allié puissant en la couleur. Cela peut nous permettre d’atteindre un certain nombre d’objectifs différents. Vous pouvez l’utiliser pour renforcer ou mettre en valeur une idée, pour provoquer une réponse émotionnelle de l’utilisateur ou pour attirer l’attention sur une partie spécifique de votre site web. Ceci, bien sûr, en plus de rendre votre site web esthétique à l’œil.

Author/Copyright holder: Inhabitat. Copyright terms and licence: Fair Use

Dans de nombreux cas, la palette de couleurs choisie pour un site web reflétera également le branding et les valeurs de l’entreprise.

Couleur et branding

La palette de couleurs d’un site web peut contribuer à la perception de la marque globale des produits ou services. Sur la base d’une recherche menée par CCICOLOR, l’Institut de recherche sur la couleur, les utilisateurs jugent les produits en ligne dans les 90 premières secondes suivant leur première vue du produit. Entre 62% et 90% de ce jugement sera basé sur la palette de couleurs. Leurs résultats ont montré que la couleur peut refléter la personnalité de la marque :

  • On dit que le rouge reflète le pouvoir, la passion et l’énergie. Il peut être utilisé pour alerter l’utilisateur ou attirer l’attention de l’utilisateur dans un design ou une marque. Les couleurs rouges se trouvent sur les sites web de CNN, MacDonald’s, KFC, YouTube et Adobe.
  • Orange peut signifier amitié, unification et jeunesse. Un exemple d’utilisation d’orange est Fanta, que vous pourriez vous attendre à être de concert avec leur coeur de branding (Orange Fanta était autrefois le seul Fanta – la marque a parcouru un long chemin ces dernières années et a considérablement élargi ses offres).
  • On dit que le jaune reflète le bonheur et l’enthousiasme. Ce n’est pas surprenant; c’est la couleur primaire que nous associons au soleil et à la luminosité provenant d’une ampoule. DHL, le transporteur international, est un exemple d’utilisation du jaune dans un logo.
  • On dit que le vert reflète la croissance et l’environnement. Le site Inhabitate pour le développement durable utilise le vert, en résonance avec les connotations environnementales de la couleur.
  • On dit que le bleu reflète le calme, la sécurité et la fiabilité. C’est une couleur sage à utiliser ; les clients ont tendance à s’y sentir plus à l’aise. De nombreux secteurs d’activité utilisent largement le bleu, et vous pouvez le trouver sur les sites web et le branding d’AOL, Facebook, HP, PayPal, EA Games, DELL et bien d’autres.
Author/Copyright holder: Webpage FX. Copyright terms and licence: Fair Use

Couleur et expérience utilisateur

La couleur joue certainement son rôle dans la fourniture d’une meilleure expérience utilisateur sur les sites Web. En particulier, le bon choix de couleur garantira l’utilisabilité et la lisibilité des informations affichées à l’écran.

Le bon contraste entre le texte et l’arrière-plan est une partie essentielle de l’expérience utilisateur ; si vos clients ne peuvent pas lire facilement votre contenu, ils iront ailleurs. Pensez un instant au texte rouge sur fond bleu. Cette combinaison de couleurs est difficile à lire ; nos yeux ne peuvent pas se concentrer sur ces nuances en même temps. Il en va de même pour le texte bleu sur fond rouge. Les couleurs vibrent, nous fatiguent les yeux.

Nous avons un autre outil. Vous pouvez également « déprioriser » le texte en réduisant le niveau de contraste par rapport à l’arrière-plan, ce qui aide le lecteur à ignorer le texte non essentiel lors du survol ou de la lecture rapide.

Le dynamisme d’une couleur peut aider à instiller une expérience émotionnelle. Les couleurs vives donnent de l’énergie (c’est pourquoi tant d’appels à l’action sont en rouge vif ou orange) et un sentiment d’immédiateté. Les sites web d’actualités utilisent souvent du texte rouge pour attirer l’attention sur des informations de dernière minute ou importantes. Des couleurs plus douces et moins vives peuvent aider un utilisateur à être plus détendu à l’approche de la navigation.

Author/Copyright holder: Matt Siltala. Copyright terms and licence: All rights reserved

Comment les couleurs se complètent-elles ?

Pour offrir une palette de couleurs harmonieuse, il est important de se concentrer sur les détails des couleurs choisies. Il y a plusieurs choses à considérer pendant ce processus :

Teintes, nuances et tons

Vous pouvez générer de nombreuses variations d’une seule « teinte » sur la roue chromatique. Faites une teinte en ajoutant du blanc à la teinte, une nuance en ajoutant du noir et une tonalité en ajoutant du gris.

La palette le plus simple pour atteindre l’équilibre à travers des teintes, des nuances et des tons est la palette monochromatique (une couleur).

Contraste

Le contraste est simplement une mesure de la variation entre deux couleurs. Les couleurs des côtés opposés du cercle chromatique offrent le plus grand niveau de contraste, tout comme le noir et le blanc. Le contraste peut être utilisé pour atteindre l’équilibre ou pour attirer l’attention d’un utilisateur sur une certaine caractéristique ou zone de texte.

Il est important de garder un œil attentif sur l’utilisation du contraste ; faites-en trop et vous êtes plus susceptible de confondre les utilisateurs que de les aider.

Vibrance

Nous pouvons utiliser l’éclat (ou la luminosité) d’une couleur pour ajouter un contenu émotionnel supplémentaire à une couleur avec des nuances plus vives, reflétant généralement une énergie accrue (et donc des émotions positives, comme le bonheur) et des nuances plus sombres, offrant une énergie réduite et donc des espaces plus calmes et plus silencieux.

Couleurs additives vs. soustractives

Nous choisissons des palettes de couleurs modernes basées sur les systèmes utilisés pour des designs à afficher ou à imprimer. Les deux systèmes les plus courants sont CMJN (cyan, magenta, jaune et clé – noir) et RVB (rouge, vert et bleu).

CMJN est un système de couleur soustractif en ce que, en l’absence de l’une des quatre couleurs, l’extrant est blanc. Les couleurs sont calculées (y compris le noir) en pourcentage de chacune des quatre couleurs. CMJN est généralement utilisé pour l’impression.

RVB, en revanche, est un système additif. Cela commence par le noir et des couleurs sont ajoutées pour obtenir des teintes allant jusqu’au blanc inclus. Les valeurs de chaque couleur sont attribuées de 1 à 256 et offrent plus de 16 millions de combinaisons pour la palette. En effet, RVB est généralement utilisé sur les écrans numériques et le système sous-jacent est basé sur des paires binaires.

Il convient de noter que, du point de vue de l’œil humain, il y a peu de différence entre les deux palettes. Nos yeux peuvent peut-être distinguer les 10 millions de couleurs créées par l’échelle CMJN, mais les 16 millions de l’échelle RVB diffèrent souvent trop subtilement pour que l’œil puisse faire la différence. Aucune des deux palettes n’est « meilleure » que l’autre d’un point de vue visuel.

La différence est importante du point de vue du design car les deux systèmes sont utilisés pour produire des sorties différentes – impression et écran. La conversion entre les deux systèmes peut être imprécise et donner des résultats variables lorsqu’elle est visualisée.

Applications de palettes de couleurs en ligne

La bonne nouvelle est que si vous ne parvenez pas à choisir une palette de couleurs pour vos utilisateurs, il existe de nombreux outils en ligne pour vous aider dans votre travail. Vous pouvez télécharger (et dans certains cas exporter les paramètres pour d’autres programmes) des palettes de couleurs à partir des sites répertoriés ci-dessous :

N’oubliez pas de demander des avis sur vos palettes de couleurs à vos utilisateurs avant de les utiliser.

Ce qu’il faut retenir

La couleur est un outil puissant pour vous. Le choix d’une palette de couleurs pour un site web est particulièrement important pour le branding, comme l’ont montré des recherches. Prenez une entreprise comme DHL, qui utilise le jaune (censé refléter le bonheur et l’enthousiasme). Maintenant, considérez l’activité de DHL – transporter des marchandises et des documents que nous apprécions. Cela aide à instiller le bonheur chez le client.

En tant que designer, vous pouvez optimiser l’expérience utilisateur en choisissant les bonnes couleurs. Cela aidera à garantir :

  • Utilisabilité et lisibilité pour l’utilisateur. Nous pouvons choisir la meilleure combinaison de couleurs pour nous assurer que les clients continuent à lire ce que nous avons écrit.
  • Une expérience émotionnelle chez l’utilisateur. Cela implique l’éclat de la couleur choisie. Les couleurs vives donnent de l’énergie et un sentiment d’immédiateté ou d’urgence. Nous pouvons les utiliser pour attirer l’attention sur nos produits, services ou messages importants. Des couleurs plus douces et moins vives peuvent aider un utilisateur à se sentir plus à l’aise – particulièrement utile pour des secteurs tels que la banque.

Utiliser les couleurs à votre avantage, c’est savoir ce qu’elles contiennent. En regardant la roue chromatique (à partir de laquelle nous pouvons créer n’importe quelle couleur), nous avons :

  • Teintes – Nous ajoutons du blanc à une teinte (la partie d’une couleur qui la rend discernable comme rouge, vert, etc.) pour créer une teinte.
  • Nuances – Nous ajoutons du noir à une teinte pour créer une nuance.
  • Tons – Nous ajoutons du gris à une teinte pour créer un ton.

Pour obtenir un équilibre entre les teintes, les nuances et les tons, il est plus facile d’utiliser la palette monochromatique (couleur unique).

Vous devriez également considérer les éléments suivants pour vos palettes de couleurs :

  • Contraste – Nous pouvons attirer l’œil d’un utilisateur sur une certaine caractéristique ou atteindre un équilibre dans notre design en utilisant la mesure de la variation entre deux couleurs ou le noir et blanc. Soyez prudent avec le contraste : en faire trop risque de dérouter les lecteurs. Concentrez-vous sur ce qui est important.
  • Vibrance – Vitale pour provoquer une réponse émotionnelle de l’utilisateur. Les sentiments sont importants, alors exploitez-les avec votre choix de couleurs. Utilisez des nuances plus claires pour refléter plus d’énergie et des émotions positives comme le bonheur ; utilisez des nuances plus foncées pour calmer votre utilisateur.

Choisissez votre palette de couleurs selon que votre design est destiné à l’affichage à l’écran ou à l’impression. CMYK (Cyan, Magenta, Yellow et Key – Black) est le système de couleur soustractif utilisé pour l’impression, capable de 10 millions de combinaisons de couleurs. RVB (rouge, vert et bleu) est le système de couleur additif utilisé pour l’affichage à l’écran, permettant plus de 16 millions de combinaisons de couleurs.

De nombreux outils en ligne peuvent vous aider à trouver la bonne palette de couleurs. Surtout, vérifiez auprès de vos utilisateurs que les palette de couleurs que vous aimez fonctionnent pour eux. Ces avis vous permettront d’économiser du temps et de l’argent avant d’aller de l’avant.

Où en savoir plus