Diseño de interfaz para controlador industrial

¡Hola! Mi nombre es George, soy diseñador.

Mientras todos regresamos a casa, decidí compartir mi experiencia en el desarrollo de diseño de interfaces para la automatización industrial, y resultó que una gran cantidad de profesionales están involucrados en el diseño de aplicaciones y el diseño de sitios web. Pero no hay tantas buenas interfaces especializadas diseñadas para administrar sistemas de ingeniería.

Por alguna razón, se acepta generalmente que el diseño no es necesario en esta industria, y si un ingeniero no puede entender el sistema, entonces indica sus calificaciones, y no es que la interfaz pueda estar mal pensada, la información se presenta en un conjunto caótico, en el que es imposible navegar rápidamente, lo que, a su vez, genera exceso de trabajo y errores del usuario.

Primero, le contaré cómo hice la interfaz del panel de control del sistema de ventilación para el software Segnetics. Comenzamos el proyecto estudiando al usuario y el entorno operativo. Estudiamos y modelamos en detalle cómo y dónde se utilizará nuestro panel. A menudo se trata de salas técnicas semi oscuras, una disposición en tableros o instalaciones. Al darse cuenta de esto, comenzaron a buscar análogos y formas de resolver problemas similares. Revisamos muchas interfaces: dispositivos médicos, automóviles, gestión de sistemas de producción, etc. Decidimos que nos gusta el estilo de las interfaces de los instrumentos modernos de las aeronaves, cuya principal ventaja es que el piloto debe leer solo la información importante limpiada de ruido visual lo más rápido posible. Este principio sentó las bases para toda la interfaz futura y pasamos a la creación de prototipos.







En la etapa inicial, dibujamos los bloques principales en el tamaño natural de la pantalla y vertimos el programa en el controlador para verificar las áreas donde se presionaron los elementos, la lógica de transición.
Una vez aprobado el diseño, pasamos a la búsqueda de bocetos. Revisamos una gran cantidad de opciones para bocetos y estilos. Aproximadamente entendieron lo que queríamos, decidieron probar un estudio más detallado, pero un pequeño fragmento. ¿Plano? Skeuomorphism? Tal vez tomar el estilo de dibujar gráficos?







Poco a poco encontramos la imagen que más nos conviene y comenzamos a estudiar. La pantalla principal con la que interactuará el operador es el diagrama mímico. Debe mostrar los parámetros importantes de entrada y salida, el estado y el estado de los dispositivos en el sistema. Observamos algunos trucos en los aviones, recopilamos un diagrama mímico, lo observamos con la carga máxima y cómo se verá el 90% del tiempo.











Aprobamos el estilo general y pasamos al desarrollo de las pantallas restantes. Lo más interesante es la pantalla de tareas de configuración. Revisamos varias opciones: un selector de teléfono móvil, ingresar un número desde el teclado, etc. Y decidieron que es genial hacer un atenuador táctil para la configuración aproximada de un número, y los botones + \ - para una más precisa. Aquí me gustaría dar las gracias a los programadores de Segnetics, que hicieron que la rueda de sintonización girara suavemente y jugara bien durante su parada. Es cierto que resultó muy alto.

Trabajamos a través de todas las pantallas y dispositivos animados, estados. Accidentes, congelación, roturas en la correa, cómo se infla y desinfla el sujetador del filtro durante el inicio y la parada del sistema. Cómo se llenan las barras de progreso.









En el siguiente paso, adaptamos la interfaz del panel de control para su uso en otro controlador. Agregamos la función de crear un horario, cambiamos la pantalla principal, ya que este controlador solo puede controlar una instalación específica, mientras que el panel admite la administración de varios sistemas.







El cliente del próximo proyecto fue la red de autoservicio de lavado de autos de Moscú Cooga.

Tengo un programador amigo que dirige excelentes cursos de programación para ingenieros aquí (plc-edu.pro), me hizo una pregunta. “Gog, estoy haciendo un programa de autoservicio de lavado de autos aquí. El cliente quiere que todo se vea profesional y genial. ¿Puedes ayudarnos con esto?

Como diseñador, tuve que formular la lógica de interacción entre usuarios de diferentes niveles con la interfaz. Comprenda qué datos deben ver todos los usuarios y qué acceso se necesita solo a través de una contraseña. ¿Cómo construir la lógica de la tarea de configuración para que sea intuitiva y no requiera un manual de varias páginas?

Para comenzar, hice una lista de roles y los pasos que son importantes para ellos. Qué se debe hacer para implementar este o aquel escenario.



Como resultado, obtuvimos un prototipo interactivo en Fig, que mostraba todas las funciones y acciones básicas. En este prototipo, realicé varias pruebas para probar la hipótesis y la lógica del diseño.



El aspecto final de la interfaz no es menos importante (aunque muchas personas piensan de manera diferente) que el funcionamiento del servicio. La apariencia forma la impresión del servicio. Crea un estado de ánimo. Crea una conexión emocional entre el dispositivo de una persona. Es el diseño lo que hace que el uso del servicio sea divertido. Si desea construir una relación larga con su cliente, preste atención a esto. Una vez dibujados todos los iconos, botones y sus estados, procedemos a la programación.







Aquí quiero hablar por separado sobre cómo Figma hace la vida más fácil. Dibujé mi primera interfaz de ventilación en Illustrator. Tuve que cortar cientos de elementos y sus estados en PNG, guardar muchas carpetas. Marque píxel por píxel de la posición de los elementos en la pantalla. Afortunadamente, hoy todo esto no es necesario. Agregamos el programador al archivo de trabajo de las Figuras y ya puede ver en la etapa de prototipo qué mecánica se utilizará y dar su propia evaluación de la posibilidad.

Otro pequeño proyecto es la interfaz de exhibición para emular el funcionamiento de un controlador de bomba de calor para Thermex.

No me repetiré, el camino es el mismo: desde los objetivos de uso y el prototipo hasta la guía final de la belleza. El proyecto se completó 2 semanas desde la firma del contrato hasta la aprobación final del cliente.











Paralelamente a los proyectos de automatización, trabajé en interfaces de sistemas médicos. Una solicitud para médicos del departamento de admisión, una solicitud para médicos del distrito que se van a casa. Interfaz de registro y diseño del sistema de prescripción de medicamentos. Si está interesado, se lo diré la próxima vez.

¡Abierto para la cooperación y agradeceré las críticas constructivas!