El ojo de la mente: una mirada a la psicología de la visualización de datos

La visualización de datos es una excelente manera de contar una historia sobre datos. Pero, ¿cuál es la mejor manera de hacerlo? Una comprensión de la percepción y la cognición humanas puede ayudar a los diseñadores a hacerlo de manera efectiva.

Las personas han usado imágenes para ayudar a contar historias e ilustrar respuestas a preguntas esenciales durante miles de años. El ejemplo más antiguo de visualización de datos es probablemente un mapa de hace unos 27 000 años y, durante mucho tiempo, era raro ver visualizaciones de datos para otra cosa que no fuera la geografía.

¿Nuestro cerebro está especialmente diseñado para reconocer patrones y conexiones? Hoy vivimos en una era dorada de la visualización de datos. Comunicar datos de manera efectiva puede resultar desafiante, y aunque los gráficos pueden ayudarnos a comprender datos complejos e incluso verlos desde una nueva perspectiva, cuando se trata de transmitir correctamente un mensaje a una audiencia o tomar decisiones comerciales basadas en datos, la visualización puede ser una forma fundamental. para lograrlo Pero, ¿qué hay detrás del poder de la visualización de datos?

Contexto histórico del diseño de visualización de datos

La visualización de datos tiene una larga historia y logró avances significativos entre los siglos XVII y XIX. La idea de presentar datos cuantitativos gráficamente surgió en el siglo XVIII cuando René Descartes inventó un sistema de coordenadas bidimensional para mostrar valores para operaciones matemáticas. Ese sistema se mejoró cuando William Playfair fue pionero en las formas gráficas tal como las conocemos hoy. Se le atribuye haber inventado los gráficos de líneas y de barras, y más tarde el gráfico circular y el gráfico circular.

Con los años, el uso de gráficos cuantitativos se generalizó. Su metodología y eficacia aumentaron significativamente en la segunda mitad del siglo XX con la publicación del libro de Jacques Bertin La Semiología de la Gráfica . Su trabajo fue crucial porque descubrió que para presentar información de manera intuitiva, clara y eficiente, la percepción visual operaba de acuerdo con reglas y patrones que podían seguirse.

Bertin estudió la efectividad de diferentes tipos de gráficos. En el siguiente ejemplo, los gráficos circulares muestran la producción de varios tipos de carne en varios países. Bertin los consideró "inútiles". En el medio, al emplear la visualización matricial, los patrones de alto nivel se vuelven más inmediatamente visibles. Y a la derecha, dado que los países y la producción de carne no tienen un orden natural, se pueden producir muchas otras matrices, incluido el ejemplo que se muestra, lo que proporcionó mucha más claridad. En este escenario, el reordenamiento de categorías mejoró significativamente la presentación de los datos.

¿Qué tiene que ver la psicología con la visualización de datos?

La percepción visual es la capacidad de ver, interpretar y organizar nuestro entorno. La visualización de datos puede ser extremadamente efectiva ya que aprovecha las habilidades naturales del cerebro humano. Es rápido y eficiente.

John Tukey, un influyente matemático y estadístico teórico estadounidense, dijo: “El mayor valor de una imagen es cuando nos obliga a notar lo que nunca esperábamos ver”.

La cognición, que es manejada por la corteza cerebral, es mucho más lenta y requiere más esfuerzo para procesar la información. La presentación de datos de forma visual acelera nuestra percepción y ayuda a reducir la carga cognitiva.

En el siguiente ejemplo, la tabla nos permite ver números precisos. Sin embargo, ¿podríamos obtener rápidamente las cifras más altas y más bajas para los recursos hídricos renovables? No es fácil, pero los mismos datos se vuelven mucho más claros y comprensibles cuando se presentan visualmente en el gráfico de barras de la derecha.

