Design des interfaces IHM

Trucs-Astuces-Micro cours sur les automatismes industriels
steph68
Codeur fou
Codeur fou
Messages : 268
Inscription : 21 oct. 2015, 08:23

Design des interfaces IHM

Message par steph68 »

Bonjour à tous,

Je me lance sur une petite série de tutos (pas tous en une fois) concernant un vaste sujet qui est le design des interfaces IHM.
L'idée est de faire de ces tutos un recueil des astuces et bonnes pratiques dans ce domaine sans pour autant être exhaustif (c'est un métier à part entière).
J'éditerai au fur et à mesure le premier post pour compléter avec vos idées / réactions / critiques / illustrations ... (je mettrai un petit post en dessous pour signaler une modif).
Le tuto sera découpé en plusieurs chapitres (pas encore bien défini actuellement, je me lance en "freestyle" :mrgreen: )

L'objectif étant de ne plus voir dans l'industrie (on peut rêver) des interfaces bourrées de boutons carrés gris et des rectangles d'informations, visuellement pas agréables, pas bien organisées / pensées ...

Comme toujours, le boulot doit être fait pour hier, on n'a jamais le temps de faire ce qu'on aimerait...
Avec un peu d'astuce, une petite banque d'images / îcones sous le coude, on peut faire des choses sympas sans trop perdre de temps.

Quand vous vendez une machine, l'IHM est la vitrine de votre travail.
Le commercial (ou le client final) s'en fiche un peu du super algorithme que vous avez programmé, mais l'écran, l'IHM, ça, ça lui parle ;)

Après il faut penser à l'opérateur qui va travailler dessus pendant les 10 ou 20 prochaines années.
Il faut donc bien organiser et hiérarchiser les informations pour une bonne ergonomie de l'interface.

Partie 1 : la navigation

Selon la taille de la machine, vous aurez plus ou moins de volume d'états et d'actions à traiter dans votre IHM.
Comme tout ne rentre pas sur un seul et même écran (et c'est tant mieux), vous en prévoyez plusieurs.

Comment faire le découpage ?

Le premier niveau correspond dans la plupart des cas aux thèmes suivants :

* le tableau de bord :

il donne accès aux commandes de marche et d'arrêt : boutons "démarrer cycle", "arrêter cycle", "vider" ...
il affiche les états "généraux" souvent au dessus d'un "synoptique" : un bandeau de texte pour indiquer l'état général (attente mise en service, cycle en cours, attente chargement de pièce ... par exemple), des compteurs pour le suivi de prod (pièces finies, pièces rebuts ...), des petites animations pour du suivi de pièces en cours de circulation par exemple ...

* les commandes manuelles : comme son nom l'indique, pour effectuer des mouvements en manuel et être informé de l'état précis des capteurs par exemple (sur un synoptique également par ex).

* les recettes : les paramètres qui sont uniquement liés à une campagne de production ou un type de pièce précis + toutes actions de gestion des recettes (chargement / sauvegarde, activation ...)

* les paramètres : accès aux paramètres qui sont indépendants des recettes

* le diagnostic : cette partie donne des informations autres que les états de capteur (qui sont déjà dans la partie "commandes manuelles") pour le dépannage : par ex, l'état d'un registre à décalage, l'état précis des pièces si traçabilité (code à barres, n° d'identification ...), l'état d'un contrôle vision, l'état des grafcets ...

Je pense qu'avec ces 5 thèmes nous avons fais le tour de la plupart des applications.

Toutes les pages doivent pouvoir se classer dans l'un ou l'autre thème.

En fonction du volume d'écrans, il faut adapter la profondeur de votre hiérarchie.
Ne surtout pas hésiter à créer des sous-niveaux en fonction du besoin et de la logique de votre installation (sans en faire trop).

