Diapositivas de la charla impartida por José Martinez Fernández-Pacheco y Raquel Dávila Auñón el día 22/04/2020 en las Flat 101 Digital Sessions dedicadas a UX.

1. Jose Martínez
SENIOR UI & DATAVIZ EN FLAT 101
Raquél Dávila
DIGITAL ANALYST & CRO EN FLAT 101
#Flat101DS @SomosFlat101 info@flat101.es

2. DAT-ART: Diseño de dashboards
visualmente atractivos
22 de abril de 2020
#Flat101DS @SomosFlat101

3. DAT-ART: Diseño de dashboards visualmente atractivos
Indice:
01
¿Qué es un dashboard?
02
Pasemos a la acción
03
Comprendiendo los
datos
04
A crear algo creativo

4. DAT-ART: Diseño de dashboards visualmente atractivos
01
¿Qué es un dashboard?

5. DAT-ART: Diseño de dashboards visualmente atractivos
¿Qué es un dashboard?
- Debe ser claro y bien estructurado, de
manera que la persona que lo reciba, pueda
de un solo vistazo, detectar alarmas de
ineficiencias y puntos de mejora.
- El objetivo del dashboard es mostrar
información que aporte valor, para poder
sacar insights con los que tomar acciones.
- Un dashboard es un cuadro de mandos,
donde se representan visualmente datos
para comprobar el funcionamiento de una
empresa.

6. DAT-ART: Diseño de dashboards visualmente atractivos
Al Shalloway
Fundador y CEO de Net Objectives
“Las visualizaciones actúan como una hoguera
alrededor de la que sentarnos a contar historias.”

7. DAT-ART: Diseño de dashboards visualmente atractivos
Pensar, pensar y pensar…
¿A quién va dirigido?
¿Cuáles son las necesidades?
¿Qué información debemos mostrar?
¿Qué herramienta vamos a utilizar?

8. DAT-ART: Diseño de dashboards visualmente atractivos
Herramienta elegida
Google
DataStudio
• Buena usabilidad
• Rápido
• Buena conexión con universo
Google
• Gratuito
• No requiere instalación
• Limitadas fuentes de datos
• Poca variedad de gráficos
• Escasa personalización

9. DAT-ART: Diseño de dashboards visualmente atractivos
Características de un buen dashboard
Selección de métricas y KPIs: siempre con enfoque a los objetivos y micro-objetivos.
Personalizar: hacer cada dashboard único.
Visualmente atractivo: queremos facilitar la comprensión de la información.
Cantidad de datos: suficiente, nunca excesiva.
Orientación: a futuras acciones.

10. DAT-ART: Diseño de dashboards visualmente atractivos
02
Pasemos a la acción

11. DAT-ART: Diseño de dashboards visualmente atractivos
Planteamiento del dashboard
Wireframe a mano Ejecución directa

12. DAT-ART: Diseño de dashboards visualmente atractivos
03
Comprendiendo los datos

13. DAT-ART: Diseño de dashboards visualmente atractivos
Comprendiendo los datos
“¡Hola! Estos son los datos que debemos
visualizar”
“Mmmm… ¿A ver esos datos?”

14. DAT-ART: Diseño de dashboards visualmente atractivos
“¿Para qué y quién es el resultado
de esta visualización?”
Objetivo
Usuario final
“Costumer”
Objetivo
Usuario intermedio
“Client”
B2C B2B
Comprendiendo los datos

15. DAT-ART: Diseño de dashboards visualmente atractivos
“¿Para qué y quién es el resultado
de esta visualización?”
Objetivo
Usuario final
“Consumer”
Objetivo
Usuario intermedio
“Client”
B2C B2B
•Periódicos no
especializados
•Resúmenes de
facturas
•Periódicos
especializados
•Auditorías
•Dashboards
Comprendiendo los datos
•… •…

16. DAT-ART: Diseño de dashboards visualmente atractivos
“¿Para qué y quién es el resultado
de esta visualización?”
Objetivo
Usuario final
Objetivo
Usuario intermedio
Microbjetivos
Graficación de apartados o páginas
Comprendiendo los datos

17. DAT-ART: Diseño de dashboards visualmente atractivos
Cuantitativas Cualitativas
Discretas Continuas Ordinales Nominales
“¿Estos datos que tipo de
variables son?”
Comprendiendo los datos

