comunicacaovisual

Aquarius Software Rua Silvia, 110 – 9º andar - Bela Vista, São Paulo – SP [email protected] - www.aquarius.com.br

COMUNICAÇÃO VISUAL NA APRESENTAÇÃO DE DADOS DE

SISTEMAS DE AUTOMAÇÃO, MES OU CORPORATIVO

Ricardo Caruso Vieira

[email protected]

INTRODUÇÃO

Quando falamos em evolução tecnológica, sistemas automatizados, computadores

cada vez mais poderosos e mais portáteis, imediatamente nos vêm à mente todas as

facilidades que esses dispositivos nos trazem. Cálculos que preencheriam folhas de

caderno, já podem ser feitos com um movimento do mouse; edição de vídeos ou áudio

não é mais exclusividade dos estúdios profissionais. Pouco percebemos, porém,

quantos conhecimentos novos essas ferramentas nos exigem para que sejam

utilizadas adequadamente. No passado, não eram esperados de um médico

conhecimentos de informática, nem de um advogado noções de editoração, assim

como não se exigia de um engenheiro o domínio de bases de comunicação visual.

É objetivo deste artigo selecionar algumas técnicas largamente conhecidas por artistas

plásticos e comunicadores, aplicando-as a situações práticas do cotidiano de quem

precisa apresentar graficamente dados vindos de sistemas industriais.

Com a rápida aproximação das tecnologias de chão de fábrica às de sistemas

corporativos, as possibilidades de visualização e processamento de dados de produção

são cada vez maiores. Informações dos dispositivos de instrumentação, que eram

exclusivas dos sistemas supervisórios ou SDCDs, são facilmente armazenadas em

bancos de dados históricos e disponibilizadas em forma de planilhas ou páginas web.

Sendo esses sistemas on-line, massas imensas de dados podem ser apresentadas em

redes corporativas e usadas para os mais diversos fins. Mas como fazer para que

números façam sentido para um operador especializado em uma determinada fase do

processo e tenham, também, significado para os diretores da companhia?

A resposta é agregar e apresentar de forma adequada segundo as necessidades de

cada usuário. Dificilmente uma planilha com medições de processo hora a hora,


essenciais para a operação da planta, tem informações relevantes para um gerente de

produção. Assim como telas de KPIs (Key Process Information) globais, conhecidas

como dashboards ou cockpits, normalmente não são suficientes para análises de

desempenho de equipamentos pela equipe de manutenção.

Conforme Bill Jensen, autor de livros sobre comunicação empresarial e grande

defensor da simplificação dos processos, “a acessibilidade total que conquistamos não

implica que precisemos de tudo”.

Esse artigo está dividido em quatro tópicos. O 1º trata dos conceitos básicos de

comunicação visual aplicados ao tema; o 2º versa sobre os principais recursos para

apresentação de dados; o 3º apresenta a aplicação dos conceitos em telas industriais e

o 4º é a conclusão.

COMUNICAÇÃO VISUAL

Segundo Bruno Munari [1], um dos maiores estudiosos de design do séc. XX,

comunicação visual é praticamente tudo que nossos olhos vêem, e pode ser

classificada em dois tipos: a casual e a intencional. A casual é aquela que não foi

criada com o objetivo de comunicar, como uma árvore na floresta. A intencional foi

produzida com um objetivo, como o desenho de uma árvore em um cartaz. Embora

nosso principal objeto de estudo seja a comunicação intencional, o conhecimento da

existência da casual nos ajudará na análise de elementos que funcionam como ruídos

no processo de interpretação da mensagem.

A comunicação intencional presume a existência de um receptor. No caso das

informações industriais, os receptores têm vivências e objetivos diferentes de acordo

com sua função. E isso deve ser considerado ao projetar um display. Ainda de acordo

com Munari [1], a mensagem visual deve passar por três filtros para ser assimilada: o

sensorial, considerando a capacidade dos olhos de captarem a mensagem, o funcional,

levando em conta aspectos psicofisiológicos do receptor, e o cultural, que considera se

a mensagem pode ser reconhecida.


Um aspecto sensorial normalmente desconsiderado é a possibilidade de o receptor ser

daltônico, sendo que aproximadamente 10% dos homens e 1% das mulheres têm essa

