Design des interfaces IHM - Partie 2

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 - Partie 2

Message par steph68 »

Bonjour,

Ce post est la suite du précédent, donc pour ceux qui ne l'ont pas lu c'est par ici : viewtopic.php?f=34&t=51

Je ne l'avais pas précisé, mais par IHM je sous-entend ici le pupitre en pied de machine et non la grosse supervision installée sur un PC qui fait de la gestion technique centralisée ... (et dans ce cas on est plus sur de l'ergonomie d'interface pour logiciel informatique).

Revenons à nos moutons ...

La mise en place des onglets :

Il faut commencer par créer 2 onglets vierges qui correspond aux 2 états possibles : inactif et actif.

J'avais utilisé ce site pour les générer : http://www.tabsgenerator.com/

voici l'onglet inactif (taille 110 x 40) - petit dégradé léger dans le fond + contour gris moyen
tabgris.png
tabgris.png (479 octets) Consulté 4140 fois
et l'onglet actif (taille 110 x 44) - fond blanc + contour noir
tabactif.png
tabactif.png (456 octets) Consulté 4140 fois
Concernant le format d'image, utilisez le format PNG qui compresse bien sans perte de qualité ou le format GIF si l'image n'a besoin que d'une palette de 256 couleurs maxi. A éviter : format BMP (trop volumineux) et JPEG (compresse bien mais perte de qualité, pas top pour ces petits éléments de design).

Concernant les images que je poste, vous êtes libre de vous en resservir dans vos projets.

Concernant les tailles, pour un pupitre tactile, ne pas descendre en dessous de 40 x 40 pixels pour le confort d'utilisation.
L'onglet actif est un poil plus haut (44 pixels vs 40 pour l'inactif) pour couvrir la barre de transition et ressortir davantage en bas (en décalé par rapport aux inactifs, petit effet d'animation).

Reste à décorer les onglets pour chaque thèmes (5 en tout) et chaque états (2), soit 10 images.

Pour la manipulation d'image, je vous conseille GIMP qui est libre de droit et assez facile à prendre en main : http://www.gimpfr.org/

Ce qui donne ceci (j'ai tout regroupé sur une seul image pour ne pas avoir à mettre 10 pièces jointes, mais en réalité vous avez 10 fichiers différents) :
tabsplanche.png
Pour la mise en place dans votre logiciel IHM préféré (Vijeo, WinCC flex, GP-Pro ...), nous allons créer un écran modèle (pour les softs qui ne gère pas les écrans modèles, il faudra faire des copier / coller).
Pour rappel, un écran modèle est un "calque" qu'on peut rappeler par la suite lors de la création des autres écrans (empilage de calques, Vijeo fait ça très bien).

Voici l'écran modèle :
ecranmodele.png
On place côte à côte les onglets inactifs en n'oubliant pas de créer les actions sur appui qui sont des basculements d'écran (switch screen).

Lors de la création de l'écran final, il suffit juste de placer l'onglet actif par dessus l'onglet inactif (sans action sur appui), ce qui donne ceci :
ecranfinal.png
Je passe au silence certains détails (que la barre noire fait 2 pixels de haut à 42 pixels du bas, couleur du fond ...), je mettrai plutôt une archive zip avec un projet Vijeo prêt à l'emploi.

Ce n'est pas très compliqué à réaliser, il faut juste être un peu pointilleux pour le placement au pixel près :mrgreen:

Le découpage de l'écran

Comme vous avez pu le remarquer, ma barre de navigation est en bas. Pourquoi ce choix ?

La partie haute (bandeau titre) est réservée au titre de l'installation, éventuellement logo du constructeur, n° de tél par ex ..., et aussi des icônes d'états si besoin (machine en mode auto, en mode pas à pas, mode manu, hors service, plus de café dans le gobelet de l'opérateur :mrgreen: ... par ex). Cette partie est susceptible d'être recouverte par un bandeau "alarmes" (popup), donc en cas de défaut, elle devient inaccessible (donc ne surtout pas mettre de boutons d'action par ex). Voici le bandeau d'alarmes actives :
bandeaualarmes.png
bandeaualarmes.png (2.19 Kio) Consulté 4142 fois
Ce petit bandeau n'affiche que les 3 dernières alarmes actives, ce n'est pas un historique complet qui doit figurer sur un écran dédié pour plus de place ...

Donc pour ne pas bloquer la navigation même en cas d'alarmes, le menu doit être à l'opposé (on aurait pu très bien faire l'inverse, menu en haut et alarmes en bas) ... question de goût ;) ... comme l'horloge qui est en toujours en bas à droite ...

Pour la partie centrale, je réserve une fine colonne (80 pixels) à gauche pour y disposer mes boutons d'actions. Tous les écrans n'ont pas besoin de boutons d'action (écran de paramètres par ex), donc cette colonne n'est présente qu'au besoin.

Voici un exemple de disposition :
ecrandecoupage.png
Ce qui est important dans le découpage choisi, c'est de conserver la même logique sur tous les écrans.
Donc ne pas faire une colonne à gauche sur un écran puis une colonne à droite sur un autre ...


La suite :

pour aujourd'hui c'est fini (déjà une dure journée derrière moi :lol: )

la prochaine partie, je parlerai de l'importance des icônes, des boutons d'action, de l'interactivité des boutons ...

petit aperçu, en attendant, de quelques écrans réalisés (j'ai encore droit à 2 images dans ce post) :
ecranapercu-2.png
(un pupitre à boutons)
ecranapercu-1.png
(tout n'est pas gris sur cet écran ..., il y a du vert ou du rouge sur commande, et des boulets colorés qui se promènent ;) )

@+
Flav
Asservi son premier moteur
Asservi son premier moteur
Messages : 25
Inscription : 21 déc. 2017, 11:04

Re: Design des interfaces IHM - Partie 2

Message par Flav »

Super boulot! Merci bcp.
2e année BTS CRSA
Avatar de l’utilisateur
Brebiou
Dieu du process
Dieu du process
Messages : 929
Inscription : 21 oct. 2015, 08:38

Re: Design des interfaces IHM - Partie 2

Message par Brebiou »

J'ai tout fusionné.

Par contre les dates ne sont plus les bonnes car j'ai un peu merdé suite à certaines limitations du forum, mais on s'en fout un peu ;)
Répondre