Diseño de Dashboards Efectivos

Javier Alexander Rengifo, MSc.
Business Analytics Specialty Architect

Spanish South America
jrengifo@co.ibm.com
Diseo de Dashboards Efectivos
Business Analytics software

1
2011 IBM Corporation
Acerca del Presentador

IBM Software Group Colombia
Javier Alexander Rengifo Silva
Master of Science in Information Engineering
Business Intelligence, Data Mining
Background :
Ms de 10 aos de experiencia con soluciones
Cognos BI
He trabajado como consultor de servicios para:
Business Partners (Colombia, Espaa)
Cognos Corp
Desde el 2008 (luego de la adquisicin), trabajo

para IBM como experto de la regin SSA, en
soluciones de Business Intelligence y Anlisis
Predictivo.
2
Todo el mundo quiere un Dashboard hoy en da
Objetivo: Comunicar efectivamente los datos

Antes
Despus
Agenda
Reportes y Dashboards 101

Psicologa del Reporting
El Arte del Reporting: Gua de buenas prcticas de diseo
Diseo de Dashboards
Interactividad
Reportes y Dashboards 101: Historia
1960s
Egipto Siglo
2nd
Reporte tipo lista?

6
Siglo 18th
Fundamento en la
Reportes Grficos
Visualizacin de informacin
William Playfair
Jacques Bertin
Business Intelligence
ayudar
a las personas
a tomar
Decisiones ms inteligentes
Reportes y Dashboards 101: Datos a Informacin a Conocimiento
Puntos de venta
Datos masivos
Puntos de interaccin
Planos
Recoleccin de datos
Transacciones
Data Warehouse
Multi-dimensional
OLAP Cubes
Reportes
Preguntas de negocio
Dashboards
Anlisis
Queries
Exploracin
Conocimiento
Patrones
Analytical structures
Predicciones
Decisiones ms inteligentes
Qu habilidades se necesitan para crear Buenos Reportes?
Informacin
Conocimiento del Negocio
Implementacin
Diseo de base de datos,
Modelaje de consultas,
construccin avanzada de
procedimientos
Nuestro
Foco
Presentacin
Diseo grfico,
Publicidad,
Comunicaciones y
mercadeo
Agenda

Diseo de Dashboards
Interactividad
10
10
Qu es lo que importa realmente? Conocer al pblico objetivo!
Diferentes personas desean ver diferente informacin y con diferentes visualizaciones!

11
11
Percepcin humana: A nuestros ojos les gusta ver patrones familiares
12
12
Percepcin humana: A nuestros ojos les gusta ver patrones familiares
13
13
Percepcin humana: Cuantos nmeros cuatro (4) puede ver?

1592653589793238626338327950288197169399375
1058209749592307816062862089986280382532117
0679821808651328230667093846095505822317253
5908128481117502810270193852110555966229895
9303819628810975665933612875682337867831652
7120190915685669236034861053266821339360726
0291412737258700660631558817881520920962829
2509171536367892590360011330530588206652138
14
14
Percepcin humana: Cuantos nmeros cuatro (4) puede ver?

1592653589793238626338327950288197169399375
1058209749592307816062862089986280382532117
0679821808651328230667093846095505822317253
5908128481117502810270193852110555966229895
9303819628810975665933612875682337867831652
7120190915685669236034861053266821339360726
0291412737258700660631558817881520920962829
2509171536367892590360011330530588206652138
Cual es la diferencia?
15
15
Propiedades de pre-atencin
Source: Information Dashboard Design, Stephen Few, 2006

16
16
Propiedades de pre-atencin
17
17
Jacques Bertin y la Semiologa de los grficos

Cuando usar variable visuales:
Estudio de los signos, su

estructura y la relacin entre el
significante y el concepto de
significado Source: Wipedia
Source: making maps: a visual guide to map design for GIS, john krygier & denis wood,2005
18
18
Si el tiempo es dinero, entoncesO
Toma alrededor de dos (2) segundos identificar una celda en una hoja de
calculo
No es una buena practica utilizar solo la memoria para recordar eventos
La mayora de las personas, tardan mas tiempo en entender los datos de
una tabla, lista o crosstab que en un grafico
Una buena visualizacin, ofrece una respuesta en decenas de segundos
19
19
Una imagen vale ms que mil palabras
20
20
La apariencia si importa
La apariencia visual es importante para la percepcin de credibilidad
Source: Stanford University Persuasive Technology Lab, 2002

21
21
Psicologa del Reporting Resumen
Cuando construya visualizaciones, tenga en cuanta el sistema de