18. DAT-ART: Diseño de dashboards visualmente atractivos
¿Qué información me facilita el analista?
El datoEl dato
El contextoEl contexto

19. DAT-ART: Diseño de dashboards visualmente atractivos
Comprendiendo los datos
“Los números tienen una historia importante que contar. Dependen de ti para darles voz.”
Stephen Few
Experto en Business Intelligent y Diseño de la Información.

20. DAT-ART: Diseño de dashboards visualmente atractivos
•Eventos socio-económicos o políticos
importantes
•Acciones que se haya o hayamos
realizado
•Agrupar visualizaciones o datos
No saturarJustificado
Comprendiendo los datos

21. DAT-ART: Diseño de dashboards visualmente atractivos
04
A crear algo atractivo

22. DAT-ART: Diseño de dashboards visualmente atractivos
+ Percepción
de escala
- Percepción
de escala
Barras
comparadas
Barras
separadas
Apiladas
separadas
Apiladas
comparadas
Tarta
Áreas
circulares
Áreas
aisladas
Áreas
comparadas
William S. Cleveland y Robert McGill
Estudio sobre la percepción en gráficas (1984).

23. DAT-ART: Diseño de dashboards visualmente atractivos
Debemos crear un dashboard atractivo

24. DAT-ART: Diseño de dashboards visualmente atractivos
Debemos crear un dashboard atractivo
… y que funcione

25. DAT-ART: Diseño de dashboards visualmente atractivos
Charles Minard (1869)
A crear algo creativo

26. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo creativo
Antes Después

27. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo creativo
Antes Después

28. DAT-ART: Diseño de dashboards visualmente atractivos
Objetivos y variables
¿Cualitativas o cuantitativas?
¿Para quién?
Mínima contextualización
¿Qué ha sucedido?
Intenta comparar en un vistazo
Crear/aplicar un look&feel
Ten en cuenta siempre la practicidad
Hazlo parte de un ecosistema
Cuidar la UX/UI
Conoce la herramienta de visualización
Cuidado al aplicar ciertos principios

29. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo atractivo
Utilización de gráficas de baja densidad
•Otorgan una primera contextualización
•Identifica puntos en los que profundizar
Comparamos una variable de tiempo y de unidad (usuario y/o
sesiones).
Permite sacar a la luz anomalías a un primer nivel que de otra
manera sería necesario investigar más a fondo para descubrir.
Tip 1

30. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo atractivo
Comparativas individualizadas
Frente a competencia 1 Frente a competencia 2
Frente a competencia 1 y 2
•Focalización en el objetivo
•Solución escalable
Ver mi tendencia y datos frente a un competidor, de
forma aislada, sin que me afecten otros informaciones
no esenciales en el momento.
Puedo comparar mis datos con otros competidores sin que la
visualización entorpezca la investigación.
Tip 2
Ante un gran número de competidores, buscar elementos
agrupadores (sectores, país…) para comparar con mis datos.

31. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo atractivo
Referentes del día a día
Posición según KW’s
Posición según KW’s
•Facilita la extracción y estudio de datos
•Contextualiza los datos
Desde un simple vistazo, se puede estudiar los datos
de la posición que se necesite.
Al usar un referente real (en este caso digital), los datos
refuerzan su significado.
Tip 3

32. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo atractivo
Utilización de elementos de storytelling
•Facilita e incita la lectura de datos
•Elemento atractivo al usuario
El uso de elementos que marcan una dirección hace
intuir un orden que hace más fluida la lectura.
Dar forma a los datos de historia (en menor o mayor medida)
complace al usuario en tanto que le hace partícipe.
Tip 4

33. DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo atractivo
Resumen de proceso
Habla con el analista
Identifica tipo de variables,
objetivos, microbjetivos, para
qué es y para quién
Diseña
Ten en cuenta la herramienta
de visualización y recuerda
para quién es
Aplica
Asiste al analista, corrige e
itera

34. DAT-ART: Diseño de dashboards visualmente atractivos
“Visualizar información puede darnos una
solución muy rápida a los problemas. Podemos
obtener claridad o la respuesta a un problema
simple muy rápidamente”
David MacCandless
Periodista

35. ¡Gracias por la asistencia!
#Flat101DS @SomosFlat101