limitação. O funcional se torna mais evidente quando nos comunicamos ao mesmo

tempo com adultos e com crianças, quando estas ainda não tenham maturidade para

reconhecer alguns dos sinais e os entende de forma diferente. Já o cultural é o filtro ao

qual devemos imprimir mais atenção, pois se refere ao conhecimento e experiência de

quem deve interpretar os dados.

Quando escolhemos uma forma de representar alguma informação visualmente

devemos atentar para a função dos dados e os conhecimentos do receptor.

Existem diversas formas de se apresentar uma série de dados. A forma numérica, sem

dúvida, é a mais precisa. Um relatório que apresenta as medições de uma balança de

precisão para análise de um ensaísta certamente deve ser representado na forma de

números. Mas um gerente de qualidade, interessando em analisar as amostras do

último mês conforme um determinado padrão, certamente não desejaria ver dados

apresentados da mesma maneira.

Muitos tipos de dados, também, devem ser analisados de acordo com um contexto.

Gráficos de linha, tipicamente, são bons contextualizadores. Muitas vezes, para um

operador de processo, é mais importante saber se uma temperatura está subindo ou

descendo do que seu valor absoluto.

A Estatística é uma rica fonte de representações gráficas. Dificilmente encontraremos

demonstração mais eficaz para variações de qualidade de uma variável do que cartas

de controle, ou para relacionamento entre variáveis do que gráficos de correlação.

Porém, gráficos estatísticos normalmente exigem um grau maior de especialização do

usuário. De nada adianta apresentar gráficos de análise de dispersão como box-plots

para pessoas que não tiveram um prévio treinamento.

Antes da análise mais detalhada da melhor forma de representar cada tipo de dado,

vamos primeiro entender algumas características da percepção humana.


1.1 Codificando Dados

Segundo Stephen Few, em seu livro “Information Dashboard Design” [2], para a

comunicação eficaz de dados é importante entender o processo pré-atentivo de nossa

visão. O processo pré-atentivo são atributos que nosso cérebro consegue distinguir das

imagens antes da análise consciente. Esses atributos podem ser divididos em quatro

categorias: cor, posição, forma e movimento.

A categoria cor possui dois atributos: matiz e intensidade. Matiz é o que normalmente

chamamos apenas de cor, como amarelo, vermelho ou azul. Intensidade é a saturação

da cor que vai desde uma cor mais clara até a cor mais plena. Uma característica

interessante da cor é que a percepção dela é dependente de contexto, isto é, ela pode

exercer diferentes impressões dependendo da cor do fundo. Essa característica deve

ser sempre levada em conta para a seleção da cor de nossos displays.

A posição é o atributo mais usado para codificar com maior precisão valores

quantitativos. Ela é usada para identificar valores em espaços cartesianos,

principalmente em gráficos de linha e correlação.

Forma é a categoria que possui a maior diversidade de atributos. Orientação é como a

figura está posicionada em relação a seu próprio eixo, normalmente usado para

ressaltar palavras por meio de fontes itálicas. Comprimento é um atributo importante,

usado em gráficos de barras, que são ferramentas poderosas para comparação entre

valores. Largura, normalmente aplicada a linhas, pode ser usada para ressaltar alguma

informação. Tamanho, ou área, também pode ser usado para chamar a atenção para

um determinado ponto. Tanto tamanho quanto largura são atributos percebidos com

menor precisão e, portanto, não devem ser escolhidos quando existe a necessidade de

uma codificação quantitativa de maior precisão. Outro atributo bastante usado é a

forma geométrica.

O movimento é um atributo que tem forte poder de chamar atenção. É eficazmente

usado em momentos de exceção por meio de figuras piscantes.


Few [2] sugere a seguinte tabela para a capacidade de codificar dados quantitativos de

cada um dos atributos citados:

Categoria Atributo Quantitativo Cor Matiz Não

Intensidade Sim, com limitação

Posição Posição 2D Sim

Forma Orientação Não

Comprimento Sim

Largura Sim, com limitação

Tamanho Sim, com limitação

Forma Não Movimento Piscar Sim, baseado na velocidade, com

limitação

Os atributos categorizados como “com limitação” podem ser usados para identificar que

