Gráficas, sí. Pero cuáles y cómo.
Lo de que hay que ‘pensar fuera de la caja’ es una obviedad. Ejemplo de ello, este artículo.
Asistir (y volver a ver y re-ver) la charla Malas gráficas (ver) de Almudena Martín Castro (@puratura) de la edición 2018 del T3chFest hizo que planteara este artículo.
Si, ya sé que ha pasado tiempo desde entonces. Pero, ‘más vale tarde que nunca’.
A modo de resumen [Nótese en todo momento el modo irónico], lo que Almudena nos contó en su charla fue cómo hacer malas gráficas. Sí, sí, malas gráficas.
Que técnicas y qué tipos utilizan políticos y medios de comunicación para engañarnos, que trucos perceptivos deberíamos de usar para conseguir una mala visualización de los datos y cómo deberíamos de mejorar nuestras propias gráficas para que digan la verdad y nada más que la verdad.
¡Dentro vídeo! 👇🏻
Y si con algo me quedé, fue con la recomendación de no utilizar gráficas de tarta por su mala lectura y fácil equivocación a la hora de interpretarlas.
¿Un ejemplo? 👇🏻
Del uso de tartas, literalmente hablando 🎂 🍰, hablaremos más adelante.
Mientras la escuchaba, automáticamente me vino a la cabeza un tema del que hacía tiempo quería escribir e investigar más:
El uso de las gráficas de barra o progreso (radiales u horizontales) en apps.
Y es que, si hay un recurso gráfico, este tipo de gráficas, son las que más se utilizan para visualizar datos en aplicaciones móviles.
En aplicaciones de banca, de telefonía, de salud, de deportes, en procesos de gamificación, en bolsa, en apps de empleo… Todas las que quieras y en todo tipo de sectores. Abre tu móvil y compruébalo.
Pongámonos en situación
Ahora, después de situarnos, pregunto:
¿Hacemos un uso correcto de estas gráficas? ¿los usuarios siempre entienden lo que se representa o quizás querrían ver los datos representados justo de la forma contraria?
¿Cómo deberíamos de utilizarlas? ¿gráficas radiales u horizontales que van vaciándose de izquierda a derecha? ¿o mejor de derecha a izquierda?
¿El usuario debería decidir el modo en el que sé ‘consumen’ o ‘rellenan’ estas gráficas?
El ejercicio
Para intentar responder estas preguntas planteé un ejercicio a un grupo de usuarios pidiéndoles representar dos casos de uso concretos:
Caso 1- Un objetivo de pasos durante un día
Caso 2- Un consumo de datos durante un mes
Ambas deberían de pintarse en una gráfica de barras en formato radial y horizontal. Y en dos situaciones distintas.
Además, también pedía al usuario que indicara la dirección en la que se cargaría la información y si era diestrx o zurdx, por sí este dato pudiera aportar algo.
Resultados
En el ejercicio participaron un total de 27 usuarixs.
A continuación tocaba analizar la información y ver si existían patrones claros o no hay nada escrito.
Caso 1 — Un objetivo de pasos durante un día
Todos han realizado el ejercicio igual. Cuando se trata de representar un objetivo, los 27 lo tienen claro.
Gráfica radial
0 de 10.000 pasos > la dejan vacía
3.000 de 10.000 pasos > la rellenan en el sentido de las agujas del reloj
Gráfica horizontal
0 de 10.000 pasos > la dejan vacía
3.000 de 10.000 pasos > la rellenan de izquierda a derecha
Curiosidades
- Tres usuarios proponen añadir mensajes de motivación, animando al usuario a completar su objetivo diario.
- Otros usuarios plantean añadir otros datos como el porcentaje o la opción de dividir en bloques la gráfica horizontal, para visualizar mejor los pasos que lleva (o los pasos que le quedan, 👈🏻👁 ¡ojo a esto!).
Caso 2 — Un consumo de datos durante un mes
En este caso encontramos los dos patrones posibles; están los que ‘restan’ y los que ‘suman’.
Siendo mayor el número de usuarios que van restando el consumo. 18 de 27 restan, frente a los 9 que suman.
Vayamos a los detalles.
Gráfica radial
Por un lado tenemos a los que restan y por otro a los que suman. Si nos centramos primero en la representación del consumo de datos en la gráfica radial encontramos que:
El 67% (18 usuarios) representan la gráfica radial total rellenada y el 33% (9 usuarios) la dejan vacía.
Si hacemos zoom en el porcentaje más alto, el 48% (13 usuarios) restan los datos en el sentido contrario a las agujas del reloj y el 18% (5 usuarios) restan los datos en el sentido de las agujas del reloj.
Primer dato claro:
Todos los que representan la gráfica radial total rellenada restan los datos en el sentido contrario a las agujas del reloj.
Datos vs Tartas
Volviendo a ese 33% de usuarios. Además de dejarla vacía, todos suman los datos en el sentido de las agujas del reloj.
Aquí la primera incoherencia del ejercicio. 🤔
¿No es raro que si pedimos representar el total de una cantidad, esta gráfica se quede vacía?
1 ENERO — Te quedan 10 GB (de 10 GB)
¿Y qué además, cuándo le pidamos representar una reducción de los datos vayan sumando?
25 ENERO — Te quedan 4 GB (de 10 GB)
¿Y si hiciéramos el ejercicio con una tarta (de las de comer)?
Si te pido que dibujes una tarta dividida en 8 porciones y luego una tarta de 8 porciones a la que le quedan 6, ¿cómo la pintarías?
Gráfica horizontal
Los datos en la representación horizontal apenas varían. Salvo un dato.
El 67% (18 usuarios) representan la gráfica horizontal total rellenada y el 33% (9 usuarios) la dejan vacía. Igual que en la radial.
Si hacemos de nuevo zoom en el porcentaje mas alto (los que representan la gráfica horizontal total rellenada); el 55% (13+2 usuarios) restan los datos de derecha a izquierda y solamente 3 usuarios de esos 18, restan los datos de izquierda a derecha.
Segundo dato claro:
El 84% de los que representan la gráfica horizontal total rellenada restan los datos de derecha a izquierda.
Curiosidades
- Un usuario propone añadir el dato de días que le quedan para consumir sus datos. Muy interesante en este caso ( el consumo de datos se suele reiniciar todos los meses).
- Otros usuarios plantean añadir otros datos como el porcentaje, mensajes de texto motivadores, la opción de dividir en bloques la gráfica horizontal, indicar donde está el inicio (0 GB) y el fin o total (10 GB) en la gráfica o representar los datos como un gráfica de tarta.
Conclusiones
Las conclusiones que hemos obtenido son:
Caso 1 — Un objetivo de pasos durante un día
Todos rellenan la gráfica radial en el sentido de las agujas del reloj y la gráfica horizontal la rellenan de izquierda a derecha.Caso 2 — Un consumo de datos durante un mes
Todos los que representan la gráfica radial total rellenada restan los datos en el sentido contrario a las agujas del reloj y el 84% de los que representan la gráfica horizontal total rellenada restan los datos de derecha a izquierda.
Objetos físicos y el patrón visual
Estas conclusiones tienen todo el sentido si las comparamos con objetos físicos cotidianos que se utilizan para medir o contar/sumar/restar cantidades. Éstos siguen el mismo patrón visual.
¿Cómo funciona una regla ? ¿y un termómetro? ¿y un temporizador manual? ¿y un reloj? Todos siguen el mismo patrón visual. De izquierda a derecha. De menos a más.
Seguir esta lógica tiene todo el sentido.
No falla. Si algo está bien diseñado en el mundo real, llévatelo al digital.
¿La mejor solución?
Lo primero que tenemos que tener claro es qué mensaje queremos transmitir al usuario y con esta información, sabremos qué dato tendremos que destacar. Con esa suma, encontraremos la mejor forma de representarlo.
¿Queremos alertarle o animarle?
Por ejemplo, imagina que en tu app de deportes tienes un objetivo de 10.000 pasos diarios, ¿quieres saber cuántos pasos llevas o cuántos te faltan para llegar al objetivo?
Pues depende, habrá usuarios a los que le motive saber todo lo que llevan (la cifra es alta y está cerca del objetivo) y habrá otros que prefieran ver lo poco qué les queda para llegar al objetivo (la cifra es baja y eso les motiva).
¿Qué sería lo más correcto? Pues dar al usuario la opción de poder elegir. (En este caso entre lo que le queda para llegar a su objetivo o lo que lleva realizado).
La importancia del mensaje
La base de este ejercicio estaba en interpretar mensajes.
El usuario tenía que leer y a continuación interpretar lo que había entendido. Pero a veces, el usuario puede entender o ‘quiere’ leer otra cosa totalmente distinta. De hecho, si volviésemos a pedir a los mismos usuarios realizar de nuevo el ejercicio, seguramente algunos no ‘pintarían’ el ejercicio igual.
La forma en que transmitimos la información generará en el usuario una u otra reacción. La importancia del mensaje es clave.
Por ejemplo, Google Drive muestra con este mensaje el espacio de almacenamiento: “Uso actual: 6,79 GB de 15 GB (45%)”
Podría haberlo dicho de otra manera, añadiendo o sustituyendo con otros mensajes como:
“Te sobran 8,21 GB de 15 GB (55%)”, “8,21 GB libres (55%)”, “Aún tienes 8,21 GB sin usar (55%)” o “El 55% de tu almacenamiento está libre (8,21 GB)”.
Con esta información adicional el usuario estaría mas tranquilo, pues tiene más del 50% de su capacidad de almacenamiento libre. Google prefiere alertar al usuario proponiéndole comprar más espacio, qué, ¡vaya casualidad! está justo en la misma pantalla.
Un repaso a lo que se hace
Del minuto 0:00 al 0:12
De más a menos precio (0€ — 200€)
Del volumen 0 al 100
De 0 GB a 40 GB
De una hora a otra (13:00–22:00)
Sigue el patrón.
➕ Rellena una gráfica radial en el sentido de las agujas del reloj y la gráfica horizontal de izquierda a derecha.
➖ Resta los datos en el sentido contrario a las agujas del reloj y de derecha a izquierda.
Y ‘donde dije digo, digo Diego’… Recordad que siempre puede venir alguien y romperte el discurso (otra cosa es que tenga razón). 😅
Bonus
Os dejo algunos artículos relacionados que me ayudaron en el proceso de este artículo:
