Diseño de Pantallas HMI según ISA-101: Mejores Prácticas

Si tus pantallas HMI tienen tuberías con textura 3D, fondos negros y colores por todas partes, están diseñadas para impresionar en una presentación — no para funcionar en una emergencia. El operador acaba confiando más en su instinto que en la pantalla, y eso en un proceso crítico es inaceptable.

El diseño de pantallas HMI según ISA-101 propone algo radicalmente distinto: pantallas que en condiciones normales resultan “aburridas” — grises, limpias, sin distracciones — pero que en el instante en que algo sale del rango, el problema salta a la vista sin buscar. Aquí tienes el estándar aplicado con paletas de color concretas, ejemplos de configuración y plantillas que funcionan en cualquier plataforma SCADA.

Si necesitas una introducción más general al diseño de interfaces para operadores, empieza por la guía sobre HMI Moderna: Diseño de Interfaces para Planta. Este artículo va directamente al estándar y cómo aplicarlo.

Qué es ISA-101 y por qué cambia las reglas del diseño de pantallas HMI

ISA-101 (Human Machine Interfaces for Process Automation Systems) no es un manual de estilo con capturas bonitas. Es un framework con tres capas:

1. Filosofía de HMI: documento de alto nivel que establece los principios de diseño para toda la instalación.
2. Guía de estilo: especificaciones concretas de colores, tipografía, símbolos, layouts y navegación.
3. Ciclo de vida: cómo se crean, validan, mantienen y retiran las pantallas.

La diferencia con el enfoque tradicional es de fondo: en un diseño clásico, la pantalla intenta representar visualmente el proceso (P&ID con colores). En ISA-101, la pantalla es un instrumento de trabajo optimizado para detectar anomalías. Nadie necesita admirar un diagrama bonito a las 3 de la mañana.

Los cuatro pilares de ISA-101

Pilar	Principio	Consecuencia práctica
Diseño para lo anormal	El 95 % del tiempo todo va bien; la HMI debe brillar en el 5 % restante	Estado normal = gris, sin color. Anomalía = color inmediato
Jerarquía de pantallas	Del general al detalle en 3 clics máximo	4 niveles: panorámica → área → detalle → soporte
Uso intencional del color	El color es una señal, no decoración	Paleta restringida, fondo neutro, rojo solo para alarmas reales
Contexto operativo	Un número sin rango es inútil	Barras analógicas, indicadores de tendencia, límites visibles

Los 4 niveles de pantallas: de lo general al detalle en 3 clics

En demasiadas plantas, el operador tiene acceso a 200 pantallas sin orden ni criterio. Hemos visto sistemas donde llegar al detalle de un equipo requiere 8 clics y saber de memoria la ruta. ISA-101 resuelve esto con cuatro niveles claros.

Nivel 1 — Panorámica de planta

Una sola pantalla que muestra el estado de toda la instalación. Sin valores numéricos detallados — solo indicadores de estado por área y KPIs principales.

El test es simple: ¿puede el operador responder “¿está todo bien o hay algún área con problemas?” en menos de 5 segundos mirando esta pantalla? Si no, está mal diseñada.

Elementos típicos:

• Bloques por área/unidad con indicador de color (gris = normal, amarillo = advertencia, rojo = alarma)
• KPIs de producción globales
• Contador de alarmas activas por prioridad
• No se incluyen valores de proceso individuales

Nivel 2 — Área o unidad

Cada bloque del nivel 1 enlaza con su pantalla de nivel 2. Aquí se muestra el proceso de un área con sus variables principales, lazos de control, estados de equipos y tendencias embebidas.

Elementos típicos:

• Diagrama de flujo simplificado (no el P&ID completo)
• Variables clave con barras analógicas que muestran el rango normal
• Estado de bombas, válvulas y motores (on/off, manual/auto)
• Mini-tendencias de las 2-3 variables más importantes
• Enlace directo a las pantallas de detalle de cada equipo

Nivel 3 — Detalle de equipo