La influencia dominante de la percepción visual en comparación con otros sentidos se ilustra acertadamente en un ejemplo del físico danés Tor Norretranders. Demostró el poder de las imágenes al convertir la capacidad de los sentidos humanos en rendimientos estándar de computadora. Sight se destaca ya que tiene el mismo ancho de banda que una red informática. Su capacidad de canal es 10 veces mayor que el tacto y 100 veces más fuerte que el oído o el olfato. El pequeño cuadrado en la esquina inferior derecha es donde somos cognitivamente conscientes de las experiencias sensoriales.

Procesamiento Pre-atento

El procesamiento visual no solo domina las entradas sensoriales, sino que la cantidad de datos y la velocidad con la que procesamos son mucho más altas de lo que somos conscientes. Este fenómeno se conoce como “procesamiento previo a la atención”. Es subconsciente y rápido. El ojo tarda entre 200 y 500 milisegundos en transmitir y el cerebro en procesar la propiedad de atención previa del estímulo visual (eso es mucho más rápido que la forma en que el cerebro puede procesar los datos de una hoja de cálculo).

“El procesamiento pre-atento es la acumulación subconsciente de información del entorno. Toda la información disponible es procesada con atención previa. Entonces, el cerebro filtra y procesa lo que es importante. La información que tiene la mayor prominencia (un estímulo que se destaca más) o relevancia para lo que una persona está pensando se selecciona para un análisis más profundo y completo mediante un procesamiento consciente (atento). – de Wikipedia

El procesamiento pre-atento es una bendición para los diseñadores porque su implementación hábil permite a las personas comprender lo que se presenta más rápidamente. Un diseñador altamente competente puede ayudar a alguien que ve visualizaciones de datos a absorber más información más rápido y con menos esfuerzo, ya que aligera el procesamiento consciente y disminuye la carga de la memoria.

Ventajas del procesamiento pre-atento:

• Rápido/Automático
• Emocional
• Impulsos/Drives
• Hábitos
• Creencias
• estereotipado
• Subconsciente

Muchas variables visuales desencadenan una respuesta pre-atención. Al aprender qué elementos visuales se enfatizan automáticamente y luego incorporarlos en los tableros, podemos diseñar visualizaciones que cuenten la historia de los datos de manera efectiva.

Variables visuales

Introducido por Jacques Bertin, las variables visuales son las diferencias entre los elementos tal como los percibe el ojo humano. Estudiadas durante mucho tiempo, estas variables proporcionan los medios para comprender cómo el cerebro humano procesa y navega por la información visual. El conjunto original de "variables retinales" constaba de siete variables: posición, tamaño, forma, valor, tono de color, orientaciones y textura.

Los gráficos a continuación muestran ejemplos de variables visuales útiles para mostrar diferencias cualitativas o cuantitativas, según Bertin. También demuestran una forma de presentar atributos a través de puntos, líneas o áreas.

Un estudio de 1984 realizado por William Cleveland y Robert McGill clasificó los aspectos más comunes que pueden tener dos formas según la facilidad con la que el cerebro humano detecta las diferencias entre ellas. Ordenaron las siguientes características visuales de mayor a menor precisión:

Posición a lo largo de una escala común

Debido a que compartimos un sistema de referencia espacial común, la posición es la característica más fácil de reconocer y evaluar con respecto a los elementos en el espacio.

Ejemplos: gráficos de barras, diagramas de dispersión

Posiciones a lo largo de escalas idénticas no alineadas

Es fácil comparar escalas separadas repetidas con el mismo eje incluso si no están alineadas. Los gráficos de panel, o "pequeños múltiplos", son un gran ejemplo de esto. El resultado es una cuadrícula de gráficos que siguen el mismo formato visual pero muestran diferentes conjuntos de datos. En comparación con un solo gráfico más grande, los múltiplos pequeños pueden ayudar con el trazado excesivo, cuando los datos pueden oscurecerse u ocluirse porque hay demasiados elementos trazados.

Ejemplo: pequeños múltiplos (también conocidos como gráficos Rellis, Lattice, Grid y Panel)

