Prototipagem de IHM com UX/UI e ISA101: PLC Do Rascunho ao Software 36

Uma IHM bem projetada não apenas otimiza a eficiência operacional, mas também garante a segurança e a integridade do sistema. No entanto, o desenvolvimento de IHMs eficazes vai muito além da simples disposição de botões e indicadores em uma tela. É aqui que a sinergia entre a Experiência do Usuário (UX), a Interface do Usuário (UI) e a norma ISA-101 se torna fundamental.

Vamos explorar como a prototipagem de IHMs, guiada por princípios de UX/UI e em conformidade com a ISA-101, pode transformar o desenvolvimento de software para automação. Então vamos continuar a série PLC do Rascunho ao Software, mas agora com foco em IHM, usando nosso software do Magazine de Paletes.

A Importância da Prototipagem em Projetos de IHM

A prototipagem é uma etapa essencial no ciclo de desenvolvimento de qualquer interface, e no contexto industrial, sua importância é ainda maior. Um protótipo é uma representação interativa da IHM, que permite a validação de conceitos de design, a identificação de problemas de usabilidade e a coleta de feedback dos operadores antes mesmo de escrever uma única linha de código. Os principais benefícios da prototipagem de IHMs incluem:

Validação de Requisitos: Permite verificar se a interface atende a todos os requisitos funcionais e operacionais definidos no projeto.

Redução de Custos e Tempo: Identificar e corrigir problemas de design na fase de prototipagem é muito mais rápido e barato do que fazer alterações no software já desenvolvido e em produção.

Melhora da Usabilidade: Testar o protótipo com operadores reais ajuda a garantir que a interface seja intuitiva, fácil de aprender e eficiente de usar.

Engajamento das Partes Interessadas: Um protótipo tangível facilita a comunicação e o alinhamento entre a equipe de desenvolvimento, os operadores e a gerência.

Segurança Operacional: Permite simular cenários de falha e emergência, garantindo que os operadores possam responder de forma rápida e correta em situações críticas.

A Norma ISA-101 como Guia para o Design de IHMs

A norma ANSI/ISA-101.01-2015, "Human Machine Interfaces for Process Automation Systems", é um guia indispensável para o desenvolvimento de IHMs de alta performance. Ela estabelece um framework completo para o design, implementação, operação e manutenção de interfaces, com o objetivo de otimizar a interação entre o operador e o sistema. Os princípios fundamentais da ISA-101 incluem:

Design Centrado no Operador: A IHM deve ser projetada levando em consideração as necessidades, habilidades e limitações dos operadores.

Hierarquia e Navegação Claras: As informações devem ser organizadas de forma lógica e a navegação entre as telas deve ser intuitiva.

Uso Criterioso de Cores: A norma recomenda o uso de uma paleta de cores limitada, com cores de fundo neutras (tons de cinza) e cores vibrantes reservadas para indicar estados anormais e alarmes.

Gerenciamento de Alarmes: A IHM deve apresentar os alarmes de forma clara e priorizada, evitando a sobrecarga de informações e ajudando o operador a identificar e resolver os problemas mais críticos.

Consistência Visual: A padronização de símbolos, fontes e layout em todas as telas da IHM reduz a carga cognitiva do operador e minimiza a probabilidade de erros.

Ferramentas para Prototipagem de IHMs

Existem diversas ferramentas no mercado que podem ser utilizadas para criar protótipos de IHMs, desde softwares de design gráfico até plataformas especializadas em prototipagem interativa. A escolha da ferramenta ideal depende da complexidade do projeto, do nível de fidelidade desejado para o protótipo e da familiaridade da equipe com o software. Algumas das ferramentas mais populares incluem:

Figma: Uma ferramenta de design de interfaces baseada na web, que permite a criação de protótipos interativos e a colaboração em tempo real entre a equipe, e com IA generativa.

Adobe XD: Parte do ecossistema da Adobe, o XD é uma ferramenta poderosa para design de UI/UX, que oferece recursos avançados de prototipagem e animação.

Balsamiq: Uma ferramenta de wireframing de baixa fidelidade, ideal para esboçar rapidamente as ideias iniciais e validar a estrutura da interface.

