2.

1 Mejores prácticas de
visualizaciones
El objetivo de la unidad es brindar conceptos y metodologías de trabajo que
permitan ayudar a las personas a desarrollar reportes utilizando buenas
prácticas. A su vez, enfatizar en que se debe tener siempre presente el hecho
de no desviar el foco de la necesidad por la que recurrimos a este tipo de
soluciones.
Hay 5 conceptos clave que debemos entender para el diseño y armado de
los reportes:

 Medidas: son datos operativos que pueden estar agregados o

detallados. Representan un hecho de la realidad; por ejemplo, una
venta o descuento.
 Métricas: son valores cuantitativos que miden un desempeño. Son
medidas dentro de un contexto definido. Continuando con el ejemplo de
venta, podemos tener “venta año anterior” o “venta promedio”.
 KPI (indicador): son métricas o medidas ponderadas y evaluadas. Se
necesita definir qué valor es “bueno”, cuál es “malo” y cuál es
“aceptable”. Sobre la base de estas premisas podemos analizar el
estado, su tendencia y su variación respecto a lo planificado o
proyectado.
 Scorecard: es una metodología de trabajo que consiste en agrupar
diferentes indicadores bajo objetivos o estrategias.
 Dashboard: es una excelente y rápida manera de comunicar el
comportamiento de los indicadores. Debe ser diseñado de acuerdo con
algunos estándares y de manera que el usuario final se sienta cómodo
en el uso y en el entendimiento del dato.

Los reportes visuales manejan la información más importante en relación a

un objeto. Esta información se encuentra inmersa en una sola interfaz para
que el comportamiento del negocio pueda ser monitoreado en un momento
específico

A continuación, se detallarán cuatro temas que deben tenerse en cuenta a la

hora de la visualización de la información. Estos son:

 percepción del diseño

 componentes
 errores frecuentes
 prácticas de diseño
2.1.1 Percepción del diseño
Cuando hablamos del principio del diseño, nos referimos a la manera en que
nuestra mente absorbe de la realidad, a través de los canales sensoriales
(percepción), los elementos que llegan a ella.

Para entender mejor cómo funciona la percepción del diseño, podemos

mencionar 6 principios gestálticos:

 Proximidad: los objetos que se encuentran próximos en distancia suelen

ser vistos como una unidad.

Figura 1: Proximidad

Fuente: elaboración propia

 Similitud: nuestra mente agrupa elementos que se asemejan, ya sea por

color, tamaño u otros aspectos visuales.

Figura 2: Similitud

Fuente: elaboración propia

 Encierro: los objetos que son agrupados por sombras o bordes son
captados con mayor facilidad por nuestra mente como una unidad.
Figura 3: Encierro

Fuente: elaboración propia

 Cierre: el hecho de optar por crear cuadros o rectángulos sobre los

objetos limita la forma en la que vemos las cosas.

Figura 4: Cierre

Fuente: elaboración propia

 Continuidad: los elementos que mantienen una dirección tienden a

percibirse como unidad, aunque estén interrumpidos.

Figura 5: Continuidad

Fuente: elaboración propia

  Conectividad: las líneas que unen objetos son más fuertes que la
proximidad, el color, el tamaño o la forma.

Figura 6: Conectividad

Fuente: elaboración propia

Para finalizar, debemos entender que los usuarios, en la mayoría de las

ocasiones, tienden a mirar desde arriba e izquierda hacia la derecha y de
abajo a la izquierda hacia la derecha.

2.1.2 Componentes
Los principales componentes que podemos disponer en un reporte son gráficos,
grillas, tableros e indicadores.

Figura 7: Componentes

Fuente: elaboración propia

A continuación, se comenta en líneas generales cada uno de los componentes

de la figura 7:
  Gráfico de objetivo: de una manera simple evita ocupar el mismo
espacio que los gráficos gauges o tacómetros. A partir de una salida
simple, rápidamente se puede visualizar si un comportamiento es bueno
o malo, según lo esperado.
 Gráficos de barra: estos son muy útiles para comparar una métrica a
