Diseño para móvil

El 60% de los ejecutivos revisa dashboards desde su celular. Si tu reporte solo funciona bien en desktop, estás perdiendo a más de la mitad de tu audiencia. En esta lección, aprenderás a crear experiencias móviles que funcionan.

Por qué importa el diseño móvil

La realidad del consumo de datos

Escenario típico:
┌─────────────────────────────────────────────────────────┐
│                                                         │
│  CEO María - 7:30 AM                                   │
│  En el auto camino a la oficina                        │
│  Revisa métricas del día anterior en su celular        │
│                                                         │
│  Director Comercial Juan - 10:15 AM                    │
│  Entre reuniones, tablet en mano                       │
│  Prepara números para la siguiente presentación        │
│                                                         │
│  Gerente Regional Ana - 3:00 PM                        │
│  En tienda, smartphone                                  │
│  Compara rendimiento vs otras ubicaciones              │
│                                                         │
└─────────────────────────────────────────────────────────┘

Desktop vs móvil: Las diferencias

Aspecto	Desktop	Móvil
Pantalla	Grande (1920px+)	Pequeña (375-428px)
Orientación	Horizontal	Vertical (típicamente)
Interacción	Mouse preciso	Dedo (menos preciso)
Contexto	Sentado, enfocado	En movimiento, distraído
Tiempo	Análisis profundo	Vistazo rápido
Conexión	Estable, rápida	Variable, puede ser lenta

Vista móvil en Power BI

Acceder a la vista móvil

1. En Power BI Desktop, ve a la pestaña Vista
2. Clic en Diseño móvil
3. Aparece el canvas móvil con tu página actual

Vista móvil:
┌──────────────────────────────────────────────────────────────┐
│                                                              │
│  ┌────────────────┐    ┌──────────────────────────────────┐  │
│  │                │    │  Elementos disponibles:          │  │
│  │   CANVAS       │    │  □ Visual 1                      │  │
│  │   MÓVIL        │    │  □ Visual 2                      │  │
│  │                │    │  □ Visual 3                      │  │
│  │   (Arrastra    │    │  □ KPI Card                      │  │
│  │   visuales     │    │  □ Slicer                        │  │
│  │   aquí)        │    │                                  │  │
│  │                │    │  Solo los marcados aparecen      │  │
│  │                │    │  en la vista móvil               │  │
│  └────────────────┘    └──────────────────────────────────┘  │
│                                                              │
└──────────────────────────────────────────────────────────────┘

El canvas móvil

Dimensiones:

• Ancho fijo: 375px (simula iPhone estándar)
• Alto flexible: scroll vertical permitido
• Proporción: 9:16 aproximadamente

Cuadrícula:

• Power BI muestra una cuadrícula de ayuda
• Los visuales se ajustan a esta cuadrícula
• Facilita alineación y consistencia

Agregar visuales al layout móvil

Método 1: Arrastrar desde el panel

1. En el panel derecho, aparecen todos los visuales de la página
2. Arrastra los que quieras incluir al canvas móvil
3. Redimensiona y posiciona

Método 2: Seleccionar y agregar

1. Haz clic en el checkbox junto a cada visual
2. El visual aparece automáticamente en el canvas
3. Luego ajusta posición y tamaño

Importante: No todos los visuales de desktop necesitan aparecer en móvil. Selecciona solo los más importantes.

Principios de diseño móvil

1. Prioriza sin piedad

En desktop puedes tener 10 visuales. En móvil, elige los 3-5 más críticos.

Priorización para dashboard de ventas:

ALTA PRIORIDAD (incluir en móvil):
□ KPI de ventas totales
□ KPI de cumplimiento de meta
□ Gráfico de tendencia semanal

MEDIA PRIORIDAD (quizás incluir):
□ Top 5 productos
□ Comparación vs mes anterior

BAJA PRIORIDAD (solo desktop):
□ Tabla detallada de transacciones
□ Análisis de correlación
□ Mapa geográfico completo

2. Diseño vertical (mobile-first thinking)

El usuario hace scroll vertical, no horizontal.

