Diseño de Dashboards Efectivos PDF

Javier Alexander Rengifo, MSc.
Business Analytics Specialty Architect

Spanish South America
jrengifo@co.ibm.com
Diseño 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 :
Más de 10 años de experiencia con soluciones
Cognos BI
He trabajado como consultor de servicios para:
Business Partners (Colombia, España)
Cognos Corp
Desde el 2008 (luego de la adquisición), trabajo

para IBM como experto de la región SSA, en
soluciones de Business Intelligence y Análisis
Predictivo.
2 2 © 2011 IBM Corporation

Todo el mundo quiere un Dashboard hoy en día

Objetivo: Comunicar efectivamente los datos
Antes
Después

Agenda
Reportes y Dashboards 101

Psicología del Reporting
El Arte del Reporting: Guía de buenas prácticas de diseño
Diseño de Dashboards
Interactividad

Reportes y Dashboards 101: Historia
1960’s
Siglo 18th Fundamento en la
Egipto Siglo 2nd
Reportes Gráficos Visualización de información
Reporte tipo lista?
William Playfair Jacques Bertin
Business Intelligence
ayudar
a las personas
a tomar
Decisiones más inteligentes

Reportes y Dashboards 101: Datos a Información a Conocimiento
Data Warehouse Reportes Preguntas de negocio

Puntos de venta Datos masivos
Dashboards Análisis
Puntos de interacción Planos
Multi-dimensional Queries Exploración
Recolección de datos Transacciones
OLAP Cubes Conocimiento
Patrones
Analytical structures Predicciones

Decisiones más inteligentes

9
¿Qué habilidades se necesitan para crear “Buenos Reportes”?
Información
Conocimiento del Negocio
Nuestro
Foco
Implementación Presentación
Diseño de base de datos, Diseño gráfico,
Modelaje de consultas, Publicidad,
construcción avanzada de Comunicaciones y
procedimientos mercadeo

Agenda

Interactividad

¿Qué es lo que importa realmente? – Conocer al público objetivo!
¡Diferentes personas desean ver diferente información y con diferentes visualizaciones!

Percepción humana: A nuestros ojos les gusta ver patrones familiares

Percepción humana: A nuestros ojos les gusta ver patrones familiares

Percepción humana: ¿Cuantos números cuatro (4) puede ver?
1592653589793238626338327950288197169399375
1058209749592307816062862089986280382532117
0679821808651328230667093846095505822317253
5908128481117502810270193852110555966229895
9303819628810975665933612875682337867831652
7120190915685669236034861053266821339360726
0291412737258700660631558817881520920962829
2509171536367892590360011330530588206652138

Percepción humana: ¿Cuantos números cuatro (4) puede ver?
1592653589793238626338327950288197169399375
1058209749592307816062862089986280382532117
0679821808651328230667093846095505822317253
5908128481117502810270193852110555966229895
9303819628810975665933612875682337867831652
7120190915685669236034861053266821339360726
0291412737258700660631558817881520920962829
2509171536367892590360011330530588206652138
¿Cual es la diferencia?

Propiedades de pre-atención
Source: Information Dashboard Design, Stephen Few, 2006

Propiedades de pre-atención

Source: Information Dashboard Design, Stephen Few, 2006
Jacques Bertin y la Semiología de los gráficos

Estudio de los signos, su
Cuando usar variable visuales: estructura y la relación 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
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 mayoría de las personas, tardan mas tiempo en entender los datos de
una tabla, lista o crosstab que en un grafico
Una buena visualización, ofrece una respuesta en decenas de segundos

Una imagen vale más que mil palabras

La apariencia si importa
La apariencia visual es importante para la percepción de credibilidad
Source: Stanford University Persuasive Technology Lab, 2002

Psicología del Reporting – Resumen
Cuando construya visualizaciones, tenga en cuanta el sistema de

percepción humano.
–No pelee contra él
Los gráficas usualmente son más efectivas que las visualizaciones de

texto.
La apariencia visual es un factor importante de credibilidad.

