Psychologie cognitive, ergonomie et conception des logiciels interactifs et du Web - 2eme partie Imprimer
Vendredi, 13 Juillet 2001 01:00
Dans l'article précédent, nous avons abordé la mémoire et quelques lois de la perception visuelle. Ce nouvel article a pour objet l'usage de la couleur dans la conception des interfaces.
Introduction           Haut de page
La couleur, et plus particulièrement la perception des couleurs est un domaine de recherche très important en psychologie. C'est aussi un domaine complexe. Il ne s'agit pas ici de décrire les aspects physiques de la couleur, ou encore les aspects physico-chimiques de la perception des couleurs. L'objectif, fort modeste, est de présenter quelques recommandations sur l'usage de la couleur pour la conception et l'évaluation ergonomique des interfaces des logiciels interactifs et des sites Web.

Outre les aspects esthétiques, à quoi peut bien servir la couleur sur une page Web et dans des logiciels interactifs ?

Du point du vue ergonomique, trois aspects doivent être pris en compte lors des choix de conception. Il s'agit :
  • des caractéristiques des utilisateurs,
  • des caractéristiques des tâches et des activités cognitives devant être menées à l'aide des logiciels interactifs ou des sites Web
  • des règles de conception issues d'études empiriques.

L'oeil et la couleur...           Haut de page
Chez l'être humain, l'oeil contient approximativement 6 millions de cônes et environ 120 millions de bâtonnets. Il s'agit d'une densité extraordinairement riche de cellules réceptrices, si l'on considère par exemple que l'image d'un téléviseur ne contient qu'environ 250 000 éléments indépendants (Lindsay & Norman, 1980). Les cônes, responsables de la vision des couleurs prédominent au centre de la rétine, dans une région appelée fovéa. On y trouve environ 150 000 cônes par millimètre carré. Cette région est située de façon optimale pour recevoir les parties centrales de l'image au point de fixation de l'oeil. C'est aussi la région de l'oeil ou l'acuité visuelle est maximale. Le système des cônes est un système à haute résolution mais sa sensibilité est limitée. De fait, on trouve trois types de cônes selon leur sensibilité spectrale. Il s'agit des cônes L (long wavelenght sensitivity : le rouge) , M (medium wavelenght : le vert) et S (short wavelenght : le violet). Certains déficits de la vision des couleurs s'expliquent par l'atteinte d'un ou de plusieurs types de cônes.

à la périphérie de cette fovéa, on trouve les bâtonnets, très sensibles à la lumière, mais ayant un pouvoir de résolution limité. Ils sont insensibles à la couleur.

psychoco2_1.jpg

Pour représenter n'importe quelle couleur, trois attributs psychologiques sont requis : la teinte, la saturation et la brillance.

  • La teinte correspond à la signification courante de la couleur (rouge, bleu, etc.). C'est ce qui varie à mesure que changent les longueurs d'onde.
  • La saturation réfère à la quantité relative de lumière monochromatique pure devant être mélangée avec la lumière blanche pour produire la couleur perçue.
  • La brillance réfère à la quantité de lumière illuminant l'objet.
Approximativement 8% de la population mâle présente des défauts de la vision des couleurs, les deux plus fréquents étant l'incapacité à discriminer le rouge du vert et le bleu du jaune (Nous aborderons, dans un prochain article les aspects d'accessibilité des informations aux personnes présentant des déficits visuels).

Les avantages de la couleur pour certaines tâches et activités cognitives
Haut de page
De manière générale, la couleur peut permettre de mettre une information en évidence, de mieux localiser des informations, de mieux les classifier et de réduire la densité d'information d'un affichage. La couleur peut donc améliorer la perception et le traitement de l'information.
La couleur est plus adéquate que la taille ou la forme des signes pour l'identification. Elle est également plus facile à localiser que les codes alphanumériques. Elle permet aussi de localiser et d'identifier plus rapidement une cible que le clignotement ou l'inverse vidéo.

