Visualização de dados: dicas para otimizar gráficos e UX

Os aplicativos projetados pelas empresas, sejam B2B ou B2C, estão se tornando cada vez mais orientados a dados. Nesse sentido, a necessidade de buscar uma visualização de dados de qualidade é cada vez maior. Gráficos confusos e enganosos estão ao nosso redor, mas podemos mudar isso seguindo algumas regras simples.

A forma como os dados são visualizados faz uma diferença significativa. Algumas saídas de visualização de dados ainda são difíceis de traduzir, causando conclusões vagas ou pouco claras, além de atrasos na tomada de decisões.

Neste artigo, listarei diversas ideias para melhorar a visualização de dados, seja de um aplicativo que você esteja desenvolvendo, de relatórios de Business Intelligence, de pesquisa acadêmica/científica ou de qualquer projeto que envolva transformar dados em insights! 💡

Princípios da Visualização de Dados Efetiva

A eficácia de uma visualização de dados depende fundamentalmente de como ela comunica a informação. Seguindo os ensinamentos de especialistas como Stephen Few e Edward Tufte, destacamos princípios cruciais que elevam a qualidade e a utilidade das visualizações:

1. Esclarecer

Define um objetivo claro e significativo para a audiência. Uma visualização eficaz começa com a compreensão de quem irá usá-la e para que propósito. Por exemplo, um gráfico destinado a analistas financeiros deve focar em indicadores de desempenho que são relevantes para suas análises diárias.

2. Simplificar

Escolha o estilo de visualização mais adequado ao tipo de dado e ao objetivo do usuário. Evite o uso excessivo de cores ou elementos gráficos que não adicionam significado claro à informação. Por exemplo, para uma rápida comparação de números, um gráfico de barras simples é muitas vezes mais eficaz do que um gráfico de pizza complexo.

3. Comparar

Facilite comparações diretas entre dados relacionados. Dispor elementos visualmente de forma que os usuários possam comparar tamanhos, valores ou tendências lado a lado é crucial. Isto pode ser realizado alinhando séries temporais em um gráfico de linhas para fácil leitura e comparação.

4. Participar

Direcione a atenção do usuário aos dados mais importantes. Use ferramentas visuais como cores, destaque ou anotações para guiar o espectador através dos dados, mostrando-lhe onde focar.

5. Explorar

Permita que os usuários explorem os dados de maneira interativa, para descobrirem novos insights. Interfaces que suportam zoom, filtros ou detalhamento adicional convidam o usuário a explorar padrões ou anomalias mais profundamente.

6. Visualizar Dados de Forma Diversificada

Use múltiplas visualizações para representar os mesmos dados quando isso pode revelar diferentes aspectos da informação. Por exemplo, dados temporais podem ser visualizados tanto em um gráfico de linhas quanto em um mapa de calor para destacar diferentes padrões de comportamento.

7. Perguntar: “Por quê?”

Encoraje os usuários a questionar o que os dados estão mostrando. Isso promove um entendimento mais profundo e pode levar a insights mais significativos.

8. Incentivar o Ceticismo

Fomente uma postura crítica em relação aos dados apresentados. Incentivar os usuários a verificar os dados com perguntas adicionais pode levar a uma compreensão mais robusta e evitar conclusões precipitadas.

9. Responder

Promova a colaboração e o compartilhamento de insights. Visualizações de dados que são facilmente compartilháveis ajudam a coletar diferentes perspectivas e melhorar a análise geral.

10. Detalhar

Apresente dados em diferentes níveis de granularidade para adequar-se a usuários com diferentes necessidades de informação. Desde visões gerais até detalhes minuciosos, permitir o ajuste do nível de detalhe ajuda os usuários a obterem a informação de que precisam.

11. Validar

Assegure que as visualizações possam ser validadas através do acesso aos dados originais. Transparência quanto à fonte dos dados e métodos de análise é fundamental para a credibilidade e confiança nas visualizações apresentadas.

Como melhorar as visualizações de dados?

Escolha o tipo de gráfico correto

Escolher o tipo de gráfico errado ou optar pelo tipo mais comum de visualização de dados pode confundir os usuários ou levar a interpretações erradas dos dados. O mesmo conjunto de dados pode ser representado de várias maneiras diferentes, dependendo do que os usuários gostariam de ver.