percepcin humano.
No pelee contra l
Los grficas usualmente son ms efectivas que las visualizaciones de
texto.
La apariencia visual es un factor importante de credibilidad.
22
22
Agenda

Diseo de Dashboards
Interactividad
23
23
Gua de diseo para no diseadores
Contraste
Repeticin
Alineacin
Proximidad
24
24
Los cuatro principios bsicos de diseo

Contraste (Principio de lo ms importante visualmente)
Evitar que los elementos de una pagina se vean todos iguales.
Si los elementos (tipo, color, tamao, espesor, forma, especio, etc.) no
corresponden a la misma clase, entonces hacerlos muy diferentes.
25
25
Contraste en Accin
Antes
Despues
26
26
26
Source: The Non-Designers Design Book, 3rd Ed., Robin Williams, 2008
Los cuatro principios bsicos de diseo

Evitar los elementos en una pagina que sean todos iguales.
Repeticin (Organizacin y unidad)
Repetir los elementos visuales que pertenecen a una misma clase.
Se pueden repetir colores, formas, texturas, relaciones, fuentes, tamaos,
conceptos, etc.
27
27
Repeticin in Accin
Repeticin:
Tipo de fuente
Bullets tipo cuadrado
Indentacin
Espaciado
Alineacin
28
28
Los cuatro principios bsicos de diseo: CRAP

conceptos, etc.
Alineacin (Visualizacin clara y sofisticada)
Nada debera estar ubicado en la pgina arbitrariamente.
Cada elemento debera tener una conexin visual con los dems elementos de
la pgina.
29
29
Alineacin en Accin
Antes
Depues
30
30
31
Uso de plantillas de diseo
2 filas x 2 columnas
Para construir una plantilla:

1. Tome el tamao de la pgina
2. Reste las mrgenes
3. Divida en rea en el nmero de filas y columnas deseadas
4. (Opcional) agregue filas y columnas que sirvan como espaciadores
31
31
32
Uso de plantillas de diseo
Titulo
Subtitulo
________
________
________
________
________
________
________
________
________
________
________
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
_______
Titulo
Subtitulo
32
32
______________________________
_____________________________
___________________________
________________________
____________________________
______________________________
______________________________
___________________________
__________________________
___________________________
Aplicando una plantilla de diseo
1
33
2
33
6
Los cuatro principios bsicos de diseo: CRAP

conceptos, etc.
Alineacin (Visualizacin clara y sofisticada)
Nada debera ser ubicado en la pgina arbitrariamente.
Cada elemento debera tener una conexin visual con los dems elementos de
la pgina.
Proximidad (Agrupamiento de la informacin, reducir desorden, dar estructura)
Agrupar los tems relacionados de manera conjunta. La proximidad implica una
relacin.
Cuando hay varios tems relacionados, estos se convierten en una unidad
visual en vez de simples unidades por separado.
34
34
Proximidad en Accin
Antes
Depues
35
35
36
Colocando todos los elementos juntos (Ejemplo)
Source: Globe and Mail, March 31, 2007
36
36
El Arte del Reporting Resumen

CRAP es una buena gua prctica de diseo
Contraste
Repeticin
Alineacin
Proximidad
Crear y usar una plantilla de estilo o diseo propia o corporativa
37
37
Agenda

Diseo de Dashboards
Interactividad
38
38
Qu un Dashboard?
Es un medio de comunicacin visual, donde se coloca la informacin ms

importante, requerida para llevar a cabo un o ms objetivos; consolidada y
organizada en una sola pantalla, de tal forma que la informacin, pueda ser
monitoreada en una sola mirada.
39
39
Un poco de historia
1980s: Executive Information Systems (EISs): Exclusivo para las oficinas de
altos ejecutivos (Enfocado en mediciones financieras de la empresa)
1990s: Inicio de sistemas de Business Intelligece y aplicaciones OLAP.
1990s: introduccin de KPIs (Key Performance Indicators): Kaplan y Norton
Balanced Scorecard
2000s:
A inicios del 2001 se empiezan a utilizar de manera generalizada
sistemas de monitoreo y control como parte de la gestin de
informacin corporativa.
La mayora de los proveedores de BI empiezan a ofrecer productos
para Dashboards
40
40
Algunos ejemplos de Dashboards
Source: Website of Oracle Corporation

41
Source: Website of Siebel Systems Incorporated, which has been acquired by Oracle Corporation.
42
Source: Website of Business Objects
43
Source: Website of Hyperion Solutions Corporation, which has been acquired by Oracle Corporation
44
Source: Website of Microstrategy

45
Source: Website of Axiom Systems

