eBook

Diseño HMI/SCADA

Buenas prácticas en el diseño

de pantallas HMI/SCADA
 2

Índice

Introducción 03

Orden de componentes 04

Jerarquía de navegación 04

Minimalismo 05

Coherencia en el proceso 06

Diseño orientado a objetos 07

Diseño responsive 08

Representación de alarmas 09
 3

Introducción
A lo largo de la historia del diseño de pantallas HMI / SCADA, se han producido y se siguen
produciendo malas prácticas que hay que evitar a toda costa:

Representación de excesivos detalles que distraen

Números en tamaños incorrectos, no acorde al proceso
Flujo de proceso inconsistente
Falta de jerarquía en la navegación
Representación incorrecta de las alarmas
Diseño enfocado a necesidades actuales, sin anticipar posibles evoluciones

Siempre se debe aprender de los errores, así que en este eBook te traemos algunas reco-
mendaciones modernas que darán mucha más consistencia, elegancia y potencia a tus
aplicaciones de visualización, incluso reduciendo el tiempo de diseño.
 4

Orden de componentes
Sobra decirlo, pero es primordial. Las pantallas de visualización deben tener sus componen-
tes correctamente alineados y uniformemente distribuidos. Además, al igual que cuando
redactamos un proyecto, una presentación en diapositivas o un diseño web, tiene que ha-
ber una estandarización en cuanto al uso de letras, números, colores y objetos.

Es un error que un carácter numérico tenga una fuente y un tamaño en una ventana, y otro
aspecto totalmente distinto en otra ventana.

Jerarquía en la navegación
Siguiendo un ejemplo en una planta de producción, por ejemplo de bebidas, debe haber
una jerarquía en cuanto a la navegación entre pantallas, de acuerdo con el modelo de pro-
ducción de la planta.

En un primer nivel, debe mostrarse una vista general de la planta. La pantalla principal no
puede ser el detalle de la etiquetadora de la línea de embotellado número 7. Debe ser un
plano o vista general de toda la instalación.

El siguiente nivel en la jerarquía debe ser cada área de la planta. Ejemplos de áreas pueden
ser: tratamiento de materia prima, proceso de mezclado, tanques de almacenamiento, área
de embotellado, empaquetado, paletizado y almacenes.

El tercer nivel son las líneas de cada una de las áreas. El siguiente nivel, el detalle de las má-
quinas de dicha línea. Así sucesivamente, y siempre con opciones accesibles para volver al
nivel jerárquico anterior y a la pantalla principal.
 5

Minimalismo
Todavía hoy existe cierta tendencia a repre-
sentar los procesos de la forma más realista
posible en las pantallas HMI / SCADA. Esto
implica, por ejemplo, utilizar los colores
reales de lo que se quiere visualizar, anima-
ciones o incluso representaciones en 3-D.
¿Esto es realmente necesario? La respuesta
es: rotundamente no.
En primer lugar, si hay demasiados
componentes con muchos colores, diseños
y animaciones, para poder detectar algo
anormal va a costar mucho trabajo. Como
en el juego de “Buscando a Wally”. ¡En
un proceso industrial no queremos eso!
Queremos que se resalte aquello que es
anómalo, como por ejemplo una alarma.
Y en segundo lugar, todos los proyectos de
SCADA deben quedar preparados para fu-
turas ampliaciones y escalados.
En los últimos años, ha habido un aumento
considerable de arquitecturas centralizadas
y acceso web.
Así que por muy pequeño que sea tu
proceso, las aplicaciones HMI / SCADA
deben estar preparadas desde el inicio para
posibles ampliaciones.
Si tenemos un sistema muy cargado con
imágenes y animaciones, estaremos con-
sumiendo recursos que luego podríamos
echar de menos si la infraestructura crece.

Para cumplir con esta premisa, el diseño debe ser monocromo y con tonos
apagados, utilizando los colores únicamente para resaltar lo importante en esa
pantalla. De esta forma, ¡Wally aparece solo!
 6

Coherencia en el proceso
No es lo mismo una pantalla de monitorización de un proceso de producción continua de
piezas de vehículos, que una visualización de parques eólicos. La maquinaria utilizada, el
flujo de los procesos, los horarios, el entorno y las actividades realizadas por los operadores
son totalmente distintos.