Agenda

Interactividad

Guía de diseño para no diseñadores
Contraste
Repetición
Alineación
Proximidad

Los cuatro principios básicos de diseño
Contraste (Principio de lo más importante visualmente)

– Evitar que los elementos de una pagina se vean todos iguales.
– Si los elementos (tipo, color, tamaño, espesor, forma, especio, etc.) no
corresponden a la misma clase, entonces hacerlos muy diferentes.

Contraste en Acción
Antes
Despues
26
Source: The Non-Designer’s Design Book, 3rd Ed., Robin Williams, 2008
Los cuatro principios básicos de diseño

– Evitar los elementos en una pagina que sean todos iguales.
Repetición (Organización y unidad)
– Repetir los elementos visuales que pertenecen a una misma clase.
– Se pueden repetir colores, formas, texturas, relaciones, fuentes, tamaños,
conceptos, etc.

Repetición in Acción
Repetición:
• Tipo de fuente
• Bullets tipo cuadrado
• Indentación
• Espaciado
• Alineación
Los cuatro principios básicos de diseño: CRAP

conceptos, etc.
Alineación (Visualización clara y sofisticada)
– Nada debería estar ubicado en la página arbitrariamente.
– Cada elemento debería tener una conexión visual con los demás elementos de
la página.

Alineación en Acción
Antes
Depues
31
Uso de plantillas de diseño
2 filas x 2 columnas 4 filas x 2 columnas
Para construir una plantilla:
1. Tome el tamaño de la página

2. Reste las márgenes
3. Divida en área en el número de filas y columnas deseadas
4. (Opcional) agregue filas y columnas que sirvan como espaciadores

32
Uso de plantillas de diseño

Titulo
Subtitulo
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
________ _______ _______
4 filas x 4 columnas ________ _______ _______
Subtitulo
Titulo
______________________________
_____________________________
___________________________
________________________
____________________________
______________________________
______________________________
___________________________
4 filas x 4 columnas __________________________
___________________________

Aplicando una plantilla de diseño
1 2 3 4 5 6 1 2 3 4 5 6
Los cuatro principios básicos de diseño: CRAP

conceptos, etc.
Alineación (Visualización clara y sofisticada)
– Nada debería ser ubicado en la página arbitrariamente.
– Cada elemento debería tener una conexión visual con los demás elementos de
la página.
Proximidad (Agrupamiento de la información, reducir desorden, dar estructura)
– Agrupar los ítems relacionados de manera conjunta. La proximidad implica una
relación.
– Cuando hay varios ítems relacionados, estos se convierten en una unidad
visual en vez de simples unidades por separado.

Proximidad en Acción
Antes
Depues
36
Colocando todos los elementos juntos (Ejemplo)
Source: Globe and Mail, March 31, 2007

El Arte del Reporting – Resumen
CRAP es una buena guía práctica de diseño

– Contraste
– Repetición
– Alineación
– Proximidad
Crear y usar una plantilla de estilo o diseño propia o corporativa

Agenda

Interactividad

¿Qué un Dashboard?
Es un medio de comunicación visual, donde se coloca la información más

importante, requerida para llevar a cabo un o más objetivos; consolidada y
organizada en una sola pantalla, de tal forma que la información, pueda ser
monitoreada en una sola mirada.
39 39 Source: Information Dashboard Design, Stephen Few, 2006 © 2011 IBM Corporation
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: introducción 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 gestión de
información corporativa.
La mayoría de los proveedores de BI empiezan a ofrecer productos
para Dashboards
Algunos ejemplos de Dashboards
Source: Website of Oracle Corporation

Source: Website of Siebel Systems Incorporated, which has been acquired by Oracle Corporation.
Source: Website of Business Objects

Source: Website of Hyperion Solutions Corporation, which has been acquired by Oracle Corporation
Source: Website of Microstrategy

Source: Website of Axiom Systems

Source: IBM Cognos Dashboard

Source: IBM Cognos Dashboard

¿Qué NO es un Dashboard?
Un Dashboard no proporciona información completa de la organización y

