Principios de Visualización de Datos, Leyes de UX y Storytelling

1. Visualización de Datos y Percepción Visual

Marcas y Variables Visuales

Marcas visuales: Punto, línea, área, superficie y volumen.

Variables visuales de Bertin: Posición, tamaño, forma, valor, color, orientación, textura y movimiento.

Tareas de las variables visuales:

• Selectiva: Si permite distinguir rápidamente un elemento del resto.
• Asociativa: Si permite percibir varios elementos como parte de un mismo grupo.
• Cuantitativa: Cuando existen diferencias numéricas.
• Orden
• Longitud

Teoría de la Gestalt

La Teoría de la Gestalt es una corriente psicológica que estudia cómo percibimos lo que vemos. Sus leyes principales son:

• Proximidad: Los elementos cercanos se perciben como relacionados (por ejemplo, puntos cercanos forman un grupo).
• Semejanza: Los elementos parecidos se perciben como parte del mismo grupo.
• Continuidad: Tendemos a seguir líneas y tendencias.
• Cierre: Completamos mentalmente las formas incompletas.
• Figura-fondo: Distinguimos el objeto principal del fondo.
• Dirección común: Agrupamos elementos que parecen ir en la misma dirección.
• Pregnancia / Buena forma: La mente organiza los estímulos visuales de la forma más simple posible.

Cuarteto de Anscombe

El Cuarteto de Anscombe consta de cuatro conjuntos de datos con propiedades estadísticas similares, pero con distribuciones y representaciones gráficas completamente diferentes.

2. Optimización y Pruebas en la Web

A/B Testing

El A/B Testing consiste en comparar dos versiones de una página web para determinar cuál funciona mejor.

Proceso A/B: Plantear una pregunta, investigar, formular una hipótesis, realizar el experimento y analizar los resultados.

Componentes del A/B Testing:

• Segmentación de usuarios: Dividirlos en grupo de prueba y grupo de control.
• Métricas de evaluación: Indicadores como la retención, la conversión, entre otros.
• Escalabilidad: Las pruebas deben ser válidas para una audiencia grande y no solo para un grupo pequeño.

Ventajas del A/B Testing: Toma de decisiones basada en datos, mejora de la experiencia de usuario (UX) y reducción del riesgo de lanzar cambios negativos.

Limitaciones del A/B Testing: No siempre se obtienen resultados significativos, los cambios pueden ser mal interpretados y no ofrece una explicación de por qué una versión funciona mejor que la otra.

Mapas de Calor (Heatmaps)

Importancia de los mapas de calor: Permiten analizar el comportamiento de los usuarios, optimizar el diseño, validar hipótesis y detectar problemas de usabilidad.

Tipos de mapas de calor:

• Mapa de calor por clics.
• Mapa de calor por scroll (desplazamiento).
• Mapa de calor por movimiento del mouse (ratón).
• Mapa de calor por mirada / eye tracking.

Ventajas y desventajas:

• Ventajas: Ofrecen una visualización intuitiva, son de fácil interpretación y facilitan la detección de problemas.
• Inconvenientes: No explican el por qué del comportamiento y pueden interpretarse de manera subjetiva.

Herramientas populares: Hotjar, Crazy Egg y Mouseflow.

3. Diseño de Dashboards y Patrones de Visualización

Tipos de Dashboards

• Estratégico: Enfocado en la estrategia de la compañía a largo plazo. Es utilizado por la alta dirección y suele ser complejo.
• Analítico: Contiene una gran cantidad de datos; es creado y utilizado principalmente por analistas.
• Táctico: Destinado al análisis y monitorización de procesos por parte de la gerencia de nivel medio.
• Operativo: Diseñado para el control de las operaciones del día a día.

Errores Comunes en la Visualización de Datos

No tener un objetivo claro, usar elementos 3D innecesarios, incluir sombras y bordes que distraen, colorear cuando sería mejor etiquetar, usar ejes innecesarios y no ordenar los datos de forma lógica.

Patrones de Visualización Web

• Patrón F: Aparece en páginas con mucho texto. La información importante se coloca arriba y a la izquierda.
• Patrón Z: Común en páginas simples con poco texto. El llamado a la acción (CTA) suele funcionar mejor al final de la "Z".
• Diagrama de Gutenberg: Divide la pantalla en cuatro cuadrantes: el 1.º para logos o titulares, el 2.º para información complementaria, el 3.º para evitar contenido crítico y el 4.º para el CTA.
• Patrón pastel.

Métricas de Gestión

KPI (Key Performance Indicator): Indicador clave que mide el rendimiento de una actividad o proceso.

OKR (Objectives and Key Results): Metodología que junta un objetivo con sus key results (resultados clave), los cuales definen cómo se va a alcanzar dicho objetivo.

4. Buenas Prácticas y Directrices de Visualización

Una buena visualización no es necesariamente la más bonita ni la más compleja, sino aquella que comunica los datos de forma honesta, clara y comprensible. Debe tener un objetivo claro, mostrar escalas y etiquetas adecuadas, evitar el ruido visual, facilitar la comparación y resaltar lo verdaderamente importante.

Directrices Fundamentales

1. No usar la superficie para comparar cantidades (con excepción de los mapas) y evitar usar el radio como medida de tamaño.
2. No truncar los ejes.
3. No invertir los gráficos.
4. Ser fiel a tu intención comunicativa.
5. Optimizar la proporción de tinta de datos (data-ink ratio).
6. Añadir adornos con extremo cuidado.
7. Elegir un título adecuado.
8. Resaltar lo importante.
9. Añadir texto explicativo.
10. Ser claro con la incertidumbre (no presentar estimaciones como certezas).

Errores de Diseño Frecuentes

Falta de escalas, uso de 3D, colores demasiado similares, falta de optimización para impresión en blanco y negro (B/N), ejes truncados, falta de títulos o de etiquetas en los ejes, leyendas incorrectas y uso de diseños poco comunes que confunden al usuario.

Data-Ink Ratio (Proporción de Tinta de Datos)

Se define como: Data-ink (tinta que codifica información real) / Tinta total (toda la tinta del gráfico, incluyendo fondos, bordes, sombras, etc.).

Cómo mejorar el data-ink ratio: Eliminar fondos decorativos, suprimir etiquetas redundantes, quitar bordes, reducir la paleta de colores, eliminar efectos especiales y prescindir de negritas innecesarias.

5. Experiencia de Usuario (UX) y Leyes del Comportamiento

La UX (User Experience) no consiste simplemente en que una web sea bonita, sino en lograr que el usuario entienda, decida y actúe sin esfuerzo. Las siguientes leyes explican cómo se comporta el usuario:

• Ley de Fitts: Cuanto más grande y cercano esté un objeto, más rápido será interactuar con él. Su fórmula es: T = a + b × log₂(2D / W). Es crucial en aplicaciones móviles, donde el usuario interactúa principalmente con el pulgar.
• Ley de Prägnanz (o de la buena forma): El cerebro percibe los estímulos de la forma más simple, ordenada y estable posible. Para cumplirla, se debe evitar el exceso de elementos o el ruido visual.
• Ley de Jakob: Una interfaz debe parecerse a otras que el usuario ya conoce (por ejemplo, el uso del icono de carrito de compras o el menú de hamburguesa).
• Ley de Hick: El tiempo de decisión aumenta a medida que se incrementa el número y la complejidad de las opciones disponibles.
• Ley de Tesler (Conservación de la complejidad): La complejidad de un sistema no desaparece, sino que se desplaza (como ocurre en las aplicaciones de taxi).
• Efecto de la posición serial: La posición de un elemento importa, ya que los primeros y los últimos de una lista se recuerdan mejor.
• Ley de Parkinson: Cualquier tarea se expandirá hasta ocupar todo el tiempo posible. El objetivo en UX es que el usuario realice sus tareas en el menor tiempo posible.
• Efecto de aislamiento (o de Von Restorff): Entre varios objetos similares, aquel que destaca por su forma, color o tamaño será el más recordado. Es una regla clave para el diseño de llamadas a la acción (CTA).
• Principio de Pareto (Regla del 80/20): El 80% de los resultados proviene del 20% de las acciones.
• Efecto Zeigarnik: Las personas recuerdan mejor las tareas incompletas. Se utiliza para motivar al usuario a terminar procesos largos (por ejemplo, mediante barras de progreso).
• Ley de Miller: Una persona promedio solo puede retener en su memoria a corto plazo entre 5 y 9 elementos (7 ± 2).

