Saltar al contenido

Artículo

03 junio 2021

UX y el dato. Parte III. Las gráficas, porque una imagen vale más que mil palabras

Gráficas en ordenador
También puedes escuchar este post en audio, ¡dale al play!
Tras 2 artículos previos, UX y el dato I. La experiencia de usuario en los Interfaces enfocados al dato y UX y el dato II. Conceptualización y diseño de interfaces de datosdonde hemos querido destacar la importancia del diseño de interfaces enfocados en el dato, llegamos al epílogo, donde esperamos haber aportado nuestro granito de arena aderezado con un poco de perogrullo y cierta reflexión.
 
En este último artículo nos centraremos en un aspecto fundamental más, la elección del tipo de gráfico necesario para comunicar de forma efectiva en función de los datos. Aunque pueda parecer sencillo, hay ciertas implicaciones que pueden llevar a una mala interpretación generando confusión y frustración en los consumidores de información.
 
Por tanto, vamos a zambullirnos y empaparnos de las distintas gráficas que debemos utilizar en función de las necesidades de los datos a mostrar, cuáles son las más adecuadas y efectivas para cada tipo de información, así como criterios para elegir uno u otro.
 
Para elegir el gráfico correcto, debemos preguntarnos qué tipo de datos queremos presentar, y en base a ello podemos decir que existen 4 grandes categorías:
 
  • Comparación
  • Composición
  • Relación
  • Distribución
Para no ser redundantes con este magnífico resumen que recoge una información de por sí muy valiosa, si queremos aportar una serie de consejos recabados a través de nuestros años de experiencia que permitirá que te adelantes a futuras tomas de decisiones y no tropieces en las mismas piedras donde hemos caído otros.
 
Por tanto, hemos pretendido hacer un acercamiento sobre aquellos elementos visuales más comunes de las cuatro categorías reseñadas que no utilizamos de forma correcta en un interfaz de datos.
 

1.1. Gráficos de comparación 

Es uno de los propósitos de mayor vigencia y con mayor frecuencia de la analítica de datos

Como dijo Vesa Kuusela, experto en gráficos estadísticos, "Un gráfico adquiere su significado a partir de la comparación".
 

 

1.1.1. Gráficos de barras

Para comparar, se deben utilizar métodos sencillos, como pueda ser la longitud, y para ello, el rey, es el gráfico de barras (barras horizontales se entiende), por encima del gráfico de columnas que parece ser de los más extendidos.
 
grafico-barras-horizontales.png
www.infragistics.com

¿Por qué es mejor su ordenación horizontal? Por obviedades en las que seguro no hemos caido. Su ordenación horizontal permite leer de forma fluida, tanto el literal como el valor, a la vez que proporciona información comparativa de forma fácil y de un vistazo.
 
Muchas veces será necesario comparar elementos entre categorías, por lo que será necesario utilizar barras agrupadas, y si se desea mostrar relación, se podrá utilizar columnas apiladas.
 
Si son muchos los datos a comparar mejor gráficos de barra que en columnas, que además permite el uso literales más largos. Es más eficiente ordenar de mayor a menor, siempre y cuando no se muestren los datos por fecha.
 
Recomendamos partir siempre de ejes con valor a 0, y utilizar cuadrículas como referencia cuando sea útil.
 
De utilizarse columnas agregadas o apiladas mejor utilizar colores que contrasten con los que conseguir una identificación rápida y fácil.


1.1.2. Gráficos apilados

 
grafico-barras-apilado.png
Grafico-apilado.png
Fuente anychart.com
 

1.1.3. Gráficos de líneas

Son el recurso gráfico ideal para mostrar tendencias y para establecer correlaciones.
Grafico-de-linea.png
Fuente: www.seeingdata.org

Se recomienda no utilizar más de 5 – 6 líneas por gráfico, y que además que el color de cada línea contraste.
 
Los gráficos de barras pueden ser el sustitutivo para mostrar cómo se ven los valores a lo largo del tiempo. Suelen utilizarse cuando el enfoque del gráfico está en los valores absolutos en cada punto en el tiempo, en lugar de en las tendencias.
 

1.1.4. Gráficos de área

Un gráfico de área combina el gráfico de líneas y el gráfico de barras para mostrar cómo cambian los valores numéricos de uno o más grupos a lo largo de la progresión de una segunda variable, normalmente la del tiempo. Pueden ser superpuestos o apilados.
grafico-de-area.png
www.chartio.com
 
En el caso de que se decida su uso, deben mostrarse un máximo de 3-4 tipos de datos al superponerse, y los colores deben tener transparencias.
 
En alguna ocasión se puede ver que puede haber opciones mejores para su uso, como el gráfico de línea o de barras verticales.
grafico-de-area-vs-linea-barras.png
www.chartio.com

1.1.5. Gráficos de araña / radar