Un sistema de visualización debe ser coherente con el sector al cual está dirigido. Por ejem-
plo, la pantalla principal del primer caso debe ser un esquema general de la planta, con
un código de colores estándar relacionado con la automoción. Mientras que visualización
general de los parques eólicos podría ser un mapa de la región donde las turbinas estén
instaladas. Porque al revés… ¿un mapa para representar una única planta? No tiene sentido,
a esto nos referimos con coherencia.
 7

Diseño orientado a
objetos
Este principio es crucial para la adquisición
de datos, pero también lo es para la repre-
sentación de los mismos en pantallas. La
premisa es clara: se debe diseñar orientado
a objetos siempre que se pueda, aunque es-
temos diseñando pantallas muy simples.

El diseño orientado a objetos consiste en

crear una plantilla básica y luego hacerle ins-
tancias. En el ejemplo de las turbinas eólicas,
todas las turbinas son exactamente iguales.
Con el diseño orientado a objetos crearemos
una representación gráfica de la turbina y
luego la instanciaremos tantas veces como
turbinas haya repartidas por todo el parque.

Esto proporciona las siguientes ventajas,

entre otras:

Reducción de horas de diseño

Facilidad para detectar y corregir errores
Facilidad para implementar
modificaciones
Facilidad y rapidez para realizar
ampliaciones
 8

Diseño responsive
Cuando se están diseñando ventanas de visualización, se está haciendo teniendo en mente
el tamaño y resolución de las pantallas que se van a utilizar. En otros eBooks hemos visto
que este factor está cambiando desde hace unos años, puesto que se va requiriendo cada
vez más (y con todo el sentido del mundo) poder monitorizar y controlar desde dispositivos
móviles y tablets.

Entonces ¿cómo se debe proceder al diseño? ¿Enfocándonos en las grandes pantallas del
centro de control? ¿Enfocándonos en los Panel PC junto a las líneas de producción? ¿Para
Smartphones de 6 pulgadas? La respuesta es: para todos y para ninguno.

Para todos: se enfocará el diseño de Para ninguno: no se realizará un di-

forma que se pueda acceder a la vi- seño para cada resolución, eso sería
sualización desde cualquier pantalla multiplicar el trabajo y probablemen-
con cualquier resolución. te no esté justificado.

La clave está en el Diseño Responsive. Los sistemas SCADA de nueva generación ofrecen
clientes web puros basados en tecnología web como HTML5, CSS y Javascript. El Diseño
Responsive está disponible en estas tecnologías, de forma que un mismo diseño pueda
adaptarse a cualquier tipo de resolución, así todos pueden acceder pero las horas de trabajo
no se multiplican.
 9

Representación correcta de alarmas

Imagina dos plantas de producción iguales, ambas producen el mismo producto y lo obtie-
nen del mismo tipo de materia prima.

La planta número 1 siempre tiene alarmas activas, todos los días tienen la pantalla de alar-
mas del SCADA abierta y recibiendo incidencias. En cambio, la planta número 2 solo tiene
alarmas activas puntualmente. ¿Por qué?

Solo hay dos posibles explicaciones: o bien la planta número 1 está teniendo incidencias
reales y, por lo tanto, debe dedicar recursos a corregirlas, o bien la planta número 1 no está
definiendo correctamente las alarmas.

Las alarmas dan para un eBook completo, pero lo que hay que tener en cuenta es que las
alarmas son algo que representa una incidencia. No cualquier evento debe ser considerado
una alarma, sino realmente aquello que está dando problemas.

En cuanto al diseño, es frecuente encontrar que en cada sector ya hay estándares para su
representación. Es importante destacar que no se deben usar los colores de las alarmas
para representar otras cosas. Por ejemplo, si naranja significa “Warning”, no usemos el na-
ranja para colorear tuberías.
 10
10

atvise® SCADA
SISTEMA SCADA PARA LA INDUSTRIA 4.0

El primer sistema SCADA construido sobre los pilares de la

Industria 4.0, Tecnología Web Pura y OPC UA.

Descarga atvise® SCADA gratis

Máxima Responsive Tecnología

Seguridad Design Web Pura

OPC UA Multiplataforma
 11

Contacto
info@vestersl.com
www.atvise.vesterbusiness.com

Vester Business Spain

Av Cerdanyola 92, 2da Planta Of 27, 08173, Sant Cugat del Valles, Spain
(+34) 93 572 10 07

Vester Business France

672 Rue du Mas de Verchant, 34967, Montpellier CEDEX 2, France
+33 (0)4 13 68 01 06

Vester Business LATAM

(+506) 2225 2344