46
Source: IBM Cognos Dashboard

47
Source: IBM Cognos Dashboard

48
Qu NO es un Dashboard?
Un Dashboard no proporciona informacin completa de la organizacin y

no sustituye el conjunto de herramientas necesarias para hacerlo:
No es una herramienta completa para Anlisis y Consultas
No es una herramienta completa para Reporting
No es una herramienta completa para Balanced Scorecard
Sin embargo, Si puede ser utilizado como punto de entrada al conjunto
completo de herramientas, para la gestin integral de informacin
corporativa.
49
49
Tipos de Dashboards
Estratgicos
Analticos
Operacionales
50
50
Diseo de Dashboards
51
51
13 errores comunes en el diseo de Dashboards

Error
52
Regla de diseo
1. Exceder el limite de una sola pantalla
Optimizar el espacio para que los anlisis

ocupen una sola pantalla
2. Proveer un contexto inadecuado de los datos
Suministrar informacin de contexto / No

distraer con objetos que no dicen nada
3. Visualizar con excesiva precisin o detalle
Mostrar informacin con el mnimo detalle
4. Elegir una medida deficiente
Utilizar medidas que provean valor
5. Elegir un medio inapropiado de visualizacin
Escoger un medio de visualizacin correcto
6. Incluir una complejidad sin sentido
Remover la complejidad sin sentido
7. Usar medios de visualizacin mal diseados
Disear con mayor claridad y eficiencia
8. Mostrar datos cuantitativos con imprecisin
Ser preciso / No inducir al error
9. Organizar la informacin pobremente
Organizar la informacin de la forma correcta
10. Resaltar datos errneamente o no

resaltarlos en absoluto
Resaltar la informacin ms importante
11. Saturacin o con demasiada decoracin
Remover la saturacin y la sobre-decoracin
12. Poca utilizacin o por el contrario sobreutilizacin del color
Utilizar los colores de la manera adecuada
13. Disear una visualizacin poco atractiva
Hacer la visualizacin ms atractiva y legible
52
Error # 1: Exceder el limite de una sola pantalla

Puede verse que se
excede el limite de
la pantalla, pues
est utilizando el
Scrolling de la
ventana.
Source: Website of Business Objects

53
53
Regla # 1: Optimizar el espacio para ocupar una sola pantalla
Una posible solucin puede ser fragmentar los datos pantallas diferentes,
brindando alguna opcin de navegabilidad.
54
54
Error # 2: Proveer un contexto inadecuado de los datos
No Recomendado
Comparado contra que?
Es bueno o es malo?
Qu tan bueno o que tan malo?
Estamos mejor ahora que en el pasado?
55
55
Regla # 2: Suministrar informacin de contexto

Budget
Bajo
Medio
Real
Alto
Recomendado
56
56
Error # 3: Visualizar con excesiva precisin o detalle
Regla # 3: Eliminar
detalles de la
visualizacin
57
57
Error # 4: Elegir una medida deficiente
Regla # 4: Utilizar medidas

que provean valor
58
58
Error # 5: Elegir un medio inapropiado de visualizacin
Regla # 5: Escoger un medio de visualizacin correcto
59
59

Dot Plot
Barras
Dispersin
Cajas
Lneas
Source: The Role of Software and the Importance of Thoughtful Defaults, Stephen Few, Perceptual Edge, December 2007
60
60

Grfico de bala o termmetro: Se utiliza para comparar una medida cuantitativa respecto a una o varias
medidas relacionadas (por ejemplo, un objetivo). Opcionalmente, se incluye una escala cualitativa dividida en
rangos (Por ejemplo: Bueno, satisfactorio y malo).
Grfico de Barras: Se utiliza para mostrar una medida cuantitativa subdividida en categoras (por ejemplo,
ventas por regiones o unidades de tiempo).
Grfico de Barras Apiladas: Slo se utiliza cuando se desea mostrar los datos que hacen parte un total, para
cada una de las mltiples subdivisiones categricas (por ejemplo, regiones de ventas o meses.)
Grficos de Lneas: Se utiliza para mostrar series de tiempo o una distribucin de frecuencias, con especial
atencin en la forma de los datos y tendencia de los mismos.
Grfico de Combinacin: Se utiliza cuando algunos datos se visualizan mejor en barras y otros datos se
visualizan mejor en lneas. Puede ser apropiado para representar series de tiempo y graficas de Paretto, las
cuales, simultneamente muestran datos rankeados como barras y el total acumulado como una lnea.
Sparklines: Se utilizan para mostrar una serie de tiempo con especial atencin a la forma de los datos y sin
necesidad de precisin cuantitativa. (Edward Tufte)
Grafico de dispersin: Se utilizan para mostrar las correlaciones entre dos conjuntos de datos cuantitativos
Grafico de cajas: Se utilizan para mostrar medidas de distribucin, a lo largo de mltiples subdivisiones
categricas.
61
Error # 6: Incluir complejidad sin sentido
Regla # 7: Remover la complejidad sin sentido

