Cómo diseñar dashboards que no sean horribles – ¡for dummies!

No hace falta ser diseñador para mejorar la calidad de nuestros dashboards. Solo hay que aplicar mecánicamente cuatro ideas súper sencillas. Si lo puedo hacer yo que soy economista-devenido-en-analista-digital, cualquiera puede.

Estas ideas se pueden aplicar en Google Data Studio, Tableau, Klipfolio o cualquier herramienta que usemos para armar tableros. Es más, son conceptos generales de diseño gráfico que las pueden extender a cualquier ámbito de su vida, ya sea diseñando la portada de un informe para la jefa o para cosas tan triviales como para hacer un meme.

Las ideas que les voy a presentar son del libroThe Non-Designer’s Design Book escrito por Robin Williams (no ese Robin Williams). Le recomiendo que lo compren y lo lean todo. ¡Explica mucho mejor que yo y tiene muchos muchos ejemplos!

Los cuatro conceptos que se tienen que acordar son:

  • Proximidad
  • Alineación
  • Contraste
  • Repetición.

1. Proximidad

El principio es fácil: todo el contenido que esté relacionado temáticamente va junto. Lo que no esté relacionado temáticamente va separado. 

En la siguiente imagen, hay una serie de tablas, gráficos y “scorecards” de KPIs de la cuenta demo de Google Analytics. Tomense unos 20 segundos para entender bien qué KPI corresponde con qué gráfico o tabla…

Ejemplo de un dashboard con mal uso del espacio.

… ¿Listo? Es un ejemplo de un error muy común que repetimos todos cuando empezamos a diseñar: ocupar todo el espacio disponible. Se le tiene miedo al “espacio en blanco”. Si bien los KPIs están cerca a sus gráficos/tablas correspondientes, el problema es que todo está a la misma distancia, entonces es muy difícil distinguir a simple vista qué va con qué. Además, la información de comportamiento y de usabilidad está mezclada.

Veamos como podría ser más entendible.

Dashboard que utiliza la proximidad para unificar la información similar
  • La información está bien delimitada entre la de comportamiento y la de ecommerce. Hay dos títulos bien grandes a los costados que hacen bien explícita esta diferencia.
  • No le teman a los espacios en blanco. Noten como el espacio entre las métricas de “Ecommerce” y de “Comportamiento en el sitio” ayudan a crear un marco invisible alrededor de cada grupo.
  • Los KPIs están totalmente separados entre sí. No dejan duda de a qué tabla/gráfico corresponden.
  • Menos es más. Si bien está todo un poco más chico, no se pierde la información. De hecho, es mucho más fácil de entender. No tengan miedo en achicar un poco las cosas en pos de ganar claridad. 

2. Alineación

La alineación es un componente clave para entender las relaciones entre los elementos de una composición.

A primera vista, los KPIs pequeños parecen indicar la tasa de abandono entre cada paso. En realidad, no tienen mucho que ver entre sí pero la falta de una alineación tajante genera confusión. (Si están pensando que NADIE puede armar un dashboard tan feo, están equivocados. Este ejemplo está inspirado en hechos reales)

Si marcamos las principales líneas de alineación, el problema se nota más.  ¿Ven como se “conecta” la información entre sí? Para peor, la etiqueta “Embudo de Checkout” parece englobar a todos los datos.

Veamos a continuación, como alineando un poco mejor, podemos corregir estos problemas:

Izq.: Alineamos los elementos similiares entre sí. Der.: Esquema de alienación
  • Alinear para unificar. El título del embudo adopta la misma alineación central que los datos a los que refiere. 
  • Alineaciones distintas para contenido distinto. Todo lo que refiere al embudo tiene alineación central. Los datos extra, alineación izquierda.
  • Alinear para separar. Como el título del embudo empieza a la misma altura que los datos extra, es poco probable que refieran a lo mismo. La distancia, de nuevo, ayuda.

3. Contrastes

El contraste cumple con dos objetivos. Resalta y da jerarquía a ciertos tipos de información. Por ejemplo, en esta misma nota, hemos utilizado el contraste entre tipografía en “negrita” vs. tipografía normal para destacar las partes más importantes donde se resume la información. En un dashboard, por ejemplo,  se puede utilizar para resaltar los KPIs más importantes y los títulos. 

Además, hace que sea más interesante y más fácil de leer el contenido. Esto tiene que ver con la forma en que funciona nuestros cerebros. Resulta que somos muy buenos reconociendo cambios y diferencias entre elementos de nuestro entorno.

Los supermercados usan el contraste hasta en las verduras

Por ejemplo, los supermercados hacen uso del contraste de color para vender más.  La próxima vez que vayan al súper, fíjense que las frutas y verduras suelen estar agrupados por pares de colores que contrastan. Por ejemplo, los tomates ROJOS al lado de las lechugas VERDES. Esto nos llama la atención y resalta el color de ambos productos, dándoles un aspecto más vibrante.

Algunos contrastes son los de:

Color, tamaño, peso y tipo de tipgrafía: algunos de los tipos de contrastes más comunes.

