Layout y estructura del dashboard
Diseña layouts que guían al usuario hacia la información importante.
El layout es la arquitectura invisible de tu dashboard. Un buen layout guia al usuario naturalmente a traves de la informacion, mientras que uno malo lo deja perdido y frustrado. En esta leccion aprenderas a estructurar tus dashboards de Looker Studio para maxima efectividad.
Como leemos informacion visual
Antes de disenar, necesitas entender como los ojos humanos procesan la informacion en una pantalla.
El patron F de lectura
Investigaciones de eye-tracking muestran que los usuarios leen contenido web en un patron de F (F-pattern):
┌────────────────────────────────────────────────────────┐
│ ████████████████████████████████████████ │
│ ████████████████████████████████████████ │
│ ████████████████ │
│ │
│ ████████████████████████████████ │
│ ████████████████████████████████ │
│ ███████████ │
│ │
│ █████████████████████████ │
│ ████████ │
│ █████ │
│ ███ │
└────────────────────────────────────────────────────────┘
Implicaciones para dashboards:
- La informacion mas importante va arriba a la izquierda
- La atencion disminuye hacia abajo y hacia la derecha
- Los titulos y KPIs principales deben estar en la "zona caliente"
El patron Z de lectura
Para contenido mas estructurado (como dashboards bien disenados), los usuarios siguen un patron en Z:
┌────────────────────────────────────────────────────────┐
│ ● ─────────────────────────────────────────────────► ● │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ ● ─────────────────────────────────────────────────► ● │
└────────────────────────────────────────────────────────┘
Aplicacion practica:
- Esquina superior izquierda: Logo/titulo del dashboard
- Esquina superior derecha: Filtros globales o KPI principal
- Linea diagonal: Transicion natural hacia contenido secundario
- Linea inferior: Detalles y acciones
Jerarquia de informacion
La jerarquia visual determina que ve primero tu audiencia. En dashboards, la jerarquia tipica es:
┌────────────────────────────────────────────────────────┐
│ NIVEL 1: KPIs Principales (20% del espacio) │
│ ┌────────────────────────────────────────────────┐ │
│ │ $1.2M 2,450 15% 98.5% │ │
│ │ Ingresos Clientes Growth Satisfaction│ │
│ └────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────┤
│ NIVEL 2: Tendencias y Comparaciones (50% del espacio)│
│ ┌─────────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ │ │
│ │ Grafico de tendencia │ │ Grafico comparativo│ │
│ │ │ │ │ │
│ └─────────────────────────┘ └─────────────────────┘ │
├────────────────────────────────────────────────────────┤
│ NIVEL 3: Detalles y Tablas (30% del espacio) │
│ ┌────────────────────────────────────────────────┐ │
│ │ Tabla de detalles con datos especificos │ │
│ └────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
La piramide invertida
Este concepto del periodismo aplica perfectamente a dashboards:
| Nivel | Contenido | Pregunta que responde |
|---|---|---|
| 1 (arriba) | KPIs y metricas principales | "¿Como estamos?" |
| 2 (medio) | Tendencias y contexto | "¿Por que estamos asi?" |
| 3 (abajo) | Detalles y datos granulares | "¿Donde exactamente?" |
Agrupacion de metricas relacionadas
Los elementos relacionados deben estar visualmente cerca. El cerebro automaticamente asocia elementos proximos.
Principio de proximidad
Mal agrupado:
┌──────────────────────────────────────────┐
│ Ventas Q1 Gastos Q3 Ventas Q2 │
│ $100K $45K $120K │
│ │
│ Gastos Q1 Ventas Q3 Gastos Q2 │
│ $40K $95K $50K │
└──────────────────────────────────────────┘
Bien agrupado:
┌──────────────────────────────────────────┐
│ VENTAS GASTOS │
│ ──────── ───── │
│ Q1: $100K Q1: $40K │
│ Q2: $120K Q2: $50K │
│ Q3: $95K Q3: $45K │
└──────────────────────────────────────────┘
Agrupacion por contexto de uso
Agrupa segun como tu audiencia usara la informacion:
┌──────────────────────────────────────────────────────┐
│ RENDIMIENTO FINANCIERO │ RENDIMIENTO OPERACIONAL│
│ ───────────────────────── ────────────────────── │
│ • Ingresos │ • Pedidos procesados │
│ • Margen bruto │ • Tiempo de entrega │
│ • Costos operativos │ • Tasa de devolucion │
│ • EBITDA │ • Satisfaccion cliente │
├──────────────────────────────────────────────────────┤
│ RENDIMIENTO DE MARKETING │ RENDIMIENTO DE VENTAS │
│ ───────────────────────── ────────────────────── │
│ • Leads generados │ • Conversion rate │
│ • Costo por lead │ • Ticket promedio │
│ • Trafico web │ • Pipeline value │
│ • Engagement social │ • Win rate │
└──────────────────────────────────────────────────────┘
El poder del espacio en blanco
El espacio en blanco (whitespace) no es espacio desperdiciado. Es un elemento de diseno crucial.
Funciones del espacio en blanco
- Separar secciones: Indica donde termina un grupo y empieza otro
- Reducir carga cognitiva: Da "respiro" visual al usuario
- Dirigir atencion: Aisla elementos importantes
- Mejorar legibilidad: Texto y graficos respiran mejor
Cuanto espacio usar
┌────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │
│ │ Grafico 1 │ │ Grafico 2 │ │
│ │ │ │ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ │ │
│ │ Grafico principal │ │
│ │ │ │
│ └──────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────┘
Reglas practicas:
- Margen exterior: 16-24 pixels
- Espacio entre elementos: 12-16 pixels
- Espacio entre secciones: 24-32 pixels
- Padding interno de componentes: 8-12 pixels
Sistema de grids en Looker Studio
Looker Studio ofrece un sistema de grid que facilita la alineacion. Dominar el grid es esencial para dashboards profesionales.
Activar y configurar el grid
- Ve a View > Show Grid (o Ctrl/Cmd + G)
- Ajusta el espaciado en File > Report Settings > Layout
Grid de 12 columnas
El estandar de la industria es un grid de 12 columnas porque 12 es divisible por 2, 3, 4 y 6:
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │
├───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┤
│ 12 cols │ Ancho completo
├───────────────────────┬───────────────────────┤
│ 6 cols │ 6 cols │ Mitades
├───────────┬───────────┬───────────┬───────────┤
│ 3 cols │ 3 cols │ 3 cols │ 3 cols │ Cuartos
├───────────┴───────────┼───────────┴───────────┤
│ 4 cols │ 8 cols │ 1/3 + 2/3
└───────────────────────┴───────────────────────┘
Layouts comunes en dashboards
Layout ejecutivo (F-pattern):
┌────────────────────────────────────────────────────────┐
│ Logo │ TITULO DEL DASHBOARD │ Filtros ▼ │
├──────────┴─────────────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ KPI1 │ │ KPI2 │ │ KPI3 │ │ KPI4 │ │ KPI5 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
├────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Grafico de tendencia principal │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────┤
│ ┌─────────────────────┐ ┌─────────────────────────┐ │
│ │ Grafico 1 │ │ Grafico 2 │ │
│ └─────────────────────┘ └─────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Layout analitico (detalle):
┌────────────────────────────────────────────────────────┐
│ Filtros: [Fecha ▼] [Region ▼] [Producto ▼] [Buscar] │
├────────────────────────────────────────────────────────┤
│ ┌─────────────────────┐ ┌─────────────────────────┐ │
│ │ KPI + Sparkline │ │ KPI + Sparkline │ │
│ └─────────────────────┘ └─────────────────────────┘ │
├─────────────────────────┬──────────────────────────────┤
│ Grafico tiempo │ Tabla de datos │
│ ┌───────────────────┐ │ ┌────────────────────────┐ │
│ │ │ │ │ Col1 Col2 Col3 │ │
│ │ │ │ │ ─── ─── ─── │ │
│ │ │ │ │ ... ... ... │ │
│ │ │ │ │ ... ... ... │ │
│ └───────────────────┘ │ └────────────────────────┘ │
├─────────────────────────┴──────────────────────────────┤
│ ┌────────────────────────────────────────────────┐ │
│ │ Tabla de detalle granular │ │
│ └────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
Layout de monitoreo (operational):
┌────────────────────────────────────────────────────────┐
│ SISTEMA DE MONITOREO EN TIEMPO REAL │
├─────────────┬─────────────┬─────────────┬─────────────┤
│ ⬤ OK │ ⬤ OK │ ⬤ ALERTA │ ⬤ OK │
│ Sistema A │ Sistema B │ Sistema C │ Sistema D │
│ 99.9% │ 99.7% │ 94.2% │ 99.8% │
├─────────────┴─────────────┴─────────────┴─────────────┤
│ ┌────────────────────────────────────────────────┐ │
│ │ Grafico de tiempo real │ │
│ └────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────┤
│ Ultimas alertas: │
│ • 14:32 - Sistema C: Latencia elevada (230ms) │
│ • 14:28 - Sistema C: CPU al 85% │
│ • 13:45 - Sistema A: Backup completado │
└────────────────────────────────────────────────────────┘
Dimensionamiento de componentes
El tamano de cada componente debe reflejar su importancia.
Jerarquia de tamanos
| Importancia | % del espacio | Uso tipico |
|---|---|---|
| Primaria | 40-50% | KPIs principales, grafico de tendencia |
| Secundaria | 30-40% | Graficos comparativos, breakdowns |
| Terciaria | 10-20% | Tablas de detalle, filtros, leyendas |
Proporciones recomendadas para graficos
Grafico de lineas temporal: Ratio 16:9 o 3:1
┌─────────────────────────────────────────┐
│ │
│ ───────── │
└─────────────────────────────────────────┘
Grafico de barras: Ratio 4:3 o 1:1
┌─────────────────────┐
│ ████ │
│ ████████ │
│ ██████████████ │
│ █████████ │
└─────────────────────┘
Scorecard/KPI: Ratio 2:1 o 3:1
┌───────────────┐
│ $1.2M │
│ +15% ▲ │
└───────────────┘
Responsive design en Looker Studio
Los dashboards pueden verse en diferentes dispositivos. Considera:
Configurar vistas responsive
- File > Report Settings
- Selecciona Canvas Size
- Opciones: Fixed, Fit to Width, Responsive
Breakpoints comunes
| Dispositivo | Ancho | Recomendacion |
|---|---|---|
| Desktop grande | 1920px | Layout completo |
| Desktop | 1366px | Layout estandar |
| Tablet | 768px | Reducir columnas |
| Movil | 375px | Una columna |
Puntos clave
El patron F indica que la informacion mas importante va arriba a la izquierda; el patron Z aplica a layouts mas estructurados
La piramide invertida organiza informacion: KPIs arriba, contexto en medio, detalles abajo
El principio de proximidad agrupa elementos relacionados; lo que esta cerca se percibe como relacionado
El espacio en blanco no es desperdicio; reduce carga cognitiva y mejora la claridad
El grid de 12 columnas ofrece flexibilidad para crear layouts consistentes y profesionales
El tamano de componentes debe reflejar su importancia; mas grande = mas importante
En la siguiente leccion exploraremos como usar colores y tipografia para reforzar tu mensaje y mantener consistencia con tu marca.
¿Completaste esta lección?
Marca esta lección como completada. Tu progreso se guardará en tu navegador.