partir de dos dimensiones primarias. Son muy legibles y muchas veces
son el reemplazo ideal al gráfico de torta.
 Gráfico de torta: se utiliza para ver la composición de un todo en
diferentes porciones.
 Gráfico de línea: solo se utiliza cuando tenemos disponible el dato de
tiempo y necesitemos comparar hasta dos métricas.
 Grillas: se utilizan debido a la familiaridad por parte del usuario en ver
los datos en forma de tabla. Se recomienda, cuando sea necesario,
observar con precisión los valores.
 Indicadores: son claros y concisos. Permiten comparar valores reales y
objetivos. Generaran relevancia sobre otro tipo de gráficos.

En la unidad 2.2, se analizarán más en detalle los gráficos estándares y los

gráficos avanzados.

2.1.3 Errores frecuentes

La gran variedad y opciones de las que disponemos al momento de diseñar
y desarrollar reportes traen aparejada la posibilidad de cometer algunos
errores. El siguiente listado enumera los errores más frecuentes que se suelen
encontrar cuando iniciamos tareas de este tipo:

 Exceder los límites visuales de una sola pantalla: debemos tener

particular atención cuando se realizan reportes que separan los datos
por métricas o productos/clientes, ya que estos pueden crecer en el
tiempo y obligarnos a añadir funciones de scrolling.
 Proveer un contexto inadecuado para el dato: se recomienda no utilizar
indicadores de diferentes tipos en una misma pantalla, por ejemplo, un
indicador de máxima como la venta y uno de mínima como el costo.
 Mostrar excesivo detalle o precisión: los datos que se visualizan en los
reportes deben tener la precisión adecuada. Por ejemplo, al visualizar
una fecha, debemos seleccionar si queremos ver el año, mes, día, hora,
minuto, segundo o solo algunos de estos.
 Elegir métrica deficiente: cuando definimos un componente del reporte,
es necesario seleccionar la métrica adecuada. Muchas veces, los datos
de variación son más gráficos y representativos que los valores
absolutos de las métricas.
  Elegir gráfica inadecuada para una métrica: es importante seleccionar
el gráfico adecuado para cada situación o necesidad. Por ejemplo,
para comparar valores que presentan cierta similitud es conveniente
utilizar un gráfico de barras en vez de uno de torta.
 Variedad de gráficos en un solo dashboard: al momento de agrupar
diferentes reportes en una sola pantalla, debemos tener mucho cuidado
de no mezclar tipos de gráficos con mucha variedad, ya que estos
pueden agregar complejidad al entendimiento.
 Usar un diseño pobre de acuerdo con el objetivo buscado: es importante
el uso apropiado del diseño de los objetos para lograr el impacto que
se busca.
 Datos cuantitativos inexactos: al trabajar datos cuantitativos en gráficos
debemos tener la posibilidad de visualizar los valores que representan.
 Mala organización y distribución de los datos: el diseño de los reportes
debe seguir una lógica y un ordenamiento de los componentes que
permitan una perspectiva amigable para el usuario.
 Saturación de pantalla con gráficos: muchas veces la simplicidad logra
un mejor efecto que trabajar con gran cantidad de objetos.
 Mal uso o exceso de colores: los colores deben estar enfocados en
resaltar lo importante. Utilizar colores en los encabezados o textos
confunde y les quita efectividad a los reportes.
 Poco atractivo: un punto importante es lograr un reporte que predomine
la organización de los datos y en donde pueda distinguirse con rapidez
la información importante.

2.1.4 Prácticas de diseño

Para mejorar el diseño de los reportes, existen diferentes técnicas con las que
se puede trabajar. Estas se basan en 4 características, a saber:

 organización de los componentes

 valores específicos agregados para evitar detalle
 específico para la audiencia objetivo
 comunicar datos de la manera más sencilla y clara posible

Alinearse a las buenas prácticas ayuda a lograr un estilo de trabajo que