Heurísticas de Jakob Nielsen

Son 10 principios fundamentales para diseñar interfaces fáciles de usar:

1. Visibilidad del estado del sistema: Por ejemplo, mediante el uso de barras de carga.
2. Relación entre el sistema y el mundo real: Uso de palabras e iconos familiares para el usuario.
3. Control y libertad del usuario: Permitir salir rápidamente de acciones no deseadas.
4. Consistencia y estándares: Mantener la coherencia en toda la plataforma.
5. Prevención de errores: Diseñar para evitar que el usuario cometa fallos.
6. Reconocimiento antes que recuerdo: Mostrar opciones visibles en lugar de obligar a recordar comandos.
7. Flexibilidad y eficiencia de uso: Crear interfaces aptas tanto para usuarios novatos como para expertos.
8. Diseño estético y minimalista: No sobrecargar la interfaz con información irrelevante.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperar errores: Evitar códigos genéricos como "Error 404" y explicar claramente que la página no carga.
10. Ayuda y documentación: Ofrecer secciones de preguntas frecuentes o centros de ayuda.

KISS: Keep It Simple, Stupid (Manténlo simple, estúpido).

6. Storytelling con Datos (Data-Driven Storytelling)

El Storytelling consiste en contar una historia para hacer comprensible un conjunto de hechos, ideas o datos.

Hans Rosling: Un Referente

Hans Rosling es un gran referente del storytelling de datos. Su método de comunicación se basaba en:

• Narrativa basada en hechos: Comenzaba con una pregunta provocadora o una creencia común.
• Visualización dinámica: Utilizaba gráficos animados e interactivos.
• Simplificación sin trivialización: Convertía datos complejos en un lenguaje sencillo con ejemplos humanos.
• Uso del cuerpo y el espacio.
• Optimismo fundamentado: Transmitía una visión positiva basada en datos reales (como mejoras globales en salud y educación).

Componentes del Data-Driven Storytelling

Combina la historia (hechos, ideas, mensajes), los datos (limpieza y selección de la información) y la narración (aporta contexto, explica las visualizaciones y plantea preguntas).

• Historia: Los acontecimientos y hechos en sí mismos.
• Narrativa: La forma estructurada de organizar dichos hechos.

Estructuras Narrativas

• Estructura básica: Inicio, desarrollo, clímax y final.
• Estructura periodística: Comienza respondiendo a las preguntas clave (quién, qué, dónde) y luego añade información y pruebas detalladas.
• Estructura lineal: Útil cuando se quiere controlar el mensaje y guiar al usuario paso a paso.
• Interactividad: Recomendada cuando se desea permitir una exploración abierta por parte del usuario.
• Estructura de copa de martini (Martini Glass): Combina una narrativa guiada al inicio con una exploración libre al final.
• Diaporama interactivo: Presentación estructurada por diapositivas que incorpora elementos interactivos.
• Drill-down story: Permite partir de una visión general y profundizar progresivamente en los detalles concretos.
• Audiencia: Es fundamental conocer a la audiencia antes de diseñar una historia de datos.

Patrones de Diseño Narrativo

Estrategias para comunicar mejor los datos:

• Contraste: Compara de forma directa dos situaciones o grupos.
• Concretizar / ISOTIPO: Representar cantidades de personas utilizando iconos humanos.
• Escalas: En lugar de mencionar cifras abstractas como "millones de dólares", mostrar equivalencias visuales como pilas de billetes.
• Report: Combina texto, gráficos y explicaciones formales; ideal para informes empresariales.

Autores y Diseñadores de Referencia

• Moritz Stefaner: Destaca por sus visualizaciones creativas, análisis de redes y patrones complejos.
• Nadieh Bremer: Reconocida por su diseño visual, formas radiales y mapas interactivos.
• Giorgia Lupi: Pionera de la visualización manual, expresiva y de carácter personal.

Técnicas Avanzadas de Visualización

• Árboles hiperbólicos: Sirven para visualizar de manera interactiva estructuras de datos jerárquicas complejas.
• Scatterdice: Permite comparar múltiples variables (por ejemplo, en datos de coches: peso, velocidad, consumo, precio y potencia) mediante diferentes combinaciones de ejes de forma interactiva.