Evitar el uso de elementos grficos que adicionan complejidad a la visualizacin; lo cual
supone esfuerzo y tiempo extra por parte del usuario
62
62
Error # 7: Usar medios de visualizacin mal diseados
Los colores de las barras distraen por ser demasiado brillantes

El efecto 3D hace difcil leer los valores exactos
El propsito de las barras es comparar el Real / Budget, pero dado que hay una divisin
por regiones, se hace difcil comprar las medidas de anlisis.
Regla #7: Disear con mayor claridad y eficiencia

63
63
Error # 8: Mostrar datos cuantitativos con imprecisin
Si miramos las barras, a primera vista el Revenue sera ms de 3 veces, el valor de los costos.
Pero si miramos con atencin, vemos que la escala no empieza en cero sino en 500, lo cual, nos da
como resultado que el Revenue no es ni el doble de los costos. Visualmente se estara induciendo
a un error.
Regla #8: Ser preciso / No inducir al error

64
64
Error # 8: Mostrar datos cuantitativos con imprecisin
Si no se maneja bien el tamao del grafico, a simple vista

se podran generar diferentes interpretaciones del mismo.
Regla #8: Ser preciso / No inducir al error
65
65
Error # 9: Organizar la informacin pobremente
66
Regla # 9: Organizar la informacin de la forma correcta

La distribucin de la informacin en la pantalla se divide en cuatro zonas, la informacin ms
importante, siempre se debe ubicar en la parte superior izquierda de la pantalla, mientras que
la informacin de menor importancia, se debe ubicar en la parte inferior derecha de la pantalla.
Maximizar el uso del espacio con informacin de valor y no con textos innecesarios, logotipos
u otras imgenes.
67
Error # 10: Resaltar datos errneamente o no resaltarlos
Cual es la
informacin
importante a
monitorear?
68
Regla # 10: Resaltar la informacin ms importante

En lo posible el reporte debe enfocarse en resaltar la informacin que realmente debe llamar
la atencin, bien sea porque algo va muy bien o porque algo va muy mal.
69
Error # 11: Saturacin o con demasiada decoracin
Regla #11: Remover la

saturacin y la sobredecoracin
En lo posible se recomienda
evitar la utilizacin de
imgenes o elementos
visuales que distraigan la
atencin de la informacin
que realmente es importante.
No Recomendado
70
Recomendado
Error # 12: Sobre-utilizacin del color

La diferencia en el color de las barras en
esta grafica, no tiene ningn significado,
simplemente agrega distraccin.
Regla # 12: Utilizar los

colores de la manera
adecuada
71
Error # 13: Disear una visualizacin poco atractiva
72
Regla # 13: Hacer la visualizacin ms atractiva y legible
Evitar el uso de
colores brillantes
excepto para
resaltar datos de
inters.
Usar colores con

tonos blancos o
tonos pastel
Impact
Gungsuh
Gabriola
Monotype Cursiva
MV Boli
Segoe Script
Evitar el uso de fuentes de

poca legibilidad.
73
Ejemplos de Diseo: Antes y Despus

Antes
Despus
Source: Perceptual Edge Website Examples, Stephen Few, 2004-2010

74
74

Antes
Despus
Source: Perceptual Edge Website Examples, Stephen Few, 2004-2010

75
75

Ambos grficos muestran los mismos datos
Antes
Despus
Cual de los dos responde mejor a las

preguntas del negocio?
76
76
Visualizacin ms inteligente de acuerdo al tipo de preguntas de negocio
De que se compone?
Composicin
Cmo estn
conectados?
Cual es de
mayor/menor
importancia?
Relaciones
Qu tan
Desviado?
Rangos
Pregunta
de Negocio
Variancia
Como va?
Progreso
Que cosas son

Similares?
Comparacin
Que tan a
menudo ocurre?
Distribucin
77
77
Diseo de Dashboards Resumen
La eleccin del tipo de grafico de visualizacin es importante

No distorsionar los datos
Aplicar tcnicas de mejores practicas para el diseo de Dashboards
Stephen Few
78
78
Agenda

Diseo de Dashboards
Interactividad
79
79
Exploracin y visualizacin de datos interactivos

