La palette de couleurs IHM apaisée : pourquoi le gris l'emporte

Entrez dans une salle de contrôle construite à la fin des années 1990 et l'écran ressemble souvent à un sapin de Noël : pompes rouges, moteurs verts, réservoirs bleus, tuyaux jaunes, boutons en dégradé, ombres portées, cuves 3D photoréalistes. Quelqu'un en phase de conception a demandé « de quelle couleur doit être la pompe ? » et la réponse a été une préférence personnelle plutôt qu'une règle de système.

Le résultat est un écran saturé de couleur où la couleur ne signifie plus rien. Quand tout est coloré, l'œil de l'opérateur ne peut pas distinguer quel objet rouge est en alarme et lequel est juste décoré en rouge. C'est le phénomène derrière la fatigue d'alarme chronique, les événements manqués et la longue discussion ISA-101 qui s'est terminée par : commencez par le gris, et méritez chaque couleur.

1. La règle de couleur à deux axes

La philosophie de couleur d'ISA-101 se condense en deux règles :

1. La couleur code l'état, pas l'identité. Une pompe est une pompe grâce à sa forme, pas parce qu'elle est bleue. Deux pompes sur la même ligne doivent être dessinées de manière identique — seul leur état diffère.
2. La couleur saturée est réservée aux conditions anormales et aux changements d'état par l'opérateur. Le rouge, l'orange, le jaune et le bleu pleinement saturés sont un budget dépensé. Si vous les dépensez en décoration, il ne vous reste rien pour les alarmes.

2. La palette canonique

