O olho da mente - um olhar sobre a psicologia da visualização de dados

A visualização de dados é uma ótima maneira de contar uma história sobre dados. Mas qual é a melhor maneira de fazer isso? Uma compreensão da percepção e cognição humana pode ajudar os designers a fazê-lo de forma eficaz.

As pessoas usam recursos visuais para ajudar a contar histórias e ilustrar respostas a perguntas essenciais há milhares de anos. O exemplo mais antigo de visualização de dados é provavelmente um mapa de cerca de 27.000 anos atrás e, por muito tempo, era raro ver visualizações de dados para qualquer outra coisa além de geografia.

Nosso cérebro é construído exclusivamente para reconhecer padrões e conexões? Hoje, vivemos na era de ouro da visualização de dados. A comunicação eficaz de dados pode ser um desafio e, embora os gráficos possam nos ajudar a entender dados complexos e até mesmo vê-los de uma nova perspectiva, quando se trata de transmitir adequadamente uma mensagem para um público ou tomar decisões de negócios com base em dados, a visualização pode ser uma maneira fundamental para realizá-lo. Mas o que está por trás do poder da visualização de dados?

Contexto Histórico do Design de Visualização de Dados

A visualização de dados tem uma longa história e fez avanços significativos entre os séculos XVII e XIX. A ideia de apresentar dados quantitativos graficamente surgiu no século XVIII, quando René Descartes inventou um sistema de coordenadas bidimensional para exibir valores para operações matemáticas. Esse sistema foi aprimorado quando William Playfair foi pioneiro nas formas gráficas como as conhecemos hoje. Ele é creditado por ter inventado os gráficos de linhas e barras e, mais tarde, o gráfico de pizza e o gráfico de círculo.

Ao longo dos anos, o uso de gráficos quantitativos tornou-se mais difundido. Sua metodologia e eficácia aumentaram significativamente na segunda metade do século 20 com a publicação do livro de Jacques Bertin A Semiologia dos Gráficos . Seu trabalho foi fundamental porque ele descobriu que, para apresentar informações de forma intuitiva, clara e eficiente, a percepção visual operava de acordo com regras e padrões que podiam ser seguidos.

Bertin estudou a eficácia de diferentes tipos de gráficos. No exemplo abaixo, os gráficos de pizza mostram a produção de vários tipos de carne em vários países. Bertin os considerava “inúteis”. No meio - ao empregar a visualização de matriz, os padrões de alto nível tornam-se mais imediatamente visíveis. E à direita, como os países e a produção de carne não têm uma ordem natural, muitas outras matrizes podem ser produzidas – inclusive o exemplo mostrado – o que deu muito mais clareza. Nesse cenário, a reordenação das categorias melhorou significativamente a apresentação dos dados.

O que a psicologia tem a ver com a visualização de dados?

A percepção visual é a capacidade de ver, interpretar e organizar nosso ambiente. A visualização de dados pode ser extremamente eficaz, pois aproveita as habilidades naturais do cérebro humano. É rápido e eficiente.

John Tukey, um influente matemático e estatístico teórico americano, disse: “O maior valor de uma imagem é quando ela nos força a perceber o que nunca esperávamos ver”.

A cognição, que é manipulada pelo córtex cerebral, é muito mais lenta e requer mais esforço para processar as informações. Apresentar dados visualmente acelera nossa percepção e ajuda a reduzir a carga cognitiva.

No exemplo abaixo, a tabela nos permite ver números precisos. No entanto, poderíamos chegar rapidamente aos números mais altos e mais baixos para recursos hídricos renováveis? Não facilmente, mas os mesmos dados se tornam muito mais claros e compreensíveis quando apresentados visualmente no gráfico de barras à direita.

