Diseño de Dashboards y Layout

El Dashboard que Nadie Usa

🔄 Repaso rápido: En la lección anterior, exploramos el storytelling con datos. Ahora construyamos sobre esa base para diseñar los espacios donde viven esas historias: los dashboards.

Todas las empresas tienen uno: un dashboard construido con las mejores intenciones, cargado de gráficas, conectado a datos en tiempo real — y nadie lo mira.

El problema suele ser el mismo: el dashboard se diseñó alrededor de los datos en vez de alrededor de las decisiones. Muestra todo lo disponible, organizado por fuente de datos, sin considerar qué necesita saber alguien realmente.

Un buen dashboard no es una enciclopedia. Es un panel de control. La cabina de un avión no muestra cada sensor de la aeronave — muestra los instrumentos necesarios para tomar la siguiente decisión. Tu dashboard debería funcionar igual.

El Proceso de Diseño de Dashboards

Paso 1: Define la Audiencia y Sus Preguntas

Antes de elegir una sola gráfica, responde esto:

Ayúdame a diseñar un dashboard para nuestro negocio SaaS.

Audiencia principal: VP de Ventas (revisa diario)
Audiencia secundaria: CEO (revisa semanal)

Preguntas que el VP necesita responder diario:
1. ¿Vamos en camino a cumplir la cuota trimestral?
2. ¿Qué deals están en riesgo?
3. ¿Cómo está rindiendo cada representante de ventas?
4. ¿Cuál es la salud del pipeline (nuevos leads, etapas, velocidad)?

Preguntas que el CEO necesita responder semanalmente:
1. ¿Está creciendo el ingreso según la meta?
2. ¿Cómo van las métricas clave (ARR, rotación, NPS)?
3. ¿Hay banderas rojas?

Datos disponibles:
- Datos del CRM (deals, etapas, fechas de cierre, montos)
- Ingresos reales vs. pronóstico
- Puntajes de salud de clientes
- Métricas de actividad de representantes

Diseña el layout del dashboard con gráficas específicas y su
ubicación. Explica por qué cada elemento está donde está.

Paso 2: Establece la Jerarquía de Información

El dashboard sigue una jerarquía visual:

┌──────────────────────────────────────────────┐
│  NIVEL 1: Banner de KPIs (arriba)            │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐        │
│  │ $1.2M│ │  78% │ │  42  │ │ 3.5% │        │
│  │ ARR  │ │Cuota │ │Deals │ │Rotan │        │
│  │ ↑12% │ │En    │ │Abier │ │ ↓0.3 │        │
│  │      │ │meta  │ │tos   │ │      │        │
│  └──────┘ └──────┘ └──────┘ └──────┘        │
├──────────────────────────────────────────────┤
│  NIVEL 2: Tendencias y Comparaciones (medio) │
│  ┌──────────────────┐ ┌──────────────────┐   │
│  │ Ingreso vs Meta  │ │ Pipeline x Etapa │   │
│  │  (gráf. línea)   │ │  (gráf. embudo)  │   │
│  └──────────────────┘ └──────────────────┘   │
├──────────────────────────────────────────────┤
│  NIVEL 3: Tablas de Detalle (abajo)          │
│  ┌──────────────────────────────────────┐    │
│  │ Deals en Riesgo (tabla con salud)   │    │
│  │ Rendimiento Reps (tabla rankeada)   │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

Nivel 1 (Banner de KPIs): Los números más importantes hasta arriba. Fuente grande. Color condicionado (verde = bien, rojo = requiere atención). Estos responden “¿está todo bien?” en cinco segundos.

Nivel 2 (Tendencias): Gráficas que muestran contexto — cómo van cambiando las cosas, cómo se distribuye el pipeline, dónde están los patrones.

Nivel 3 (Detalle): Tablas y listas para análisis profundo. ¿Qué deals específicos están en riesgo? ¿Cómo rinde cada representante individual?

Paso 3: Elige Gráficas para Cada Sección

Cada elemento del dashboard debe ser la visualización correcta para su propósito:

✅ Revisión Rápida: Estás diseñando un dashboard para un equipo de éxito del cliente. ¿Qué métrica va en el banner de KPIs del Nivel 1: (a) tickets de soporte creados esta semana, (b) distribución de puntaje de salud, (c) clientes en riesgo de cancelar, o (d) lista de interacciones recientes?

El Sistema de Cuadrícula

Los dashboards funcionan mejor sobre una cuadrícula. Esto crea orden visual y los hace responsivos en diferentes pantallas.

La cuadrícula de 12 columnas: Divide el ancho de tu dashboard en 12 columnas iguales. Cada elemento ocupa un número fijo de columnas:

• Tarjetas KPI: 3 columnas cada una (4 por fila)
• Gráficas medianas: 6 columnas (2 por fila)
• Gráficas grandes: 12 columnas (ancho completo)
• Tarjetas de detalle pequeñas: 4 columnas (3 por fila)

Diseña un layout de cuadrícula de 12 columnas para un
dashboard de marketing.

Elementos a incluir:
1. 4 tarjetas KPI (tráfico, leads, tasa de conversión,
   costo por lead)