Tips para el uso de contraste:

  • La forma más sencilla de generar contraste es con tipografías. Pueden elegir una bien pesada para los títulos más importante, como los de la familia slab serif y para el texto en párrafos o de menor importancia algo sans-serif
  • No sean tímidos. Si dos cosas son distintas entre sí, hagan que sean MUY DISTINTAS. Si van a contrastar tamaños, que sean tamaños muy distintos. Si van a contrastar colores contrasten colores muy distintos (azul vs amarillo está bien, azul oscuro vs. negro está mal).
  • También se puede dar contraste cambiando los fondos y la alineación del contenido.
  • Volviendo al punto 1, la proximidad también es una forma de generar contraste, en este caso dejando espacio vacíos entre bloques de información.

Ejemplo:

Dashboard sin contraste

Dashboard sin uso de constraste

Dashboard con contraste

El mismo dashboard, pero con contraste
  • Lo primero que hicimos fue borrar toda la información que no fuera esencial. El contraste más fuerte posible es, justamente, el de la información que está presente vs. la que ni siquiera podemos ver. Como dijo San Martín antes de cruzar Los Andes: «Seamos inteligentes con los KPIs, lo demás no importa nada»
  • Hay un contraste de color bien claro entre la “información azul” (comportamiento) y la “información naranja” (tráfico).
  • Los subtítulos (“Comportamiento” y “Fuente de Tráfico”) contrastan con el resto de los textos por el fondo solido, el peso en negrita, un mayor tamaño y la alineación a la izquierda, como si fueran un índice. Además, el color blanco del texto contrasta con los fondos sólidos.
  • A la vez, los subtítulos generan separaciones muy obvias entre la información “azul” y “naranja”
  • El título del dashboard (“Resumen de KPIs”) contrasta en tamaño, en el fondo y la alineación central que tiene.

4. Repetición

La repetición de elementos visuales a lo largo de un mismo documento, permite darle unidad y coherencia. Las personas aprendemos a reconocer rápidamente que ciertas decisiones de diseño cobran un significado determinado, aún en la primera vista. 

Por ejemplo, en el dashboard anterior, rápidamente aprendemos que los subtítulos que separan distintos tipos de KPIs tienen fondos sólidos, de colores brillantes (azul o naranja)  y que ocupan el ancho de todo el dashboard. La próxima vez que veamos esa línea, esperaríamos que cambie el tipo de KPIs a mostrar (por ejemplo, a KPIs relacionados con las ventas).

Tips para ser repetitivos:
Tips para ser repetitivos:

  • Ser repetitivos básicamente consiste en, primero, ser consistentes. Si elegimos una tipografía para los títulos hay que mantenerla.
  • En segundo lugar, hay que tomar esa consistencia y potenciarla. Por ejemplo, las marcas tienen una paleta de colores predefinida. Podemos utilizar esa misma paleta de colores y aplicarla al diseño nuestro.
  • Buscar oportunidades para generar repeticiones. Por ejemplo, si un documento contiene varias listas numeradas, se pueden repetir el espaciado de las listas, resaltar el color de fondo de los números, etc.
  • Ser consistentes con el posicionamiento de los elementos gráficos como logos e imágenes que se repitan.

Veamos el ejemplo de un dashboard que utiliza la repetición en todos sus elementos:

Acá va de nuevo, pero ahora marcando cuales son los tipos de repetición:

En este caso de una hipotética empresa de vinos, vemos como la repetición permite generar un efecto de unidad e identidad de marca muy fuerte.

  • Para empezar, la paleta de colores repite el violeta uva de la vida real y lo traslada al mundo digital. Esta repetición asocia a la marca y al dashboard con la información que contiene.
  • Los colores se repiten en los gráficos, títulos y detalles como los bullets de los subtítulos. Es dominante donde tiene que serlo (los gráficos de torta/pastel y el de barras) y toma un rol secundario donde dificultaría la lectura (en los bullets de los subtítulos)
  • Todos los textos contienen tipografía que pertenece a la misma familia. Los contrastes en los textos se generan con tamaños, colores y subrayados de los nombres de los gráficos.
  • Hablando de nombres de los gráficos, noten que son los únicos elementos subrayados. Esto genera unidad a través de la repetición (siempre que hay un nombre de gráfico, tiene subrayado) y además genera unidad por contraste (son el único elemento subrayado) Flawsless victory.
  • También se agrega de manera deliberada un bullet en forma de flecha que repite el grosor y estilo de la tipografía de los nombres de los gráficos, pero toma el color vino del resto de los elementos. De esa manera funciona como un puente visual que conecta los nombres de los gráficos y el resto del dashboard. Fatality!

Conclusión

No hay motivos para querer hacer que los diseños sean malos. Si bien, siempre hay un factor subjetivo alrededor de la estética, hay que tener en cuenta que la principal función de los dashboards es la de transmitir información de manera clara. Para esto recuerden entonces: Contraste, Repetición, Alineación y Proximidad = CRAP. Usen CRAP para que sus diseños dejen de ser CRAP.

Como siempre, los invito a que opinen, critiquen y compartan 🙂 

Leave a Reply

Your email address will not be published. Required fields are marked *