Design de interface para controlador industrial

Olá! Meu nome é George, sou designer.

Enquanto todos voltamos para casa, decidi compartilhar minha experiência no desenvolvimento de design de interface para automação industrial, e um grande número de profissionais está envolvido no design de aplicativos e no design de sites. Mas não há tantas boas interfaces especializadas projetadas para gerenciar sistemas de engenharia.

Por alguma razão, é geralmente aceito que o design não é necessário nesta indústria e, se um engenheiro não consegue entender o sistema, indica suas qualificações, e não que a interface possa ser mal pensada, as informações são apresentadas em um conjunto caótico, em que é impossível navegar rapidamente, o que, por sua vez, leva a excesso de trabalho e erros do usuário.

Primeiro, vou contar como fiz a interface do painel de controle do sistema de ventilação para o software Segnetics. Iniciamos o projeto estudando o usuário e o ambiente operacional. Estudamos e modelamos em detalhes como e onde nosso painel será usado. Muitas vezes, são salas técnicas semi-escuras, um arranjo em placas ou instalações. Percebendo isso, eles começaram a procurar análogos e maneiras de resolver problemas semelhantes. Examinamos muitas interfaces: dispositivos médicos, automóveis, gerenciamento de sistemas de produção, etc. Decidimos que gostamos do estilo das interfaces dos modernos instrumentos de aeronaves, cuja principal vantagem é que o piloto leia apenas informações importantes limpas do ruído visual o mais rápido possível. Esse princípio foi o fundamento de toda a interface futura e passamos à criação de protótipos.







No estágio inicial, esboçamos os blocos principais no tamanho natural da tela e colocamos o programa no controlador para verificar as áreas onde os elementos foram pressionados, a lógica de transição.
Depois de aprovado o layout, passamos para a pesquisa de esboços. Passamos por um grande número de opções para esboços e estilos. Eles entenderam aproximadamente o que queríamos, decidiram tentar um estudo mais detalhado, mas um pequeno fragmento. Plano? Skeuomorfismo? Talvez adote o estilo de desenhar gráficos?







Gradualmente, encontramos a imagem que mais nos convém e começamos a estudar. A tela principal com a qual o operador irá interagir é um diagrama de imitação. Ele deve exibir os parâmetros importantes da entrada e saída, o status e o status dos dispositivos no sistema. Examinamos alguns truques em aeronaves, coletamos um diagrama de imitação, observamos em carga máxima e como ele ficará 90% do tempo.











Aprovamos o estilo geral e seguimos para o desenvolvimento das telas restantes. O mais interessante é a tela da tarefa de configuração. Analisamos várias opções - um selecionador de celular, digitando um número pelo teclado etc. E eles decidiram que era legal fazer um redutor de toque para a definição aproximada de um número e os botões + \ - para um número mais preciso. Aqui, gostaria de agradecer aos programadores da Segnetics, que fizeram o volante girar suavemente e tocar bem durante sua parada. É verdade que ficou muito alto.

Trabalhamos em todas as telas e dispositivos animados, estados. Acidentes, congelamento, quebras na correia, como o sutiã do filtro é inflado e desinflado durante o início e a parada do sistema. Como as barras de progresso são preenchidas.









Na próxima etapa, adaptamos a interface do painel de controle para uso em outro controlador. Adicionamos a função de criar um cronograma, alteramos a tela principal, pois esse controlador pode controlar apenas uma instalação específica, enquanto o painel suporta o gerenciamento de vários sistemas.







O cliente do próximo projeto foi a rede de lavagem automática de carros Moscow Cooga.

Eu tenho um amigo programador que lidera excelentes cursos de programação para engenheiros aqui (plc-edu.pro), ele me fez uma pergunta. “Gog, eu estou fazendo um programa de auto-atendimento aqui. O cliente quer que tudo pareça profissional e legal. Você pode nos ajudar com isso?

Como designer, tive que formular a lógica da interação entre usuários de diferentes níveis com a interface. Entenda quais dados todos os usuários devem ver e que acesso é necessário apenas por meio de uma senha. Como criar a lógica da tarefa de configurações para que seja intuitiva e não exija um manual de várias páginas?

Para começar, fiz uma lista de papéis e etapas importantes para eles. O que precisa ser feito para implementar esse ou aquele cenário.



Como resultado, obtivemos um protótipo interativo na Fig, que exibia todas as funções e ações básicas. Nesse protótipo, conduzi vários testes para testar a hipótese e a lógica do projeto.



Como é a interface no final, ela não é menos importante (embora muitas pessoas pensem de maneira diferente) do que como o serviço funciona. A aparência forma a impressão do serviço. Isso cria um clima. Constrói uma conexão emocional entre o dispositivo de uma pessoa. É o design que torna divertido o uso do serviço. Se você deseja construir um longo relacionamento com seu cliente, preste atenção nisso. Tendo desenhado todos os ícones, botões e seus estados, prosseguimos para a programação.







Aqui, quero falar separadamente sobre como o Figma facilita a vida. Eu desenhei minha primeira interface de ventilação no Illustrator. Eu tive que cortar centenas de elementos e seus estados em PNG, salvar muitas pastas. Faça a marcação pixel por pixel da posição dos elementos na tela. Felizmente, hoje tudo isso não é necessário. Adicionamos o programador ao arquivo de trabalho das Figuras e ele já pode ver no estágio do protótipo quais mecânicas serão usadas e dar sua própria avaliação da possibilidade.

Outro pequeno projeto é a interface de exibição para emular a operação de um controlador de bomba de calor para a Thermex.

Não vou me repetir, o caminho é o mesmo - desde os objetivos de uso e protótipo até a orientação final da beleza. O projeto foi concluído duas semanas desde a assinatura do contrato até a aprovação final do cliente.











Paralelamente aos projetos de automação, trabalhei em interfaces de sistemas médicos. Um pedido de médicos do departamento de admissão, um pedido de médicos do distrito que vão para casa. Interface do registro e design do sistema de prescrição de medicamentos. Se estiver interessado, vou lhe dizer da próxima vez.

Aberto a cooperação e serei grato por críticas construtivas!