Gráficos: un paseo de diseño lleno de baches

No se lo digas a nadie, pero me encantan los gráficos. Es una cosa tan rara para apreciar, lo sé. Cuando escribí mi tesis de licenciatura, pasé más tiempo diseñando los gráficos que escribiendo el texto (mi profesor asiente tranquilamente desde su cámara). Quería hacerlos perfectos. Mi tesis se basó en una investigación cuantitativa, donde reuní muchos datos e intenté iluminarlos con gráficos. Pensé que se veían realmente geniales. Qué bonitas curvas. Increíble distancia entre los divisores horizontales. ¿Y esas leyendas X e Y? Perfectamente equilibrado.

Hace un mes, comencé un nuevo proyecto en mi trabajo actual, Tink. Fue un sueño hecho realidad; Pasaría las próximas semanas creando una gran herramienta de análisis. Gráficos en todas partes. Tantos datos para digerir. Así que recordé mis viejos gráficos de tesis de licenciatura y decidí caminar por el carril de la memoria y mirar la tesis por primera vez en 7 años. Esperaba inspiración. Pero cuando abrí el documento, cerré la computadora en milisegundos después de ver los gráficos. Qué. Un desastre. Después de mirar una pared en blanco durante 1 minuto (o 1 hora, el tiempo y el espacio desaparecieron por un tiempo), abrí mi computadora nuevamente y traté de aclarar todo lo que decía. Pero no pudo. Había demasiada información en muy pocos píxeles. No tengo una versión escaneada, pero aquí hay un gráfico que hice en minutos para ilustrar lo terrible que fue.

No es mi gráfico de tesis (afortunadamente) pero fue casi tan tonto

Volví a la realidad y traté de eliminar la baja autoestima recién descubierta viendo mis viejos gráficos. Doce clips de YouTube auto motivadores más tarde, abrí Sketch y comencé mi nuevo proyecto de gráficos para trabajar. Necesitaba hacerlo mejor.

Pasaron las semanas y probablemente hice cientos de gráficos. He iterado sobre ellos y he recibido comentarios e implementado actualizaciones. Creo que ahora estoy un par de pasos más cerca de crear al menos un gráfico decente. En 6 capítulos, revisaré, paso a paso, mi proceso y explicaré cómo diseñé, cómo iteré y por qué el producto final se ve y funciona como lo hace ahora.

Parte 1

Comenzando con el primer borrador

El primer borrador del gráfico fue literalmente una copia, pegado y escala de un gráfico que hemos creado para la aplicación fintech que creamos en Tink.

Pros

Lo bueno de este gráfico es que está limpio. No tiene ningún desorden real. Tiene tan pocos parámetros que realmente funciona sin leyendas / explicaciones del eje Y y el eje X.

Contras

Estamos creando una herramienta de análisis avanzada. No obtiene el desglose de lo que está buscando con esta pequeña cantidad de información. Es difícil aplicar métricas avanzadas con tan pocos controles. No es muy escalable para los datos potenciales que nos gustaría mostrar en el futuro.

Aprendizajes

  • Hazlo simple. Facilite la lectura, sin tener que estudiar los detalles para poder entender lo que trata de contar.
  • Tenga esto en cuenta al tiempo que agrega más funcionalidades y datos al gráfico (porque habrá muchos datos en el futuro).

Parte II

Pasar a agregar funcionalidad y datos

Al nacer del gráfico minimalista anterior, realicé un par de cambios necesarios para poder visualizar más datos, así como datos más avanzados. Además, debe haber una forma de filtrar los datos.

Actualizaciones

  • Filtrar por tiempo
  • El cursor sobre un punto final debe mostrar más información
  • Las fechas deben mostrarse más prominentes
  • Debe haber una línea detrás del círculo flotante para indicar dónde está
  • La línea en sí misma no puede ser redonda. Las esquinas redondeadas no reflejan puntos de datos precisos al pasar el mouse para ver datos más exactos.
  • Fuentes más grandes en todas partes porque esto no es móvil y tenemos espacio para jugar aquí.
  • Es necesario que haya líneas que indiquen el eje x.