Longitud

La longitud puede representar efectivamente información cuantitativa porque la longitud de un elemento puede escalar al valor de los datos que representan. El cerebro humano reconoce fácilmente las proporciones y evalúa la longitud, incluso si los objetos no están alineados.

Ejemplo: gráficos de barras

Dirección

La dirección es fácilmente reconocida por el ojo humano. Puede usar gráficos de líneas y tendencias, por ejemplo, para presentar datos que cambian con el tiempo.

Ejemplo: Gráficos de tendencia

Ángulo

Los ángulos ayudan a hacer comparaciones proporcionando un sentido de proporción. Los estudios muestran que los ángulos son más difíciles de evaluar que la longitud o la posición. Sin embargo, los gráficos circulares son tan eficientes como los gráficos de barras apiladas, a menos que haya más de tres partes en el todo.

Ejemplo: gráficos circulares

Área

La magnitud relativa de las áreas es más difícil de comparar con la longitud de las líneas. La segunda dirección requiere más esfuerzo para procesar e interpretar.

Ejemplo: gráficos de burbujas

Volumen

El volumen se refiere al uso de objetos 3D en espacios bidimensionales, lo que los hace significativamente más difíciles de evaluar. Sin embargo, los estudios sugieren que los objetos 3D se pueden percibir con mayor precisión cuando se comparan dos formas de la misma dimensionalidad.

Ejemplo: gráficos de barras 3D

Saturación de color

La saturación de color se refiere a la intensidad de un solo tono. Las intensidades crecientes de color pueden percibirse intuitivamente como números de valor creciente. Sin embargo, es difícil evaluar los resultados con precisión.

Ejemplo: mapas de calor

Comprender la clasificación de las variables visuales es esencial para crear visualizaciones de datos atractivas. Sin embargo, esto no significa que los diseñadores deban limitarse a gráficos de barras y diagramas de dispersión. Cleveland y McGill señalan: "El orden no da como resultado una receta precisa para mostrar los datos, sino que es un marco dentro del cual trabajar".

Color

La saturación y el sombreado del color son los menos precisos cuando se trata de la percepción de patrones y comportamiento, según William Cleveland. Aún así, el color puede ser una herramienta poderosa para que los diseñadores de visualización de datos transmitan significado y claridad al mostrar los datos. Sin embargo, es crucial que los diseñadores entiendan cómo funciona el color y qué hace y qué no hace bien.

Color en contexto

Nuestra percepción del color depende del contexto, el color y su contraste con los objetos circundantes.

Un gran ejemplo es un experimento de Akiyoshi Kitaoka, profesor del Departamento de Psicología de la Universidad Ritsumeikan en Japón, donde desliza un trozo de papel gris a través de un degradado de negro a blanco. El papel parece cambiar de color a medida que se mueve de lado a lado. En cada momento, percibimos el color de manera diferente ya que lo envuelven diferentes tonalidades de gris. Vea el video a continuación:

En su artículo Reglas prácticas para usar el color en los gráficos , Stephen Few deriva algunas reglas prácticas de estas observaciones:

1. Si desea que diferentes objetos del mismo color en una tabla o un gráfico se vean iguales, asegúrese de que el fondo, el color que los rodea, sea uniforme.
2. Si desea que los objetos de una tabla o un gráfico se vean fácilmente, utilice un color de fondo que contraste lo suficiente con el objeto.

El color cuenta una historia

El color no es solo decoración. Es mejor cuando se usa de manera significativa y estratégica. El color debe ayudar a contar una historia y comunicar el objetivo del conjunto de datos presentado. Como dice el dicho, “menos es más”.

Los colores contrastantes solo deben aplicarse a las diferencias en los significados de los datos para reducir la carga cognitiva. El color también puede enfatizar los elementos principales de la visualización.

La ausencia de color no hace que un buen gráfico sea menos efectivo. El gris es un buen punto de partida en la etapa de ideación, y una vez que se identifica un punto de enfoque, la aplicación de color enfatizará esas partes.