determinado valor é maior ou menor que outro, mas com nenhum grau de precisão.

1.2 Gestalt

Gestalt é uma escola da psicologia que estuda a percepção das formas e padrões. Um

conhecimento básico das teorias da Gestalt nos ajuda a desenvolver displays mais

eficazes e, principalmente, eliminar elementos desnecessários para a comunicação.

Para que a compreensão das informações seja rápida, devemos buscar sempre a

maior simplicidade construtiva possível.

Examinaremos os seguintes princípios: proximidade, enclausuramento, continuidade e

completude.

Proximidade é a nossa tendência de entender que elementos próximos formam um

grupo. Essa é uma ferramenta poderosa para agrupar elementos sem a adição de

objetos desnecessários, que poluiriam o display.


Figura 1 - Proximidade dos Títulos dos Gráficos

Enclausuramento é a percepção de que objetos cercados por algum tipo de borda são

relacionados de alguma forma.

Figura 2 - Variáveis Relacionadas por Enclausuramen to

O princípio da continuidade faz perceber elementos que possuem algum padrão ou

alinhamento como um elemento só. Isso nos faz entender uma linha tracejada como

uma linha, e não uma seqüência de segmentos justapostos.

Figura 3 - Linha do Gráfico é Entendida como Contín ua


Completude, muitas vezes visto como uma variação do princípio da continuidade, é o

princípio de que procuramos entender figuras incompletas como figuras fechadas, mais

familiares a nós. Muitas vezes, duas linhas unidas em uma extremidade, são tão

eficazes para delimitar uma região quanto um retângulo.

Figura 4 - Gráfico Com e Sem Delimitação Explicita da Área

A utilização consciente desses princípios nos ajuda a eliminar elementos que não são

essenciais para a nossa percepção da informação.

FERRAMENTAS PARA APRESENTAÇÃO DE DADOS

Considerando os princípios de comunicação visual e a natureza dos dados industriais é

possível criar uma biblioteca de ferramentas, para apresentá-los de forma eficaz.

Muitos sistemas, como supervisórios, planilhas eletrônicas e portais web industriais,

possuem alguns desses princípios com diferentes graus de flexibilidade.

1.1 Gráfico de Barras

O gráfico de barras é um dos formatos de gráfico mais comum, e também o mais

poderoso. Ele compara valores usando um atributo pré-atentivo: o comprimento da

barra. Dessa forma, a assimilação de informações como menor e maior valor é

praticamente imediata.


Ele pressupõe a existência de dados discretos ou amostrados divididos em categorias.

Essas categorias podem ter origens diferentes, como a produtividade das linhas A, B e

C; intervalos de tempo, como número de peças rejeitadas em cada um dos meses do

ano ou, ainda, medições qualitativas, como número de amostras consideradas boas,

medianas e ruins.

A utilização de cores diferentes nas barras dos gráficos é normalmente desnecessária,

já que a distinção entre elas pode ser feita por meio de legendas no próprio eixo do

gráfico. Uma exceção possível é a necessidade de destacar algumas barras do

conjunto. Em um gráfico, por exemplo, que indica o nível de estoque de cinco insumos

principais pode ser útil eleger uma cor para indicar o insumo que está com nível muito

baixo.

Figura 5 - Gráfico de Barras com Destaque de um Ite m

1.2 Gráficos de Linhas

Os gráficos de linhas têm como principal função ressaltar o comportamento de uma

determinada série de dados. Análises como tendência, sazonalidade e variação relativa

entre duas variáveis se tornam muito mais evidentes que em gráficos de barras.

A principal utilização desse gráfico em displays é a de análise de séries temporais.

Variáveis como volume de produção nos últimos 12 meses é um exemplo típico.


Um cuidado que se deve tomar ao usar esse gráfico é manter as linhas que

representam dados mais ressaltadas que as de apoio, como os eixos e legendas,

facilitando a interpretação. Quando é usada mais de uma pena, podem ser usadas

cores diferentes para identificá-las.

Figura 6 - Gráfico de Linhas com Duas Penas

1.3 Sparklines

Sparklines foram inventadas por Edward R. Tufte, talvez o maior pesquisador de

representação gráfica de dados da atualidade. Ele combina, criativamente, uma