Recommandations           Haut de page
Combien de codes couleur peut-on utiliser ? Et bien cela dépend. (Post, 1997). Cela dépend d'abord des couleurs utilisées et des tâches à réaliser. Si les couleurs choisies sont difficiles à discriminer, les performances utilisateur seront faibles et ce, même si seulement deux codes couleurs sont utilisés. Dans les tâches où les couleurs doivent être reconnues, le nombre doit être réduit par comparaison aux tâches de discrimination.

Ainsi par exemple, dans le cas du traitement de texte, le nombre de couleurs présentes sur une page ne devrait pas être supérieur à 3 (Van Nes, 1986). Toutefois, ce nombre peut être plus élevé pour des applications industrielles ou surtout cartographiques. Mais si l'opérateur doit se rappeler la signification d'une couleur ou effectuer des recherches visuelles rapides basées sur la distinction des couleurs, il serait préférable de ne pas utiliser plus de 6 couleurs différentes (AFNOR, 1997). S'agissant du Web, le lecteur gardera à l'esprit que des plates-formes différentes, des systèmes d'exploitation différents peuvent altérer le rendu des couleurs. Ainsi, on préfèrera des couleurs " Websafe ", c'est-à-dire des couleurs dont le rendu est " identique " d'une plate-forme à une autre (voir plus bas la liste des liens utiles).

