Les couleurs

La couleur est un composant important de l’interface homme-machine (IHM).

Elle met en évidence l’état courant des objets affichés (Fig 1.1) (Ex. la barre d’outils principale où les icônes utilisables sont affichées dans une teinte différente des autres, lesquelles sont désactivées). Elle permet aussi de regrouper des objets de même nature (rubriques de l’écran, texte, zone de saisie,…) éloignés par leur position.

Fig 1.1 - La couleur met évidence l’état courant des icônes de la barre d’outils principale

Perception de la couleur

La couleur est perçue par la rétine de l’oeil. Deux types de photorécepteurs y résident: les bâtonnets situés en périphérie, sensibles aux formes et les cônes placés au centre (fovéa), lesquels perçoivent les couleurs. Les cônes sont sensibles au couleurs primaires rouge, vert et bleu. Cependant, les cônes du centre de la fovéa ne détectent pas le bleu alors que ceux situés en périphérie de la fovéa sont sensibles au rouge et vert. De cette constatation, deux règles sont mises en évidence.

• Un bleu périphérique améliore la vision centrale
• Il est préférable d’éviter le bleu saturé pour du texte ou des petits objets

En effet, cette couleur est mal perçue au centre de la fovéa qui est la zone active pour la perception des petits objets. Par ailleurs, l’oeil est plus ou moins sensible à certaines teintes. La luminosité ambiante joue son rôle aussi. Il est essentiel que l’utilisateur puisse la nommer sans ambiguïté. Pour cela, les expérimentations ont montrés que lorsque les couleurs sont réparties de façon homogène le long du spectre visible, elle sont plus faciles à distinguer les unes des autres.

Choisir des couleurs réparties tout au long du spectre visible (visible sur l’écran de l’ordinateur).

Par ailleurs, les couleurs saturées se reconnaissent plus facilement que les autres. Cependant, ces couleurs sont à manier avec précaution car elles peuvent poser des problèmes de lisibilité. La perception de la couleur varie d’un individu à l’autre (env. 8% des hommes et 0,5% des femmes sont touchés par le daltonisme). Il est donc préférable de ne pas s’appuyer uniquement sur cet élément (la couleur) de présentation pour la mise en évidence.

Distinguer les couleurs en teinte et clarté

La différence en clarté rend la distinction possible par les daltoniens car elle ne porte pas uniquement sur la longueur d’onde de la couleur.

Codage couleur

Le codage couleur (ou code des couleurs) consiste à associer à chaque couleur de l’interface une signification précise et uniforme pour l’ensemble de l’application. Son rôle n’est pas  seulement esthétique. Son principal intérêt est et de pouvoir ajouter de l’information à un objet sans en modifier la forme. Elle permet d’indiquer un état. Elles sert également à regrouper les informations de même nature en les affichant d’une même couleur voire dans un dégradé de cette couleur.

Le codage couleur et donc un subtil compromis entre les réglages possibles (s’il en existent) de l’application et contraintes ergonomiques suivantes:

• Le codage couleur doit être simple et le nombre de couleur pas trop grand, de manière à pouvoir les distinguer et à minimiser la charge perceptive (critère ergonomique de charge de travail).
• Minimiser le nombre de couleurs : pas plus de 7.
• Éviter les écrans surchargés qui donnent un aspect très lourd aux applications.
• L’aspect esthétique doit être également considéré.

Choix des couleurs

En résumé, lors du choix des couleurs (teinte, saturation, luminosité) il faut, dans la mesure du possible, tenir compte des points suivants:

• Utiliser de préférence le bleu pour encadrer
• Utiliser une couleur neutre et claire pour le fond d’écran (éviter les fonds trop saturé et les teintes marrons et verdâtres)
• Pour les grandes surfaces, utiliser des couleurs peu saturées (pastel)
• L’utilisateur devrait pouvoir nommer les couleurs utilisées
• Utiliser des couleurs contrastées pour exprimer une différence
• Choisir des couleurs peu contrastées pour exprimer une similarité
• Plus les objets sont petits et plus il est difficile de distinguer les couleurs
• Le rouge semble plus proche tandis que le bleu semble plus éloigne
• Une couleur chaude semble occuper plus d’espace qu’une couleur froide
• Prendre en compte la fatigue visuelle de l’utilisateur

Réglage des couleurs dans OSXFinance

La personnalisation de l’interface dans OSXFinance permet un réglage subtil de la couleur selon les recommandations définies ci-dessus (Fig 1.2).

Fig 1.2 - Réglages de la couleur de l’interface dans les préférences OSXFinance