A influência dominante da percepção visual em comparação com outros sentidos é bem ilustrada em um exemplo do físico dinamarquês Tor Norretranders. Ele demonstrou o poder dos recursos visuais convertendo a capacidade dos sentidos humanos em rendimentos de computador padrão. O Sight sai por cima, pois tem a mesma largura de banda de uma rede de computadores. Sua capacidade de canal é 10 vezes maior que o toque e 100 vezes mais forte que a audição ou o olfato. O pequeno quadrado no canto inferior direito é onde estamos cognitivamente conscientes das experiências sensoriais.

Processamento pré-atentivo

Não apenas o processamento visual domina as entradas sensoriais, a quantidade de dados e a velocidade com que processamos são muito maiores do que estamos cientes. Esse fenômeno é conhecido como “processamento pré-atentivo”. É subconsciente e rápido. Leva de 200 a 500 milissegundos para o olho transmitir e o cérebro processar a propriedade pré-atentiva do estímulo visual (isso é muito mais rápido do que o cérebro pode processar dados de planilha).

“O processamento pré-atentivo é o acúmulo subconsciente de informações do ambiente. Todas as informações disponíveis são processadas de forma pré-atenciosa. Então, o cérebro filtra e processa o que é importante. A informação que tem a maior saliência (um estímulo que mais se destaca) ou relevância para o que uma pessoa está pensando é selecionada para uma análise mais completa por processamento consciente (atento). – da Wikipédia

O processamento pré-atentivo é uma benção para os designers porque sua implantação habilidosa permite que as pessoas entendam o que é apresentado mais rapidamente. Um designer altamente competente pode ajudar alguém que visualiza visualizações de dados a absorver mais informações mais rapidamente e com menos esforço, pois alivia o processamento consciente e diminui a carga de memória.

Vantagens do processamento pré-atentivo:

• Rápido/Automático
• Emocional
• Impulsos / Impulsos
• Hábitos
• Crenças
• Estereotipado
• Subconsciente

Muitas variáveis ​​visuais desencadeiam uma resposta pré-atenciosa. Ao aprender quais elementos visuais são enfatizados automaticamente e, em seguida, incorporá-los aos painéis, podemos projetar visualizações que contam a história dos dados de maneira eficaz.

Variáveis ​​Visuais

Introduzido por Jacques Bertin, as variáveis ​​visuais são as diferenças entre os elementos percebidos pelo olho humano. Estudadas há muito tempo, essas variáveis ​​fornecem os meios para entender como o cérebro humano processa e navega a informação visual. O conjunto original de “variáveis ​​retinianas” consistia em sete variáveis: posição, tamanho, forma, valor, matiz de cor, orientações e textura.

Os gráficos abaixo mostram exemplos de variáveis ​​visuais úteis para mostrar diferenças qualitativas ou quantitativas – de acordo com Bertin. Eles também demonstram uma maneira de apresentar atributos por meio de pontos, linhas ou áreas.

Um estudo de 1984 de William Cleveland e Robert McGill classificou os aspectos mais comuns que duas formas podem ter com base na facilidade com que o cérebro humano detecta diferenças entre elas. Eles ordenaram os seguintes recursos visuais do mais para o menos preciso:

Posição ao longo de uma escala comum

Como compartilhamos um sistema de referência espacial comum, a posição é a característica mais fácil de reconhecer e avaliar em relação aos elementos no espaço.

Exemplos: gráficos de barras, gráficos de dispersão

Posições ao longo de escalas não alinhadas e idênticas

É fácil comparar escalas separadas repetidas com o mesmo eixo, mesmo que não estejam alinhadas. Gráficos de painel, ou “pequenos múltiplos”, são um ótimo exemplo disso. O resultado é uma grade de gráficos que seguem o mesmo formato visual, mas mostram conjuntos de dados diferentes. Em comparação com um gráfico único e maior, os múltiplos pequenos podem ajudar na plotagem excessiva, quando os dados podem ficar obscurecidos ou ocluídos porque há muitos itens plotados.

Exemplo: pequenos múltiplos (também conhecidos como gráficos Rellis, Lattice, Grid e Panel)

Comprimento

