SlideShare una empresa de Scribd logo
Jose Martínez
SENIOR UI & DATAVIZ EN FLAT 101
Raquél Dávila
DIGITAL ANALYST & CRO EN FLAT 101
#Flat101DS @SomosFlat101 info@flat101.es
DAT-ART: Diseño de dashboards
visualmente atractivos
22 de abril de 2020
#Flat101DS @SomosFlat101
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
DAT-ART: Diseño de dashboards visualmente atractivos
01
¿Qué es un dashboard?
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.
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.”
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?
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
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.
DAT-ART: Diseño de dashboards visualmente atractivos
02
Pasemos a la acción
DAT-ART: Diseño de dashboards visualmente atractivos
Planteamiento del dashboard
Wireframe a mano Ejecución directa
DAT-ART: Diseño de dashboards visualmente atractivos
03
Comprendiendo los datos
DAT-ART: Diseño de dashboards visualmente atractivos
Comprendiendo los datos
“¡Hola! Estos son los datos que debemos
visualizar”
“Mmmm… ¿A ver esos datos?”
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
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
•… •…
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
DAT-ART: Diseño de dashboards visualmente atractivos
Cuantitativas Cualitativas
Discretas Continuas Ordinales Nominales
“¿Estos datos que tipo de
variables son?”
Comprendiendo los datos
DAT-ART: Diseño de dashboards visualmente atractivos
¿Qué información me facilita el analista?
El datoEl dato
El contextoEl contexto
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.
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
DAT-ART: Diseño de dashboards visualmente atractivos
04
A crear algo atractivo
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).
DAT-ART: Diseño de dashboards visualmente atractivos
Debemos crear un dashboard atractivo
DAT-ART: Diseño de dashboards visualmente atractivos
Debemos crear un dashboard atractivo
… y que funcione
DAT-ART: Diseño de dashboards visualmente atractivos
Charles Minard (1869)
A crear algo creativo
DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo creativo
Antes Después
DAT-ART: Diseño de dashboards visualmente atractivos
A crear algo creativo
Antes Después
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
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
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.
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
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
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
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
¡Gracias por la asistencia!
#Flat101DS @SomosFlat101

Más contenido relacionado

La actualidad más candente

Administración de relaciones con el cliente
Administración de relaciones con el clienteAdministración de relaciones con el cliente
Administración de relaciones con el cliente
Novitec Consultores
 
Microsoft Dynamics Marketing
Microsoft Dynamics MarketingMicrosoft Dynamics Marketing
Microsoft Dynamics Marketing
Carolina Martinez
 
Taller modelo de negocios
Taller modelo de negociosTaller modelo de negocios
Taller modelo de negocios
MEPatagonia
 
Taller modelo de negocios
Taller modelo de negociosTaller modelo de negocios
Taller modelo de negocios
jes068
 
Crm
CrmCrm
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
eCommerce Institute
 
Crm
CrmCrm
Oxxigeno - Web Comercialmente Inteligente
Oxxigeno - Web Comercialmente InteligenteOxxigeno - Web Comercialmente Inteligente
Oxxigeno - Web Comercialmente Inteligente
guestdaba2cd
 
Microsoft Dynamics CRM Axxon Consultting Paraguay
Microsoft Dynamics CRM Axxon Consultting ParaguayMicrosoft Dynamics CRM Axxon Consultting Paraguay
Microsoft Dynamics CRM Axxon Consultting Paraguay
Ardy Benegas
 
Presentación Certificación Preventas CRM
Presentación Certificación Preventas CRMPresentación Certificación Preventas CRM
Presentación Certificación Preventas CRM
sjperez
 
Curso Analytics 1
Curso Analytics 1Curso Analytics 1
Curso Analytics 1
Eduardo Sanchez
 
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
oracledirect
 
• Pautar en Social Media
• Pautar en Social Media • Pautar en Social Media
• Pautar en Social Media
DNX HABLA HISPANA
 
El modelo de negocios
El modelo de negociosEl modelo de negocios
El modelo de negocios
FUSADES
 
Max Ruiz - eCommerce Day Lima 2019
Max Ruiz - eCommerce Day Lima 2019Max Ruiz - eCommerce Day Lima 2019
Max Ruiz - eCommerce Day Lima 2019
eCommerce Institute
 
Diseño estratégico plan de desarrollo e commerce (enero 2013)
Diseño estratégico plan de desarrollo e commerce (enero 2013)Diseño estratégico plan de desarrollo e commerce (enero 2013)
Diseño estratégico plan de desarrollo e commerce (enero 2013)
Oscar Mario Guillén
 

La actualidad más candente (16)

Administración de relaciones con el cliente
Administración de relaciones con el clienteAdministración de relaciones con el cliente
Administración de relaciones con el cliente
 
Microsoft Dynamics Marketing
Microsoft Dynamics MarketingMicrosoft Dynamics Marketing
Microsoft Dynamics Marketing
 
Taller modelo de negocios
Taller modelo de negociosTaller modelo de negocios
Taller modelo de negocios
 