Pros

Este gráfico es más claro; muestra más puntos de datos y están lo suficientemente detallados como para comprender cómo funciona su aplicación. También es bueno que pueda desplazarse y obtener detalles más exactos si está buscando algo específico. Las líneas ya no se redondean, lo que también lo hace más exacto. Las fechas se muestran claramente a continuación, colgadas solas para que sean fáciles de leer.

Contras

Se pone un poco desordenado en la esquina superior derecha. La sección de filtro del filtro de tiempo se llena un poco con los valores del eje Y. También creo que hay muy pocas líneas detrás que indican un poco dónde está el punto de datos 500. Aunque el color de nuestra marca es ese tipo de salmón, cuando se lo mostré a un desarrollador, lo experimentaron como si indicara un error.

Aprendizajes

  • Puede hacer un gráfico avanzado al no mostrar demasiado, pero al permitir que el usuario descubra lo que quiere mediante acciones (como aquí, filtrar y desplazar).
  • Debería mover los números del eje Y a la izquierda ya que no está sucediendo tanto en ese lado.
  • Evaluar el color.

Parte III

Son las cosas pequeñas

Algunas mejoras de estilo en cada componente ayudaron a aclarar esto. En la parte iterativa de la evolución de un diseño, no es necesario volver a dibujarlo desde el principio, ya que todos ahora: trabajar con un componente cada uno, componente por componente, le da un dulce resultado holístico.

Gráfico: Parte III

Actualizaciones

  • Color cambiado a nuestro color secundario de la marca: verde oscuro
  • Se movieron los números del eje Y a la izquierda
  • Se agregaron pequeñas líneas debajo de la línea inferior para que las fechas se alineen mejor
  • Se agregó una línea entre cada línea "completa" para que sea más fácil leer el gráfico sin desplazarse, mientras se mantiene suelto para que no se vea abrumado por líneas
  • Se movió el filtrado a una subsección que es plegable para dar el poder de filtrado a los usuarios avanzados, mientras se mantiene el filtrado oculto para los usuarios de casos más comunes.

Pros

Las acumulaciones de todos los Pros anteriores podrían insertarse aquí, así como el beneficio adicional de mover los números del eje Y a la izquierda. Ahora es más fácil leerlos, y las acciones (filtro) se destacan más que antes cuando estaba lleno en el lado derecho. Las líneas facilitan la lectura y el gráfico aún se siente limpio y claro. Es bueno que no haya filtros que ocupen demasiado espacio en la esquina superior derecha. Con múltiples opciones de filtro disponibles, se vería desordenado.

Contras

Los filtros plegados no son óptimos para usuarios avanzados. Pero al expandir los filtros, se recordará en el siguiente gráfico y en la próxima sesión para cualquiera que quiera ver los filtros expandidos.

Aprendizajes

  • Agregar pequeños detalles aquí y allá ciertamente hará que sea más fácil de leer.
  • Pero mantener los detalles agregados al mínimo es necesario para mantenerlo limpio y claro.
  • Cuando le mostré esto a un colega, me preguntó si un gráfico de barras no es la mejor opción para este tipo de datos ...
  • Así que el último aprendizaje fue repensar todo el asunto. Lo cual nunca es bueno, porque pasé mucho tiempo con eso. Pero también muy bueno, ya que había margen de mejora.

Parte IV

Al final, comienza desde el principio.

Entonces, mirando el gráfico lineal, el valor entre un punto y el siguiente solo tiene sentido para ciertos datos.

  • Al igual que el dinero, si desea mostrar los gastos de su tarjeta de crédito personal, un gráfico lineal tiene sentido porque entre el punto ayb, hay un valor exacto de dinero.
  • Pero mostrar algo binario que no puede ser otro que un entero y, como se muestra en el gráfico a continuación, está entre dos puntos de datos, intentar mostrar a las personas en el gráfico correcto durante la noche no tiene sentido. Sabemos que es una disminución, pero la línea no puede explicar exactamente cuánto, ya que no mantenemos un registro de la disminución por segundo.
