Visualización de datos: anatomía de un gráfico

Representaciones gráficas y experiencia de usuario

Habitualmente son los analistas digitales o los consultores especializados en el uso de alguna de las muchas soluciones existentes (Data Studio, Tableau, Power BI, etc.) los que asumen la tarea de escoger qué tipo de gráfico puede expresar mejor el dato que se quiere mostrar. En nuestra opinión, es un nicho en el que los diseñadores UX tenemos mucho que decir para complementar el trabajo de estos perfiles más técnicos.

De poco sirve un dashboard potente y tecnológicamente complejo si no cumple su misión fundamental, que es la de permitir la toma de decisiones en un proceso con la menor carga cognitiva posible. Necesitamos que todo el esfuerzo de nuestros clientes se focalice en lo que realmente importa, que es la toma de decisiones, y no en comprender qué es lo que tiene ante sí.

Partes de un sistema de visualización gráfico

Un sistema de visualización puede tener más o menos complejidad, pero sea cual sea el gráfico que escojamos para mostrar los datos posee unos elementos comunes que lo definen como tal y que hay que saber identificar.

Para esta entrada, vamos a escoger un gráfico convencional. Nos viene bien, de paso, para explicar que el objetivo siempre es el de ser capaces de contar una historia a partir de un conjunto de datos. El mejor gráfico no es siempre el más complejo, sino el que mejor transmite aquello que queremos contar.

Empecemos con este gráfico lineal. Los gráficos lineales son sencillos y eficaces porque nos permiten ver la evolución de uno o más datos (series) a lo largo de un espacio determinado de tiempo.

Fundamentalmente, un gráfico consta de tres partes:

1. Estructura o framework
2. Codificaciones
3. Anotaciones

Framework o estructura

Por framework entendemos la estructura que sustenta el gráfico. En el ejemplo serían el título, los ejes y la leyenda.

Codificación

Muestra el valor del dato, sirviéndose para ello de las codificaciones, de las que hablaremos más adelante. Estas codificaciones se aplican a las series de datos con el fin de que sean comprendidos de la manera más sencilla posible.

Anotaciones

Se utilizan para reforzar una idea o hacer énfasis en un dato o circunstancia que ayuden a comprender mejor el mensaje que se quiere transmitir en función a los datos que muestran conclusiones relevantes para el negocio.

Codificaciones

Como ya hemos visto, de las codificaciones depende en gran medida el éxito de nuestro gráfico. Una mala elección puede dar al traste con la mejor de las intenciones. Vamos a repasar las principales.

Longitud/altura

Están muy relacionadas con los tipos de gráficos de barras o columnas. En función de la distancia a los respectivos ejes (horizontal en los de columnas y vertical en el de barras) muestra, de una manera intuitiva, el valor representado.

Posición

Hay ocasiones en las que queremos mostrar una serie de datos en el que prima la posición de las coordenadas cartesianas (cruce de dos variables, cada una de un eje) en la búsqueda de correlaciones entre ellas. Un caso claro de esto son los gráficos de dispersión, como el que muestra el ejemplo:

Área

Podemos mostrar el valor de un dato a través de la mayor o menor superficie que ocupe en el gráfico. Claro ejemplo de esto son los gráficos de tipo ‘treemap’ o los de burbuja. En el caso que te vamos a mostrar, se combinan dos codificaciones: posición y tamaño.

En este gráfico de burbujas que ves en la figura se muestran varios de los elementos de codificación de los que hemos hablado anteriormente. Se trata de un gráfico que representa el volumen de tráfico en una tienda online (sesiones) frente al nº de esas sesiones que representan crecimiento (clientes nuevos), junto a una tercera dimensión que es el volumen de ventas.

• La posición define el nº de sesiones de usuarios así como cuántos de ellos eran clientes nuevos.
• El color define la categoría de producto.
• El tamaño es el volumen de ventas.

Por lo tanto, es relativamente sencillo contar/ver que el departamento de electrónica es el que ha necesitado menos sesiones para vender más, a la vez que nos ha traído un mayor número de clientes nuevos a la tienda.

Otros métodos de codificación

Además de los ejemplos ya citados, hay más formas de codificar la información en un gráfico. Por ejemplo el grosor o los ángulos (en los archiconocidos gráficos circulares o de tarta).

Lo importante es saber escoger qué tipo de codificación es la más adecuada para transmitir el mensaje correcto. Es decir, aquella que -requiriendo menos esfuerzo por parte del usuario - permite un nivel de comprensión tal que ayude a la toma de decisiones.

Por lo tanto, el mejor gráfico no siempre es el más bonito o el más complejo, sino el que mejor cuenta aquello que verdaderamente es importante. Como siempre que hablamos de Diseño, es el Diseño el que ha de estar al servicio de la necesidad o la idea y no viceversa.