Taller modelo de negocios
Taller modelo de negociosTaller modelo de negocios
Taller modelo de negocios
 
Crm
CrmCrm
Crm
 
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
Eduardo Medeiros - eTech Experience - eRetail Week LATAM Online [Live] Experi...
 
Crm
CrmCrm
Crm
 
Oxxigeno - Web Comercialmente Inteligente
Oxxigeno - Web Comercialmente InteligenteOxxigeno - Web Comercialmente Inteligente
Oxxigeno - Web Comercialmente Inteligente
 
Microsoft Dynamics CRM Axxon Consultting Paraguay
Microsoft Dynamics CRM Axxon Consultting ParaguayMicrosoft Dynamics CRM Axxon Consultting Paraguay
Microsoft Dynamics CRM Axxon Consultting Paraguay
 
Presentación Certificación Preventas CRM
Presentación Certificación Preventas CRMPresentación Certificación Preventas CRM
Presentación Certificación Preventas CRM
 
Curso Analytics 1
Curso Analytics 1Curso Analytics 1
Curso Analytics 1
 
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
Presentacion SBL Customers Day 1 Presentación Customer Event Siebel 8.1.1
 
• Pautar en Social Media
• Pautar en Social Media • Pautar en Social Media
• Pautar en Social Media
 
El modelo de negocios
El modelo de negociosEl modelo de negocios
El modelo de negocios
 
Max Ruiz - eCommerce Day Lima 2019
Max Ruiz - eCommerce Day Lima 2019Max Ruiz - eCommerce Day Lima 2019
Max Ruiz - eCommerce Day Lima 2019
 
Diseño estratégico plan de desarrollo e commerce (enero 2013)
Diseño estratégico plan de desarrollo e commerce (enero 2013)Diseño estratégico plan de desarrollo e commerce (enero 2013)
Diseño estratégico plan de desarrollo e commerce (enero 2013)
 

Similar a DAT-ART: Diseño de dashboards visualmente atractivos

Creación de dashboards para la toma de decisiones
Creación de dashboards para la toma de decisionesCreación de dashboards para la toma de decisiones
Creación de dashboards para la toma de decisiones
amdia
 
AI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la informaciónAI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la información
Bea Garcia Fernandez
 
Webinar Dic 2016 BOC Cloud_v1
Webinar Dic 2016 BOC Cloud_v1Webinar Dic 2016 BOC Cloud_v1
Webinar Dic 2016 BOC Cloud_v1
Ricardo Sada
 
50 claves para conocer PowerBI
50 claves para conocer PowerBI50 claves para conocer PowerBI
50 claves para conocer PowerBI
Stratebi
 
Curso de creación de Dashboards Open Source
Curso de creación de Dashboards Open SourceCurso de creación de Dashboards Open Source
Curso de creación de Dashboards Open Source
Stratebi
 
Taller power bi - Como construir un dashboard desde cero
Taller power bi - Como construir un dashboard desde ceroTaller power bi - Como construir un dashboard desde cero
Taller power bi - Como construir un dashboard desde cero
Natali Lujan Allende
 
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
GeneXus
 
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdfEntender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
Edgar Joel Leon Rosales
 
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
Xavier Albaladejo
 
Electiva
ElectivaElectiva
Electiva
Arlin11
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario
Workshop Digital
 
Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1
Sergio Nouvel Castro
 
Taller Power Bi caso practico
Taller Power Bi  caso practicoTaller Power Bi  caso practico
Taller Power Bi caso practico
Natali Lujan Allende
 
Vista 360 grados de DataZen - Juan Alvarado
Vista 360 grados de DataZen - Juan AlvaradoVista 360 grados de DataZen - Juan Alvarado
Vista 360 grados de DataZen - Juan Alvarado
SpanishPASSVC
 
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATA
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATAOpen Analytics 2014 - Ángel Sánchez - UX & BIG DATA
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATA
OpenAnalytics Spain
 
Pawer BI
Pawer BIPawer BI
8 Consejos para crear visualizaciones de datos modernas
8 Consejos para crear visualizaciones de datos modernas8 Consejos para crear visualizaciones de datos modernas
8 Consejos para crear visualizaciones de datos modernas
Data IQ Argentina
 
Sesion06 sintesis-idear-prototipar
Sesion06 sintesis-idear-prototiparSesion06 sintesis-idear-prototipar
Sesion06 sintesis-idear-prototipar
David Díez Cebollero
 
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
Miguel Tabera
 
Email Summit: Diseño & Contenido
Email Summit: Diseño & ContenidoEmail Summit: Diseño & Contenido
Email Summit: Diseño & Contenido
amdia
 

Similar a DAT-ART: Diseño de dashboards visualmente atractivos (20)

Creación de dashboards para la toma de decisiones
Creación de dashboards para la toma de decisionesCreación de dashboards para la toma de decisiones
Creación de dashboards para la toma de decisiones
 
AI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la informaciónAI Pac01: Arquitectura de la información
AI Pac01: Arquitectura de la información
 
