Criando Dashboards Efetivos e Impactantes

Já tem alguns anos que ouvimos a frase "Dados são o novo Petróleo" que demonstra o valor que pode ser extraído dos dados após um trabalho de refinamento dos mesmos. Mas tão importante quanto a coleta, transformação e disponibilização destas informações é a sua exibição na forma de gráficos e apresentação pois é a partir delas que podemos ter novas ideias e tomadas de decisão. Sem os devidos cuidados necessários, um gráfico pode até dificultar o entendimento de um determinado assunto ou até mesmo levar a conclusões equivocadas (sempre é bom lembrarmos que os dados não mentem, mas podemos não saber as intenções de quem produziu um material com base neles).

Sabemos que as "Big Tables" (famosos tabelões com dados sem formatação) ainda são bastante requisitados, mas com alguns princípios presentes nos livros "Storytelling com Dados" e "Como Mentir com Estatística" você será capaz de melhorar seus gráficos e dashboards trazendo mais clareza e efetividade para as suas apresentações, e quem sabe assim, diminuir a necessidade de distribuir planilhas em Excel, uma vez que o valor dos dados só é realmente percebido quando apresentado de forma convincente.

Escolhendo um visual eficaz

Existem diversas tipo de elementos visuais que podemos utilizar para representarmos os nossos dados, entretanto, não existe um tipo de gráfico mágico que serve para todas as ocasiões, é preciso investir um tempo na escolha do melhor elemento para que a mensagem que estamos tentando mostrar seja percebida de forma mais fácil, nosso trabalho será como de um maestro, regendo e conduzindo o público pela história que estamos contando, para que assim todos possam chegar nas mesma conclusão.

Tipos de elementos visuais:

1. Texto Simples: Bom para destacar um número ou dois, acompanhado de um texto de apoio para facilitar o entendimento.

2. Gráficos de Barras: Ideais para comparações entre diferentes categorias ou valores.

3. Gráficos de Linha: Ótimos para mostrar tendências ao longo do tempo ou correlações entre variáveis.

4. Gráficos de Pizza ou Rosca: Úteis para representar a parte de um todo, mas devem ser usados com moderação para evitar confusão na interpretação (utlizar quando se tem no máximo 3 categorias para comparação).

5. Gráficos de Dispersão: Excelentes para mostrar relações entre variáveis e identificar padrões ou agrupamentos.

6. Gráficos de Área: Mostram a mudança de valores ao longo do tempo e podem ajudar a visualizar a magnitude de uma série de dados.

7. Histogramas: Representam a distribuição de dados e ajudam a entender a frequência com que diferentes valores ocorrem em um conjunto de dados.

8. Mapas e Gráficos Geográficos: Úteis para mostrar dados que variam geograficamente, como distribuição regional de informações.

9. Tabelas e Matrizes: Organizam dados em linhas e colunas, úteis para apresentar informações detalhadas.

Para exemplificar a importância da escolha de um visual eficaz, irei trazer o exemplo de um gráfico de pizza que mostra a opinião geral sobre uma proposta em discussão:

A visualização acima não facilita a compreensão imediata das informações por alguns motivos:

1. Gráfico de pizza com 5 categorias: Não é tão fácil percebermos a comparação relativa entre as opções;

2. Alta saturação das cores: Não existe uma região de destaque no gráfico;

3. Escolha das cores para as opções: O vermelho está indicando a opção "Favorável" e o verde a opção "Desfavorável" o que me parece contra intuitivo;

Abaixo segue proposta de revisão do visual para melhorar o entendimento:

Medidas que foram realizadas:

1. Introdução de um texto simples com um "Big Number" que não está diretamente mostrado no gráfico;

2. Transformação do gráfico de Pizza para Colunas empilhadas e ordenadas de maneira lógica para facilitar o entendimento;

3. Mudança na escolha das cores: Tons de vermelho indicam as opções desfavoráveis e tons de cinza foram escolhidas para as demais opções para dar ênfase nas barras em vermelho;

4. Coloração do texto é coerente com a das colunas;

5. Ordenação da legenda é a mesma do gráfico para facilitar a leitura;

Diminuindo a Saturação

Cada elemento adicionado no seu documento / dashboard irá consumir a carga cognitiva de quem irá analisar aquelas informações, então devemos examinar com cautela os elemento que serão colocados à disposição, uma vez que se saturarmos demais nossa apresentação, é possível que as pessoas desistam de tentar entender a mensagem que está sendo transmitida. Portanto devemos segurar nosso impeto de colocar um gráfico só pela beleza ou ter cuidado ao criar um "One Sheet to Rule them All" (que é o dashboard supremo que eliminará a necessidade de todos os outros e que, na prática, pode acabar ficando engavetado pela dificuldade de entendimento dos usuários).

