Mejores Prácticas en Diseño de Dashboards de

Indicadores Empresariales
Javier Delgado

#mstrworld
 Contenidos

• ¿Qué es el diseño visual?

• Principios de diseño
• Retos
• Características de un buen dashboard
• Buenas prácticas
• Preguntas y respuestas

2 #mstrworld
 ¿Qué es el Diseño Visual?

¿Quién? (Qué tipo de usuarios)

¿Cuándo? (Los tiempos de acceso
Público permiten determinar el detalle y
las agregaciones necesarios)

Diseño
Visual

Contenido Presentación
¿Cómo?
¿Qué? (Presentación o colores
(Excepciones, medios, widgets, orden,
alertas, repetición, visualizaciones)
contenido basado en roles)
3
#mstrworld
 “Pensando” el Diseño Visual

Si se hace correctamente, el usuario podrá:

1. Comprender “por qué” se produjo el problema

y
2. Decidir “qué” hacer al respecto

4 #mstrworld
 Recuerdo: Principios Básicos

LÍNEAS Los ojos siempre siguen las líneas

COLORES Se utiliza para destacar algunos

elementos

PROPORCIONES Se utiliza para dar énfasis y contexto

CONTRASTE Se debe anteponer la facilidad de

lectura

3D Casi nunca un valor añadido

5 #mstrworld
 Diseño de Dashboards: Dificultades Habituales

• Detallar/Recoger los requisitos de los dashboards.

• Frontera difusa entre lo que “está disponible” en la

herramienta y lo que “se puede hacer” en la herramienta.

• Centrarse en las capacidades tecnológicas en lugar de en

la propia información.

• Falta de formación o experiencia en el aspecto de diseño.

• Demasiado énfasis en la “estética” y no en la información.

6 #mstrworld
 Comprendiendo al USUARIO
En general, los usuarios de los dashboards buscan:

• Acceso rápido a los datos

• No les parece útil recoger información; su principal objetivo es

consumir la información

• Su trabajo no gira en torno a los dashboards

• Poca paciencia o poco tiempo para esperar a que se facilite la

información

• Algunos usuarios (p. ej. analistas) quieren ser autónomos hasta

cierto punto
quieren ser los que deducen la información, no que
les presenten conclusiones. De ahí el término: “Auto Servicio”

7 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Estilosos

Fáciles de usar Deductivos

Interactividad Prácticos

8 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

9 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos

10 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Fáciles de usar

11 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Fáciles de usar Interactivos

12 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Fáciles de usar Interactivos

Estilosos

13 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Fáciles de usar Interactivos

Estilosos Deductivos

14 #mstrworld
 Psicología de los Dashboards
Creemos que los dashboards deben tener las siguientes
características:

Informativos Fáciles de usar Interactivos

Estilosos Deductivos Prácticos

15 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Cualquier cosa que convierte los datos en reflexiones es
INFORMATIVA.

Diseño alrededor de los procesos empresariales, NO de los

DATOS.

Consideremos que tenemos los siguientes DATOS:

Ventas - Este año
Ventas - El año pasado
Ventas por categoría de producto
Ventas por regiones geográficas

16 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
5
Ventas 4
3
Este año (EA) $$$$$ Ventas - EA
2
Ventas - AP
Año pasado (AP) $$$$ 1
0
Año 1 Año 2 Año 3 Año 4

Ventas por región Ventas por producto

Geo 1 Producto 1
Geo 2 Producto 2
Geo 3 Producto 3
Geo 4 Producto 4

17 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos

Lo que acabamos de hacer es juntar esta información para

crear un dashboard.

¿Pero realmente hemos transformado los datos en

información útil o, mejor aún, en reflexiones?

18 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
5
Ventas 4
3
Este año (EA) $$$$$ Ventas - EA
2
Ventas - AP
Año pasado (AP) $$$$ 1
0
Año 1 Año 2 Año 3 Año 4

Ventas por región Ventas por producto

Entonces, ¿qué falta?
Geo 1 Producto 1
Geo 2 Producto 2
Geo 3 Producto 3
Geo 4 Producto 4

19 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Diseño alrededor de los procesos empresariales, NO de los
datos
• Contexto
• Seguir la “Línea de pensamiento”
• Ir de unos KPI de resumen de mayor nivel a una exploración
detallada de los datos
• Página de inicio o contenedor principal

Las métricas más importantes primero, seguidas de una

explicación de por qué son así; después, métricas
complementarias y, finalmente, datos detallados