simplificação do gráfico de linha tradicional com um display numérico.

O gráfico de linha dos sparklines deve ter somente a pena, sem nenhuma indicação de

escala ou eixos. O objetivo dele é adicionar contexto ao valor numérico. Ele se mostra

bastante eficaz para a construção de dashboards porque, além de mostrar o valor atual

e histórico da variável, ocupa muito pouco espaço, podendo ser agregado a outros

tipos de telas ou a displays de alta densidade de informações.

Figura 7 - Sparklines


1.4 Gráficos de Correlação

O gráfico de correlação é uma aplicação específica do gráfico de linha. Ele apresenta,

em cada um dos seus eixos, uma variável diferente e traça a relação entre elas.

Embora sirva a apenas essa aplicação específica, ele é bastante eficaz em responder

três questões: se existe alguma correlação entre as variáveis, se ela é direta ou inversa

e o quanto estreita ela é.

Uma ferramenta bastante útil no gráfico de correlação é a reta de ajuste. Ela facilita a

interpretação do sentido da correlação.

Figura 8 - Gráfico de Correlação com Reta de Ajuste

1.5 Heatmaps

Heatmaps, ou treemaps, são recursos bastante eficazes para visualizar status de

diversos itens organizados hierarquicamente numa só tela. É formado por um retângulo

subdividido em retângulos menores que representam cada um dos itens. O status é

informado usando diferentes cores ou, de forma mais eficaz, tonalidades da mesma

cor.


Um recurso interessante em telas industriais, principalmente dashboards, é o drill-

down. Drill-down é a capacidade de navegar para outras telas que detalham um

determinado comportamento. Esse recurso é bastante usado em heatmaps.

Um exemplo de uma aplicação de heatmap com drill-down seria um dashboard para o

responsável pela qualidade de produtos de três plantas. Ele poderia ver áreas

representando as três plantas e subdivisões para cada um dos produtos elaborados por

elas. Caso um retângulo apresente uma cor mais forte, sinalizando um problema de

qualidade, ele poderia clicar nessa área a visualizar uma tela com detalhes das

análises desse produto.

1.6 Ícones

Os ícones são imagens que comunicam rapidamente usando atributos como cor ou

sentido. São normalmente utilizados para agregar significado a valores numéricos ou

textos.

Uma aplicação muito comum dos ícones são os alarmes. É comum a utilização de

ícones com cores, principalmente usando a metáfora do semáforo: cor verde para

valores bons, amarela para regulares e vermelha para ruins. Essa aplicação, por ter

como objetivo salientar valores que precisem de atenção, não costuma ser eficaz. A

melhor forma de usar ícones como alarme é trabalhar com visibilidade, apresentando a

figura apenas quando alguma ação deva ser tomada.

Outra aplicação comum dos ícones é sinalizar se um determinado valor apresenta

tendência de subida ou descida, por meio de setas. Embora agregue informação útil ao

valor, ainda não é tão eficaz quando os sparklines.

Figura 9 – Ícones


1.7 Cartas de Controle

As cartas de controle foram inventadas por Walter A. Shewhart, engenheiro da Bell

Labs, na década de 1920. O objetivo dele era reduzir o número de falhas nos

equipamentos de transmissão para telefonia, por meio do monitoramento de variáveis

do processo produtivo.

Largamente utilizadas para controle de qualidade, permitem observar se determinado

processo está sob controle estatístico, isto é, se as variações de valor das amostras

representadas são consideradas estatisticamente normais.

Embora seja um gráfico de aplicação estatística é bastante comum em sistemas

industriais e, mesmo exigindo algum conhecimento prévio para ser configurado, é de

simples interpretação.

Uma carta de controle consiste em um gráfico de linhas, onde o eixo das ordenadas

apresenta o valor da variável medida e o das abscissas os valores das amostras

analisadas. Em dados amostrados de sistemas contínuos em intervalos de tempos

iguais, a abscissa pode apresentar uma escala de tempo. São apresentadas três linhas

horizontais, que representam, de cima para baixo, limite superior de controle, meta e

limite inferior de controle. Amostras que se apresentem fora dos limites de controle

representam uma evidência de instabilidade do sistema.