Definir paletas de colores

El conjunto de colores que aplica un diseñador de visualización de datos puede cambiar completamente el significado de los datos. Muchas herramientas pueden ayudar a seleccionar una paleta de colores significativa, según la naturaleza de los datos. Aquí hay un par:

• Color Brewer. Las paletas se dividen en tres tipos:
  • Categórico (utilizado para separar elementos en grupos distintos)
  • Secuencial (utilizado para codificar diferencias cuantitativas)
  • divergente
• Paleta de visualización. Viz Palette se ocupa de la accesibilidad, el diseño para los daltónicos y los tonos perceptualmente espaciados uniformemente. Incluye un "informe de color" que identifica tonos que pueden verse iguales en varias situaciones.

Aplicación de los principios de la Gestalt a la visualización de datos

Los principios de la percepción de la gestalt pueden ayudar a aclarar cómo el cerebro organiza los elementos en función de las características comunes mientras trata de dar sentido a la información visual. La teoría de la Gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes o diseños complejos que constan de muchos elementos al ordenar inconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo una serie de elementos dispares.

Semejanza

El principio de similitud dice que nuestras mentes agruparán automáticamente los elementos con propiedades visuales compartidas como "similares". Colores similares, formas similares, tamaños similares y orientaciones similares se perciben como un grupo. Este principio se ilustra en los gráficos a continuación.

A diferencia del gráfico de la izquierda con las barras en diferentes colores, son del mismo azul a la derecha. Dado que solo hay una variable (Costos/Ingresos), esto tiene sentido. Tener las barras del mismo color facilita la comprensión de los datos y elimina la tensión cognitiva adicional causada por el uso de diferentes colores a la izquierda.

Proximidad

La proximidad es más eficaz que la similitud porque el ojo humano percibe que los elementos están relacionados en función de lo cerca que están entre sí.

En el gráfico siguiente, se pretende comparar las ventas por país en tres trimestres. Si bien es fácil comparar las ventas de cada país dentro de un trimestre debido a su proximidad, sería un desafío analizar las ventas por país.

El gráfico revisado lo comunica más claramente. En este caso, la información se prioriza para centrarse en el objetivo de visualización, ya que mantiene los puntos de datos principales más juntos.

Recinto

El principio de región común, introducido por Palmer en 1992, demuestra cómo el recinto de elementos con un límite claramente definido tiende a percibirse como un grupo si comparten un área común.

En el siguiente ejemplo, las tres barras dentro del área sombreada en gris parecen ser parte de un grupo. Esta técnica ayuda a los espectadores a concentrarse en un grupo de objetos en un gráfico.

Conclusión

Comprender los elementos clave de la percepción humana y el proceso cognitivo es una parte esencial del diseño de excelentes visualizaciones de datos. Al trabajar en productos con necesidades de visualización de datos, ya sea un tablero B2B o una aplicación financiera, los diseñadores deben tener en cuenta el proceso de percepción visual del cerebro humano y los principios fundamentales de diseño de visualización de datos.

Familiarizarse con los principios gestálticos bien conocidos de la percepción visual puede ser de gran beneficio para los diseñadores y ayudarlos a comprender cómo el cerebro transforma imágenes complejas en patrones. Tener en cuenta estos principios es valioso en el proceso para lograr una jerarquía visual más explícita al idear visualizaciones de datos y diseñar gráficos más efectivos.

Además, ser consciente del procesamiento previo a la atención y las variables visuales, así como la aplicación correcta del color, permitirá a los diseñadores crear visualizaciones de datos más efectivas.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Una descripción completa de las mejores herramientas de visualización de datos
• Visualización de datos: mejores prácticas y fundamentos
• Principales ejemplos de visualización de datos y diseños de paneles
• Diseño de tableros: consideraciones y mejores prácticas
• COVID-19: El último caso de uso de Design Thinking