Axure RP: Uma ferramenta de prototipagem de alta fidelidade, que permite a criação de protótipos complexos com lógica condicional e interações avançadas.

Software de IHM/SCADA: Muitos fabricantes de software de IHM/SCADA, como Siemens (WinCC), Rockwell (FactoryTalk View) e Inductive Automation (Ignition), Codesys WebVisu, oferecem recursos de simulação e prototipagem em suas próprias plataformas.

Exemplo Prático: Prototipagem da IHM do Magazine de Paletes

Vamos agora aplicar os conceitos de UX/UI e as diretrizes da ISA-101 na prototipagem da IHM para o nosso magazine de paletes. Com base nos requisitos definidos na série "PLC do Rascunho ao Software", vamos criar os protótipos para as telas de sinótico, falhas e histórico de falhas.

Tela de Sinótico (Visão Geral do Processo)

A tela de sinótico é a principal interface do operador com o magazine de paletes. Ela deve fornecer uma visão geral do estado do equipamento e permitir o acesso rápido às principais funções. Seguindo os princípios da ISA-101, vamos projetar uma tela limpa e organizada, com as informações mais importantes em destaque.

Layout: A tela será dividida em três áreas principais: um cabeçalho com informações de status, uma área central com a representação gráfica do magazine e um rodapé com os botões de navegação.

Cores: Utilizaremos a paleta fundo cinza médio (RGB 192,192,192), texto preto (RGB 0,0,0), branco (RGB 255,255,255) para estado normal, amarelo puro (RGB 255,255,0) para atenção, vermelho puro (RGB 255,0,0) para alarmes críticos, azul (RGB 0,0,255) para informações do operador e magenta (RGB 255,0,255) para funções de segurança.

Elementos Visuais:

Cabeçalho: Incluirá indicadores de status para "Segurança OK", "Modo Automático", "Modo Manual" e um banner para exibir o alarme mais recente.

Área Central: Uma representação esquemática do magazine de paletes, com animações para indicar o movimento dos atuadores e a presença de paletes nos sensores.

Rodapé: Botões de navegação para as telas de "Movimentos Manuais", "Falhas Ativas" e "Histórico de Falhas", além de um botão de "Reset de Falhas".

Tela de Falhas At

Tela de Falhas Ativas

A tela de falhas ativas deve apresentar uma lista clara e organizada de todos os alarmes presentes no sistema. O objetivo é ajudar o operador a identificar rapidamente a causa raiz do problema e tomar as ações corretivas necessárias.

Layout: A tela será dominada por uma tabela de alarmes, com colunas para "Data e Hora", "Descrição da Falha" e "Prioridade".

Cores: As linhas da tabela serão coloridas de acordo com a prioridade do alarme (vermelho para alta prioridade, amarelo para média e cinza para baixa).

Elementos Visuais:

Tabela de Alarmes: Exibirá até 20 falhas por página, com a possibilidade de navegar entre as páginas.

Botões de Ação: Botões para "Reconhecer Alarme", "Silenciar Alarme" e "Ajuda" (que pode levar a um manual de solução de problemas).

Tela de Histórico de Falhas

A tela de histórico de falhas permite a análise de eventos passados, o que é fundamental para a manutenção preditiva e a melhoria contínua do processo.

Layout: Similar à tela de falhas ativas, com uma tabela para exibir o histórico de alarmes.

Elementos Visuais:

Tabela de Histórico: Incluirá colunas para "Data e Hora de Ocorrência", "Data e Hora de Reconhecimento", "Descrição da Falha" e "Operador".

Filtros de Pesquisa: Campos para filtrar o histórico por data, tipo de alarme ou palavra-chave.

Guia Prático: Criando Protótipos Alinhados à Norma ISA-101

Para garantir que os protótipos de IHM estejam em conformidade com a norma ISA-101, é fundamental seguir um processo estruturado que considere tanto os aspectos técnicos quanto os fatores humanos. Este guia prático apresenta um roteiro passo a passo para criar protótipos eficazes e alinhados com as melhores práticas da indústria.