Voici quelques recommandations tirées, traduites et adaptées de Mayhew (1992).
  • La conception d'une interface devrait d'abord se faire en monochrome.
    La couleur ne devrait être utilisée que lorsque nécessaire, c'est-à-dire lorsqu'elle a une valeur ajoutée du point de vue ergonomique. C'est du moins ce qui est recommandé dans le cadre de la conception de logiciels interactifs " traditionnels ". Bien que cette recommandation puisse sembler restrictive, l'idée essentielle est d'utiliser les couleurs pour faciliter le traitement de l'information et les activités de l'utilisateur.


  • Utilisez la couleur pour attirer l'attention, organiser et établir des relations

    Figure 1. Page d'information sur les programmes de recherche européens.
    Figure 1. Page d'information sur les programmes de recherche européens.


    Dans cet exemple, le bleu permet de distinguer la zone de menu de la zone de texte. Aussi, la position de l'internaute sur le site est clairement indiquée. L'option de menu " Documents " est clairement liée au contenu de la page. On trouve donc ici organisation et mise en relation.


  • Utilisez la couleur pour faciliter la recherche d'information

    Figure 2. Page affichant les résultats d'une recherche bibliographique sur le site http://www.hcibib.org
    Figure 2. Page affichant les résultats d'une recherche bibliographique sur le site http://www.hcibib.org/

    Sur cette page Web affichant les résultats d'une recherche bibliographique, les termes utilisés pour la recherche apparaissent en rouge et sont soulignés. Aussi, les auteurs sont affichés en vert. Cette indication des termes de recherche permet facilement de déterminer la pertinence des résultats, en plaçant le lecteur dans le contexte de la phrase où apparaissent les termes.
    Le codage par la couleur est plus efficace dans des tâches de recherche d'information et d'identification de symboles que la forme, la taille et la brillance. Cet avantage de la couleur serait fonction de la densité de l'information affichée.


  • évitez d'utiliser la couleur de manière arbitraire

    Figure 3. Exemple d'un mauvais usage de la couleur (http://www.webpagesthatsuck.com/badtext.htm)
    Figure 3. Exemple d'un mauvais usage de la couleur (http://www.webpagesthatsuck.com/badtext.htm)

    L'usage arbitraire de la couleur peut dégrader les performances.
     
    Nom                 Numéro     Date limite     Reçu    
    Smith, J. 183-678 25/06/01 Oui
    Mayhew, D. 253-860 15/07/01 Non
    Jones, R. 143-898 25/06/01 Non
    Booker, P. 432-751 15/07/01 Non
    Murphy, L. 333-761 25/06/01 Non
    Figure 4. Affichage monochrome des données

    Imaginez que la figure précédente concerne le réabonnement à une revue scientifique avec la possibilité d'une réduction si cet abonnement est effectué avant une date donnée, date déterminée en fonction de la date de l'abonnement précédent. Supposons que votre tâche consiste à identifier les personnes qui ne se sont pas réabonnées dans les temps pour bénéficier des réductions. Pour ce faire, vous devrez donc chercher les " Date limite " qui sont passées et vérifier que les paiements n'ont pas été effectués. Cette tâche nécessite donc de lire les informations sur deux colonnes.

    Si l'on regarde maintenant le tableau suivant, cette même tâche est simplifiée par l'utilisation de la couleur. Les dates limites " dépassées " sont affichées en rouge. Les dates limites non encore dépassées sont affichées en blanc. Les dates limites dépassées et les réabonnements effectués sont affichés en vert. Pour répondre à la question précédente il n'y a qu'à rechercher la couleur rouge.

    Supposons maintenant que votre tâche consiste à identifier les personnes qui ne se sont pas réabonnées. Cette tâche sera plus facilement réalisée en consultant le premier tableau où l'utilisateur n'a qu'à rechercher les mentions " Non " dans la colonne " Reçu ". En effet, le tableau suivant, coloré, rendra cette tâche plus difficile compte tenu que les mentions " Non " sont de différentes couleurs .
     
    Nom                 Numéro     Date limite     Reçu    
    Smith, J. 183-678 25/06/01 Oui
    Mayhew, D. 253-860 15/07/01 Non
    Jones, R. 143-898 25/06/01 Non
    Booker, P. 432-751 15/07/01 Non
    Murphy, L. 333-761 25/06/01 Non
    Figure 5. Affichage de données dans des couleurs
    facilitant les tâches prévues.
  • Permettez aux utilisateurs de modifier le choix des couleurs
    Parce que les tâches utilisateurs peuvent changer, il n'est pas toujours possible de déterminer à l'avance les couleurs des affichages. Dans ce cas, l'utilisateur devrait pouvoir spécifier lui-même les couleurs d'affichage. Par ailleurs, cette possibilité permet aussi aux personnes ayant des déficiences visuelles de rendre les affichages mieux adaptés.
  • N'utilisez pas la couleur comme seule forme de codage de l'information
    Dans un des exemples précédents (figure 2) les termes d'une recherche sont affichés à la fois en couleur et indiqués par un trait de soulignement. Ainsi, en l'absence de couleur l'indication des termes de recherche est toujours présente.
    Bien que les parcs informatiques comportent de plus en plus de moniteurs couleurs, il faut rappeler que 8% des hommes et 0,4% des femmes présentent des déficiences de la perception des couleurs.
  • Soyez cohérent avec les habitudes de travail ou les spécificités culturelles dans l'utilisation des codes couleur
    Certaines couleurs ont des significations particulières selon les cultures, d'autres ont des significations universelles. Le choix des couleurs devrait donc respecter ces usages, ces significations.
    Dans les cultures occidentales, les associations suivantes se retrouvent dans la signalisation routière et dans bon nombre de produits.

    Vert   Permission, En marche, sûr
    Rouge   Stop, chaud, danger, en marche, urgent...
    Jaune   Attention, alerte, tiède...
    Bleu   Froid, éteint (off)...
    Figure 6. Signification culturelle des couleurs.
  • Limitez le nombre de couleurs à 6, séparées au maximum sur le spectre visible. Quatre couleurs ou moins sont préférables
    Lorsque la couleur est utilisée pour coder de l'information, le nombre de couleurs doit être limité. La plupart des utilisateurs ne pourront se rappeler la signification de plus de 4 ou 5 couleurs.
  • Fournissez une légende si le nombre de couleurs est important et que la signification des codes n'est pas évidente
    Si plus de 6 couleurs doivent être utilisées pour coder de l'information, et à plus forte raison si les associations sont arbitraires, une légende doit être fournie. Cette dernière facilitera l'apprentissage et le rappel.
  • évitez d'utiliser des bleus saturés pour le texte ou pour de petits symboles
    L'acuité visuelle est réduite pour des couleurs de faible longueur d'onde. Cette insensibilité au bleu augmente aussi avec l'âge.
    Dans des conditions normales, l'oeil est plus sensible aux couleurs se situant au centre du spectre des couleurs (vert et jaune). L'identification des symboles est plus facile lorsque ceux-ci sont affichés en blanc, ou dans des couleurs proches les unes des autres et au centre du spectre des couleurs (ex., cyan, vert, jaune). Par conséquent, il serait sage d'utiliser ces couleurs pour le texte et surtout d'éviter les couleurs se trouvant aux extrémités du spectre et plus spécialement lorsque les textes doivent être lus à l'écran.
  • Choisissez avec soin les combinaisons de couleurs pour les symboles et les fonds
    Se basant sur la norme ISO, (Mayhew, 1992) indique qu'en général, les images colorées devraient être présentées sur des fonds achromatiques (noir, gris, ou blanc) et les images achromatiques sur des fonds colorés. Toutefois, si pour diverses raisons des images colorées doivent être présentées sur des fonds colorés, les images ou symboles et les fonds doivent être de couleurs contrastées au niveau de la teinte et de la brillance de façon à faciliter la lecture.
    Par ailleurs, en ce qui concerne les couleurs de texte et de fonds, il semble que les fonds sombres soient préférables pour les textes en couleurs, et les fonds clairs préférables pour les symboles graphiques de plus grande taille.
    Le tableau suivant présente les combinaisons recommandées pour les couleurs de texte et de fonds.

      Texte    Couleur de fond
        Noir   Bleu   Vert   Cyan   Rouge   Magenta   Brun   Blanc 
     Noir            Noir      Noir      Noir 
     Bleu                        Bleu 
     Vert   Vert   Vert                   
     Cyan   Cyan                      
     Blanc   Blanc                      
     Vert gras   Vert gras                      
     Cyan gras   Cyan gras   Cyan gras         Cyan gras   Cyan gras       
     Magenta gras   Cyan gras      Cyan gras                
     Jaune   Jaune   Jaune      Jaune      Jaune       
     Blanc gras   Blanc gras      Blanc gras   Blanc gras             
    Tableau 1 : Combinaisons de couleurs recommandées pour l'affichage de texte en fonction de la couleur du fond (LaLomia & Happ, 1987).
  • évitez d'utiliser des couleurs saturées, complémentaires (jaune et bleu ou rouge et vert) ou éloignées dans le spectre des couleurs (jaune et pourpre) qui peuvent causer des images consécutives, des ombres et des effets de profondeur
  • Utilisez des couleurs contrastées pour exprimer des différences et des couleurs peu contrastées pour exprimer des similitudes Contrairement à ce qui a été dit plus haut, lorsque la tâche implique de discriminer des catégories d'information, les couleurs qui sont contrastées, c'est-à-dire qui sont éloignées les unes des autres sur le spectre des couleurs ou qui sont contrastées du point de vue brillance sont appropriées. Ainsi le rouge et le vert pourront être utilisés sur un même affichage (comme sur la Figure 5).
    Cependant, lorsqu'il s'agit plutôt d'attirer l'attention sur un type d'information, ou lorsque l'on veut faire apparaître des relations de similitude, alors des couleurs peu contrastées peuvent être utilisées.
    Les Tableaux 2 et 3 présentent des combinaisons de couleurs recommandées par ISO.

    Contraste élevé
        Symbole          Fond            Exemple      
     Blanc   Noir   exemple 
     Vert   Noir   exemple 
     Cyan   Noir   exemple 
     Jaune   Noir   exemple 
     Bleu   Blanc   exemple 
     Noir   Blanc   exemple 
     Jaune   Bleu   exemple 
     Rouge   Cyan   exemple 
     Magenta   Vert   exemple 
    Tableau 2. Tableau de couleurs contrastées.


    Contraste peu élevé
        Symbole          Fond            Exemple      
     Bleu   Noir   exemple 
     Bleu   Jaune   exemple 
     Rouge   Noir   exemple 
     Rouge   Jaune   exemple 
     Cyan   Blanc   exemple 
     Cyan   Vert   exemple 
     Magenta   Rouge   exemple 
    Tableau 3. Tableau de couleurs peu contrastées.

  • Les couleurs claires, brillantes et saturées devraient être utilisées pour mettre des données en évidence.
  • Les couleurs chaudes apparaissent plus grandes que les couleurs froides
    Les objets de couleurs chaudes comme le rouge, le jaune et l'orange sont perçus comme étant plus gros que les mêmes objets de couleurs froides comme le vert, le bleu et le violet. On doit tenir compte de ces données lorsque la perception de la taille est importante.
  • Respectez les stéréotypes des utilisateurs
    Pour certaines tâches, l'usage de la couleur doit prendre en compte les stéréotypes de l'utilisateur. Ainsi, la couleur rouge est souvent associée au danger ou à l'alerte, la couleur jaune à la prudence et la couleur verte aux situations de sécurité.

     Concept 
      Chinois Américain
       Couleur   %   Couleur   % 
     Sécurité  Vert  62,2  Vert  61,4 
     Froid  Blanc  71,5  Bleu  96,1 
     Prudence  Jaune  44,8  Jaune  81,1 
     Partir (GO)  Vert  44,7  Vert  99,2 
     En marche  Vert  22,3  Rouge  50,4 
     Chaud  Rouge  31,1  Rouge  94,5 
     Danger  Rouge  64,7  Rouge  89,8 
     En arrêt  Noir  53,5  Bleu  31,5 
     Stop  Rouge  48,5  Rouge  100 
    Tableau 4. Signification des couleurs selon l'origine
    (Courtney, 1986) (Bergum & Bergum, 1981).

  • évitez d'utiliser le bleu ou le rouge pour du texte, des caractères alphanumériques et des symboles à des fins de lecture et présentés sur fond d'écran sombre (AFNOR, 1997)
    Il existe un manque de sensibilité des récepteurs rétiniens à la couleur bleu, au niveau de la fovéa. De plus, la transparence du cristallin est particulièrement réduite pour cette couleur chez les personnes âgées. C'est pourquoi les détails fins ne devraient pas être représentés par des bleus et des violets foncés.
    Quand le bleu et le rouge sont présentés simultanément, ils créent un effet de relief surtout s'ils sont saturés. Un objet rouge est alors perçu comme étant plus proche que le même objet en bleu.