Pantalla dedicada a un equipo o lazo de control concreto. Aquí se concentra toda la información operativa: faceplates del PID, configuración de setpoints, diagnósticos, históricos recientes.

Nivel 4 — Soporte

Tendencias históricas, tablas de alarmas, documentación, procedimientos operativos. No son pantallas que el operador consulte continuamente, sino bajo demanda.

Ejemplo de árbol de navegación

Planta Completa (Nivel 1)
├── Recepción de Materias Primas (Nivel 2)
│   ├── Tolva T-101 (Nivel 3)
│   ├── Transportador C-201 (Nivel 3)
│   └── Báscula W-301 (Nivel 3)
├── Reactor (Nivel 2)
│   ├── Reactor R-401 Faceplate (Nivel 3)
│   ├── Sistema de Refrigeración (Nivel 3)
│   └── Dosificación (Nivel 3)
├── Envasado (Nivel 2)
└── Utilidades (Nivel 2)
    ├── Compresores (Nivel 3)
    ├── Calderas (Nivel 3)
    └── Tratamiento de Agua (Nivel 3)

La regla: desde cualquier punto, un solo clic para volver a la panorámica. Desde la panorámica, máximo 3 clics hasta cualquier detalle.

Paleta de colores: donde ISA-101 marca la mayor diferencia

Este es el cambio más visible y el más transformador. Si tus HMIs tienen tuberías azules, tanques verdes, fondos negros y textos en verde neón compitiendo con alarmas rojas, básicamente todo grita al mismo tiempo y nada destaca. ISA-101 propone una paleta restringida donde cada color tiene un significado único.

Fondo y elementos estáticos

Elemento	Color recomendado	RGB aproximado	Justificación
Fondo de pantalla	Gris medio	(192, 192, 192)	Neutro, reduce fatiga visual en turnos largos
Tuberías y equipos	Gris oscuro	(128, 128, 128)	Visibles pero sin competir con señales de estado
Texto estático (etiquetas)	Gris muy oscuro / negro	(64, 64, 64)	Legible sin atraer atención excesiva
Bordes y divisiones	Gris claro	(160, 160, 160)	Estructura sin ruido visual

Elementos dinámicos — estado normal

Elemento	Color	Nota
Valores de proceso en rango	Negro o gris oscuro	Sin color = todo bien
Equipos en marcha (normal)	Gris medio	No se destaca lo esperado
Válvulas abiertas (posición esperada)	Gris medio	Mismo principio

Elementos dinámicos — estados anormales

Estado	Color	RGB aproximado	Uso
Alarma crítica	Rojo	(255, 0, 0)	Requiere acción inmediata
Alarma alta	Naranja	(255, 165, 0)	Requiere acción pronto
Advertencia	Amarillo	(255, 255, 0)	Desviación que puede empeorar
Información	Cian/azul claro	(0, 200, 255)	Estado informativo, sin acción requerida
Valor fuera de rango (sin alarma)	Magenta	(255, 0, 255)	Señal de calidad de dato o sensor

¿Por qué gris y no negro o blanco?

Los estudios de ergonomía visual son claros:

• Fondo negro: genera fatiga en turnos de 8-12 horas. Los colores brillantes sobre negro parecen “vibrar” y dificultan la lectura prolongada.
• Fondo blanco: demasiado brillo en salas de control con poca luz. Los colores de alarma pierden impacto.
• Fondo gris medio: el compromiso óptimo. Reduce el brillo total, los colores de alarma destacan por contraste y resulta cómodo para turnos de 12 horas. No es bonito, pero funciona.

Ejemplo de configuración de paleta en Ignition

En Ignition Perspective (uno de los SCADA más utilizados para HMI web moderna), la paleta ISA-101 se puede implementar como tema CSS:

/* Tema ISA-101 para Ignition Perspective */
:root {
  /* Fondos */
  --hmi-bg-primary: #C0C0C0;       /* Gris medio - fondo principal */
  --hmi-bg-secondary: #D0D0D0;     /* Gris claro - paneles */
  --hmi-bg-header: #A0A0A0;        /* Gris oscuro - cabeceras */

  /* Elementos estáticos */
  --hmi-pipe: #808080;             /* Tuberías y equipos */
  --hmi-text-label: #404040;       /* Etiquetas estáticas */
  --hmi-text-value-normal: #1A1A1A; /* Valores en rango */

  /* Estados anormales */
  --hmi-alarm-critical: #FF0000;    /* Rojo - alarma crítica */
  --hmi-alarm-high: #FFA500;        /* Naranja - alarma alta */
  --hmi-alarm-warning: #FFD700;     /* Amarillo dorado - advertencia */
  --hmi-alarm-info: #00C8FF;        /* Cian - informativo */
  --hmi-value-bad: #FF00FF;         /* Magenta - dato malo/fuera de rango */

  /* Estados operativos */
  --hmi-running-normal: #808080;    /* Equipo en marcha (esperado) */
  --hmi-stopped-normal: #808080;    /* Equipo parado (esperado) */
  --hmi-manual-mode: #00BFFF;       /* Modo manual - requiere atención */
}

Aplica esta configuración a todos los componentes del proyecto y te olvidas de la coherencia — queda resuelta por defecto.

Alarmas: el elefante en la habitación

De nada sirve diseñar pantallas limpias si después configuras 3.000 alarmas sin priorizar. ISA-101 e ISA-18.2 van de la mano, y esto es lo que más impacto tiene en la operación real.

Racionalización de alarmas

Antes de tocar una sola pantalla, haz esto: revisa cada alarma configurada y responde a tres preguntas:

1. ¿Requiere una respuesta del operador?
2. ¿Tiene un tiempo de respuesta definido?
3. ¿Qué debe hacer el operador cuando se activa?

Si la respuesta a la primera pregunta es “no”, no es una alarma. Es ruido. Elimínala del sistema de alarmas. Si necesitas verla, ponla como información en nivel 3 o 4.

Priorización

ISA-18.2 recomienda 3 o 4 niveles de prioridad basados en la severidad de la consecuencia y el tiempo de respuesta disponible:

Prioridad	Tiempo de respuesta	Consecuencia si no se actúa	Representación visual
Crítica	< 5 minutos	Daño a personas, medio ambiente o equipos mayores	Rojo parpadeante → rojo fijo al reconocer
Alta	5-30 minutos	Pérdida de producción significativa o daño menor	Naranja parpadeante → naranja fijo
Media	30 min - 4 horas	Desviación de calidad o eficiencia	Amarillo parpadeante → amarillo fijo
Baja	> 4 horas / próximo turno	Mantenimiento preventivo, diagnóstico	Sin parpadeo, indicador estático

Banner de alarmas

En el diseño ISA-101, toda pantalla (excepto la panorámica) incluye un banner de alarmas fijo en la parte superior o inferior. Este banner muestra:

• Número total de alarmas activas por prioridad
• La alarma más reciente no reconocida
• Acceso directo a la lista completa de alarmas

┌─────────────────────────────────────────────────────────┐
│ 🔴 2 CRÍTICAS  🟠 5 ALTAS  🟡 12 MEDIAS  │ Última: T-101 Nivel Alto 14:32 │
└─────────────────────────────────────────────────────────┘

El benchmark de ISA-18.2 es contundente: 6-12 alarmas por hora en promedio, no más de una alarma en los 10 minutos siguientes a un evento mayor. Si tu planta genera 300 alarmas por hora, el problema no es la pantalla — es que has convertido el sistema de alarmas en un generador de ruido.

Barras analógicas: un número suelto no dice nada

“73.4 °C” — ¿es bueno, malo o catástrofe? Si el operador tiene que saberlo de memoria para 200 variables durante un turno de 12 horas, algo está mal en el diseño.

Barras analógicas con rangos