O comprimento pode representar efetivamente informações quantitativas porque o comprimento de um elemento pode ser dimensionado para o valor de dados que eles representam. O cérebro humano reconhece facilmente as proporções e avalia o comprimento, mesmo que os objetos não estejam alinhados.

Exemplo: gráficos de barras

Direção

A direção é facilmente reconhecida pelo olho humano. Ele pode usar gráficos de linhas e tendências, por exemplo, para apresentar dados que mudam ao longo do tempo.

Exemplo: gráficos de tendências

Ângulo

Os ângulos ajudam a fazer comparações, fornecendo um senso de proporção. Estudos mostram que os ângulos são mais difíceis de avaliar do que o comprimento ou a posição. No entanto, os gráficos de pizza são tão eficientes quanto os gráficos de barras empilhadas, a menos que haja mais de três partes no todo.

Exemplo: gráficos de pizza

Área

A magnitude relativa das áreas é mais difícil de comparar com o comprimento das linhas. A segunda direção requer mais esforço para processar e interpretar.

Exemplo: gráficos de bolhas

Volume

Volume refere-se ao uso de objetos 3D em espaços bidimensionais, o que os torna significativamente mais difíceis de avaliar. No entanto, estudos sugerem que objetos 3D podem ser percebidos com mais precisão ao comparar duas formas de mesma dimensionalidade.

Exemplo: gráficos de barras 3D

Saturação de cores

A saturação de cor refere-se à intensidade de uma única tonalidade. Intensidades crescentes de cor podem ser percebidas intuitivamente como números de valor crescente. No entanto, é difícil avaliar os resultados com precisão.

Exemplo: mapas de calor

Compreender a classificação das variáveis ​​visuais é essencial para criar visualizações de dados atraentes. No entanto, isso não significa que os designers precisam se restringir a gráficos de barras e gráficos de dispersão. Cleveland e McGill observam: “A ordenação não resulta em uma prescrição precisa para a exibição de dados, mas é uma estrutura dentro da qual trabalhar”.

Cor

Saturação de cor e sombreamento são os menos precisos quando se trata de percepção de padrões e comportamento, de acordo com William Cleveland. Ainda assim, a cor pode ser uma ferramenta poderosa para os designers de visualização de dados transmitirem significado e clareza ao exibir dados. É crucial, no entanto, que os designers entendam como a cor funciona e o que ela faz e o que não faz bem.

Cor no contexto

Nossa percepção da cor depende do contexto, da cor e de seu contraste com os objetos ao redor.

Um ótimo exemplo é um experimento de Akiyoshi Kitaoka, professor do Departamento de Psicologia da Universidade Ritsumeikan, no Japão, onde ele desliza um pedaço de papel cinza em um gradiente de preto para branco. O papel parece mudar de cor à medida que se move de um lado para o outro. Em cada momento, percebemos a cor de forma diferente, pois diferentes tons de cinza a cercam. Veja o vídeo abaixo:

Em seu artigo Regras práticas para usar cores em gráficos , Stephen Few deriva algumas regras práticas dessas observações:

1. Se você quiser que objetos diferentes da mesma cor em uma tabela ou gráfico tenham a mesma aparência, certifique-se de que o plano de fundo – a cor que os cerca – seja consistente.
2. Se você quiser que os objetos em uma tabela ou gráfico sejam facilmente vistos, use uma cor de fundo que contraste suficientemente com o objeto.

A cor conta uma história

A cor não é apenas decoração. É melhor quando usado de forma significativa e estratégica. A cor deve ajudar a contar uma história e comunicar o objetivo do conjunto de dados apresentado. Como diz o ditado, “menos é mais”.

Cores contrastantes só devem ser aplicadas a diferenças de significados nos dados para reduzir a carga cognitiva. A cor também pode enfatizar os principais elementos da visualização.

A ausência de cor não torna um bom gráfico menos eficaz. O cinza é um bom ponto de partida na fase de ideação e, uma vez identificado um ponto de foco, a aplicação da cor enfatizará essas partes.

Definir paletas de cores

