Tips para el diseño de un dashboard

TIps para diseñar un dashboard

Un dashboard bien diseñado es un activo muy importante a la hora de tomar decisiones, es por eso que te traemos estos tips para que el diseño de tu próximo dashboard sea un éxito.

Con estos consejos conseguirás que los lectores se centren en lo realmente importante y no en elementos distractores.

Antes de comenzar, te compartimos esta lista de conceptos que estaremos utilizando a lo largo de este artículo.

  • Dashboard o cuadro de mandos: Es un conjunto de representaciones que ayuda a monitorizar y analizar de forma visual uno o varios conceptos
  • Usuario: Es la persona que va a utilizar la información y va a responder preguntas con el dashboard que se ha creado.
  • Representación gráfica: Es la representación de datos por medio de recursos visuales, algunos ejemplos son: el grafico de barras, el gauge de estado, el treemap, etc.
  • Representación jerárquica: es un subconjunto de las representaciones gráficas, en el cual los datos están organizados en una estructura de árbol o usa relaciones de padre/hijo.
  • Contexto: Entorno físico o situación de la que depende el sentido de lo que se está hablando.

Ya con los conceptos claros, te compartimos la lista de tips que te ayudará a mejorar tus cuadros de mando.

Usa los mismos colores para representar las mismas cosas

Para facilitar al usuario la visualización y el entendimiento del contexto, es recomendable que asignes y uses un color determinado para cada concepto. De esta forma, el usuario no tendrá que ver en cada momento la leyenda de todas las representaciones gráficas, sino que de un vistazo sabrá de qué concepto estás hablando.

A la hora de hacer la asignación de los colores a los conceptos, ten en cuenta que algunos colores ya cuentan una connotación y podrían distorsionar la percepción de los lectores. Tal es el caso del rojo, el amarillo y el verde, que normalmente representan una calificación de malo, regular y bueno.

Un ejemplo de esto sería la utilización del color rojo en todo un gráfico de ventas, ya que la primera impresión sería que la información representa una situación negativa, aunque no sea el caso.

No olvides las líneas limpias

Da a la información el espacio que necesita, no la ubiques toda en un mismo lugar ni uses efectos 3D, propios de la estética de los años 90 y con un gran poder de distracción. Como mencionamos al principio de este artículo, un dashboard bien logrado es fácil de consultar y no requiere que el usuario tenga que hacer el esfuerzo de diferenciar elementos porque se encuentran muy juntos o superpuestos.

Este es un ejemplo de cómo se ve un gráfico en el que no se ha dado el espacio necesario. En este caso es imposible visualizar los datos que se encuentran entre el 60% y el 100% del eje X. La superposición de elementos hace que este gráfico sea inútil para visualizar todos los datos.

¿Qué soluciones se pueden plantear? Una opción sería cambiar la escala del eje horizontal de lineal a exponencial, otra opción sería filtrar la información por continente o finalmente evaluar qué tan relevante es el área de los círculos y reemplazar el gráfico por uno de dispersión.

No uses representaciones gráficas en 3D

Hay muy pocos casos en los que una representación 3D es efectiva y uno de los mayores problemas es que puede esconder información por solapamiento, recuerda que estamos presentando información en una pantalla o en papel y que es un plano 2D.

En este gráfico podemos observar cuando se presenta ocultamiento de información. Es tal el solapamiento que resulta imposible responder a la pregunta, ¿cuántas personas ven televisión más de 4 horas al día?

Para ello necesitaríamos ver la cantidad representada en el color verde del texto ¿Cuántas horas al día ves? Pero esto no es posible ya que los demás conceptos lo han tapado por completo.

Es posible que pienses que la solución sería agregar una opción para rotar el gráfico, pero es importante recordar el consejo anterior y mantener la atención del usuario en la información y no en realizar esfuerzos innecesarios y distractores.

Ten en cuenta que los gráficos de barras tienen que empezar en 0 en el eje del valor

Recuerda que nuestra compresión es muy visual, sobre todo porque aproximadamente el 50% de nuestro cerebro está destinado a procesar la información visual, haciendo que recordemos más fácilmente características físicas como la diferencia de tamaño de dos objetos que los valores exactos que representan cada uno. Es por eso que si las barras de un gráfico no empiezan en 0, se agrega mayor dificultad al lector al provocar que se pierda la proporción y cueste evaluar adecuadamente la información de la gráfica.

En este ejemplo, podemos observar como el usar 200 como punto de partida del eje horizontal, genera una distorsión visual en la que pareciera que el 12 de octubre se presentaron el doble de clics y visitas que el 17 de septiembre. En el caso de la misma gráfica, partiendo de 0 se puede apreciar que la diferencia en ambas métricas es de aproximadamente 30 unidades.

A la hora de realizar representaciones jerárquicas como el treemap, el bubblemap o el sankey, por mencionar algunos, ten en cuenta que no es recomendable presentar todos los elementos de la jerarquía en la primera visual debido a que resulta difícil diferenciar los elementos entre sí, como lo vemos en este treemap. Esto trae como resultado que solo lectores con ojos muy entrenados puedan acceder a la información y los demás lo desestimen por no aportarles un valor claro a la hora de responder a sus preguntas.

Recuerda que el dibujo va antes que el número

Como hemos mencionado antes, es más fácil recordar objetos que números exactos, sobre todo si tienen muchos dígitos. Es por eso que decir de memoria el número de la tarjeta de crédito, resulta mucho más difícil que recordar otras características como el color de la tarjeta, su forma o si los números están impresos o marcados. Continuando con más ejemplos, podemos afirmar que es más fácil recodar el color y la forma de un coche que su número de matrícula.

¿A qué se debe esto? Como lo comentamos anteriormente, el cerebro privilegia la información visual como los tamaños, las formas, las distancias y los colores. Esta es una característica que se desarrolló con la evolución, ya que era más relevante recordar las características físicas de los depredadores que recodar si una persona nos debía 30 granos de trigo. Igualmente, era importante diferenciar si las frutas eran venenosas o no, por lo que recordar los colores también se convirtió en un elemento de supervivencia, especialmente para diferenciar las frutas venenosas de aquellas con formas y colores muy similares que no lo eran.

Como conclusión recordemos que sin importar la gráfica que seleccionemos, debemos dar el lugar que le corresponde a los recursos visuales, incluido el espacio, para que la información sea percibida por el lector con la mayor facilidad posible. Esto se puede aplicar incluso cuando encontramos casos en los que el usuario no quiere trabajar con representaciones gráficas sino con listas. En el siguiente ejemplo, verás que los valores en los que se presentó una disminución están en rojo, acompañados de una flecha hacia abajo y los que tuvieron un aumento están en verde, acompañados de una flecha verde. De esta manera será más fácil que recuerden si en general hubo más aumentos o disminuciones, tal y como el ejemplo de la tarjeta de crédito, será más fácil recordar el color y la forma que el valor en sí.

Si te han gustado estos tips y quieres empezar a diseñar tu próximo dashboard, te invitamos a descargar nuestra Guía: Vocabulario visual, en ella encontrarás los consejos necesarios para encontrar la gráfica más adecuada para tu necesidad de representación de información.

Comments are closed.