Gráficos: Parte IV

Aprendizajes

  • Pruebe los gráficos de barras para el escenario en el que el cambio entre el punto de datos ayb no puede explicarse por una línea.

Parte v

Un nuevo día

Con los comentarios, rediseñé el gráfico para que sea barras en lugar de una línea. Muestra datos realmente claros para cada valor del eje X, y me acercó un 3% al nirvana cuando lo miraba.

Gráfico: Parte V

Actualizaciones

Barras en lugar de una línea.

Pros

Mostrando claramente la cantidad en el eje x. Fácil de leer cada fecha también; mostrar una barra para una fecha es más fácil de ver que cuando tiene una línea entre varias fechas. Hace que sea más fácil escanear.

Contras

Demasiado espacio en blanco entre cada gráfico, pero podría resolverse ajustando las barras y la distancia entre el extremo derecho e izquierdo del contenedor.

Parte VI

Envolviendolo

Me gustaría terminar el artículo con un par de ideas adicionales que obtuve durante todo este proceso.

1. Mantenlo simple estúpido

1. Mantenlo simple estúpido

A la izquierda, los datos se dividen en dos gráficos diferentes entre los que puede cambiar. Esto se debe a que se vuelve desordenado, abarrotado e ilegible tan pronto como comienza a agregar más gráficos (como se ve a la derecha). Mostrar dos líneas puede funcionar, pero no es ideal, pero cuando comienzas a agregar más de dos líneas, es un juego de adivinanzas cuáles son y no son los gráficos.

Nota final sobre tener varias líneas en un gráfico: ¿qué sucede si tienen exactamente los mismos datos? Simplemente estarán uno encima del otro, cancelando uno de ellos ocultándolo debajo del otro.

2. Destaque lo que es importante

2. Destaque lo que es importante

Cuando desee ver los detalles de una determinada barra o ciertos datos, haga que sea fácil de leer y comprender. A la izquierda, el usuario se desplaza sobre un determinado punto de datos y las otras barras se desvanecen para facilitar su lectura. Los demás no están completamente ocultos porque es posible que desee comparar esa barra con los demás. A la derecha, no hay efecto de desvanecimiento y es difícil leer esa barra por eso.

3. Tabular vs. Proporcional

3. Tabular vs. Proporcional

No es un pecado capital usar una fuente proporcional, pero si está a punto de construir un producto que se incline fuertemente a exponer una gran cantidad de datos en tablas y gráficos, agregar una fuente secundaria que sea adecuada para mostrar números de manera tabular es un buena idea. Alinea los números para que tengan el mismo ancho y, por lo tanto, las columnas se alinean correctamente. Puede encontrar un artículo encantador y una inmersión más profunda en esto aquí, en un artículo de Matthew Ström.

Es un pecado capital en mi lugar de trabajo actual usar varias fuentes, por lo tanto, mantenemos nuestra fuente proporcional en gráficos. Pero mi consejo es: si está en el proceso de seleccionar una nueva fuente para su empresa o comenzar una nueva empresa y tiene la libertad de seleccionar una fuente de su elección, verifique si esa fuente proporciona una versión tabular; rara vez lo hacen , incluso a precios superiores.

Parte VII

Esa es realmente la envoltura! Creo que trabajaré en el diseño de gráficos aquí y allá durante el resto de mi vida, por lo que intentar mantener un registro de los aprendizajes en el camino parece una de esas raras buenas ideas que tengo. Ya veremos.

Muchas de las mejoras de diseño y comentarios que mejoraron esto en el camino se deben a los desarrolladores (Jon, Gustav, Stephan, etc.) en mi equipo en Tink, así como a mis colegas de diseño como Henrik Hedvall.

Si tiene alguna recomendación o información, no dude en comunicarse conmigo. ¡Gracias por leer!

Siéntase libre de ver y leer más de mi trabajo en mi cartera o agregarme en LinkedIn o seguir mi viaje de diseño en Dribbble.