Composant pédagogique IHM : Les difficultés de la perception visuelle
CoursOutils transverses

1.2. Problème d'ambiguïté

Compuserve's WinCim 2.0 {cf. Isys Information Architects}
cstool
cstool

L’utilisation inappropriée de la couleur peut vraiment nuire à la qualité esthétique d’une application.

La barre d'outils utilisée dans l'application Compuserve's WinCim 2.0 nous rappelle un kit de peinture pour enfants. Non seulement les images ne présentent pas une apparence professionnelle, elles sont distrayantes.

Barre d'outils Microsoft Word {cf. Isys Information Architects}
Microsoft
Microsoft

La barre d'outils utilisée dans Microsoft Word, en revanche, fait appel à un ensemble beaucoup plus limité de couleurs, et les couleurs sont elles-mêmes subtiles. Malgré ces différences, la barre d'outils de Word fournit beaucoup plus d'informations en moins d'espace, car elle repose essentiellement sur la forme de faire la distinction entre les fonctions. En plus, l'utilisation judicieuse de la couleur est moins susceptible de donner lieu à une interprétation inattendue basée sur les associations de couleur culturelles et personnelles de l'utilisateur.

Easy CD Creator {cf. Isys Information Architects}
easycd1
easycd1

Joost Vunderink nous montre un couple d'images illustrant un problème de conception fondamental avec Easy CD Creator, un programme utilisé pour graver des CD-ROM. À la fin de la création d'un CD, il ya deux résultats possibles: le processus a été couronné de succès, ou « une erreur est survenue » (un résultat pas si rare lors de l'écriture des CD-ROM). Le message d'erreur est affiché au-dessus.

easycd2
easycd2

Alors, quel est le problème? Les messages sont beaucoup trop semblables, et les deux utilisent une icône rouge foncée pour représenter le succès ou l'échec de la gravure. Comme l'indique Joost : « Chaque fois que je finis un disque je vois quelque chose de rouge et je panique ... Mais en fait, tout va bien. »

Application "Zoc" {cf. Isys Information Architects}
Zoctool
Zoctool

La couleur peut également nuire à l’information que vous essayez de transmettre. Cette image contient quelques-uns des nombreux boutons de la barre d’outils utilisée dans Zoc, une application de communication.

Dans cet exemple, les quatre premiers boutons de la barre d'outils représentent différentes façons d'envoyer un fichier. Ce sont, par ordre d'apparition :

- Send (Envoyer)

- Send without carriage returns

(Envoyer sans retour chariot)

- Send with quotes (Envoyer avec citatons)

- Send with CIS quotes

Les différences entre les icônes sont presque indétectables car chaque image est submergée par l'objet bleu en premier plan (nous sommes presque sûr que c'est un téléphone). Sans infos-bulles, l'utilisateur ne serait probablement pas en mesure de distinguer la fonction de chaque icône. Les développeurs auraient bien pu laisser totalement tomber les images.

2. Pratiquer1.1. Problème de contraste
AccueilRéalisé avec SCENARI