Abaixo segue um guia de qual gráfico usar para cada problema: relacionamento, comparação, composição e distribuição.

 
Exemplo: um gráfico de bolhas pode ser usado para entender o relacionamento entre variáveis como IDH e PIB; um gráfico de colunas pode ajudar a comparar as principais causas de doenças cardíacas; um gráfico de donuts permite entender a composição de marketshare de determinada categoria de produto e um histograma pode mostrar a distribuição de altura de uma população.

Use as direções de plotagem corretas com base nos valores positivos e negativos

Ao usar barras horizontais, plote valores negativos no lado esquerdo e positivos no lado direito de uma linha de base.

Nunca plote valores negativos e positivos no mesmo lado da linha de base. Isso causa deturpações no entendimento da informação e distorce a proporção dos dados.

Inicie gráficos de barras na linha de base 0

No exemplo abaixo, ao olhar para o gráfico à esquerda, você pode concluir rapidamente que o valor B é mais de 3 vezes maior que D, quando na realidade a diferença é muito mais marginal.

Começar na linha de base zero garante que os usuários obtenham uma representação muito mais precisa dos dados.

Esse tipo de distorção muitas vezes é aplicada de forma intencional para enganar as pessoas. É utilizada em campanhas políticas para tentar “fazer parecer” que um candidato, que está muito atrás nas pesquisas de intenção de voto, está mais próximo do que realmente está dos líderes.

Use a escala do eixo y adaptável para gráficos de linhas

Ao contrário do exemplo anterior, para gráficos de linhas, limitar a escala do eixo y para começar em zero pode tornar o gráfico quase plano.

Como o principal objetivo de um gráfico de linha é representar a tendência, é importante adaptar a escala com base no conjunto de dados para um determinado período e manter a linha ocupando dois terços do intervalo do eixo y.

Considere sua série temporal ao usar um gráfico de linha

O gráfico de linha é composto por “marcadores” conectados por linhas, muitas vezes usados ​​para visualizar uma tendência nos dados em intervalos de tempo – uma série temporal.

Isso ajuda a ilustrar como os valores mudam ao longo do tempo e funciona muito bem com intervalos de tempo curtos, mas quando os dados são atualizados com pouca frequência, isso pode causar confusão.

Não use gráficos de linha “suavizados”

Gráficos com linhas suavizadas podem ser visualmente agradáveis, mas deturpam os dados reais por trás deles. Além disso, linhas excessivamente grossas obscurecem as posições reais dos “marcadores”.

Evite usar gráficos com eixo duplo

Muitas vezes, para economizar espaço na sua visualização, você pode estar inclinado a usar gráficos de eixo duplo quando há duas séries de dados com a mesma medida, mas magnitudes diferentes.

Esses gráficos não são apenas difíceis de ler, mas também representam uma comparação entre duas séries de dados de maneira completamente enganosa. A maioria dos usuários não prestará muita atenção às escalas e apenas examinará o gráfico, tirando conclusões erradas.

Limite o número de fatias exibidas em um gráfico de pizza

O gráfico de pizza é um dos gráficos mais populares, porém frequentemente mal utilizado. Na maioria dos casos, um gráfico de barras é uma opção muito melhor.

Mas se você decidiu por um gráfico de pizza, aqui estão algumas recomendações sobre como fazê-lo funcionar:

• Não inclua mais do que 5 ou 7 “fatias”, mantenha-o simples;
• Você pode agrupar os segmentos de valor menor, insignificantes individualmente, na fatia “outros”.

Rotule diretamente no gráfico

Sem rotulagem adequada, não importa quão bom seja seu gráfico – não fará sentido. Rotular diretamente no gráfico é super útil para todos os leitores. Consultar a legenda requer tempo e energia mental para vincular os valores e segmentos correspondentes.

Não coloque etiquetas em cima das fatias

Colocar os valores em cima das fatias pode causar vários problemas, desde problemas de legibilidade até desafios com fatias finas. Em vez disso, adicione rótulos pretos com links claros para cada segmento.

Ordene as fatias para simplificar a leitura

As maneiras mais adequadas para ordenar fatias de um gráfico são:

• Coloque a maior fatia na posição de 12 horas e coloque as próximas fatias em ordem decrescente no sentido horário;
• Coloque a maior fatia às 12 horas, a segunda maior depois dela no sentido horário, a terceira às 11 horas e todas as fatias restantes em ordem decrescente no sentido horário.

Evite aleatoriedade

A mesma recomendação vale para muitos outros gráficos. Não use como padrão a classificação alfabética. Coloque os valores maiores na parte superior (para gráficos de barras horizontais) ou à esquerda (para gráficos de barras verticais) para garantir que os valores mais importantes ocupem o espaço mais proeminente, reduzindo os movimentos dos olhos e o tempo necessário para ler um gráfico.

Gráficos de rosca fina são impossíveis de ler

Um gráfico de pizza em geral não é o gráfico mais fácil de ler, pois é muito difícil comparar valores semelhantes. Quando tiramos o meio e criamos um gráfico de rosca, liberamos espaço para exibir informações adicionais, mas sacrificamos a clareza, levando ao extremo, pode tornar o gráfico inútil.

Deixe os dados falarem por si

O estilo desnecessário não é apenas uma distração, mas também pode causar interpretações errôneas dos dados e causar falsas impressões aos usuários. Você deveria evitar:

• Elementos 3D, sombreamento;
• Sombras, gradientes e outras distorções de cores;
• Padrões de zebra, linhas de grade excessivas;
• Fontes altamente decorativas, itálicas, negrito ou serifadas.

Escolha uma paleta de cores que corresponda à natureza dos seus dados

A cor é parte integrante da visualização de dados eficaz. Considere esses 3 tipos de paleta de cores ao projetar:

Uma paleta de cores qualitativa funciona melhor para a exibição de variáveis ​​categóricas. As cores atribuídas devem ser distintas para garantir a acessibilidade.

Uma paleta de cores sequencial funciona melhor para variáveis ​​numéricas que precisam ser colocadas em uma ordem específica. Usando matiz, luminosidade ou uma combinação de ambos, você cria um conjunto de cores contínuo.

Uma paleta de cores divergente é uma combinação de duas paletas sequenciais com um valor central no meio (geralmente zero). Muitas vezes, paletas de cores divergentes comunicarão valores positivos e negativos. Certifique-se de que a cor também corresponda à noção de desempenho “negativo” e “positivo”.

Design para acessibilidade

De acordo com o National Eye Institute, cerca de 1 em cada 12 humanos é daltônico. Seus gráficos só serão bem-sucedidos se forem acessíveis a um público amplo.

• Use diferentes saturações e luminâncias em sua paleta de cores;
• Imprima sua visualização de dados em preto e branco para verificar o contraste e a legibilidade.

Concentre-se na legibilidade

Certifique-se de que a tipografia esteja comunicando informações e ajudando os usuários a se concentrarem nos dados, em vez de distraí-los.

• Escolha fontes legíveis, evite fontes serifadas e altamente decorativas;
• Evite itálico, negrito e LETRAS MAIÚSCULAS;
• Garanta alto contraste com o fundo;
• Não gire seu texto.

Use um gráfico de barras horizontais em vez de rótulos rotativos

Esse truque simples garantirá que os usuários possam ler o gráfico com muito mais eficiência, sem forçar o pescoço.

Escolha sua biblioteca de gráficos

Se sua tarefa é adicionar gráficos interativos a projetos web e móveis, uma das primeiras perguntas que você deve fazer é qual biblioteca de gráficos será usada.

As bibliotecas de gráficos modernas têm muitas das interações e regras mencionadas anteriormente. Projetar com base em uma biblioteca definida garantirá facilidade de implementação e fornecerá muitas ideias de interação. Além disso, é possível buscar uma ferramenta que permita o desenvolvimento de dashboards para aplicar facilmente os gráficos mencionados no seu projeto.

Vá além dos relatórios estáticos

Ajude os usuários a explorar as visualizações alterando parâmetros e filtrando os dados. Gerar insights baseado no comportamento dos dados pode maximizar o valor e a percepção do seu produto de dados. No exemplo abaixo, você pode ver o aplicativo IOS Health usando uma combinação de vários tipos de apresentação de dados.