Surfaces (la majeure partie de l'écran)

Priorités d'alarme

État de l'équipement

Voilà tout. Douze couleurs au total, dont la moitié en gris. Chaque écran ISA-101 moderne vit dans cette palette. Quand vous voyez un écran qui l'enfreint, vous pouvez généralement remonter la violation jusqu'aux toutes premières décisions du projet — et vous pouvez généralement prédire que les opérateurs ont appris à ignorer au moins une des couleurs « importantes » parce qu'elle a été utilisée de façon décorative ailleurs.

3. Pourquoi le gris fonctionne

Le gris fonctionne parce qu'il ne rivalise pas avec les couleurs d'alarme. La rétine a un budget d'attention limité — ce qui est remarqué est ce qui est différent de son environnement. Un indicateur P1 rouge sur une mer de gris ressort instantanément. Le même indicateur sur un écran multicolore n'est qu'un élément coloré de plus, statistiquement indiscernable d'une étiquette rouge décorative.

Les IHM apaisées ne sont pas belles. Elles ressemblent à des tableaux d'instruments — et c'est bien là le but.

Cela s'applique aussi aux graphiques : abandonnez les biseaux 3D, les dégradés, les ombres portées, les reflets brillants. Le plat 2D l'emporte dans chaque étude d'utilisabilité parce que la reconnaissance de formes de l'opérateur n'a pas à fournir de travail supplémentaire pour extraire l'information abstraite d'une décoration photoréaliste.

4. Daltonisme et contraste

Environ 8 % des hommes et 0,5 % des femmes présentent une forme de déficience de la vision des couleurs rouge-vert. Concevoir des alarmes qui reposent uniquement sur le rouge vs le vert pour communiquer la priorité exclut une part significative de votre population d'opérateurs.

La solution n'est pas de changer les couleurs — les ingénieurs s'attendent à ce que le rouge signifie critique — mais d'ajouter un codage redondant :

• Forme : les alarmes P1 reçoivent un badge triangulaire, P2 un hexagone, P3 un carré, P4 un cercle. Même sans les couleurs, la priorité est lisible.
• Position / motif : les badges d'alarme apparaissent dans un coin cohérent du symbole, la priorité étant codée par le texte du badge (P1, P2, …) autant que par la couleur.
• Contraste : WCAG AA recommande 4,5:1 pour le texte courant sur le fond. Associez chaque couleur d'alarme à du texte blanc et à des rapports de contraste testés.

5. Anti-modèles

Couleur décorative

« Faisons la chaudière orange parce qu'elle est chaude. » Non. La chaudière est grise ; son affichage de température utilise une couleur d'état quand elle sort de la plage. Colorier l'équipement lui-même entraîne les opérateurs à ignorer le signal de couleur qui compte réellement.

Boutons en dégradé et vitrés

Les dégradés gaspillent l'information de couleur sur de nombreuses nuances, dont aucune ne signifie quoi que ce soit. Ils vieillissent aussi mal — ce qui semblait « moderne » en 2008 paraît daté en 2024. Les aplats ne se démodent pas.

Clignotement permanent

L'animation est une ressource précieuse. Un élément clignotant doit signifier « nouvelle alarme, requiert un acquittement ». Une fois acquittée, l'alarme passe en plein (toujours rouge) mais le clignotement s'arrête. Un clignotement permanent se dégrade en bruit de fond en quelques heures.

Couleur pour les données normales

« Affichez le débit en bleu, la température en rouge. » Cela entre en collision avec la signification des alarmes. Utilisez un gris neutre pour les valeurs numériques normales et passez à une couleur d'état seulement quand la valeur sort de la plage de fonctionnement normale.

Cuves 3D et photoréalisme

Un réservoir rendu en perspective avec des reflets chromés fait forte impression dans une démo commerciale et ralentit le balayage de l'opérateur de 20 à 30 % dans les études. Utilisez le plat 2D — le cerveau reconnaît plus vite les formes simples.

6. Le mettre en pratique : un exemple « avant/après »

Imaginez un écran avec trois pompes. La version « avant » utilise les formes par défaut de la bibliothèque WinCC ME :

• Pompes dessinées en bleu saturé avec des symboles de courbe de pompe blancs.
• Tags flottant en texte rouge parce que le rouge « ressort ».
• Fond avec un léger dégradé du blanc au bleu clair.
• Une pompe en alarme — son contour clignote maintenant en rouge, par-dessus le corps bleu.

Ce que voit l'opérateur : un écran coloré où un élément clignote. Lequel ? L'œil doit chasser à travers le bleu / rouge / blanc / dégradé avant de trouver la pompe en alarme.

La version « après » utilisant la palette apaisée :

• Pompes dessinées avec un remplissage gris clair et un contour gris plus foncé (en marche) ou vert plein pour l'état.
• Tags en gris foncé monospace (P-101, P-102, P-103).
• Fond plat #C8C8C8.
• La pompe en alarme affiche un petit badge P1 rouge dans le coin. Le corps de la pompe indique toujours « en marche » parce qu'elle l'est.

Maintenant la pompe en alarme ressort. L'œil n'a rien à chasser. C'est à cela que sert l'IHM apaisée.

7. Utiliser la palette dans le Symbol Builder

Les douze couleurs ci-dessus sont les échantillons intégrés du Symbol Builder : vous dessinez le corps de l'équipement en gris neutre et n'appliquez une couleur d'état ou d'alarme que là où la machine à états l'exige. Les symboles publiés dans la bibliothèque communautaire sont vérifiés automatiquement pour la palette et l'épaisseur de trait avant d'obtenir la marque conforme ISA-101, si bien que ce que vous trouvez sur Explore respecte déjà la règle. Vous pouvez toujours éclaircir ou assombrir le gris ou ajuster les teintes d'alarme à la charte graphique d'un client (dans la limite du raisonnable — gardez-les distinguables), et décider si les tags sont incrustés ou superposés en objets texte séparés.

8. Pour aller plus loin

• ISA-101.01-2015 — « Human Machine Interfaces for Process Automation Systems »
• Bill Hollifield et al. — The High Performance HMI Handbook
• Recommandations de contraste WCAG 2.1 (W3C)
• The ASM Consortium — « Effective Operator Display Design »