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" )
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)
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
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
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)
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 :
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 :
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
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 ...)
@+