Références           Haut de page
AFNOR. (1997). Norme NF EN ISO 9241-8. Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation (TEV). Partie 8 : exigences relatives aux couleurs affichées. Paris: AFNOR.

Bergum, B. O., & Bergum, J. E. (1981). Population stereotypes: an attempt to measure and define. Proceedings of the Human Factors Society 25th Annual Meeting (pp. 662-665).

Courtney, A. J. (1986). Chinese population stereotypes: color associations. Human Factors, 28, 97-100.

LaLomia, M. J., & Happ, A. J. (1987). The effective use of color for text on the IBM 5153 color display. Proceedings of the Human Factors Society 31st Annual Meeting (pp. 1091-1095).

Lindsay, P. H., & Norman, D. A. (1980). Traitement de l'information et comportement humain. Une introduction à la psychologie (Deuxième ed.). Montréal, QC, Canada: études Vivantes.

Mayhew, D. J. (1992). Principles and guidelines in software user interface design. Englewood Cliffs: Prentice Hall.

Post, D. L. (1997). Color and human-computer interaction. In M. Helander & T. K. Landauer & P. V. Prabhu (Eds.), Handbook of human-computer interaction (Second ed.). Amsterdam, The Netherlands: Elsevier.

Van Nes, F. L. (1986). Space, colour and typography on visual display terminals. Behaviour & Information Technology, 5, 99-118.

Quelques liens pour en savoir davantage           Haut de page

Haut de page