DAT-ART: Diseño de dashboards visualmente atractivos

Information about DAT-ART: Diseño de dashboards visualmente atractivos

Published on May 25, 2020

Author: FlatIOIDigitalBusine

Source: slideshare.net

Content

1. Jose Martínez SENIOR UI & DATAVIZ EN FLAT 101 Raquél Dávila DIGITAL ANALYST & CRO EN FLAT 101 #Flat101DS @SomosFlat101 [email protected]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

#flat101ds presentations

Related presentations


Other presentations created by FlatIOIDigitalBusine