posibilita optimizar los resultados. Dentro de aquellas podemos encontrar:

 Página única: sin necesidad de scrolling, sin objetos ocultos y con la

posibilidad de generar enlaces, en caso de que sea necesario mayor
detalle de datos.
 Datos claros: incluir información relevante buscando que el usuario
únicamente tenga que mirar solo un lugar.
  Áreas de trabajo: manejar hasta 4 porciones de la pantalla es
recomendable; más de 6, en cambio, no es conveniente. También es
importante el tamaño de cada una y como se alojan los elementes en
cada una de ellas.
 Indicadores: por pantalla, deberíamos manejar entre 3 y 7 indicadores.
Deben incluir la posibilidad de navegar hacia reportes con mayor
detalle de la información que el indicador muestra para realizar análisis
más específicos.

Figura 8: Diseño

Fuente: elaboración propia

Como podemos apreciar en la figura 8, en la parte izquierda se disponen

diferentes formas recomendadas para ordenar las áreas de trabajo de una
pantalla. En la parte derecha, se muestra cómo el ser humano, en la mayoría
de las ocasiones, le da determinada importancia a cada bloque que
definamos.
2.2 Objetos
El objetivo de la unidad es profundizar en los diferentes objetos con los que
podemos trabajar durante el diseño y el desarrollo de reportes.

Los objetos son todos aquellos elementos que son utilizados en los reportes
para presentar de manera visual los datos. Estos pueden ser: gráficos,
grillas, indicadores, etcétera

Figura 9: Objetos

Fuente: elaboración propia

Como podemos visualizar en la figura 9, cada tema irá profundizando en

objetos más avanzados y con mayor potencial ante las necesidades complejas
del usuario.

En el final del capítulo, se presentará una guía para el armado de los

dashboards.

2.2.1 Gráficos estándares

Partiendo de la idea de que un usuario necesita trabajar con cierta
información y mediante las herramientas de BI, vamos a diseñar y desarrollar
una solución, de modo que es muy importante comprender el abanico de
gráficos y qué busca visualizar cada uno de ellos.

Dentro de los gráficos denominados estándar o de mayor uso por parte de

los usuarios, nos encontramos con dos grandes grupos: los que visualizan la
composición de un grupo de datos o los que permiten la comparación entre
un grupo de datos.
Figura 10: Gráficos estándares – composición

Fuente: elaboración propia

Figura 11: Gráfico estándar – comparación

Fuente: elaboración propia

Como podemos apreciar en las figuras 10 y 11, para cada necesidad

tenemos diferentes alternativas para diseñar nuestros propios gráficos.

2.2.2 Gráficos avanzados

Con el avance de las soluciones de BI y la facilidad en el armado de los
reportes que aquellas brindan, los usuarios se han convertido en expertos y
requieren mayor atención respecto a sus necesidades de información. Es por
esto que surgen nuevas opciones gráficas que permiten, mediante el uso de
algoritmos técnicos, lograr resultados de gran impacto para el negocio.

Podemos dividir estos reportes en dos grandes grupos: los que buscan relación
entre los datos y los que buscan un comportamiento o distribución.
Figura 12: Gráficos avanzados

Fuente: elaboración propia

Estos tipos de gráficos están orientados a entender y descubrir situaciones de

negocio que mediante grillas o gráficos simples no es posible hacerlo.

Como se comentó previamente en este módulo, es de suma importancia

enfocarnos y tener presente cuál es la necesidad de información que el usuario
plantea y, a partir de ahí, podemos optar o no por utilizar alguno de estos
gráficos.

2.2.3 Uso de los KPI por

gráficos
Las visualizaciones adecuadas y con buenas prácticas son igualmente
valoradas por los responsables de la toma de decisiones, como las métricas e
indicadores en sí mismos. Es por esto que los estándares de diseño bajo el
lineamento de percepción visual cada vez toman mayor importancia.

El reto al que nos sometemos a la hora de diseñar un buen reporte se basa

en poder representar de manera simple y concisa los indicadores para que
estos puedan ser apreciados de manera rápida por el usuario.