Os principais pontos para diminuir a saturação estão listados abaixo:

1. Eliminar informações desnecessárias: Remova tudo o que não seja crucial para a história que você está contando. Isso pode incluir legendas excessivas, detalhes irrelevantes ou gráficos desnecessários.

2. Simplificar gráficos e textos: Opte por gráficos mais simples e diretos, usando apenas elementos essenciais para transmitir sua mensagem. Além disso, evite blocos densos de texto e prefira frases curtas e claras.

3. Usar cores de forma consciente: Limite a paleta de cores para evitar a sobrecarga visual. Escolha combinações que realcem a informação sem distrair. O contraste entre cores pode ser poderoso, mas o excesso pode tornar a apresentação confusa.

4. Reduzir a quantidade de dados por slide/gráfico: Evite congestionar uma única tela com uma quantidade excessiva de dados. Divida as informações em vários slides ou gráficos para facilitar a compreensão.

5. Focar na mensagem principal: Garanta que cada elemento visual ou ponto de dados contribua diretamente para a mensagem que você está tentando transmitir. Elimine elementos que não agreguem valor à história.

6. Utilizar espaços em branco: O espaço em branco pode ser seu aliado. Não sinta a necessidade de preencher cada parte do espaço em seus slides ou gráficos. Às vezes, o vazio pode aumentar a clareza e o foco.

7. Aplicar consistência visual: Mantenha uma consistência no estilo, tamanho de fonte, esquema de cores e formato dos elementos visuais ao longo da apresentação. Isso ajuda na compreensão e na estética geral.

Irei fazer mais um exemplo para exemplificar como a diminuição da saturação pode melhorar e facilitar o entendimento, desta vez peguei um gráfico que mostra o preço da cesta básica em cada estabelecimento.

Este gráfico tem como pontos positivos:

1. Escolha do tipo de gráfico que facilita a comparação dos valores entre os estabelecimentos;

2. Uso das cores para indicar o menor preço (em verde) e o maior preço (em vermelho);

Mas ainda existem alguns elementos que estão saturando o gráfico como:

1. Eixo de valores: Preço da cesta básica já está indicado nas barras;

2. Linhas de grade não estão contribuindo para o entendimento das informações;

3. Cores muito saturadas;

4. Falta de ordenação das barras: Ordenar as barras por preço pode facilitar o entendimento das informações;

Abaixo segue proposta de revisão do visual para melhorar o entendimento utilizando as melhorias propostas acima:

Focar a atenção do Público

No tópico anterior aprendemos a eliminar a saturação, retirando elementos que não estavam agregando valor na nossa visualização agora, além disso, podemos nos utilizar de atributos pré-atentivos para direcionar a atenção do nosso público e fazer com que eles interajam da maneira esperada com o nosso conteúdo.

Atributos pré-atentivos nos indicam aonde precisamos olhar, na figura abaixo, conte o quantas vezes o número 8 se repete:

A resposta é 19 vezes, mas sem uma indicação visual é necessário percorrer todas as linhas com o olhar para conseguir efetuar a contagem com precisão. Façamos o mesmo exercício agora com a próxima imagem:

Apenas com a aplicação de cores é possível destacar a presença do número 8 e de maneira análoga é possível destacar para um público uma informação, fazendo com que eles vejam aquele elemento antes que eles possam entender o que estão observando. Seguem exemplos de elementos pré-atentivos:

1. Cor: É um dos atributos mais poderosos. Cores diferentes chamam a atenção de forma rápida e eficaz. Uma cor contrastante pode se destacar imediatamente.

2. Tamanho: Objetos maiores tendem a atrair mais atenção do que os menores. Uma diferença significativa no tamanho pode ser detectada quase instantaneamente.

3. Forma/Formato: Formas distintas ou formatos incomuns são identificados rapidamente. Uma forma única em um conjunto de formas similares será notada mais prontamente.

4. Movimento: Qualquer forma de movimento ou mudança no campo visual é facilmente percebida. O movimento chama a atenção de forma quase automática.

5. Posição: Quando um objeto é colocado de maneira diferente em relação aos demais, sua posição discrepante é identificada rapidamente.

6. Orientação: Mudanças na orientação de objetos em um contexto podem ser identificadas instantaneamente, especialmente quando todos os outros elementos são consistentes em sua orientação.

7. Intensidade/Luminosidade: Objetos mais brilhantes ou mais escuros tendem a ser notados mais rapidamente em um campo visual.