2. Tráfico en el tiempo (gráfica de línea)
3. Leads por fuente (barras horizontales)
4. Embudo de conversión (4 etapas)
5. Contenido con mejor rendimiento (tabla, 10 filas)
6. Comparación de rendimiento de campañas (barras agrupadas)

Restricciones:
- Debe funcionar en 1920x1080 sin scroll para Nivel 1 y 2
- Nivel 3 puede scrollear
- Los KPIs deben ser visibles en todo momento

La IA produce una especificación de layout de cuadrícula con column spans y posiciones de fila para cada elemento.

Diseñando para la Acción

Los mejores dashboards no solo muestran datos — impulsan a actuar.

Formato condicional: Indicadores rojo/ámbar/verde que muestran de inmediato qué necesita atención.

Alertas de umbral: Cuando un KPI cruza un umbral, el tratamiento visual cambia. ¿Ingresos debajo de la meta? La tarjeta se pone roja.

Rutas de drill-down: Da clic en un KPI para ver el detalle subyacente. Da clic en una barra en una gráfica para filtrar las otras gráficas a ese segmento.

Anotaciones de contexto: Notas breves que explican anomalías. “Pico el 15 de marzo por lanzamiento en Product Hunt” evita que cada espectador haga la misma pregunta.

Para nuestro dashboard de ventas, define los umbrales de
alerta y reglas de formato condicional:

KPIs:
- Cumplimiento de cuota: verde si >80%, ámbar si 60-80%,
  rojo si <60%
- Rotación: verde si <3%, ámbar si 3-5%, rojo si >5%
- Cobertura de pipeline: verde si >3x, ámbar si 2-3x,
  rojo si <2x
- Ciclo promedio de deal: verde si <30 días, ámbar si
  30-45, rojo si >45

¿Qué otras condiciones de alerta deberíamos monitorear?

La IA podría agregar: “Alerta cuando un deal que represente más del 10% de la cuota trimestral retroceda de etapa” o “Señalar cuando un representante lleve 7 días sin agregar nuevo pipeline.”

Anti-Patrones de Dashboard

Patrones a evitar:

El museo de datos: 30+ gráficas metidas en una pantalla. Nadie puede procesar tanta información simultáneamente. Si necesitas 30 gráficas, necesitas múltiples dashboards.

El dashboard de vanidad: Visualizaciones grandes e impresionantes que se ven espectaculares en juntas pero no impulsan decisiones. Si la decisión de nadie cambia por una gráfica, elimínala.

El dashboard abandonado: Datos que no se actualizan desde hace semanas o meses. Datos viejos son peores que no tener datos — la gente toma decisiones con información obsoleta. Automatiza la actualización o muestra prominentemente la fecha de última actualización.

El talla única: Un solo dashboard para el CEO, VP de Ventas y representantes individuales. Estas audiencias tienen preguntas diferentes y necesitan vistas diferentes.

La trampa del pixel perfecto: Pasar semanas haciendo el dashboard hermoso en vez de útil. Lanza un dashboard útil aunque sea feo, luego itera sobre el diseño.

Construyendo con IA

Usa la IA para ir del concepto a la especificación:

Genera una especificación completa de dashboard para nuestra
revisión ejecutiva semanal.

Incluye para cada elemento:
1. Tipo de elemento (tarjeta KPI, gráfica, tabla)
2. Fuente de datos y cálculos
3. Tipo de gráfica y configuración
4. Posición en la cuadrícula (column span y fila)
5. Reglas de formato condicional
6. Frecuencia de actualización
7. Comportamiento de drill-down (si aplica)

El dashboard debe responder: "¿Está sano el negocio esta
semana y qué necesita atención?"

Métricas disponibles:
[lista tus métricas disponibles]

La IA produce un documento de especificación que un desarrollador o herramienta de dashboard puede implementar directamente.

Ejercicio Práctico

Diseña un dashboard para tu trabajo:

1. Define la audiencia y sus 3 preguntas principales
2. Selecciona 6-8 elementos que respondan esas preguntas
3. Acomódalos en una jerarquía de tres niveles (KPIs → Tendencias → Detalle)
4. Define reglas de formato condicional para cada elemento
5. Usa la IA para revisar el diseño: “¿Qué falta? ¿Qué podría eliminarse?”

Dibújalo en papel primero. Los mejores dashboards se diseñan lejos de la computadora, enfocados en las necesidades del usuario y no en las capacidades de la herramienta.

Conclusiones Clave

• Diseña dashboards para audiencias específicas y sus decisiones específicas, no para los datos
• Usa jerarquía de tres niveles: KPIs arriba, tendencias en medio, detalle abajo
• La prueba de los cinco segundos: un espectador nuevo debe saber si todo va bien o no en cinco segundos
• Usa un sistema de cuadrícula para orden visual y responsividad
• El formato condicional y las alertas impulsan acción en vez de observación pasiva
• Evita el museo de datos — menos elementos pero mejores, siempre le ganan a más pero desordenados

Siguiente

En la Lección 6: Color, Accesibilidad y Anotaciones, aprenderás los toques finales que hacen tus visualizaciones inclusivas, profesionales y realmente pulidas.