Layout móvil óptimo:
┌─────────────────────────┐
│  ┌─────────────────────┐ │
│  │   KPI PRINCIPAL     │ │  ← Lo más importante arriba
│  │      $1.2M          │ │
│  └─────────────────────┘ │
│                          │
│  ┌─────────┐ ┌─────────┐ │
│  │  KPI 2  │ │  KPI 3  │ │  ← KPIs secundarios en fila
│  │   85%   │ │  +12%   │ │
│  └─────────┘ └─────────┘ │
│                          │
│  ┌─────────────────────┐ │
│  │                     │ │
│  │   GRÁFICO          │ │  ← Visual principal
│  │   TENDENCIA        │ │
│  │                     │ │
│  └─────────────────────┘ │
│                          │
│  ┌─────────────────────┐ │
│  │   TOP 5 PRODUCTOS   │ │  ← Detalle secundario
│  │   1. Producto A     │ │
│  │   2. Producto B     │ │
│  └─────────────────────┘ │
│                          │
│         ↓ scroll         │
└─────────────────────────┘

3. Tamaños touch-friendly

Los dedos son menos precisos que el mouse. Asegura que los elementos sean suficientemente grandes.

Tamaños mínimos recomendados:

Botones y elementos interactivos:
┌─────────────────────────────────────────┐
│  Mínimo: 44x44 px                       │
│  Recomendado: 48x48 px o mayor          │
│                                         │
│  ┌──────────┐     ┌──┐                  │
│  │ BUENO    │     │✗ │ ← Muy pequeño    │
│  │          │     └──┘                  │
│  └──────────┘                           │
│     48px           20px                 │
└─────────────────────────────────────────┘

Espaciado entre elementos tocables:
┌─────────────────────────────────────────┐
│  Mínimo: 8px de separación              │
│  Recomendado: 12-16px                   │
│                                         │
│  [Botón A]    [Botón B]    ✓ Bien       │
│           ↔                             │
│          12px                           │
│                                         │
│  [Botón A][Botón B]        ✗ Mal        │
│          ↔                              │
│          2px (dedos activarán ambos)    │
└─────────────────────────────────────────┘

4. Tipografía legible

En pantallas pequeñas, el texto pequeño es ilegible.

Tamaños de fuente para móvil:

KPIs / números grandes:    24-32pt
Títulos de sección:        16-18pt
Etiquetas de datos:        12-14pt
Notas / información menor: 10-12pt (mínimo)

NUNCA usar menos de 10pt en móvil

5. Simplifica la interactividad

Interacción Desktop	Equivalente Móvil
Hover (tooltip)	Tap para ver tooltip
Clic derecho	Tap largo (menos intuitivo)
Scroll horizontal	Evitar - usar scroll vertical
Zoom	Pinch to zoom (limitado)
Selección múltiple	Difícil - simplificar

Configurar visuales para móvil

Tarjetas KPI optimizadas

Configuración recomendada:

Formato > Valor del contenido:
- Tamaño de fuente: 28-32pt
- Mostrar unidades: Abreviado (K, M, B)

Formato > Etiqueta de categoría:
- Activar
- Tamaño: 12pt
- Posición: Arriba del valor

Formato > General:
- Padding: Mínimo para maximizar espacio

Ejemplo visual:

┌─────────────────────┐
│  Ventas Totales     │  ← Etiqueta pequeña
│                     │
│     $1.2M           │  ← Valor grande
│   ▲ +15% vs mes     │  ← Contexto si cabe
└─────────────────────┘

Gráficos optimizados

Para gráficos de barras/líneas:

Formato > Eje X:
- Etiquetas: Rotadas o abreviadas si es necesario
- Tamaño: 10-12pt

Formato > Eje Y:
- Mostrar título: Desactivar (ahorra espacio)
- Etiquetas: Abreviadas (K, M)

Formato > Etiquetas de datos:
- Activar solo si caben sin superponerse
- Tamaño: 10-12pt

Formato > Leyenda:
- Posición: Abajo o arriba (no lateral)
- Si solo hay una serie, desactivar