De acuerdo a Stephen Few (Now You See it, 2009), un Dashboard debera poder
contar con las siguientes acciones de navegacin e interaccin:
Comparar
Re-visualizacin
Ordenar
Zoom y desplazamiento
Adicionar de variables
Re-escalar
Filtrar
Acceder a detalles a demanda
Resaltar
Notas y comentarios
Agregar
Marcadores
Re-escribir una expresin
80
80
Comparacin
Ver similaridades y diferencias, ranking, porcentaje de un total, desviaciones, series de
tiempo, etc.
81
81
Ordenamiento
Antes
Despus
Posibilidad de ordenar los valores de menor a mayor o viceversa

82
82
Filtros (y Prompts)
Antes
Despus
Reducir los datos para enfocarse solamente en informacin de inters (Ej. Slider, check
boxes, drop down)
83
83
Acceder a detalles a demanda (Drill Through)
Source: UN Data.org, 2008
Tener la posibilidad de ver mas detalles (Ej: Tooltip , Drill in place o Drill Through)
84
84
Interactividad - Resumen
El tema de interactividad en el consumo de Dashboards, hoy en da es mandatario:

Construir Dashboards con flexibilidad para interactuar y explorar
Interactividad dinmica mejora el proceso de entendimiento de la informacin y
toma de decisiones
Permitir que los mismo datos cuenten la historia del negocio
Para ms informacin ver referencias adjuntas
85
85
86
86
87
Whitepapers References:
Data visualization
Stephen Few:
Visual Communication
Visual Pattern Recognition
Data Visualization: Past,

Present and Future
http://www.perceptualedge.com/library.php#Whitepapers
87
87
88
Book References
Data visualization
Stephen Few
http://www.perceptualedge.com/
Show Me the Numbers
Information Dashboard Design
Now You See it
Edward Tufte
http://www.edwardtufte.com/tufte/
The Visual Display of
Quantitative Information
Beautiful Evidence (June 2006)
88
88
89
Book References
Graphics design
John McWade
http://www.bamagazine.com/
Before & After Page Design
Before & After Graphics for
Business
Before & After Magazine
Robin Williams
The Non-Designers Design Book, 3rd Ed, 2008
89
89

Diseño de Dashboards Efectivos

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseño de Dashboards Efectivos

Caricato da

Copyright:

Formati disponibili

Javier Alexander Rengifo, MSc.

Business Analytics Specialty Architect

Diseo de Dashboards Efectivos

Business Analytics software

2011 IBM Corporation

Business Analytics software

Acerca del Presentador

Desde el 2008 (luego de la adquisicin), trabajo

2011 IBM Corporation

Business Analytics software

Todo el mundo quiere un Dashboard hoy en da

2011 IBM Corporation

Business Analytics software

Objetivo: Comunicar efectivamente los datos

2011 IBM Corporation

Business Analytics software

Reportes y Dashboards 101

2011 IBM Corporation

Business Analytics software

Reportes y Dashboards 101: Historia

Reporte tipo lista?

Business Analytics software

2011 IBM Corporation

Business Analytics software

Reportes y Dashboards 101: Datos a Informacin a Conocimiento

2011 IBM Corporation

Business Analytics software

Qu habilidades se necesitan para crear Buenos Reportes?

2011 IBM Corporation

Business Analytics software

Reportes y Dashboards 101

2011 IBM Corporation

Business Analytics software

Qu es lo que importa realmente? Conocer al pblico objetivo!

Diferentes personas desean ver diferente informacin y con diferentes visualizaciones!

2011 IBM Corporation

Business Analytics software

Percepcin humana: A nuestros ojos les gusta ver patrones familiares

2011 IBM Corporation

Business Analytics software

Percepcin humana: A nuestros ojos les gusta ver patrones familiares

2011 IBM Corporation

Business Analytics software

Percepcin humana: Cuantos nmeros cuatro (4) puede ver?

2011 IBM Corporation

Business Analytics software

Percepcin humana: Cuantos nmeros cuatro (4) puede ver?

2011 IBM Corporation

Business Analytics software

Source: Information Dashboard Design, Stephen Few, 2006

2011 IBM Corporation

Business Analytics software

Source: Information Dashboard Design, Stephen Few, 2006

2011 IBM Corporation

Business Analytics software

Jacques Bertin y la Semiologa de los grficos

Estudio de los signos, su

2011 IBM Corporation

Business Analytics software

Si el tiempo es dinero, entoncesO

2011 IBM Corporation

Business Analytics software

Una imagen vale ms que mil palabras

2011 IBM Corporation