20 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
5 cosas principales para que sus dashboards sean
informativos:
1. KPIs: El valor más actual en el contexto
• Situación del negocio más actual
• Información más relevante
2. Tendencias
3. Comparaciones
• Basadas en tiempo
• Basadas en categorías o geografía
4. Alertas o Excepciones
• Umbrales
• Alertas
5. Rendimiento relativo
• Con otras funciones empresariales relacionadas
• Métricas de fomentación de la competición interna (rankings)
• Información de la competencia

21 #mstrworld
22 #mstrworld
 ¿Qué Hace que Funcione?

Barra KPI: Estado

empresarial actual

Tendencia lista,
siguiendo línea de
pensamiento,
apoyando la
curiosidad

Detalles sobre las

APPS que mejor
están funcionando:
de nuevo apoyando la
línea de pensamiento
y la tendencia natural
a la siguiente
pregunta

23 #mstrworld
24 #mstrworld
 ¿Qué Hace que Funcione?
Información
urgente,
importante,
práctica

Contexto
empresarial y KPI
para todas las
funciones
comerciales en un
solo lugar

Sencillez global en
la presentación,
los colores y la
organización; se
aplican todos los
principios visuales

25 #mstrworld
 Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Informativos |

Centrados en
Fáciles de leer Fáciles de Fáciles de Menos clics
un flujo de
comprender navegar
trabajo

26 #mstrworld
 Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Informativos |

Centrados en
Fáciles de leer Fáciles de Fáciles de Menos clics
un flujo de
comprender navegar
trabajo

27 #mstrworld
 Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Informativos |

Centrados en
Fáciles de leer Fáciles de Fáciles de Menos clics
un flujo de
comprender navegar
trabajo

28 #mstrworld
 Fáciles de usar| Interactivos | Estilosos| Deductivos | Prácticos
Informativos |

Centrados en
Fáciles de leer Fáciles de Fáciles de Menos clics
un flujo de
comprender navegar
trabajo

29 #mstrworld
 Informativos |Fáciles de usar | Interactivos | Estilosos | Deductivos | Prácticos

Elementos de interactividad

No más de 3 clics

No más de 3 selectores

Ventanas informativas: solo en algunos elementos

Si se habilita un menú desplegable, el usuario debe poder

volver a la pantalla

Cualquier cosa en exceso es una mala idea…

30 #mstrworld
 ¿Qué Reproductor de Música Preferiría?

31 #mstrworld
 Informativos |Fáciles de usar | Interactivos | Estilosos | Deductivos | Prácticos

• ¡Forma y Función!
• Utilice iconos actualizados.

• Utilice iconos en lugar de palabras.

• Botones más elegantes.

• Procure no utilizar muchos colores oscuros juntos.

• Utilice gradientes del mismo color en lugar de contrastar

colores.

32 #mstrworld
 Informativos |Fáciles de usar| Interactivos | Estilosos | Deductivos | Prácticos

• Respalde la tendencia más natural de preguntar y responder a

la pregunta “¿Por qué?”?

• Integración de auto servicio

• Facilite un flujo de trabajo

• Permita la navegación a los detalles de análisis

33 #mstrworld
 Informativos |Fáciles de usar | Interactivos | Estilosos | Deductivos | Prácticos

• El dashboard ha de permitir un flujo de trabajo.

• Diseñe transacciones sencillas.

• Preferiblemente, limite el número de acciones en un

dashboard para evitar sobrecarga y confusión.

• Asegúrese que la transacción tenga mucho que ver con el

problema en cuestión (si se presenta) y que la información
permita completar la operación.

34 #mstrworld
 Ejemplos
Informativos | Fáciles de usar | Interactivos | Estilosos | Deductivos |
Prácticos

35 #mstrworld
36 #mstrworld
 Demo

37 #mstrworld
 Demo – Operaciones

#mstrworld
39 #mstrworld
40 #mstrworld
41 #mstrworld
42 #mstrworld
 Medir el Éxito

• La verdadera prueba del diseño de su aplicación es su

adopción.
- Requiere ambas cosas: Forma y Función

• La adopción debe medirse al menos en los siguientes

momentos clave:
- Justo después del lanzamiento
- 3 meses después del lanzamiento
- Después, de forma periódica cada 3 o 6 meses

43 #mstrworld
 Medir el Éxito

Recuerde, no existe el diseño “perfecto”.

Por tanto, si los usuarios no le comunican información sobre

la estética o funcionalidad y no le piden más, entonces
habrá alcanzado poco éxito.

Un diseño exitoso siempre genera más demanda.

44 #mstrworld
 Gracias

#mstrworld