Figura 10 - Carta de Controle com Limites em Vermel ho


ORGANIZANDO TELAS

Agora que conhecemos recursos de comunicação visual e ferramentas de expressão

de dados, vamos tratar de como usá-los para construir um display.

Existem alguns pontos que devem estar em mente durante a construção de um display

com múltiplos gráficos e valores. São eles a simplicidade gráfica, o posicionamento dos

objetos, a utilização de cores e, por último, o efeito estético do conjunto.

A simplicidade gráfica não é apenas uma escolha estética, mas uma característica

necessária para a comunicação eficaz. Uma tela simples nos mantém focados nos

itens mais importantes e aumenta a eficácia dos elementos pré-atentivos,

principalmente quando são utilizados como alarmes. Few [2] defende que devemos

eliminar todos os pixels que não carregam informações. Os princípios da Gestalt são

ótimas ferramentas para isso.

Um gráfico de barras, por exemplo, não precisa estar dentro de um retângulo para que

seu espaço seja delimitado. Pelo princípio da completude, estando somente com os

eixos, nosso cérebro se encarrega de completar sua área. Uso excessivo de figuras,

como logotipos e fotos, também comprometem a simplicidade do display.

Quando construímos telas com múltiplos objetos, a posição deles deve ser

cuidadosamente observada. A leitura, nos idiomas ocidentais, é feita da esquerda para

a direita. Dessa forma, o quadrante superior esquerdo tem um destaque importante,

pois é o primeiro a ser lido. Assim deve ser usado para as informações que queremos

que sejam lidas primeiramente, como KPIs e valores consolidados. A região central

também é uma região de destaque e é a de maior destaque para objetos de cores

diferentes e piscantes. É o melhor local para colocar os alarmes mais importantes.

Devido ao princípio da proximidade, elementos próximos são considerados do mesmo

grupo e, portanto, tendemos a entendê-los como tratando do mesmo assunto. Não

devemos aproximar elementos se não desejamos que sejam comparados.

O uso de uma diversidade excessiva de cores, ou de cores muito intensas, também

compromete a simplicidade. As cores também devem ser usadas apenas quando


carreguem algum significado, como identificação de penas em um gráfico ou alarmes.

A utilização de diferentes intensidades, ao invés de diferentes matizes, também é

desejável, pois a intensidade é percebida pelos daltônicos.

Muitas vezes o efeito estético da composição de displays não é considerado em sua

construção, por se tratar de uma ferramenta de informação. Essas telas, muitas vezes,

são consultadas várias vezes durante o dia, ou ainda ficam constantemente abertas em

estações de operação. Construções desarmoniosas ou com cores desagradáveis

tornam a experiência de consultá-las cansativa. Cores suaves e telas de alta definição

comprovadamente aumentam a produtividade de seus usuários, diminuindo, inclusive,

o nível de stress.

Vamos considerar como exemplo um dashboard de produção construído sem observar

as recomendações tratadas neste artigo. Nesse display o gerente de produção deve

consultar o comportamento de alguns KPIs, OEE global e produtividade,

disponibilidade e qualidade globais e de cada uma das linhas da planta. Deve observar

o nível dos insumos produtivos, cuidando que não estejam abaixo do limites

estipulados. Visualizar o mix de produção, ou o percentual da produção total que foi de

cada um dos quatro produtos da planta. E, por fim, observar como as flutuações da

produção afetam o consumo de energia.

Figura 11 - Tela Contruída sem Observar as Recomend ações de Comunicação Visual


Nesse display, encontramos alguns dos enganos mais comuns na construção de

dashboards.

• O posicionamento dos elementos não está adequado. Os KPIs OEE,

produtividade, disponibilidade e qualidade estão distribuídos pelo display e sem

o devido destaque. O quadrante superior esquerdo, o primeiro a ser visualizado,

está sendo usado com o logotipo da empresa. Logotipos e figuras que não

agregam informações devem ser colocados nas posições de menor destaque.

• Os insumos em estoque não estão apresentados no melhor meio. Para

identificar qual deles é o de maior ou o de menor quantidade, o usuário precisa

ler cada um dos números da tabela. O mesmo para identificar se algum deles

está abaixo do nível mínimo.