no sustituye el conjunto de herramientas necesarias para hacerlo:
No es una herramienta completa para Análisis 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 gestión integral de información
corporativa.
Tipos de Dashboards
Estratégicos
Analíticos
Operacionales


13 errores comunes en el diseño de Dashboards

Error Regla de diseño
1. Exceder el limite de una sola pantalla Optimizar el espacio para que los análisis
ocupen una sola pantalla
2. Proveer un contexto inadecuado de los datos Suministrar información de contexto / No
distraer con objetos que no dicen nada
3. Visualizar con excesiva precisión o detalle Mostrar información con el mínimo detalle
4. Elegir una medida deficiente Utilizar medidas que provean valor
5. Elegir un medio inapropiado de visualización Escoger un medio de visualización correcto
6. Incluir una complejidad sin sentido Remover la complejidad sin sentido
7. Usar medios de visualización mal diseñados Diseñar con mayor claridad y eficiencia
8. Mostrar datos cuantitativos con imprecisión Ser preciso / No inducir al error
9. Organizar la información pobremente Organizar la información de la forma correcta

10. Resaltar datos erróneamente o no Resaltar la información más importante
resaltarlos en absoluto
11. Saturación o con demasiada decoración Remover la saturación y la sobre-decoración
12. Poca utilización o por el contrario sobre- Utilizar los colores de la manera adecuada
utilización del color
13. Diseñar una visualización poco atractiva Hacer la visualización más atractiva y legible

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

Regla # 1: Optimizar el espacio para ocupar una sola pantalla
Una posible solución puede ser fragmentar los datos pantallas diferentes,
brindando alguna opción de navegabilidad.
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?
Regla # 2: Suministrar información de contexto
Budget Real
Bajo Medio Alto
Recomendado

Error # 3: Visualizar con excesiva precisión o detalle
Regla # 3: Eliminar
detalles de la
visualización

Error # 4: Elegir una medida deficiente
Regla # 4: Utilizar medidas

que provean valor

Error # 5: Elegir un medio inapropiado de visualización
Regla # 5: Escoger un medio de visualización correcto


Dot Plot
Barras
Dispersión Cajas
Líneas
Source: The Role of Software and the Importance of Thoughtful Defaults, Stephen Few, Perceptual Edge, December 2007


Gráfico de bala o termómetro: 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).
Gráfico de Barras: Se utiliza para mostrar una medida cuantitativa subdividida en categorías (por ejemplo,
ventas por regiones o unidades de tiempo).
Gráfico de Barras Apiladas: Sólo se utiliza cuando se desea mostrar los datos que hacen parte un total, para
cada una de las múltiples subdivisiones categóricas (por ejemplo, regiones de ventas o meses.)
Gráficos de Líneas: Se utiliza para mostrar series de tiempo o una distribución de frecuencias, con especial
atención en la forma de los datos y tendencia de los mismos.
Gráfico de Combinación: Se utiliza cuando algunos datos se visualizan mejor en barras y otros datos se
visualizan mejor en líneas. Puede ser apropiado para representar series de tiempo y graficas de Paretto, las
cuales, simultáneamente muestran datos rankeados como barras y el total acumulado como una línea.
Sparklines: Se utilizan para mostrar una serie de tiempo con especial atención a la forma de los datos y sin
necesidad de precisión cuantitativa. (Edward Tufte)
Grafico de dispersión: Se utilizan para mostrar las correlaciones entre dos conjuntos de datos cuantitativos
Grafico de cajas: Se utilizan para mostrar medidas de distribución, a lo largo de múltiples subdivisiones
categóricas.
Error # 6: Incluir complejidad sin sentido
Regla # 7: Remover la complejidad sin sentido
Evitar el uso de elementos gráficos que adicionan complejidad a la visualización; lo cual

supone esfuerzo y tiempo extra por parte del usuario

Error # 7: Usar medios de visualización mal diseñados
Los colores de las barras distraen por ser demasiado brillantes