La solución ISA-101 es complementar (o sustituir) el valor numérico con una barra analógica que muestra visualmente dónde se encuentra el valor respecto a sus límites:

Temperatura Reactor R-401
┌──────────────────────────────────────────┐
│    LL    L         SP         H    HH    │
│    ├─────┼──────────┼──────────┼─────┤   │
│    50   60    ▼     80        95   100   │
│              73.4°C                      │
│    [====████████=========----------]     │
│     rojo  amarillo  GRIS   amarillo rojo │
└──────────────────────────────────────────┘

• La zona gris (entre L y H) representa el rango normal — sin color, sin alarma
• Las zonas amarillas (L-LL y H-HH) indican advertencia
• Las zonas rojas (por debajo de LL o por encima de HH) indican alarma crítica
• La posición del indicador muestra inmediatamente si el proceso está en zona segura o acercándose a un límite

Configuración en WinCC Unified (Siemens)

En WinCC Unified, las barras analógicas se configuran mediante el objeto Bar del Runtime:

{
  "type": "Bar",
  "processValue": "Tag_R401_Temperature",
  "orientation": "horizontal",
  "ranges": [
    { "from": 0, "to": 50, "color": "#FF0000", "label": "LL" },
    { "from": 50, "to": 60, "color": "#FFA500", "label": "L" },
    { "from": 60, "to": 95, "color": "#808080", "label": "Normal" },
    { "from": 95, "to": 100, "color": "#FFA500", "label": "H" },
    { "from": 100, "to": 120, "color": "#FF0000", "label": "HH" }
  ],
  "setpoint": { "value": 80, "visible": true, "color": "#00FF00" },
  "showNumericValue": true,
  "font": { "family": "Arial", "size": 14, "weight": "bold" }
}

Sparklines y mini-tendencias

Además de la barra analógica, ISA-101 recomienda incluir mini-tendencias (sparklines) junto a las variables críticas. Una línea que muestre las últimas 1-2 horas permite al operador detectar tendencias antes de que se activen las alarmas.

La barra analógica responde a “¿dónde estoy?”; la mini-tendencia responde a “¿hacia dónde voy?”. Juntas, el operador anticipa problemas antes de que salte la alarma.

Navegación y layout

El operador nunca debería perderse en su propia HMI. Parece obvio, pero pasa constantemente en sistemas con 200 pantallas sin estructura.

Principios de navegación

• Máximo 3 clics desde la panorámica hasta el detalle de cualquier equipo
• Botón de inicio visible en toda pantalla, que lleva siempre al nivel 1
• Breadcrumb o indicador de posición: el operador debe saber en todo momento dónde está dentro de la jerarquía
• Navegación consistente: los botones de navegación están siempre en el mismo lugar, con el mismo aspecto
• Sin menús emergentes que bloqueen la vista del proceso

Layout estándar de pantalla

ISA-101 sugiere una estructura de pantalla con zonas fijas:

┌─────────────────────────────────────────────────┐
│  HEADER: Título | Breadcrumb | Fecha/Hora       │
├─────────────────────────────────────────────────┤
│  BANNER DE ALARMAS                               │
├──────────────────────────────────┬──────────────┤
│                                  │              │
│  ÁREA DE PROCESO                 │  PANEL       │
│  (diagrama, valores,             │  LATERAL     │
│   barras analógicas)             │  (navegación,│
│                                  │   KPIs,      │
│                                  │   mini-tend.)│
│                                  │              │
├──────────────────────────────────┴──────────────┤
│  FOOTER: Estado de comunicación | Usuario        │
└─────────────────────────────────────────────────┘

Esta estructura se mantiene idéntica en todas las pantallas — solo cambia el contenido del área de proceso. El operador siempre sabe dónde buscar sin pensarlo.

Tipografía: si el operador entrecierra los ojos, has fallado

Un aspecto que muchos integradores ignoran y que tiene impacto directo en la operación:

• Fuente sans-serif: Arial, Helvetica o similares. Las fuentes con serifas son más difíciles de leer en pantallas industriales.
• Tamaño mínimo: los valores de proceso deben ser legibles a 2-3 metros de distancia. En un monitor de 24”, esto implica un tamaño mínimo de 16-18 px para valores y 12-14 px para etiquetas.
• Contraste mínimo: ratio de contraste de al menos 4.5:1 entre texto y fondo (estándar WCAG AA).
• Sin cursiva ni decorativa: los estilos decorativos dificultan la lectura rápida.

Cálculo de tamaño de fuente según distancia

Una regla práctica para calcular el tamaño mínimo de texto:

Altura mínima del carácter (mm) = Distancia de lectura (mm) / 200

Para un operador sentado a 1.5 m del monitor:

1500 mm / 200 = 7.5 mm de altura mínima

En un monitor Full HD de 24” (altura visible ~300 mm):

7.5 mm / 300 mm × 1080 px = ~27 px

Eso es más grande de lo que la mayoría de HMIs usan por defecto. Corrígelo.

Caso real: rediseño en planta de tratamiento de agua

Los números hablan mejor que la teoría. Planta de tratamiento de agua potable con:

• 3 pozos de captación con bombas sumergibles
• Planta de tratamiento: coagulación, floculación, sedimentación, filtración y cloración
• 2 depósitos de almacenamiento
• Red de distribución con 5 estaciones de bombeo

Antes del rediseño

La HMI original era un caso típico:

• 85 pantallas sin jerarquía clara
• Fondo negro con tuberías azules en 3D
• Todos los valores en verde neón (difícil de leer en turnos largos)
• 1.200 alarmas configuradas, de las cuales el 70 % eran “chatarra” (alarmas repetitivas o sin acción asociada)
• Tiempo medio de detección de anomalía por el operador: 8-12 minutos

Después del rediseño

El resultado:

• 1 pantalla de nivel 1: estado general de los 3 pozos, la planta de tratamiento, los depósitos y las estaciones de bombeo. Un vistazo de 3 segundos para saber si todo va bien.
• 6 pantallas de nivel 2: una por cada área funcional (pozos, coagulación/floculación, sedimentación/filtración, cloración, depósitos, distribución).
• 22 pantallas de nivel 3: detalle de equipos principales con faceplates de PID, diagnósticos y tendencias embebidas.
• 5 pantallas de nivel 4: tendencias históricas de calidad de agua, histórico de alarmas, informes de turno.

Total: 34 pantallas frente a las 85 originales.

Las alarmas se racionalizaron según ISA-18.2: de 1.200 a 180 alarmas activas. El tiempo de detección de anomalías bajó de 8-12 minutos a 45 segundos. Ese dato solo ya justifica el proyecto.

Indicadores de rendimiento del rediseño

Métrica	Antes	Después	Mejora
Pantallas totales	85	34	-60 %
Alarmas configuradas	1.200	180	-85 %
Alarmas/hora en operación normal	45	4	-91 %
Tiempo medio detección de anomalía	8-12 min	< 1 min	> 85 %
Clics para llegar al detalle	5-8	2-3	-60 %
Errores operativos por turno	3.2	0.8	-75 %

Los errores que arruinan una implementación de ISA-101

Adoptar ISA-101 no es simplemente cambiar el fondo a gris y quitar colores. Lo hemos visto muchas veces, y estos son los errores que se repiten:

1. Cambiar los colores sin cambiar la estructura

El error más común con diferencia. Aplicas la paleta de grises pero mantienes las 200 pantallas desorganizadas, sin jerarquía ni racionalización de alarmas. El resultado: una HMI gris que sigue siendo igual de difícil de usar. El gris no es mágico.

2. No involucrar a los operadores

Son ellos quienes miran las pantallas 8-12 horas al día. Un diseño hecho solo por ingenieros de automatización organiza la información según el esquema del PLC, no según el flujo de trabajo real. Siéntate con los operadores antes de diseñar.

3. Mantener alarmas sin racionalizar