Antes vs después:

ANTES (no optimizado para móvil):
┌─────────────────────────────┐
│ Ventas mensuales por región │
│ Eje Y: Ventas en USD        │
│ ┌─────────────────────────┐ │
│ │    /\    /\             │ │  ← Leyenda ocupa
│ │   /  \  /  \            │ │    mucho espacio
│ │  /    \/    \           │ │
│ └─────────────────────────┘ │
│ Enero Febrero Marzo Abril   │  ← Etiquetas largas
│ ■ Norte ■ Sur ■ Este ■ Oeste│
└─────────────────────────────┘

DESPUÉS (optimizado):
┌─────────────────────────────┐
│ Ventas mensuales            │
│ ┌─────────────────────────┐ │
│ │ $150K──────●            │ │  ← Etiqueta de valor
│ │           /\            │ │
│ │    /\    /  \           │ │
│ │   /  \  /    ●$98K      │ │
│ └─────────────────────────┘ │
│ Ene Feb Mar Abr             │  ← Etiquetas cortas
│ ● Norte ● Sur               │  ← Solo 2 series
└─────────────────────────────┘

Slicers móviles

Los slicers tradicionales ocupan mucho espacio. Alternativas:

Opción 1: Slicer desplegable

Formato > Slicer > Opciones > Estilo: Desplegable

┌─────────────────────────┐
│ Región: [Norte      ▼]  │  ← Ocupa una línea
└─────────────────────────┘

Opción 2: Página de filtros separada

Crea una página solo para filtros con bookmark:

[☰ Filtros]  ← Botón en página principal
            ↓
┌─────────────────────────┐
│ FILTROS                 │
│ ─────────────────────── │
│ Región:    [Norte  ▼]   │
│ Período:   [Q1 2026▼]   │
│ Producto:  [Todos  ▼]   │
│                         │
│ [Aplicar]  [Limpiar]    │
│ [← Volver]              │
└─────────────────────────┘

Tablas en móvil

Las tablas anchas no funcionan en móvil. Soluciones:

Opción 1: Reducir columnas

Desktop: 8 columnas
Móvil: 3 columnas más importantes

Solo mostrar: Nombre | Valor | Variación

Opción 2: Formato condicional visual

En lugar de números, usar:
- Barras de datos
- Iconos (▲ ▼ ●)
- Colores de fondo

Opción 3: Usar visual de lista

┌─────────────────────────┐
│ Top Productos           │
│                         │
│ 1. Widget Pro    $45K ▲ │
│ 2. Gadget Plus   $38K ▼ │
│ 3. Tool Basic    $32K ● │
└─────────────────────────┘

Probar en dispositivos reales

Power BI Mobile App

La app oficial de Power BI está disponible para:

• iOS (iPhone, iPad)
• Android (smartphones, tablets)
• Windows Mobile

Proceso de prueba:

1. Publica el reporte al servicio de Power BI
2. Instala la app en tu dispositivo
3. Inicia sesión con tu cuenta
4. Navega al reporte
5. Prueba la experiencia real

Qué probar en móvil

Checklist de pruebas móviles:

VISUALIZACIÓN:
□ ¿Se ven todos los elementos sin cortes?
□ ¿El texto es legible sin hacer zoom?
□ ¿Los colores tienen suficiente contraste?
□ ¿Los gráficos comunican el mensaje?

INTERACCIÓN:
□ ¿Los elementos tocables son suficientemente grandes?
□ ¿El drill-down funciona con tap?
□ ¿Los tooltips aparecen correctamente?
□ ¿Los slicers funcionan bien?

RENDIMIENTO:
□ ¿Carga en tiempo razonable (< 5 segundos)?
□ ¿Las interacciones son fluidas?
□ ¿Funciona con conexión lenta?

NAVEGACIÓN:
□ ¿Es fácil ir entre páginas?
□ ¿Los botones funcionan?
□ ¿El usuario sabe dónde está?

Simular móvil desde desktop

Si no tienes acceso al dispositivo:

En Chrome/Edge:

1. F12 (Developer Tools)
2. Clic en icono de dispositivos móviles
3. Selecciona modelo de dispositivo
4. Navega al servicio de Power BI

Limitaciones:

• No simula touch real
• No prueba rendimiento real
• No prueba app nativa

Recomendación: Siempre prueba en dispositivo real antes de compartir con stakeholders.

Patrones de layout móvil

Patrón 1: KPI-first

Ideal para dashboards ejecutivos.

┌─────────────────────────┐
│  ┌───────────────────┐  │
│  │    KPI PRINCIPAL  │  │
│  │       $1.2M       │  │
│  └───────────────────┘  │
│                         │
│  ┌─────┐ ┌─────┐ ┌─────┐│
│  │ KPI │ │ KPI │ │ KPI ││
│  │  2  │ │  3  │ │  4  ││
│  └─────┘ └─────┘ └─────┘│
│                         │
│  ┌───────────────────┐  │
│  │   Tendencia       │  │
│  │   semanal         │  │
│  └───────────────────┘  │
│                         │
│       [Ver detalle]     │
└─────────────────────────┘

Patrón 2: Trend-focus

Ideal para análisis de tendencias.

┌─────────────────────────┐
│  Período: [Este mes ▼]  │
│                         │
│  ┌───────────────────┐  │
│  │                   │  │
│  │   GRÁFICO         │  │
│  │   PRINCIPAL       │  │
│  │   (más alto)      │  │
│  │                   │  │
│  └───────────────────┘  │
│                         │
│  ┌─────────┐ ┌─────────┐│
│  │ Máximo  │ │ Mínimo  ││
│  │ $150K   │ │ $85K    ││
│  └─────────┘ └─────────┘│
│                         │
│  Resumen:               │
│  Tendencia positiva...  │
└─────────────────────────┘

Patrón 3: Comparación

Ideal para análisis comparativos.

┌─────────────────────────┐
│  Este mes vs anterior   │
│                         │
│  ┌─────────────────────┐│
│  │ Este mes    $125K   ││
│  │ ████████████████    ││
│  │                     ││
│  │ Mes anterior $110K  ││
│  │ ██████████████      ││
│  └─────────────────────┘│
│                         │
│  Diferencia: +$15K (+14%)│
│                         │
│  ┌─────────────────────┐│
│  │ Por categoría:      ││
│  │ • Prod A: +$8K      ││
│  │ • Prod B: +$5K      ││
│  │ • Prod C: +$2K      ││
│  └─────────────────────┘│
└─────────────────────────┘

Errores comunes en diseño móvil

Error 1: Copiar el layout de desktop

❌ INCORRECTO:
Tomar el dashboard de desktop y
comprimirlo para que quepa en móvil

✅ CORRECTO:
Repensar qué información es crítica
para el usuario móvil y diseñar desde cero

Error 2: Demasiada información

❌ INCORRECTO:
┌─────────────────────────┐
│ KPI KPI KPI KPI KPI KPI │
│ Graf Graf Graf Graf Graf│
│ Tabla con 20 columnas   │
│ Mapa Filtro Filtro      │
└─────────────────────────┘

✅ CORRECTO:
┌─────────────────────────┐
│    KPI PRINCIPAL        │
│                         │
│  ┌─────┐ ┌─────┐       │
│  │ KPI │ │ KPI │       │
│  └─────┘ └─────┘       │
│                         │
│  [Gráfico tendencia]    │
│                         │
│  [Ver más detalle →]    │
└─────────────────────────┘

Error 3: Ignorar la orientación

Considera que algunos usuarios
rotan el dispositivo a horizontal:

Vertical (portrait):
┌─────────────┐
│             │
│             │
│             │
│             │
│             │
└─────────────┘

Horizontal (landscape):
┌─────────────────────────┐
│                         │
│                         │
└─────────────────────────┘

El layout móvil de Power BI
funciona principalmente en vertical.

Error 4: No probar con datos reales