La profondeur d'une hiérarchie agit sur le nombre d'étapes (donc de clic sur l'écran) pour atteindre une page profonde - dans la mesure du possible, ne pas dépasser 3 niveaux
La largeur d'une hiérarchie agit sur la taille du menu à l'écran - dans la mesure du possible, ne pas dépasser 5 éléments par niveau (sinon l'écran est vite surchargé)

Un exemple concret d'une petite hiérarchie :

Code : Tout sélectionner

- Tableau de bord (synoptique général à la ligne robotisée)
--- Four (zoom sur le four pour un synoptique plus précis)
- Commandes manuelles (il y a des sous-parties, mais de façon "dynamique" pas sous forme d'écrans ... je reviendrai dessus plus tard)
- Recettes
--- ligne (paramètres spécifiques à la ligne robotisée pour un type de pièce)
--- four (paramètres spécifiques au four pour un type de pièce)
- Paramètres
- Diagnostic
--- Temps (les temps de cycle par module par ex)
--- Grafcets (les étapes actives des grafcets)
--- Tags (états des pièces en circulation)
--- Défauts (historique des défauts / alarmes)
la navigation est ici transversale (horizontale pour le 1er niveau), c'est à dire, qu'à tout moment, vous pouvez basculer d'un thème à l'autre (le niveau 1).

Un autre exemple de hiérarchie que j'ai réalisé mais qui suit un standard client imposé (j'ai abrégé parce qu'elle est "lourde"):

Code : Tout sélectionner

-Menu principal
--- Défauts courants
------ Défauts historique
--- Messages
--- Mode PAP (pas à pas)
--- Mode Manu
------ Manu Actionneurs
------ Manu Axes
--------- Cnv Sepro
--------- Cnv Opérateur
--------- Av Bandes
--------- Encollage
--------- Plateau MAC
--- Paramètres
------ Recettes
--------- Configuration produit
--------- Configuration machine
--------- Configuration flux cachets
------ Paramètres axes
--------- Av bandes
--------- Encollage
--------- Plateau MAC
------ Options
--- Diagnostic
------ Tps de cycle
------ Etapes G7
------ Registres
--- Gestion prod
la navigation est ici en "silo" (verticale).
Tout part du menu principal et le seul moyen de changer de "thème" est de repasser par la page principale.

Cette hiérarchie est juste affreuse à l'usage (il faut tout le temps tapoter l'écran) ... et j'ai dû la faire :oops:


Comment implémenter la navigation entre les thèmes ?

A mon sens, l'outil graphique le plus simple à mettre en oeuvre et le plus ergonomique / intuitif est l' "onglet".
Avec une navigation par onglets, vous avez un visuel sur les thèmes disponibles et vous savez où vous êtes (dans quel thème).

Exemple de navigation par onglets (disponible au bas de tous les écrans de l'appli)
ihm-onglets.png
ihm-onglets.png (10.21 Kio) Consulté 9156 fois
On voit facilement où on est car l'onglet actif est légèrement plus gros, plus clair, le contour plus épais, l'écriture décalé un poil vers le bas et surtout, la barre de transition noire est interrompue pour que l'onglet fasse "corps" avec la page du dessus. On voit également quels sont les autres options disponibles.

On passe d'un thème à l'autre très facilement.

Autre exemple (moins sexy) d'onglets sur 2 niveaux :
ihm-onglets-2.png
ihm-onglets-2.png (5.48 Kio) Consulté 9156 fois
On voit bien qu'on est sous "Paramètres Axes" puis "Av Bandes" ...

Un autre exemple (que je n'ai pas fais) de navigation dans le même style :
ihm-onglets-3.png
ihm-onglets-3.png (3.11 Kio) Consulté 9153 fois
Là c'est le bouton qui disparaît pour indiquer où on est (il faut deviner qu'on est sur l'écran "Presse 1" actuellement ; mais en rappel, il y a un titre de page plus haut ; ce qui est inutile et redondant si le bouton serait resté visible)
Exemple à bannir :evil:

Question subsidiaire : si vous êtes opérateur, donc utilisateur de l'IHM, avec lequel des 3 exemples avez-vous envie de travailler ?

Pour la mise en oeuvre des onglets :


bon ben vu l'heure tardive, la suite dans un prochain post.

N'hésitez pas à commenter (positif ou négatif, mais constructif ; si c'est un sujet qui vous intéresse ou pas ...) et surtout illustrer votre propre expérience (par des copies écran de ce que vous avez l'habitude de faire en menu de navigation, je suis toujours preneur de nouvelles idées / nouveaux concepts ...)

@+
steph68
Codeur fou
Codeur fou
Messages : 268
Inscription : 21 oct. 2015, 08:23

Re: Design des interfaces IHM

Message par steph68 »

je viens de tomber sur ce lien : http://www2.schneider-electric.com/reso ... ner_FR.pdf

les guidelines de schneider electric sur le design IHM ...
j'utilise plus ou moins les mêmes concepts sans avoir connu ce document auparavant ...

@+
Avatar de l’utilisateur
Brebiou
Dieu du process
Dieu du process
Messages : 929
Inscription : 21 oct. 2015, 08:38

Re: Design des interfaces IHM

Message par Brebiou »

Moi je suis plus pour la navigation par onglet, le premier exemple donné.

Mais des fois on ne fait pas ce que l'on veut. Soit le client a des exigences propres, qui sont parfois farfelues, soit tu es limité par un standard, ou par le logiciel.

L'ingenieur autom de la boite veut standardiser les vues de supervision, du moins la navigation, comme ça quand tu passe d'une machine a l'autre, tu n'est pas trop dépaysé.
C'est une bonne initiative, mais en termes de design, c'est leger parce que les deux automaticien n'ont pas envie de se casser la tête a faire quelque chose de joli et fonctionnel
IHM1.PNG
Le menu sur fond bleu est toujours accessible, dans la partie jaune le nom de la machine, et dans la blanche la version en cours de production.
La tu as le menu marche automatique, et tu peux entrer dans le detail de chaque poste en appuyant sur le carré vert.
IHM2.PNG
Tu as ensuite accès a un "zoom" sur le poste voulu.
Chaque vérin est animé, les capteurs de position sont nommé, les parties se déplace selon la position réelle.
Pour dire, quand j'ai montré cette vue aux collegues, ils m'ont dit "Waah, tu t'es fait chié dis donc!J'aurais fait plus simple, ca m'aurait pris qu'une demi journée", sauf que ça m'a pris 3-4h a faire, avec les animations.

Ce que je montre, c'est du Codesys integré a Twincat, le logiciel de programmation Beckhoff, qui est le standard API dans la boite.

Je vais montrer ton PDF aux collegues, ca peut toujours servir, meme si comme tu dis, on respecte certaines règles inconsciemment puisque c'est juste de la logique ;)
steph68
Codeur fou
Codeur fou
Messages : 268
Inscription : 21 oct. 2015, 08:23

Re: Design des interfaces IHM

Message par steph68 »

@brebiou : tes synoptiques sont super bien faits (surtout la vue 3D)

le petit reproche (AMHA = à mon humble avis), est le mélange des modes de fonctionnement avec les modes de marche et d'arrêt dans le même menu (le menu de gauche).
certains boutons vont activer la partie opérative de la machine alors que d'autres servent à la naviguation. Je pense qu'il est bon de séparer les commandes d'action et les commandes de naviguation.
Je vais montrer ton PDF aux collegues, ca peut toujours servir, meme si comme tu dis, on respecte certaines règles inconsciemment puisque c'est juste de la logique
attends la suite, il y aura des screenshots plus complets ;)

@+
Avatar de l’utilisateur
skip74
Créateur de langage
Créateur de langage
Messages : 640
Inscription : 13 oct. 2015, 06:34

Re: Design des interfaces IHM

Message par skip74 »

salut

merci pour ton partage.
je connaissait ce document mais je l'avais perdus.... :oops:

Moi, je pèche souvent sur les icones... quelqu'un a une bonne adresse? :?: :?: :?:

Ca me rappelle un magelis programmé par un concurrent: il a voulut utilisé des dessins en perspective tout pourris... complètement imbitable, illisible, en plus pour certaines fonctions il fallait faire 10 ecrans successifs avec certaines fois des fonctions tactiles non signalés :mrgreen: :mrgreen: :mrgreen:
Youuhhh je préfère mes bon vieux carrés ....
steph68
Codeur fou
Codeur fou
Messages : 268
Inscription : 21 oct. 2015, 08:23

Re: Design des interfaces IHM

Message par steph68 »

je mettrai au fur et à mesure des liens (icones, créateur d'onglet et de boutons ...)
il y a plein de ressources sur le net pour faire des designs sympas sans être graphiste.
une icone a aussi son importance vs un simple bouton texte (en fait, le mieux c'est texte + icone), j'en parlerai dans la suite.

@+
Avatar de l’utilisateur
ProfnovA
Créateur de langage
Créateur de langage
Messages : 525
Inscription : 21 oct. 2015, 08:21

Re: Design des interfaces IHM

Message par ProfnovA »

Brebiou a écrit :C'est une bonne initiative, mais en termes de design, c'est leger parce que les deux automaticien n'ont pas envie de se casser la tête a faire quelque chose de joli et fonctionnel)
Je trouve ça dommage de faire l'impasse sur le design car c'est l'image de marque de la société. Moi je fais toujours un effort sur l'élaboration de mes synoptiques, mes icônes, boutons, etc... En plus maintenant, il y a plein de ressources gratuites sur le web. Ça me prend un peu plus de temps mais moi, ça me satisfait du moment que ça rentre dans les heures prévues. Après, je ne suis pas sur que les clients en ont quelque chose a faire du moment que c'est fonctionnel. J'aime bien designer cette partie graphique, ça laisse ma fibre artistique s'exprimer.
Pièces jointes
Image 6.jpg
Image 5.jpg
steph68
Codeur fou
Codeur fou
Messages : 268
Inscription : 21 oct. 2015, 08:23

Re: Design des interfaces IHM

Message par steph68 »

@ProfNovA : waouh ! bon / beau boulot pour tes synoptiques :P

@+
Avatar de l’utilisateur
Brebiou
Dieu du process
Dieu du process
Messages : 929
Inscription : 21 oct. 2015, 08:38

Re: Design des interfaces IHM

Message par Brebiou »

steph68 a écrit :@brebiou : tes synoptiques sont super bien faits (surtout la vue 3D)

le petit reproche (AMHA = à mon humble avis), est le mélange des modes de fonctionnement avec les modes de marche et d'arrêt dans le même menu (le menu de gauche).
certains boutons vont activer la partie opérative de la machine alors que d'autres servent à la naviguation. Je pense qu'il est bon de séparer les commandes d'action et les commandes de naviguation.
Merci =p

Seul la partie verte est modifiable, le reste c'est un masque générique, j'ai déjà soumis l'idée d'améliorer le masque mais pour l'instant, on le garde tel quel. Quand tu as l'habitude ce n'est pas trop gênant.
Répondre