Webinar Dic 2016 BOC Cloud_v1
Webinar Dic 2016 BOC Cloud_v1Webinar Dic 2016 BOC Cloud_v1
Webinar Dic 2016 BOC Cloud_v1
 
50 claves para conocer PowerBI
50 claves para conocer PowerBI50 claves para conocer PowerBI
50 claves para conocer PowerBI
 
Curso de creación de Dashboards Open Source
Curso de creación de Dashboards Open SourceCurso de creación de Dashboards Open Source
Curso de creación de Dashboards Open Source
 
Taller power bi - Como construir un dashboard desde cero
Taller power bi - Como construir un dashboard desde ceroTaller power bi - Como construir un dashboard desde cero
Taller power bi - Como construir un dashboard desde cero
 
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
141 Gxplorer Proyectos Bi Factibles Montevideo Gx Xix V1
 
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdfEntender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
Entender-la-disminucion-de-visitas-a-tiendas-fisicas.pdf
 
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
[es] Crea tu mapa de proyecto para llegar a buen puerto - CAS2012
 
Electiva
ElectivaElectiva
Electiva
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario
 
Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1
 
Taller Power Bi caso practico
Taller Power Bi  caso practicoTaller Power Bi  caso practico
Taller Power Bi caso practico
 
Vista 360 grados de DataZen - Juan Alvarado
Vista 360 grados de DataZen - Juan AlvaradoVista 360 grados de DataZen - Juan Alvarado
Vista 360 grados de DataZen - Juan Alvarado
 
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATA
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATAOpen Analytics 2014 - Ángel Sánchez - UX & BIG DATA
Open Analytics 2014 - Ángel Sánchez - UX & BIG DATA
 
Pawer BI
Pawer BIPawer BI
Pawer BI
 
8 Consejos para crear visualizaciones de datos modernas
8 Consejos para crear visualizaciones de datos modernas8 Consejos para crear visualizaciones de datos modernas
8 Consejos para crear visualizaciones de datos modernas
 
Sesion06 sintesis-idear-prototipar
Sesion06 sintesis-idear-prototiparSesion06 sintesis-idear-prototipar
Sesion06 sintesis-idear-prototipar
 
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
El futuro de office 365 en 2019 y 2020: la innovación (SharePoint & Office 36...
 
Email Summit: Diseño & Contenido
Email Summit: Diseño & ContenidoEmail Summit: Diseño & Contenido
Email Summit: Diseño & Contenido
 

Más de Flat 101

SEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centricSEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centric
Flat 101
 
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Flat 101
 
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe AnalyticsDiferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Flat 101
 
DATASTUDIO Vitaminado
DATASTUDIO VitaminadoDATASTUDIO Vitaminado
DATASTUDIO Vitaminado
Flat 101
 
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Flat 101
 
Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?
Flat 101
 
Sketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividadSketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividad
Flat 101
 
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssemblyEl futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
Flat 101
 
UX para mayores de 60 años
UX para mayores de 60 añosUX para mayores de 60 años
UX para mayores de 60 años
Flat 101
 
SEO Manager: guía de Supervivencia
SEO Manager: guía de SupervivenciaSEO Manager: guía de Supervivencia
SEO Manager: guía de Supervivencia
Flat 101
 
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Flat 101
 
Gestión De CRO En Moda
Gestión De CRO En ModaGestión De CRO En Moda
Gestión De CRO En Moda
Flat 101
 

Más de Flat 101 (12)

SEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centricSEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centric
 
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
 
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe AnalyticsDiferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
 
DATASTUDIO Vitaminado
DATASTUDIO VitaminadoDATASTUDIO Vitaminado
DATASTUDIO Vitaminado
 
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
 
Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?
 
Sketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividadSketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividad
 
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssemblyEl futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
 
UX para mayores de 60 años
UX para mayores de 60 añosUX para mayores de 60 años
UX para mayores de 60 años
 
SEO Manager: guía de Supervivencia
SEO Manager: guía de SupervivenciaSEO Manager: guía de Supervivencia
SEO Manager: guía de Supervivencia
 
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
 
Gestión De CRO En Moda
Gestión De CRO En ModaGestión De CRO En Moda
Gestión De CRO En Moda
 

Último

COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
Jean Apellidos
 
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdfextraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
JENNYMARITZAHUILLCAR
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdfMONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
darilpisco021
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
Angeles del Rosario Escobar Mendoza
 
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales (2).pdf
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales  (2).pdfPPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales  (2).pdf
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales (2).pdf
josenestorlopezquisp1
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
ChichipeSevillaJhost
 

Último (14)

COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
 
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdfextraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdfMONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
 
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales (2).pdf
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales  (2).pdfPPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales  (2).pdf
PPT_QUÍMICA GENERAL_TEO_SEM-09_SESIÓN-17_2024_Gases ideales (2).pdf
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
 

DAT-ART: Diseño de dashboards visualmente atractivos

  • 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