Erreurs de conception IHM : 10 fautes courantes et comment les corriger
La plupart des écrans IHM médiocres échouent de la même façon, par dix défauts : trop de couleur, des écrans qui copient le P&ID, des graphismes 3D, un texte que personne ne peut lire depuis le pupitre, un état « sans retour » absent, des alarmes sans priorité, une décoration qui bouge, une navigation trop profonde, le même objet dessiné différemment sur chaque écran et des verrouillages que l’opérateur ne voit pas. Aucun ne demande un nouveau logiciel pour être corrigé. Chacun a une cause simple et un remède simple, détaillés ci-dessous avec le guide qui approfondit le sujet.
En bref
- Couleur : du gris pour tout ce qui est normal ; de la couleur uniquement pour l’état et la priorité d’alarme.
- Contenu : montrez ce que l’opérateur surveille et commande, pas tout le P&ID.
- État : dessinez toujours le « sans retour », et montrez le retour d’information, jamais la commande.
- Alarmes : chaque alarme a une priorité, montrée par une couleur et un second repère.
- Structure : deux clics pour atteindre l’essentiel, un seul aspect par type d’objet, et la raison du blocage d’une commande écrite à l’écran.
Les dix erreurs en un coup d'œil
Chaque ligne est expliquée plus bas. La colonne de droite donne la correction en une ligne et le guide qui traite le sujet en profondeur.
| Erreur | La correction · Approfondir |
|---|---|
| 1. Trop de couleur | Gris par défaut ; couleur pour l'état et l'alarme seulement Palette apaisée → |
| 2. Écrans qui copient le P&ID | Un seul rôle par écran ; on retire ce que personne ne manœuvre Hiérarchie des écrans → |
| 3. 3D, dégradés, photoréalisme | Formes plates en 2D avec aplats Palette apaisée → |
| 4. Texte trop petit pour la distance | 14 px au minimum, dimensionné pour la distance de vue réelle Hiérarchie des écrans → |
| 5. Pas d'état « sans retour » | Comparer commande et retour ; montrer l'écart 9 états moteur → |
| 6. Alarmes sans priorité | Priorité issue de la rationalisation ; couleur plus un second repère Gestion des alarmes → |
| 7. Animation décorative | Du mouvement seulement s'il porte une information Palette apaisée → |
| 8. Navigation trop profonde | Deux clics pour atteindre l'essentiel Hiérarchie des écrans → |
| 9. Même objet, aspects différents | Un symbole et un faceplate par type d'objet Conception de faceplates → |
| 10. Verrouillages invisibles pour l'opérateur | Lister le permissif manquant à côté de la commande Conception de faceplates → |
Couleur et graphismes (erreurs 1 à 4)
Ces quatre erreurs concernent ce que l'œil doit filtrer avant de pouvoir lire l'écran. Le dessin montre deux fois les mêmes équipements et les mêmes valeurs.
- Couleur. À gauche, chaque élément a sa propre couleur, donc aucune ne signifie rien. À droite, les équipements sont gris et la couleur apparaît deux fois : une pompe verte parce qu'elle tourne et un badge rouge P1 sur la vanne qui a l'alarme.
- Contenu. Les petits cercles d'instrument de gauche existent sur le P&ID, mais personne de l'équipe ne les manœuvre. La droite garde les équipements et les trois valeurs que surveille l'opérateur.
- Position. Tout est au même endroit dans les deux dessins. Apaisé ne veut pas dire vide : cela veut dire que l'œil trouve tout de suite la seule chose qui est différente.
1. Trop de couleur
Pourquoi cela échoue. Si une pompe est bleue parce que c'est une pompe et un réservoir jaune parce qu'il contient du produit, la couleur ne porte aucune information. Quand quelque chose tourne vraiment mal, le rouge doit rivaliser avec tout le reste de l'écran, et les opérateurs apprennent à filtrer la couleur.
Que faire. Dessinez tous les équipements, canalisations et libellés en gris. Réservez la couleur à ce qui change : en marche, sans retour, manuel, défaut et priorité d'alarme, avec une seule signification fixe par couleur dans tout le projet. Le guide de la palette apaisée donne les valeurs.
2. Écrans qui copient le P&ID
Pourquoi cela échoue. Un P&ID documente le procédé pour les ingénieurs : chaque ligne, vanne manuelle, purge, évent et instrument. Un écran d'opérateur doit répondre à « que se passe-t-il et que puis-je faire ? ». Mettez tout le plan sur un écran : rien ne ressort, le texte rapetisse, et la seule façon de retrouver un objet est de savoir où l'ingénieur l'a dessiné.
Que faire. Donnez un seul rôle à chaque écran. Montrez le flux principal, les équipements que l'opérateur démarre, arrête ou surveille, et les quelques valeurs qui comptent. Laissez les vannes manuelles, les purges et les instruments de réserve sur le P&ID, et gardez des tags identiques à ceux du plan pour qu'on puisse recouper. Le guide sur la hiérarchie des écrans décrit les niveaux, et symboles IHM explique pourquoi un symbole IHM n'est pas un symbole de P&ID.
3. 3D, dégradés et photoréalisme
Pourquoi cela échoue. Ombrages, biseaux et réservoirs en rendu ajoutent des formes que l'œil doit ignorer avant de lire celle qui compte. Ils dépensent aussi de la couleur en décoration et paraissent datés en quelques années, ce que les aplats ne font pas.
Que faire. Utilisez des contours plats, en deux dimensions, avec des aplats de couleur. Si un client demande une vue d'ensemble réaliste, gardez-la hors des écrans de travail de l'opérateur.
4. Texte trop petit pour la distance
Pourquoi cela échoue. Les écrans se dessinent à un bureau et s'utilisent à un pupitre, debout, souvent avec des gants et un mauvais éclairage. Un texte qui se lit bien à 60 cm est une tache à 2 m, et un bouton facile à viser à la souris est difficile à viser au doigt.
Que faire. Ne descendez jamais sous 14 px pour le texte courant, utilisez un texte plus grand pour ce que l'opérateur doit lire d'un coup d'œil, et vérifiez avec le pas de pixel et la distance de vue réels du pupitre, pas avec le moniteur sur lequel vous dessinez. Laissez un espace entre les boutons qui font des choses différentes. Le tableau des tailles se trouve dans le guide sur la hiérarchie des écrans.
État et alarmes (erreurs 5 à 7)
Ces trois erreurs concernent ce que dit l'écran quand quelque chose n'est pas normal, c'est-à-dire au moment où cela compte le plus.
5. Pas d'état « sans retour »
Pourquoi cela échoue. Si l'écran ne suit que la commande, un moteur à qui l'on a ordonné de démarrer et qui n'a jamais confirmé sa marche ressemble exactement à un moteur en marche. L'opérateur croit que le procédé avance alors que non, ou l'inverse.
Que faire. Comparez la commande au retour d'information et donnez à l'écart son propre état, jaune dans la palette apaisée. Le symbole montre ce que fait l'équipement, pas ce que quelqu'un lui a demandé. Le guide des 9 états moteur liste les neuf états et le mappage vers l'automate.
6. Alarmes sans priorité
Pourquoi cela échoue. Si toutes les alarmes se ressemblent, ou si presque toutes sont rouges, l'opérateur ne sait pas laquelle traiter en premier. Une liste où tout est critique ne porte aucune information, et c'est souvent le signe que les alarmes n'ont jamais été rationalisées.
Que faire. Décidez d'abord les priorités (conséquence et délai de réaction), puis associez à chacune une couleur et un second repère, comme le numéro dans le badge. Posez le badge sur l'équipement et laissez visible, en dessous, l'état propre de l'équipement. Gestion des alarmes traite les priorités et le cycle de vie ISA-18.2.
7. Animation décorative
Pourquoi cela échoue. Des ventilateurs qui tournent, des canalisations au flux animé et des libellés clignotants dépensent l'attention de l'opérateur sur des choses qui n'en demandent pas. Si la moitié de l'écran bouge, un vrai changement passe inaperçu, et le clignotement est le signal le plus fort dont dispose un écran.
Que faire. N'animez que lorsque le mouvement porte une information, par exemple une nouvelle alarme que personne n'a acquittée ou un moteur en cours de démarrage. Écrivez dans le guide de style la liste des significations animées et gardez-la courte. Tout le reste reste fixe. Le guide de la palette apaisée traite le clignotement permanent.
Structure et cohérence (erreurs 8 à 10)
Ces trois erreurs concernent la façon dont les écrans s'emboîtent, et ce sont celles qui s'aggravent quand le projet grossit.
8. Navigation trop profonde
Pourquoi cela échoue. Si atteindre la pompe en alarme demande cinq clics dans des menus, chaque clic de trop coûte du temps au moment précis où il n'y en a pas à perdre. Un chemin difficile à retenir est un chemin que personne n'emprunte.
Que faire. Visez deux clics pour atteindre l'essentiel. Placez la navigation dans une zone fixe, montrez toujours sur quel écran l'on se trouve, évitez les impasses et ne naviguez pas depuis l'intérieur d'une fenêtre contextuelle. Voir le guide sur la hiérarchie des écrans.
9. Même objet, aspects différents
Pourquoi cela échoue. Si un écran dessine la pompe en cercle et le suivant en photo, ou si une unité utilise le vert pour « en marche » et une autre pour « disponible », l'opérateur doit réapprendre chaque écran. Des couleurs différentes pour la même signification, c'est la version dangereuse.
Que faire. Gardez un seul jeu de symboles et un seul faceplate par type d'objet, construits à partir de modèles et non de copies, pour qu'un changement se fasse à un seul endroit. Le guide de conception de faceplates montre la disposition, et le Symbol Builder exporte une image par état à partir d'un seul dessin.
10. Verrouillages invisibles pour l'opérateur
Pourquoi cela échoue. Un bouton Marche qui ne fait rien et ne donne aucune explication est la pire des impasses. L'opérateur le presse de nouveau, puis cherche la cause sur le terrain ou dans le programme de l'automate. La raison est presque toujours un permissif manquant, que l'automate connaît et que l'écran cache.
Que faire. Montrez les permissifs à côté de la commande, chacun avec son état, et grisez le bouton tant qu'il est bloqué. L'opérateur voit alors l'état et la raison. La disposition est dans le guide de conception de faceplates.
D'où viennent les erreurs
Elles sont rarement dues à de la négligence. Quatre habitudes en produisent la plupart :
- Partir du P&ID. Copier le plan est le moyen le plus rapide d'obtenir un premier écran et le plus lent d'en obtenir un utilisable (erreurs 2, 4 et 8).
- Dessiner sans guide de style. Si la palette, les tailles, les symboles et les règles d'animation ne sont pas écrits avant le premier écran, chaque écran invente les siens (erreurs 1, 7 et 9).
- Relire au bureau. Un écran paraît bien sur le moniteur de celui qui l'a dessiné. Il faut le juger à la distance du pupitre, par quelqu'un qui n'était pas là quand il a été dessiné (erreurs 3, 4 et 10).
- Laisser les états anormaux pour la fin. L'écran normal reçoit toute l'attention ; le « sans retour » et la priorité d'alarme sont ajoutés plus tard, ou jamais (erreurs 5 et 6).
Le remède aux quatre est le même : écrire un guide de style IHM court avant de dessiner, et relire par rapport à lui. Le guide ISA-101 explique comment la norme l'encadre, et ISA-101 vs ISA-18.2 vs ISA-5.1 montre où s'insèrent autour de lui les normes d'alarmes et d'instrumentation.
Une revue de 15 minutes applicable à toute IHM
Faites-la sur un simulateur ou un banc d'essai, jamais en forçant des signaux sur une installation en fonctionnement.
- Test des yeux plissés. Reculez et plissez les yeux devant chaque écran. L'œil tombe-t-il sur la seule chose anormale ? Sinon, regardez les erreurs 1, 2 et 7.
- Comptez les couleurs. Listez toutes les couleurs utilisées en fonctionnement normal. Tout ce qui dépasse le gris et l'état en marche est candidat à la suppression.
- Test de distance. Regardez l'écran depuis la distance réelle de l'opérateur. Les tags et les valeurs se lisent-ils ? Pourriez-vous viser le plus petit bouton avec un doigt ganté ?
- Parcours de défauts. Prenez un moteur et faites-le s'arrêter, perdre son retour et déclencher son relais thermique. Chaque cas a-t-il un aspect différent à l'écran ?
- Parcours d'alarmes. Déclenchez une alarme de chaque priorité. Se distinguent-elles sans reposer sur la couleur seule, et l'état de l'équipement reste-t-il visible ?
- Comptage des clics. Depuis la vue d'ensemble, comptez les clics jusqu'à trois équipements au hasard. Plus de deux mérite une correction.
- Contrôle de cohérence. Ouvrez le même type d'objet à trois endroits. Même symbole, même faceplate, mêmes couleurs ?
- Contrôle des commandes bloquées. Trouvez une commande bloquée en ce moment. Pouvez-vous savoir pourquoi sans quitter l'écran ?
Commencez par corriger les symboles
Un jeu de symboles cohérent supprime d’un coup les erreurs 1, 3 et 9. Dessinez une seule fois un moteur, une vanne ou une pompe dans le Symbol Builder et exportez chaque état en PNG ou SVG. Le builder est gratuit, sans compte pour dessiner ; les téléchargements demandent un compte gratuit, 5 par mois en Free.
Ouvrir le builder → Lire le guide de la palette apaisée →Foire aux questions
Quelles sont les erreurs de conception IHM les plus courantes ?
Trop de couleur, des écrans qui copient le P&ID, des graphismes 3D, un texte trop petit pour la distance de vue, l’absence d’état « sans retour », des alarmes sans priorité, une animation décorative, une navigation trop profonde, le même objet dessiné différemment sur des écrans différents et des verrouillages que l’opérateur ne voit pas. Le tableau au début de ce guide donne la correction de chacune.
Pourquoi une IHM doit-elle être surtout grise ?
Parce que la couleur est le moyen le plus rapide d’attirer l’œil de l’opérateur, et qu’elle ne fonctionne que tant qu’elle reste rare. Avec le gris par défaut, un moteur vert en marche, un état jaune sans retour ou une alarme rouge ressortent immédiatement. Quand tout est en couleur, rien ne ressort. Le guide de la palette apaisée donne les valeurs.
Un écran d’IHM doit-il ressembler au P&ID ?
Non. Le P&ID documente le procédé pour les ingénieurs ; l’écran assiste un opérateur qui surveille et agit. Gardez le flux du procédé et les équipements avec lesquels l’opérateur travaille, retirez les vannes manuelles, les purges et les instruments inutilisés, et laissez le P&ID rester le plan de référence. Les tags, eux, doivent rester identiques à ceux du P&ID pour qu’on puisse recouper.
L’animation est-elle mauvaise sur une IHM ?
Pas quand elle porte une information. Un clignotement pour une nouvelle alarme non acquittée, ou pour un moteur en cours de démarrage, dit quelque chose à l’opérateur. Des ventilateurs qui tournent, des canalisations au flux animé ou des libellés clignotants qui ne disent rien rivalisent avec les signaux qui comptent : retirez-les.
Comment corriger une IHM existante sans tout redessiner ?
Commencez par les changements qui touchent le plus d’écrans pour le moins de travail : une seule palette, une image par état pour chaque symbole et une taille de texte minimale. Ajoutez ensuite les états manquants et la priorité d’alarme, et simplifiez la navigation en dernier. Traitez d’abord une unité, validez-la avec les opérateurs et copiez le résultat sur le reste.
Continuez la lecture
- La palette de couleurs IHM apaisée — ce que signifie la couleur et les anti-motifs qui la ruinent.
- Hiérarchie des écrans IHM — niveaux d’affichage, navigation et taille du texte.
- Les 9 états moteur que toute IHM devrait afficher — y compris le « sans retour ».
- Gestion des alarmes — les priorités et comment les montrer à l’écran.
- Conception de faceplates IHM — objets cohérents et verrouillages visibles.
- ISA-101 vs ISA-18.2 vs ISA-5.1 — quelle norme répond à quelle question.
- Demandez à la communauté — un écran d’IHM sur lequel vous voulez un second avis.