Es ideal para comparar e identificar patrones y relaciones en datos cíclicos. Cuanto más hacia el borde del radio llegue un punto, mayor será la cantidad
 
grafico-arana-radar.png
www.datanovia.com

 

1.2. Datos de composición

1.2.1. Gráficos circulares y de anillos 

Son uno de los grandes vicios que existen en la representación de los datos, y no siempre utilizados de la forma más adecuada. En BABEL solemos decir, las tartas para el postre.
 
Los gráficos circulares y de anillo no transmiten bien las relaciones cuantitativas entre los datos, ya que se basan en áreas y ángulos para comunicar información, y es más difícil para los seres humanos decir cuánto más grande es un área que otra.
 
Como hemos comentado se utilizan de forma errónea, lo que no significa que no cumplan con su función cuando se usan de forma adecuada. Un uso apropiado sería el mostrar porcentajes respecto a respuestas binarias (si/no), sin embargo, en muchas de las ocasiones, se utilizan para representar excesivos tipos de datos, lo que dificulta su lectura, ya que el consumidor debe estar consultando la leyenda del mismo, a la vez que genera más ruido visual.
 
Por este motivo, se recomienda no superar 6 valores de datos por gráfico, ordenadas las porciones de mayor a menor en sentido de las agujas del reloj.
 
Debemos replantearnos su uso cuando podamos intuir que los datos a mostrar serán muy similares en cantidad, y difíciles de diferenciar, o bien si entre todos los valores no representan el 100% del área.
 
A continuación algunos ejemplos que te harán desistir en el empleo de gráficos circulares.
 
 
 grafico-circulares-vs-barras-I.png
grafico-circulares-vs-barras-II.png
grafico-circulares-vs-barras-III.png
grafico-circulares-vs-barras-IV.png


1.2.2. Mapas de árbol

Son útiles para visualizar los datos jerárquicos en forma de rectángulos agrupados que juntos representan el todo. Se utiliza para mostrar la composición de un todo cuando hay muchos componentes y se basa en un área rectangular dividida en rectángulos más pequeños para representar subcategorías.
 

1.2.3. Mapas Voronoi

Puede considerarse una variante de los mapas de árbol. Se componen a base de teselación de polígonos cuyas proporciones dependen de una columna numérica. Estos polígonos pueden subdividirse en polígonos más pequeños y constituir una estructura jerárquica con tantos niveles como aquellos en los que se dividen los datos.
 
grafico-mapa-voronoi.png
Mapa. Voronoi. Fuente – Devo.com

1.2.4. Gráfico de embudo

Son gráficos que ilustran cuántos elementos se pierden en cada etapa de un proceso en particular. Ser recomienda su uso para el análisis de conversiones.
Si hay un aumento en cada etapa, un gráfico de embudo se convierte en un gráfico piramidal .
 

  1.3. Gráficos de distribución y relación

 Muestran la relación entre conjuntos de datos más que basarse en estudiar valores precisos.
 

1.3.1. Gráficos de puntos

Este tipo de gráfico brinda la capacidad de mostrar tendencias, patrones y grupos, y su relación en conjuntos de datos grandes y pequeños. Recomendamos su uso para representar visualmente los resultados de una investigación.
 

data-distribution-scatter-chart-type.png

Anychart.com

1.3.2 Gráficos de burbujas

Los gráficos de burbujas son útiles cuando se necesita determinar la relación entre pares de variables correspondientes, es decir, averiguar la correlación entre tres o cuatro variables o para revelar patrones comunes en grandes conjuntos de datos.
 
Algunas de las observaciones más interesantes provienen de valores atípicos: puntos individuales que son notablemente diferentes a otros en su posición.
 
grafico-burbujas.png
www.anychart.com
 

1.3.3. Gráficos de caja y bigotes

Cuando sólo interesan valores medios y los rangos de distribución clave, recomendamos el uso de gráficos de caja/bigotes. Representan datos numéricos en forma de un rectángulo ("caja"), dividido en dos partes por una línea horizontal que representa el valor mediano. Además, utiliza líneas verticales que se extienden desde los lados superior e inferior del cuadro para trazar el resto de la distribución estadística y puntos para especificar valores atípicos.
 

grafico-bigotes.png
www.anychart.com
 

1.4 Otros gráficos

1.4.1. Gráficos de red

Muestra la interconexión mediante el uso de nodos / vértices y líneas de enlace para ayudar a iluminar el tipo de relaciones entre un grupo de entidades.
grafico-tipo-network.png
Fuente: Medium
 

1.4.2. Mapas espaciales

Fundamentales para entrelazar actividades en un mapa geográfico. Los hay de muchos tipos desde los mapas geoespaciales, a los de calor, calor animado y área de Google a los Pew Pew maps… Existen una gran variedad de los mismos. A continuación, presentamos algunos que se pueden adaptar a necesidades específicas
 