Fase 1: Análise de Requisitos e Contexto Operacional

Antes de iniciar qualquer trabalho de design, é essencial compreender profundamente o contexto operacional e os requisitos específicos do sistema.

Fase 2: Definição da Arquitetura de Informação

Com os requisitos e o contexto operacional bem compreendidos, o próximo passo é definir a arquitetura de informação da IHM. Isso envolve a organização hierárquica das informações, a definição da navegação entre telas e a priorização do conteúdo.

No magazine de paletes, a tela de sinótico ocupa o nível mais alto, fornecendo uma visão geral do processo, enquanto as telas de detalhamento (falhas, histórico, movimentos manuais) ocupam níveis inferiores.

A navegação deve ser intuitiva e consistente em toda a IHM. A ISA-101 recomenda o uso de padrões de navegação familiares aos operadores, evitando estruturas complexas ou não convencionais que possam causar confusão.

A priorização do conteúdo é fundamental para evitar a sobrecarga de informações. Nem todas as informações têm a mesma importância para o operador em um dado momento. A ISA-101 orienta o uso de técnicas de agrupamento visual, hierarquia tipográfica e uso criterioso de cores para destacar as informações mais relevantes.

Fase 3: Design Visual e Aplicação dos Princípios da ISA-101

O design visual da IHM deve seguir rigorosamente os princípios estabelecidos pela ISA-101, garantindo não apenas a conformidade com a norma, mas também a otimização da experiência do operador.

A paleta de cores é um dos aspectos mais críticos do design. A ISA-101 recomenda o uso de cores de fundo neutras, preferencialmente tons de cinza, para reduzir a fadiga visual e criar um ambiente visualmente confortável para operação prolongada. As cores vibrantes devem ser reservadas exclusivamente para indicar estados anormais, alarmes ou condições que requerem atenção imediata do operador.

.

O layout deve seguir princípios de design limpo e organizado, evitando a poluição visual que pode distrair o operador ou dificultar a localização de informações importantes. O uso de espaços em branco, alinhamento consistente e agrupamento lógico de elementos contribui para uma interface mais eficaz.

Fase 4: Prototipagem Interativa e Validação

A criação do protótipo interativo é onde todos os conceitos e decisões de design ganham vida. Esta fase permite a validação prática das soluções propostas e a identificação de problemas de usabilidade antes do desenvolvimento do software final.

O protótipo deve incluir todas as principais funcionalidades da IHM, permitindo a simulação de cenários operacionais reais. No caso do magazine de paletes, isso inclui a navegação entre telas, a simulação de alarmes, a interação com controles manuais e a visualização de dados históricos.

A validação do protótipo deve envolver os operadores finais sempre que possível. Testes de usabilidade com usuários reais fornecem insights valiosos sobre a eficácia da interface e identificam áreas que necessitam de melhorias. Estes testes devem simular condições operacionais reais, incluindo cenários de estresse e situações de emergência.

Esse protótipo vai precisar de uma plataforma de alta fidelidade nesse caso, aconselhado o software de IHM que será utilizado no projeto, aí vem a pergunta: o que muda entre esse protótipo de alta fidelidade e a versão final? Ele está pronto antes da entrega do software para comissionamento, sendo produzido e validado durante o desenvolvimento off-line, onde as mudanças dentro do software são mais fáceis e rastreáveis.

Fase 5: Iteração e Refinamento

O processo de prototipagem é iterativo por natureza. Com base no feedback dos testes de usabilidade e na validação com as partes interessadas, o protótipo deve ser refinado e melhorado continuamente até atingir um nível de qualidade adequado para o desenvolvimento do software final.

Cada iteração deve ser documentada, incluindo as mudanças realizadas, a justificativa para essas mudanças e os resultados dos testes subsequentes. Esta documentação é valiosa não apenas para o projeto atual, mas também como referência para projetos futuros.

Ferramentas Recomendadas para Prototipagem de IHM

A escolha da ferramenta de prototipagem adequada pode impactar significativamente a eficiência e a qualidade do processo de design. Diferentes ferramentas oferecem diferentes níveis de fidelidade, recursos de interatividade e facilidades de colaboração.