El efecto 3D hace difícil leer los valores exactos
El propósito de las barras es comparar el Real / Budget, pero dado que hay una división
por regiones, se hace difícil comprar las medidas de análisis.
Regla #7: Diseñar con mayor claridad y eficiencia

Error # 8: Mostrar datos cuantitativos con imprecisión
Si miramos las barras, a primera vista el Revenue sería más de 3 veces, el valor de los costos.
Pero si miramos con atención, 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 estaría induciendo
a un error.
Regla #8: Ser preciso / No inducir al error

Error # 8: Mostrar datos cuantitativos con imprecisión
Si no se maneja bien el tamaño del grafico, a simple vista

se podrían generar diferentes interpretaciones del mismo.
Regla #8: Ser preciso / No inducir al error

Error # 9: Organizar la información pobremente

Regla # 9: Organizar la información de la forma correcta

• La distribución de la información en la pantalla se divide en cuatro zonas, la información más
importante, siempre se debe ubicar en la parte superior izquierda de la pantalla, mientras que
la información de menor importancia, se debe ubicar en la parte inferior derecha de la pantalla.
• Maximizar el uso del espacio con información de valor y no con textos innecesarios, logotipos
u otras imágenes.

Error # 10: Resaltar datos erróneamente o no resaltarlos
¿Cual es la
información
importante a
monitorear?

Regla # 10: Resaltar la información más importante
• En lo posible el reporte debe enfocarse en resaltar la información que realmente debe llamar
la atención, bien sea porque algo va muy bien o porque algo va muy mal.

Error # 11: Saturación o con demasiada decoración
Regla #11: Remover la

saturación y la sobre-
decoración
En lo posible se recomienda
evitar la utilización de
imágenes o elementos
visuales que distraigan la
atención de la información
que realmente es importante.
No Recomendado
Recomendado

Error # 12: Sobre-utilización del color

La diferencia en el color de las barras en
esta grafica, no tiene ningún significado,
simplemente agrega distracción.
Regla # 12: Utilizar los

colores de la manera
adecuada

Error # 13: Diseñar una visualización poco atractiva

Regla # 13: Hacer la visualización más atractiva y legible
Evitar el uso de Usar colores con

colores brillantes tonos blancos o
excepto para tonos pastel
resaltar datos de
interés.
Impact Gungsuh
Gabriola Monotype Cursiva
MV Boli Segoe Script
Evitar el uso de fuentes de

poca legibilidad.

Ejemplos de Diseño: Antes y Después
Antes
Después
Source: Perceptual Edge Website Examples, Stephen Few, 2004-2010

Antes
Después
Source: Perceptual Edge Website Examples, Stephen Few, 2004-2010


Ambos gráficos muestran los mismos datos
Antes
Después
¿Cual de los dos responde mejor a las

preguntas del negocio?

Visualización más inteligente de acuerdo al tipo de preguntas de negocio
¿De que se compone?

Composición
¿Cómo están ¿Cual es de
conectados? mayor/menor
importancia?
Relaciones
Rangos
¿Qué tan
Desviado? Pregunta
de Negocio
Variancia
¿Como va?
¿Que cosas son Progreso

Similares?
Comparación
Que tan a
menudo ocurre?
Distribución

Diseño de Dashboards – Resumen
La elección del tipo de grafico de visualización es importante

No distorsionar los datos
Aplicar técnicas de mejores practicas para el diseño de Dashboards
– Stephen Few

Agenda

Interactividad

Exploración y visualización de datos interactivos
De acuerdo a Stephen Few (“Now You See it”, 2009), un Dashboard debería poder
contar con las siguientes acciones de navegación e interacción:
Comparar Re-visualización
Ordenar Zoom y desplazamiento
Adicionar de variables Re-escalar
Filtrar Acceder a detalles a demanda
Resaltar Notas y comentarios
Agregar Marcadores
Re-escribir una expresión

Comparación
Ver similaridades y diferencias, ranking, porcentaje de un total, desviaciones, series de

tiempo, etc.

