Conception d'interface pour contrôleur industriel

salut! Je m'appelle George, je suis designer.

Alors que nous rentrons tous à la maison, j'ai décidé de partager mon expérience dans le développement de la conception d'interfaces pour l'automatisation industrielle. Mais il n'y a pas tant de bonnes interfaces spécialisées conçues pour gérer les systèmes d'ingénierie.

Pour une raison quelconque, il est généralement admis que la conception n'est pas nécessaire dans cette industrie, et si un ingénieur ne peut pas comprendre le système, cela indique plutôt ses qualifications, et non que l'interface peut être mal pensée, les informations sont présentées dans un ensemble chaotique, dans lequel il est impossible de naviguer rapidement, ce qui, à son tour, entraîne un surmenage et des erreurs utilisateur.

Tout d'abord, je vais vous expliquer comment j'ai réalisé l'interface du panneau de commande du système de ventilation pour le logiciel Segnetics. Nous avons commencé le projet en étudiant l'utilisateur et l'environnement d'exploitation. Nous avons étudié et modélisé en détail comment et où notre panneau sera utilisé. Il s'agit souvent de locaux techniques semi-sombres, d'un agencement sur planches ou installations. Réalisant cela, ils ont commencé à chercher des analogues et des moyens de résoudre des problèmes similaires. Nous sommes passés sur de nombreuses interfaces: dispositifs médicaux, automobiles, gestion des systèmes de production, etc. Nous avons décidé que nous aimons le style des interfaces des instruments d'avion modernes, dont le principal avantage est que le pilote ne lise le plus rapidement possible que les informations importantes débarrassées du bruit visuel. Ce principe, nous avons jeté les bases de toute l'interface future et sommes passés au prototypage.







Au stade initial, nous avons esquissé les principaux blocs à la taille naturelle de l'écran et versé le programme dans le contrôleur pour vérifier les zones où les éléments ont été pressés, la logique de transition.
Après avoir approuvé la mise en page, nous sommes passés à la recherche de croquis. Nous sommes passés par un grand nombre d'options pour les croquis et les styles. Ils ont compris approximativement ce que nous voulions, ont décidé d'essayer une étude plus détaillée, mais un petit fragment. Appartement? Skeuomorphisme? Peut-être prendre le style de dessin de graphiques?







Petit à petit nous trouvons l'image qui nous convient et commençons à étudier. L'écran principal avec lequel l'opérateur va interagir est le diagramme synoptique. Il doit afficher les paramètres importants de l'entrée et de la sortie, l'état et l'état des appareils dans le système. Nous examinons quelques astuces dans les avions, collectons un schéma synoptique, le regardons à la charge maximale et à quoi il ressemblera 90% du temps.











Nous approuvons le style général et passons au développement des écrans restants. Le plus intéressant est l'écran des tâches de configuration. Nous avons examiné plusieurs options - un sélecteur de téléphone portable, la saisie d'un numéro à partir du clavier, etc. Et ils ont décidé que c'était cool de faire un gradateur tactile pour un réglage approximatif d'un nombre, et les boutons + \ - pour un plus précis. Ici, je voudrais dire un grand merci aux programmeurs Segnetics, qui ont fait tourner la molette de réglage en douceur et jouer bien pendant son arrêt. Certes, cela s'est avéré très élevé.

Nous travaillons sur tous les écrans et animons les appareils, états. Accidents, gel, cassures de la ceinture, gonflage et dégonflage du soutien-gorge filtrant lors du démarrage et de l'arrêt du système. Comment les barres de progression sont remplies.









Dans l'étape suivante, nous avons adapté l'interface du panneau de commande pour une utilisation dans un autre contrôleur. Nous avons ajouté la fonction de création d'un calendrier, changé l'écran principal, car ce contrôleur ne peut contrôler qu'une installation spécifique, tandis que le panneau prend en charge la gestion de plusieurs systèmes.







Le client du projet suivant était le réseau de lave-auto en libre-service de Moscou Cooga.

J'ai un ami programmeur qui dirige ici d'excellents cours de programmation pour les ingénieurs (plc-edu.pro), il m'a posé une question. «Gog, je fais un programme de lavage de voiture en libre-service ici. Le client veut que tout ait l'air professionnel et cool. Pouvez-vous nous aider avec cela? "

En tant que designer, j'ai dû formuler la logique d'interaction entre des utilisateurs de différents niveaux avec l'interface. Comprenez quelles données tous les utilisateurs devraient voir et quels accès sont nécessaires uniquement via un mot de passe. Comment construire la logique de la tâche de paramétrage pour qu'elle soit intuitive et ne nécessite pas de manuel multi-pages?

Pour commencer, j'ai fait une liste des rôles et des étapes qui sont importants pour eux. Que faut-il faire pour mettre en œuvre tel ou tel scénario?



En conséquence, nous avons obtenu un prototype interactif dans Fig, qui affiche toutes les fonctions et actions de base. Sur ce prototype, j'ai effectué plusieurs tests pour tester l'hypothèse de conception et la logique.



À quoi ressemble l'interface au final, elle n'est pas moins importante (bien que beaucoup de gens pensent différemment) que le fonctionnement du service. L'apparence forme l'impression du service. Cela crée une ambiance. Établit un lien émotionnel entre l'appareil d'une personne. C'est la conception qui rend l'utilisation du service amusante. Si vous souhaitez construire une longue relation avec votre client, faites attention à cela. Après avoir dessiné toutes les icônes, boutons et leurs états, nous procédons à la programmation.







Ici, je veux parler séparément de la façon dont Figma facilite la vie. J'ai dessiné ma première interface de ventilation dans Illustrator. J'ai dû couper des centaines d'éléments et leurs états en PNG, enregistrer de nombreux dossiers. Effectuez un balisage pixel par pixel de la position des éléments sur l'écran. Heureusement, aujourd'hui, tout cela n'est pas nécessaire. Nous ajoutons le programmeur au fichier de travail des figures et il peut déjà voir au stade du prototype quelle mécanique sera utilisée et donner sa propre évaluation de la possibilité.

Un autre petit projet est l'interface d'exposition pour émuler le fonctionnement d'un contrôleur de pompe à chaleur pour Thermex.

Je ne vais pas me répéter, le chemin est le même - des objectifs d'utilisation et du prototype à la direction finale de la beauté. Le projet a été achevé 2 semaines à partir de la signature du contrat jusqu'à l'accord final du client.











Parallèlement aux projets d'automatisation, j'ai travaillé sur les interfaces des systèmes médicaux. Une demande pour les médecins du service d'admission, une demande pour les médecins de quartier qui rentrent chez eux Interface du registre et conception du système de prescription des médicaments. Si vous êtes intéressé, je vous le dirai la prochaine fois.

Ouvert à la coopération et je serai reconnaissant pour les critiques constructives!