Se busca en primera instancia dar un vistazo general de la situación de una

empresa o área para detectar qué temas requieren nuestra atención para
que, a partir de ahí, podamos navegar hacia reportes con mayor detalle y
poder analítico.

Tenemos 7 elementos visuales que nos ayudan a diseñar este tipo de

soluciones:
  Ícono de alerta: se suele utilizar para destacar aquellos indicadores que
requieren nuestra atención.
 Semáforo: indica el estado actual de un indicador (ejemplo: verde,
amarillo o rojo).
 Ícono de tendencia: muestra el estado del indicador respecto al período
anterior (ejemplo, tendencia en ascenso o tendencia en descenso).
 Barra de progreso: nos indica el porcentaje de cumplimiento respecto
al objetivo. También suelen utilizarse relojes o tacómetros.
 Indicador: nos indica la definición y fórmula de lo que se busca medir.
 Gráfico de torta: nos ayuda a entender con mayor detalle y de forma
gráfica una situación en particular.
 Gráfico de barras: al igual que el gráfico de tortas, nos ayuda a
entender, con mayor detalle y de forma gráfica, una situación en
particular.

Es importante tener en cuenta, a la hora de diseñar, que quienes pueden

ayudarnos a lograr los objetivos de visualización son los usuarios finales. Estos
son quienes conocen en detalle sus necesidades y la forma en que les gustaría
obtener la información.

2.2.4 Armado de un dashboard

Si bien no existe una guía perfecta a la hora de armar un dashboard,
podemos tener en cuenta esta serie de pasos basado en buenas prácticas
para alinearnos de la mejor manera a un estándar.

1. Seleccionar cantidad de áreas de trabajo y el gráfico más apropiado

de acuerdo con lo que deseamos mostrar.

2. Confirmar la visualización adecuada y no caer en problemas de

oclusión.

 Los gráficos de área tienen grandes problemas de oclusión.

 Los gráficos de radar pueden ser sustituidos por algo más simple como
gráficos de barras.
 Usar métodos tradicionales de alerta (flechas e íconos de alerta) y
semaforización (verde, amarillo y rojo).
 Tablas claras, tabuladas y con solo la información necesaria.
 Contendido de texto adecuado y claro. Son muy usados los valores de
montos con la moneda utilizada entre paréntesis.
 3. Fondo de áreas de trabajo adecuado. Se recomiendan colores suaves
para diferenciarse del blanco.

4. Armado del dashboard:

 Se recomiendan pocos colores.

 En el principal cuadrante debe estar la información más importante.
 Usar gráficos concisos y contundentes.
 Algunos indicadores relevantes son mejores usarlos con elementos de
texto y gráfico.
 Los espacios en blanco solo sirven para separar secciones.
 Los elementos deben estar ordenados y justificados.
 No deben existir explicaciones o descripciones de uso. Este tipo de
material se arma por separado como manual de usuario.

Figura 13 Ejemplo de dashboard

Fuente: elaboración propia

Referencias
Alexandru, T. (2013). Data Visualization. (Visualización de datos) (2.ª ed.).
Lugar de edición: CRC Press. ISBN-13: 978-1466585263.
Cole, N. (2015). Storytelling with Data (Historia con Datos). (1.ª ed.). Lugar de
edición: Wiley. ISBN-13: 978-1119002253.
Few, S. (2009). Now You See It: Simple Visualization Techniques for
Quantitative Analysis (Ahora lo ves: técnicas simples de visualización para
análisis cuantitativo). (1.ª ed.). Lugar de edición: Analytics Press. ISBN-13: 978-
09170601988.
Few, S. (2012). Show me the numbers (Muéstrame los números). (1.ª ed.). Lugar
de edición: Analytics Press. ISBN-13: 978-0970601971.
Few, S. (2013). Information Dashboard Design (Diseño de tableros de
información). (1.ª ed.). Lugar de edición: Analytics Press. ISBN-13: 978-
1938377006.