8. Textura: Texturas distintas em um contexto podem ser identificadas rapidamente, especialmente se forem diferentes das demais.

9. Densidade: Variações na densidade de elementos visuais podem ser percebidas quase instantaneamente.

Vamos para mais um exemplo de ajustes em gráficos, considerarmos agora este gráfico que ilustra o aumento da obesidade infantil.

Como podemos observar, este gráfico apresenta muitos elementos e, apesar da utilização de um elemento pré-atentivo de acercamento nos valores que querem destacar, a alta saturação presente traz muita carga cognitiva para entendimento do contexto.

O gráfico acima tem somente os elementos necessários para reforçar o ponto do texto que é o aumento do sobrepeso e da obesidade infantil ao longo dos anos, para isso:

1. Transformamos o gráfico de barras para linhas, que indicam melhor a passagem temporal;

2. Retiramos elementos que estavam dificultando a leitura do gráfico;

3. Diminuímos a saturação das cores, destacando somente os dados de sobrepeso;

4. Utilização de texto simples com destaque de cor e tamanho para destaque das palavras chave.

Eu aumento mais não invento!

Como tiria o saudoso tio Ben, "*com grandes poderes vem grandes responsabilidades*", então devemos utilizar nossos conhecimentos de criação de gráficos com cuidado para não sermos tendenciosos e nem nos utilizarmos de elementos visuais para distorcer a realidade e vendermos nosso ponto com base em malabarismos numéricos e visuais.

Iremos primeiro avaliar um gráfico de uma campanha eleitoral e com nosso olhar treinado iremos identificar os artifícios utilizados e depois recriaremos o mesmo gráfico feito de maneira correta para entendermos o motivo de terem feito algumas alterações.

Basta alguns segundos de um olhar atento para verificar que este gráfico foi manipulado:

1. A barra que representa 22% está bem acima de todas as outras, inclusive maior que o 40% representado pelos Brancos e Nulos;

2. As linhas de grade não fazem sentido com o tamanho das barras (somente com os Brancos e Nulos);

Vamos refazer este gráfico para que possamos ter uma análise real das informações:

Vendo a imagem acima é possível perceber o motivo da mudação de escala que foi feita em favor do candidato, pois, apesar de ser o candidato com mais intenções de voto, este estava atrás dos votos Brancos e Nulos, e muito provavelmente a manchete "*Votos Nulos lideram as pesquisas aponta IBOPE*" não soaria tão bem perante seus eleitores. Mas se serve de conforto, ele estava acima daqueles que responderam que não sabiam em quem iriam votar (5 dos 7 candidatos não tiveram essa sorte). Portanto muito cuidado ao utilizar mais de uma escala de medida na construção dos seus gráficos para não gerar este tipo de resultado.

Um segundo cuidado é quanto à utilização de imagens ou ícones na construção de gráficos, pois, se for feito um ajuste de imagem proporcional à altura da coluna, o aumento no eixo x fará com que a percepção de aumento entre as informações seja alterado, conforme imagem abaixo:

O gráfico representa a média de peso de três espécies de pinguins, observem que o pinguim da raça Gentoo parece bem maior que os outros dois. Portanto, cuidado ao utilizar deste recurso para não gerar uma percepção de grandeza maior que o real.

Considerações Finais

Principais pontos a serem considerados na construção de uma visualização de dados:

- Para quem será apresentado e o modo que este material será utilizados (email, dashboard, power point);

- Qual a história que está querendo contar (objetivo da apresentação);

- Simplifique os elementos;

- Destaque os pontos principais;

- Crie um visual atrativo;

E o ponto que considero mais importante, crie relatórios e dashboards que gerem algum tipo de "*Call to Action*" (chamada para ação), como por exemplo, um dashboard de preços que indica em vermelho quando um preço está muito abaixo da média histórica. Materiais que possuem um facilitador de tomada de decisão tendem a ter uma boa adoção por parte dos usuários.

Um dashboard só se torna efetivo quando é utilizado e só é impactante quando gera ações e tomadas de decisão que impactam o negócio.

E aí, quer saber mais? Eu cobri apenas alguns tópicos principais dos dois livros mencionados, para um estudo mais aprofundado a leitura dos mesmos é indicada.

Links para os livros:

Storytelling com dados: um guia sobre visualização de dados para profissionais de negócios

Como mentir com estatística

Dados dos Pinguins:

Gorman KB, Williams TD, Fraser WR (2014) Ecological Sexual Dimorphism and Environmental Variability within a Community of Antarctic Penguins (Genus _Pygoscelis_). PLoS ONE 9(3): e90081. doi:10.1371/journal.pone.0090081