Ordenamiento
Antes
Después
Posibilidad de ordenar los valores de menor a mayor o viceversa

Filtros (y Prompts)
Antes
Después
Reducir los datos para enfocarse solamente en información de interés (Ej. Slider, check
boxes, drop down)

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)

Interactividad - Resumen
El tema de interactividad en el consumo de Dashboards, hoy en día es mandatario:

– Construir Dashboards con flexibilidad para interactuar y explorar
– Interactividad dinámica mejora el proceso de entendimiento de la información y
toma de decisiones
Permitir que los mismo datos cuenten la historia del negocio

– Para más información ver referencias adjuntas


87
Whitepapers References:
Data visualization
Stephen Few:
Data Visualization: Past,
Visual Communication Visual Pattern Recognition Present and Future
http://www.perceptualedge.com/library.php#Whitepapers
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)

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-Designer’s Design Book, 3rd Ed, 2008

Diseño de Dashboards Efectivos PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño de Dashboards Efectivos PDF

Cargado por

Copyright:

Formatos disponibles

Javier Alexander Rengifo, MSc.

Business Analytics Specialty Architect

Diseño de Dashboards Efectivos

Business Analytics software

Acerca del Presentador

IBM Software Group Colombia

Javier Alexander Rengifo Silva

Desde el 2008 (luego de la adquisición), trabajo

2 2 © 2011 IBM Corporation

Todo el mundo quiere un Dashboard hoy en día

3 © 2011 IBM Corporation

Objetivo: Comunicar efectivamente los datos

4 4 © 2011 IBM Corporation

Reportes y Dashboards 101

5 5 © 2011 IBM Corporation

Reportes y Dashboards 101: Historia

Decisiones más inteligentes

7 7 © 2011 IBM Corporation

Reportes y Dashboards 101: Datos a Información a Conocimiento

Data Warehouse Reportes Preguntas de negocio

Analytical structures Predicciones

8 8 © 2011 IBM Corporation

¿Qué habilidades se necesitan para crear “Buenos Reportes”?

9 9 © 2011 IBM Corporation

Reportes y Dashboards 101

10 10 © 2011 IBM Corporation

¿Qué es lo que importa realmente? – Conocer al público objetivo!

¡Diferentes personas desean ver diferente información y con diferentes visualizaciones!

Percepción humana: A nuestros ojos les gusta ver patrones familiares

12 12 © 2011 IBM Corporation

Percepción humana: A nuestros ojos les gusta ver patrones familiares

13 13 © 2011 IBM Corporation

Percepción humana: ¿Cuantos números cuatro (4) puede ver?

14 14 © 2011 IBM Corporation

Percepción humana: ¿Cuantos números cuatro (4) puede ver?

15 15 © 2011 IBM Corporation

Source: Information Dashboard Design, Stephen Few, 2006

17 17 © 2011 IBM Corporation

Jacques Bertin y la Semiología de los gráficos

Si el tiempo es dinero, entoncesO

19 19 © 2011 IBM Corporation

Una imagen vale más que mil palabras

20 20 © 2011 IBM Corporation

Source: Stanford University Persuasive Technology Lab, 2002

21 21 © 2011 IBM Corporation

Psicología del Reporting – Resumen

Cuando construya visualizaciones, tenga en cuanta el sistema de

Los gráficas usualmente son más efectivas que las visualizaciones de

La apariencia visual es un factor importante de credibilidad.

22 22 © 2011 IBM Corporation

Reportes y Dashboards 101

23 23 © 2011 IBM Corporation

Guía de diseño para no diseñadores

24 24 © 2011 IBM Corporation

Los cuatro principios básicos de diseño

Contraste (Principio de lo más importante visualmente)

25 25 © 2011 IBM Corporation

Los cuatro principios básicos de diseño

Contraste (Principio de lo más importante visualmente)

27 27 © 2011 IBM Corporation

Los cuatro principios básicos de diseño: CRAP

Contraste (Principio de lo más importante visualmente)

29 29 © 2011 IBM Corporation