• O gráfico de pizza, utilizado para o mix de produtos, não estabelece claramente

a relação entre eles. Isso acontece porque é utilizado o atributo tamanho (das

áreas) para a codificação de valores, que não é facilmente avaliado por nossos

olhos. Gráficos tridimensionais também são mais difíceis de interpretar que

gráficos planos. Devemos ser cuidadosos para não escolhermos o formato dos

gráficos simplesmente por motivos estéticos.

• Embora os dados de consumo e produção estejam precisamente expressos na

tabela, a interpretação de seu inter-relacionamento se torna bastante difícil

apenas com números. Além disso, para a visualização de todo o intervalo, é

necessária a utilização de barras de rolagem. As barras de rolagem devem ser

sempre evitadas em dashboards porque contraria um de seus principais

objetivos que é concentrar todas as informações principais em uma só tela.

• O princípio da simplicidade gráfica não foi respeitado em praticamente nenhum

gráfico. O fundo cinza e o excesso de linhas, como de grade e legenda,

dificultam a identificação da informação e fazem com que eles ocupem um

espaço excessivo.

• Embora as cores tenham sido usadas somente para a codificação de variáveis,

elas são de tonalidades excessivamente fortes, distraindo a atenção para as


informações. Numa visualização rápida, o primeiro elemento que chama nossa

atenção é a parcela vermelha do gráfico de pizza. Apenas alarmes, que

indiquem a necessidade de uma ação, devem se destacar das outras

informações.

Seguindo as recomendações já observadas, uma reconstrução possível da tela poderia

ser a seguinte.

Figura 12 - Dashboard de Produção Reconstruído para Maior Eficácia

Com a eliminação dos elementos desnecessários, a mudança mais evidente foi o

ganho de espaço, permitindo que sejam mostradas mais informações. Os KPIs foram

colocados no quadrante de maior destaque e representados usando sparklines, dando

uma idéia do histórico anterior. O mix de produtos, nível de insumos e comparação dos

KPIs de cada uma das linhas passaram a serem demonstrados por meio de gráficos de

barras. Os gráficos de barras são as melhores ferramentas para comparação de

valores, portanto, devem ser largamente utilizados em displays industriais,

principalmente os que apóiam decisões mais globais.


As cores sóbrias facilitam a identificação dos valores que merecem atenção. Nesse

caso, a linha quatro parada, sinalizado com um ícone, e o insumo D, abaixo do nível

esperado.

O logotipo foi reposicionado para um lugar de menor destaque.

CONCLUSÕES

Alguns conceitos bastante simples de design são suficientes para facilitar a criação de

displays mais efetivos. Agora é necessária certa experiência para aplicá-los aos

diversos casos do dia a dia.

Telas com funções diferentes exigem desenhos diferentes. No ambiente industrial, elas

são construídas focando vários tipos de público e, algumas vezes, têm objetivos

verticais e outras horizontais. As principais verticais relacionadas à produção são a

Qualidade, Manutenção e Processo. Cada uma tem sua linguagem, suas variáveis de

interesse e suas unidades de tempo particulares. Em segmentos horizontais, temos a

operação, gerencia de fábrica, corporativo, TI e vários outros. Muitas vezes, todos eles

consomem os mesmos dados de origem, mas filtrados e apresentados de forma

específica.

Nunca se deve esquecer que o usuário final deve se sentir confortável em usar suas

ferramentas. O desenvolvimento de uma tela que deve ser consultada dia a dia, ou a

todo o momento, deve sempre ser feito em parceria com o usuário. O melhor resultado

só é alcançado quando os dados corretos são entregues da forma correta a pessoa

correta.


REFERÊNCIAS BIBLIOGRÁFICAS

MUNARI, B. Design e Comunicação Visual, Ed. Martins Fontes, São Paulo

FEW, S. Information Dashboard Design, O`Relly, Sebastopol

KESTENBAUM, N. Obrigado pela Informação que Você Não me Deu, Elsevier, Rio de Janeiro

TUFTE, E.R. The Visual Display of Quantitative Information, Graphics Press, Cheshire

comunicacaovisual

Documents

dados de sistemas

dados histricos

processamento de dados

produo so

comunicao empresarial

sistemas corporativos

sistemas automatizados

sistemas on