O conjunto de cores que um designer de visualização de dados aplica pode mudar completamente o significado dos dados. Muitas ferramentas podem ajudar a selecionar uma paleta de cores significativa, dependendo da natureza dos dados. Aqui estão um casal:

• ColorBrewer. As paletas são divididas em três tipos:
  • Categórico (usado para separar itens em grupos distintos)
  • Sequencial (usado para codificar diferenças quantitativas)
  • Divergente
• Paleta Viz. A Viz Palette cuida da acessibilidade, projetando para daltonismo e tons uniformemente espaçados. Inclui um “relatório de cores” que identifica tons que podem parecer iguais em várias situações.

Aplicando os Princípios da Gestalt à Visualização de Dados

Os princípios gestálticos da percepção podem ajudar a esclarecer como o cérebro organiza os elementos com base em características comuns, enquanto tenta dar sentido à informação visual. A teoria da Gestalt baseia-se na ideia de que o cérebro humano tentará simplificar e organizar imagens ou designs complexos que consistem em muitos elementos, organizando subconscientemente as partes em um sistema organizado que cria um todo, em vez de apenas uma série de elementos díspares.

Similaridade

O princípio da similaridade diz que nossas mentes agruparão automaticamente elementos com propriedades visuais compartilhadas como sendo “semelhantes”. Cores semelhantes, formas semelhantes, tamanhos semelhantes e orientações semelhantes são percebidas como um grupo. Este princípio é ilustrado nos gráficos abaixo.

Ao contrário do gráfico à esquerda com as barras em cores diferentes, elas são o mesmo azul à direita. Dado que existe apenas uma variável (Custos/Receitas), isso faz sentido. Ter as barras na mesma cor facilita a compreensão dos dados e remove a tensão cognitiva adicional causada pelo uso de cores diferentes à esquerda.

Proximidade

A proximidade é mais eficaz do que a semelhança porque o olho humano percebe os elementos como relacionados com base na proximidade entre eles.

No gráfico abaixo, o objetivo é comparar as vendas por país em três trimestres. Embora seja fácil comparar as vendas de cada país em um trimestre devido à proximidade, seria um desafio analisar as vendas por país.

O gráfico revisado o comunica com mais clareza. Nesse caso, a informação é priorizada para focar no objetivo de visualização, pois mantém os principais pontos de dados mais próximos.

Invólucro

O princípio da região comum, introduzido por Palmer em 1992, demonstra como o enclausuramento de elementos com um limite claramente definido tende a ser percebido como um grupo se eles compartilham uma área comum.

No exemplo abaixo, as três barras dentro da área sombreada em cinza parecem fazer parte de um grupo. Essa técnica ajuda os espectadores a se concentrarem em um grupo de objetos em um gráfico.

Conclusão

Compreender os elementos-chave da percepção humana e do processo cognitivo é uma parte essencial do design de excelentes visualizações de dados. Ao trabalhar em produtos com necessidades de visualização de dados – seja um painel B2B ou um aplicativo financeiro – os designers precisam estar atentos ao processo de percepção visual do cérebro humano e aos princípios fundamentais de design de visualização de dados.

A familiaridade com os conhecidos princípios da gestalt de percepção visual pode ser um grande benefício para os designers e ajudá-los a entender como o cérebro transforma imagens complexas em padrões. Estar atento a esses princípios é valioso no processo de alcançar uma hierarquia visual mais explícita ao criar visualizações de dados e projetar gráficos mais eficazes.

Além disso, estar ciente do processamento pré-atencioso e das variáveis ​​visuais, bem como a aplicação correta da cor, capacitará os designers a criar visualizações de dados mais eficazes.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •

Leia mais no Blog Toptal Design:

• Uma visão geral completa das melhores ferramentas de visualização de dados
• Visualização de Dados – Melhores Práticas e Fundamentos
• Principais exemplos de visualização de dados e designs de painel
• Design do painel - Considerações e práticas recomendadas
• COVID-19: O caso de uso definitivo do Design Thinking