Con datos de prueba (5 productos):
┌─────────────────────────┐
│ 1. Producto A    $45K   │
│ 2. Producto B    $38K   │
│ 3. Producto C    $32K   │
│ 4. Producto D    $28K   │
│ 5. Producto E    $25K   │
└─────────────────────────┘
✓ Se ve bien

Con datos reales (nombre largo):
┌─────────────────────────┐
│ 1. Producto Premium Ed... │  ← Cortado
│ 2. Gadget Profesional ... │
│ 3. Herramienta Especial.. │
└─────────────────────────┘
✗ Hay que ajustar

Puntos clave de esta lección

1. 60% de ejecutivos revisan dashboards en móvil - no es opcional
2. Vista móvil en Power BI es un layout separado, no responsive automático
3. Prioriza sin piedad - Solo 3-5 visuales más importantes
4. Diseño vertical - El usuario hace scroll hacia abajo, no horizontal
5. Touch-friendly - Elementos mínimo de 44x44px, espaciado generoso
6. Tipografía legible - Nunca menos de 10pt en móvil
7. Prueba en dispositivo real - La simulación no es suficiente
8. Simplifica interacciones - Lo que funciona en desktop puede fallar en móvil

Próximo módulo

Felicidades por completar el módulo de Visualizaciones que Cuentan Historias. Ahora tienes las habilidades para crear dashboards profesionales, interactivos y optimizados para cualquier dispositivo.

En el siguiente módulo, aplicarás todo lo aprendido creando dashboards prácticos para casos reales: Marketing, Ventas y Finanzas.

---

Quiz de comprensión

Pregunta 1

¿Cuál es el tamaño mínimo recomendado para elementos interactivos (botones, slicers) en móvil?

A) 20x20 px B) 32x32 px C) 44x44 px D) 64x64 px

Ver respuesta

Respuesta: C) 44x44 px

Apple y Google recomiendan un tamaño mínimo de 44x44 píxeles para elementos tocables. Esto asegura que los usuarios puedan interactuar con precisión usando sus dedos.

Pregunta 2

¿Qué deberías hacer primero al diseñar la versión móvil de un dashboard?

A) Comprimir todos los visuales para que quepan B) Priorizar y seleccionar solo los 3-5 visuales más críticos C) Reducir el tamaño de fuente de todo D) Quitar todos los colores

Ver respuesta

Respuesta: B) Priorizar y seleccionar solo los 3-5 visuales más críticos

El espacio en móvil es limitado. Antes de diseñar, identifica qué información es absolutamente necesaria para el usuario móvil y selecciona solo esos elementos. Menos es más en diseño móvil.

Pregunta 3

¿Cuál es el estilo de slicer más recomendado para móvil?

A) Lista con checkboxes B) Botones horizontales C) Desplegable (dropdown) D) Deslizador (slider)

Ver respuesta

Respuesta: C) Desplegable (dropdown)

El estilo desplegable ocupa solo una línea cuando está cerrado, maximizando el espacio disponible. Al tocarlo, se expande para mostrar las opciones y luego vuelve a colapsarse.

Pregunta 4

¿Por qué es importante probar en un dispositivo real y no solo simular?

A) La simulación no muestra los colores correctamente B) No se puede probar touch real, rendimiento ni la experiencia de la app nativa C) Power BI no permite simulación D) Los simuladores cuestan dinero

Ver respuesta

Respuesta: B) No se puede probar touch real, rendimiento ni la experiencia de la app nativa

Los simuladores en navegador no pueden replicar la experiencia de tocar la pantalla con los dedos, el rendimiento real del dispositivo, o cómo funciona la app nativa de Power BI. Siempre valida en dispositivo real antes de compartir.

Pregunta 5

¿Cuál es el tamaño mínimo de fuente recomendado para texto en dashboards móviles?

A) 6pt B) 8pt C) 10pt D) 14pt

Ver respuesta

Respuesta: C) 10pt

El texto menor a 10pt se vuelve ilegible en pantallas móviles, especialmente bajo luz solar o para usuarios con visión reducida. 10pt es el mínimo absoluto; 12pt o más es preferible cuando sea posible.