Rediseñas las pantallas pero dejas las 3.000 alarmas. El banner permanece saturado, el operador ignora todo — exactamente lo que querías evitar.

4. No documentar la filosofía ni la guía de estilo

Sin estos documentos, cada integrador o ampliación futura aplica criterios diferentes. En 2-3 años la coherencia visual se pierde y vuelves al punto de partida.

5. No planificar el mantenimiento de las pantallas

Las pantallas HMI no son “instalar y olvidar”. Cada ampliación de planta, cada nuevo equipo, cada cambio de proceso requiere actualizar las pantallas siguiendo la guía de estilo documentada. Sin un procedimiento de gestión del cambio, la entropía gana.

Qué plataformas SCADA facilitan (y cuáles complican) la implementación

Ignition (Inductive Automation)

La mejor opción para ISA-101 ahora mismo. Ignition Perspective permite temas CSS completos, componentes reutilizables y templates. Su modelo de licencia (servidor, no por cliente) hace que añadir estaciones de operador no cueste más. Para integración avanzada, Automatizar SCADA con IA y Python.

Siemens WinCC Unified

La evolución de WinCC sobre TIA Portal. Soporta temas globales y tiene librerías de objetos HMI prediseñados para high-performance. Si tu planta es Siemens, es la opción natural. Si no, la flexibilidad no está a la altura de Ignition.

AVEVA (Wonderware) InTouch / System Platform

Sus librerías “situational awareness” son probablemente las más completas para ISA-101 sin configuración adicional. La contrapartida: la curva de aprendizaje de la plataforma es considerable.

FactoryTalk View (Rockwell)

Soporta ISA-101 pero requiere más trabajo manual. Las versiones recientes han mejorado con estilos globales, aunque sigue un paso por detrás de Ignition y AVEVA en este aspecto.

Integración con MES

Una HMI moderna no opera aislada. Las pantallas de nivel 1 y 2 incorporan KPIs de producción del MES (OEE, rendimiento, calidad). El operador ve no solo el estado del proceso sino su impacto en producción — contexto que cambia cómo toma decisiones. La guía sobre cómo implementar un sistema MES en planta detalla esta integración.

Checklist de implementación

Fase 1 — Documentación

• Redactar filosofía de HMI (principios, roles, responsabilidades)
• Crear guía de estilo (paleta de colores, tipografía, layout, símbolos)
• Inventariar todas las pantallas existentes y sus funciones

Fase 2 — Racionalización de alarmas

• Auditar todas las alarmas configuradas
• Eliminar alarmas sin acción asociada
• Asignar prioridad (crítica/alta/media/baja) a cada alarma restante
• Documentar la acción esperada del operador para cada alarma

Fase 3 — Diseño de pantallas

• Diseñar pantalla de nivel 1 (panorámica)
• Diseñar pantallas de nivel 2 (áreas) con feedback de operadores
• Crear templates para nivel 3 (faceplates, barras analógicas)
• Implementar banner de alarmas consistente
• Configurar navegación (breadcrumb, botón de inicio, máximo 3 clics)

Fase 4 — Validación

• Pruebas con operadores en simulación (no en producción)
• Medir tiempos de detección de anomalías antes/después
• Ajustar según feedback (iteración con operadores)
• Formación a todos los turnos

Fase 5 — Mantenimiento

• Procedimiento de gestión del cambio para nuevas pantallas
• Revisión periódica de alarmas (mínimo anual)
• Auditoría de cumplimiento de la guía de estilo

El resultado que puedes esperar

Los números son consistentes en todos los sectores: menos alarmas, detección más rápida, menos errores operativos, operadores menos fatigados. La inversión en rediseño se recupera en 6-12 meses solo por la reducción de incidentes y paradas no planificadas.

ISA-101 no es cambiar colores. Es repensar cómo el operador interactúa con el proceso y diseñar pantallas como instrumentos de trabajo. Menos es más. El gris es el nuevo bonito.