A paleta de cores tranquila de HMI: porque é que o cinzento vence

Entra numa sala de controlo construída no final dos anos 90 e o ecrã parece muitas vezes uma árvore de Natal: bombas vermelhas, motores verdes, depósitos azuis, tubagens amarelas, botões com gradientes, sombras, vasos 3D fotorrealistas. Alguém na fase de design perguntou “de que cor deve ser a bomba?” e a resposta foi uma preferência pessoal em vez de uma regra do sistema.

O resultado é um ecrã cheio de cor onde a cor já não significa nada. Quando tudo é colorido, o olho do operador não consegue distinguir qual o objeto vermelho que está em alarme e qual está apenas decorado a vermelho. É este o fenómeno por trás da fadiga crónica de alarmes, dos eventos perdidos e da longa conversa da ISA-101 que terminou com: começa em cinzento e ganha cada cor.

1. A regra de cor de dois eixos

A filosofia de cor da ISA-101 condensa-se em duas regras:

1. A cor codifica o estado, não a identidade. Uma bomba é uma bomba pela sua forma, não porque é azul. Duas bombas na mesma linha devem ser desenhadas de forma idêntica — só o seu estado difere.
2. A cor saturada está reservada para condições anormais e mudanças de estado do operador. O vermelho, laranja, amarelo e azul totalmente saturados são orçamento gasto. Se os gastares em decoração, não te sobra nada para os alarmes.

2. A paleta canónica

Superfícies (a maior parte do ecrã)

Prioridades de alarme

Estado do equipamento

É tudo. Doze cores no total, metade delas cinzentas. Todo o ecrã ISA-101 moderno vive dentro desta paleta. Quando vês um ecrã que a viola, normalmente consegues rastrear a violação até às decisões mais antigas do projeto — e normalmente consegues prever que os operadores aprenderam a ignorar pelo menos uma das cores “importantes” porque foi usada decorativamente noutro lado.

3. Porque é que o cinzento funciona

O cinzento funciona porque não compete com as cores de alarme. A retina tem um orçamento de atenção limitado — o que é notado é o que é diferente do que está à volta. Um indicador P1 vermelho num mar cinzento salta à vista instantaneamente. O mesmo indicador num ecrã cheio de cores de rebuçado é apenas mais um elemento colorido, estatisticamente indistinguível de uma etiqueta vermelha decorativa.

As HMIs tranquilas não são bonitas. Parecem painéis de instrumentos — e é esse precisamente o objetivo.

Isto aplica-se também aos gráficos: abandona os biseis 3D, os gradientes, as sombras, os reflexos brilhantes. O 2D plano vence todos os estudos de usabilidade porque a correspondência de padrões do operador não tem de fazer trabalho extra para extrair a informação abstrata da decoração fotorrealista.

4. Daltonismo e contraste

Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência de visão de cores vermelho-verde. Desenhar alarmes que dependem unicamente de vermelho vs verde para comunicar a prioridade exclui uma parte significativa da tua população de operadores.

A solução não é mudar as cores — os engenheiros esperam que o vermelho signifique crítico — mas acrescentar codificação redundante:

• Forma: os alarmes P1 recebem um badge triangular, os P2 um hexágono, os P3 um quadrado, os P4 um círculo. Mesmo sem as cores, a prioridade é legível.
• Posição / padrão: os badges de alarme aparecem num canto consistente do símbolo, com a prioridade codificada pelo texto do badge (P1, P2, …) para além da cor.
• Contraste: as WCAG AA recomendam 4,5:1 para texto corrente sobre o fundo. Emparelha cada cor de alarme com texto branco e rácios de contraste testados.

5. Antipadrões

Cor decorativa

“Faz a caldeira laranja porque está quente.” Não. A caldeira é cinzenta; o seu indicador de temperatura usa uma cor de estado quando está fora do intervalo. Colorir o próprio equipamento treina os operadores a ignorar o sinal de cor que realmente importa.

Botões com gradiente e efeito vidro

Os gradientes desperdiçam informação de cor por muitos tons, nenhum dos quais significa nada. Também envelhecem mal — o que parecia “moderno” em 2008 parece datado em 2024. Os preenchimentos planos não datam.

Piscar permanente

A animação é um recurso precioso. Um elemento a piscar deve significar “novo alarme, requer reconhecimento.” Uma vez reconhecido, o alarme fica sólido (ainda vermelho) mas o piscar para. O piscar permanente degrada-se em ruído de fundo em poucas horas.

Cor para dados normais

“Mostra o caudal a azul, a temperatura a vermelho.” Isto colide com o significado do alarme. Usa cinzento neutro para leituras numéricas normais e passa a uma cor de estado só quando o valor sai do intervalo normal de operação.

Vasos 3D e fotorrealismo

Um depósito renderizado em perspetiva com brilhos cromados parece impressionante numa demonstração de vendas e atrasa a leitura do operador em 20 a 30% nos estudos. Usa 2D plano — o cérebro faz correspondência de padrões mais depressa em formas simples.

6. Juntando tudo: um exemplo “antes/depois”

Imagina um ecrã com três bombas. A versão “antes” usa as formas por defeito da biblioteca do WinCC ME:

• Bombas desenhadas em azul saturado com símbolos brancos de curva de bomba.
• Tags a flutuar em texto vermelho porque o vermelho “destaca-se”.
• Fundo com um gradiente ténue de branco a azul claro.
• Uma bomba em alarme — o seu contorno está agora a piscar a vermelho, por cima do corpo azul.

O que o operador vê: um ecrã colorido onde um elemento está a piscar. Qual elemento? O olho tem de procurar por entre azul / vermelho / branco / gradiente antes de encontrar a bomba em alarme.

A versão “depois” usando a paleta tranquila:

• Bombas desenhadas com preenchimento cinzento claro e contorno cinzento escuro (em marcha) ou verde sólido para o estado.
• Tags em cinzento escuro monoespaçado (P-101, P-102, P-103).
• Fundo plano #C8C8C8.
• A bomba em alarme mostra um pequeno badge P1 vermelho no canto. O corpo da bomba continua a dizer “em marcha” porque é o que está.

Agora a bomba em alarme salta à vista. O olho não precisa de procurar. É para isto que serve a HMI tranquila.

7. Usar a paleta no Symbol Builder

As doze cores acima são as amostras integradas do Symbol Builder: desenhas o corpo do equipamento em cinzento neutro e aplicas uma cor de estado ou de alarme apenas onde a máquina de estados o exige. Os símbolos publicados na biblioteca da comunidade são verificados automaticamente quanto à paleta e à espessura de traço antes de receberem a marca conforme com a ISA-101, por isso o que encontras em Explore já segue a regra. Podes ainda clarear ou escurecer o cinzento ou ajustar os tons de alarme ao estilo de casa de um cliente (dentro do razoável — mantém-nos distinguíveis) e decidir se as tags são gravadas ou sobrepostas como objetos de texto separados.

8. Leitura adicional

• ISA-101.01-2015 — “Human Machine Interfaces for Process Automation Systems”
• Bill Hollifield et al. — The High Performance HMI Handbook
• Diretrizes de contraste WCAG 2.1 (W3C)
• The ASM Consortium — “Effective Operator Display Design”