Datos geoespaciales. Es fundamental prestar atención a la intensidad de color. Ser recomienda no más de 7 intensidades para favorecer la menoría y reducir la carga cognitiva. En este caso que exponemos, se van a 9 intensidades.
mapa-espacial.png

mapa-espacial-calor.png
Mapas de calor de Google. Fuente – Devo.com

mapa-espacial-pew-pew.png
Gráficos Pew pew map. Fuente – Devo.com
 

1.4.3. Mapas de flujo / Sankey

Muestran flujos y las cantidades en proporción entre sí, desde el origen al destino donde el ancho de las flechas es proporcional a la cantidad de flujo.
 
Permiten mostrar procesos complejos de forma sencilla con múltiples niveles de visualización (alto y bajo nivel).
grafico-sankey.png
Diagrama Sankey. Fuente Azavea.com



Fuente: towardsdatascience.com
 

1.4.4. Diales

Son los tipos de gráficos más adecuados para elegir mostrar datos de valor único y se utilizan ampliamente en paneles. En particular, son ideales para comparar un valor real con un KPI y visualizar el grado de consecución.

 

grafico-de-indicador.png

1.4.5. Diagramas de afinidad

Mide la relación de datos utilizando un punto de interconexión, lo que significa que el grado de afinidad se determina por el número de veces que tanto la fuente como el destino se conectan a ese punto.
 
grafico-afinidad.png
Gráfico de afinidad. Fuente – Devo.com
 


1.4.6 Gráficos de tarjetas perforadas

Muestra valores a lo largo del tiempo para un conjunto de parámetros, y donde el tamaño de cada disco es proporcional a su valor.

grafico-trajetas-perforadas.png
Gráfico de afinidad. Fuente – Devo.com
 

1.4.7. Gráficos 3D

Trazar un gráfico de 2 variables en 3D se suele hacer para mejorar la estética, pero hace que el gráfico sea mucho más difícil de interpretar de forma rápida y precisa, ya que distorsiona las formas y la alineación de las características visuales que muestran los datos. Se desaconseja totalmente su uso.
 

graficos-3D.png


Gráficos de detección de anomalías. Detectan comportamientos no esperados en una serie temporal determinada.


 
Grafico de detección de anomalías. Fuente – Devo.com

 

Conclusión

A través de los 3 artículos focalizados en la visualización del dato hemos pretendido dar luz sobre los aspectos fundamentales a nivel de experiencia de usuario, diseño de interfaz y diferentes tipos de gráficos, haciendo hincapié en los más utilizados prácticos.
 
Hay que entender que estamos en un contexto donde la era del dato no ha hecho más que empezar, y donde la tecnología de machine learning y a inteligencia artificial empiezan a tener la suficiente madurez para dar un paso más en la construcción de estos interfaces y darles un plus.
 
El valor añadido en la visualización del datos pasa por la personalización y predicción de los datos y cómo mostrarlos. La tecnología nos “obliga” a ser pitonisos frente a posibles demandas inconscientes de nuestros usuarios.
 
Mediante el aprendizaje automático y la inteligencia artificial se podrá usar Big Data para predecir nuestras próximas acciones, a veces incluso mejor de lo que podríamos predecirlas nosotros mismos. El uso inteligente de Big Data además proprocionará mayores ganancias para las empresas.
 
Sin embargo, conviene no olvidar que hay una parte básica para los diseñadores de experiencias, que es asegurarse que un producto o servicio pueda afrontar bien los cambios y escalar a medida que aumenta la cantidad de datos que debe manejar. Por tanto, la necesidad de visualización de datos es especialmente importante para estructuras complejas de datos, y esta es una de las grandes preocupaciones de los altos cargos de las grandes compañías de BI y la analítica.
 
Una vez se recogen la ingente cantidad de datos y comienza su destilado, el dato cobra importancia, y para ello debe presentarse de forma clara e intuitiva. Estas visualizaciones muchas veces son la clave para comprender el Big Data.
 
Los datos que muestra un producto y cómo los muestra, son incluso más importantes que la forma en que los procesa, luego el thinking debe ser una parte esencial en los diseñadores de experiencias para elevar los productos adaptándolos a los usuarios que deben utilizarlos y consumir a información.
 
"Pensar es el trabajo más difícil que existe, y probablemente sea la razón por la que tan pocos se dedican a ello", Henry Ford.
 
Desde BABEL somos conscientes de ello desde hace años, y a través de nuestro área de UX Avanzado somos pioneros en la conceptualización y diseño de interfaces de datos y de cualquier producto digital. Nos gustan los retos. ¿Nos conocemos? Escríbenos a [email protected]
 
 
 
 
 



 

José Luis  García López
José Luis García López

Head of UX. Manager del área Servicios en Babel.

logo linkedin compartir en Linkedin Contacto

Otros artículos destacados