UX móvil y navegación: diseñar flujos que no frustren

Aprende a estructurar navegación móvil (tabs, stack y deep flows) para reducir fricción y mejorar la tasa de tarea completada.

¿Cuánto sabes de Desarrollo de Apps?

📘 Teoría

Patrones de navegación que realmente funcionan

No existe patrón universal: cada uno resuelve un tipo de problema distinto.

`Bottom tabs` funciona cuando tienes pocas secciones principales de acceso frecuente y nombres claros.

`Stack navigation` encaja en flujos secuenciales (detalle -> editar -> confirmar) donde volver atrás conserva contexto.

`Search-first` suele superar menús profundos cuando el catálogo es grande y las tareas son directas.

Tabs para navegación global recurrente.
Stack para tareas por pasos.
Search para catálogos densos y objetivos concretos.

Errores de UX que rompen flujos móviles

La mayoría de problemas de UX móvil son de arquitectura de flujo, no de colores.

Ocultar acciones críticas en menús secundarios aumenta abandono y soporte al usuario.

Mezclar navegación principal con acciones contextuales crea ambigüedad (¿cambié de sección o ejecuté una acción?).

No mantener estado al volver atrás fuerza al usuario a repetir pasos y reduce confianza en la app.

Regla de selección de patrón por caso

type Flujo = { seccionesTop: number; requiereBusqueda: boolean; pasosSecuenciales: boolean };

function elegirNavegacion(f: Flujo) {
  if (f.requiereBusqueda) return 'search-first + tabs';
  if (f.pasosSecuenciales) return 'stack';
  if (f.seccionesTop <= 5) return 'bottom-tabs';
  return 'tabs + secciones agrupadas';
}

Cómo medir si tu navegación mejora

Sin métricas de flujo, no sabes si la navegación está ayudando o estorbando.

Define eventos de embudo por pantalla (entrada, abandono, acción clave) y revisa puntos de fuga.

Mide tiempo medio para completar tarea principal antes y después de rediseñar la navegación.

Complementa analítica con test moderado: el dato cuantitativo dice dónde fallas, el cualitativo explica por qué.

1 Patrones de navegación que realmente funcionan 2 Errores de UX que rompen flujos móviles 3 Cómo medir si tu navegación mejora

🧪 Aprende probando

Ejemplo Ejemplo guiado Define patrón de navegación para una app de banca móvil con tareas frecuentes: saldo, transferencias y movimientos.

⌄

🏁 Retos

Reto Reto práctico Propón un rediseño para una app ecommerce con abandono alto en checkout por navegación confusa.

⌄

🧰 Recursos

Enlaces útiles

NNGroup: Mobile Navigation Patterns Material 3: Navigation Bar Android Guide: Navigation Android Guide: Navigation design Apple HIG: Tab Views

Test

Comprueba tus conocimientos con un test sobre Desarrollo de Apps.

Test de Desarrollo de Apps

Recursos del curso 20

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 03

React Native vs Flutter: diferencias que importan en producción

Lección 05

Ciclo de vida de pantallas: evitar bugs de estado y memoria

›