Ferramentas de Baixa Fidelidade

Para as fases iniciais do design, quando o foco está na estrutura e no fluxo de informações, ferramentas de baixa fidelidade são ideais. Quais quer softwares os quais você pode criar imagens de layouts e cores para ter o primeiro "rascunho" da sua IHM, pode ser um Microsoft PowerPoint, Google Slides, Pencil ou outro software onde você possa criar shapes de referência para a sua IHM.

Protótipo de Tela feito no Google Slides

O papel e o lápis, embora pareçam antiquados, ainda são ferramentas valiosas para esboços iniciais e brainstorming. A liberdade total de expressão e a rapidez na criação de conceitos fazem desta uma ferramenta indispensável nas fases iniciais do projeto.

Ferramentas de Média Fidelidade

Para protótipos que requerem mais detalhamento visual e algum nível de interatividade, ferramentas como Figma e Adobe XD são excelentes opções. O Figma, em particular, oferece recursos robustos de prototipagem e colaboração em tempo real, permitindo que equipes distribuídas trabalhem juntas de forma eficiente.

Exemplo de Tela criada no Sigma utilizando IA sem ajustes finos de cores para ISA101

O Sketch, embora limitado ao macOS, é outra ferramenta popular que oferece recursos avançados de design e um ecossistema rico de plugins. Para equipes que já utilizam outras ferramentas da Adobe, o Adobe XD oferece integração seamless com o Creative Suite.

Ferramentas de Alta Fidelidade

Para protótipos que precisam simular com precisão o comportamento do software final, ferramentas como Axure RP e Principle oferecem recursos avançados de interatividade e animação. Estas ferramentas permitem a criação de protótipos complexos com lógica condicional, variáveis e interações sofisticadas.

Para projetos de IHM industrial, uma abordagem híbrida pode ser mais eficaz, utilizando as próprias ferramentas de desenvolvimento de IHM/SCADA do projeto para criar protótipos de alta fidelidade, facilitando a validação e reduzindo o risco de surpresas durante a implementação.

Integração com o Processo de Desenvolvimento de Software

A prototipagem de IHM não deve ser vista como uma atividade isolada, mas sim como parte integrante do processo de desenvolvimento de software. A integração eficaz entre as fases de prototipagem e desenvolvimento é crucial para o sucesso do projeto.

Metodologias Ágeis e Prototipagem

As metodologias ágeis, como Scrum e Kanban, se alinham naturalmente com o processo iterativo de prototipagem. A criação de protótipos pode ser incorporada aos sprints de desenvolvimento, permitindo validação contínua e ajustes rápidos baseados no feedback dos usuários.

A definição de "pronto" (Definition of Done) para cada funcionalidade deve incluir critérios relacionados à usabilidade e à conformidade com a ISA-101. Isso garante que aspectos de UX/UI não sejam negligenciados em favor de funcionalidades técnicas.

Documentação e Especificações

Os protótipos servem como documentação visual das especificações da IHM, complementando a documentação textual tradicional. Eles fornecem uma referência clara e inequívoca para os desenvolvedores, reduzindo ambiguidades e mal-entendidos.

A documentação deve incluir não apenas as telas e fluxos de navegação, mas também especificações detalhadas sobre comportamentos, animações, tratamento de erros e casos extremos. Anotações nos protótipos podem fornecer contexto adicional sobre decisões de design e requisitos específicos.

Testes e Validação Contínua

A validação não deve se limitar à fase de prototipagem. Testes de usabilidade devem continuar durante o desenvolvimento, utilizando versões funcionais do software para validar que a implementação está alinhada com o design aprovado.

Métricas de usabilidade, como tempo para completar tarefas, taxa de erro e satisfação do usuário, devem ser coletadas e monitoradas ao longo do projeto. Estas métricas fornecem feedback objetivo sobre a eficácia da IHM e podem identificar áreas que necessitam de melhorias.

No próximo artigo, vamos montar a documentação necessária para começar os nossos protótipos.

Até o próximo artigo!