Diseñar la navegación móvil de una app va más allá de poner botones en pantalla. Cuando eliges bien los componentes de navegación en iOS y Android, el usuario encuentra lo que busca sin pensar y tu app deja de sentirse como un laberinto. Aquí vas a ver cómo aplicar estos principios en un proyecto real de cine.

Apple lo dice claro en sus Human Interface Guidelines: la navegación debe pasar desapercibida [0:55]. Si está bien diseñada, tu usuario se concentra en el contenido, no en cómo moverse. Y eso aplica igual para Android.

¿Qué tipos de navegación define Material Design?

Material Design organiza el movimiento dentro de una app en tres tipos fundamentales que conviene tener mapeados antes de tocar Figma [1:24].

• Navegación lateral: te mueve entre pantallas del mismo nivel jerárquico. Aquí entran el bottom navigation, los tabs y el Navigation Drawer.
• Navegación hacia adelante: avanzas en la jerarquía, ya sea entrando a una pantalla secundaria o siguiendo un flujo de pasos consecutivos.
• Navegación hacia atrás: regresas a pantallas previas con el botón de retroceso o la flecha de navegación.

Los tabs merecen atención aparte porque son ideales cuando tienes contenido relacionado bajo una misma categoría y quieres que el usuario explore sin perder contexto.

¿Cuál es la diferencia entre navegación lateral y hacia adelante? La lateral te mueve entre secciones del mismo nivel (por ejemplo, Home y Perfil). La hacia adelante te lleva a un nivel más profundo, como entrar al detalle de una película desde la cartelera.

¿Qué componentes de navegación usar en iOS?

iOS tiene un set de componentes nativos que cubren prácticamente cualquier estructura que necesites [2:15].

• Tab bar: vive en la parte inferior y permite saltar entre secciones principales. Cada pestaña usa ícono y, a veces, texto.
• Navigation bar: aparece en la parte superior con el título de la vista y botones de acción. Es la que te deja regresar a la pantalla anterior.
• Toolbar: barra inferior con accesos rápidos para tareas frecuentes.
• Segmented control: perfecto para alternar vistas o aplicar filtros dentro de la misma pantalla.

Un caso real que ilustra bien esto es Disney+ [2:55]. Desde el home entras a la categoría Marvel, exploras una colección, eliges una serie y, dentro del detalle, aparecen tabs con episodios, contenido adicional e información. Durante todo ese recorrido, el tab bar permanece visible y el navigation bar te permite volver. Esa es la sensación de control que buscas.

¿Qué componentes equivalentes existen en Android?

Android tiene componentes que cumplen funciones parecidas, aunque con su propio lenguaje visual [4:08].

• Bottom navigation: el equivalente directo del tab bar de iOS para moverte entre secciones principales.
• Top app bar: muestra el nombre de la vista actual y acciones rápidas, muchas veces con un menú desplegable.
• Bottom app bar: barra inferior pensada para acciones frecuentes, normalmente combinada con un floating action button que destaca la tarea principal.
• Tabs: navegación lateral dentro de un mismo nivel jerárquico.

YouTube es el ejemplo perfecto: usa tabs para filtrar contenido en la pantalla principal y un Navigation Drawer para opciones más generales como películas, música o tendencias [4:52].

¿Cuándo usar Navigation Drawer y cuándo bottom navigation? Usa bottom navigation cuando tienes entre 3 y 5 secciones principales que el usuario consulta seguido. El Navigation Drawer funciona mejor cuando hay muchas categorías secundarias que no necesitan estar siempre visibles.

¿Cómo aplicar esta estructura en una app de cine?

El ejercicio práctico parte de la versión web de una app de cine y la traduce a móvil [5:22]. La jerarquía inicial queda así:

• Cartelera: estrenos y películas en exhibición.
• Boletos: historial y boletos activos.
• Alimentos: combos y snacks.
• Mi cuenta: perfil del usuario.

Estas cuatro secciones viven en el primer nivel y se conectan con un tab bar (en iOS) o bottom navigation (en Android), acompañado de un navigation bar en la parte superior [7:08].

¿Cómo se conecta el detalle de película con el flujo de compra?

Dentro de cartelera, al tocar una película entras al segundo nivel: el detalle. Desde ahí se desprenden tres acciones [8:10]:

• Ver el tráiler, que ocupa pantalla completa porque exige enfoque total del usuario.
• Comprar boletos, que abre un flujo completo en otra vista.
• Compartir la película, ideal como bottom sheet.

El flujo de compra sigue una secuencia clara: seleccionar horario, elegir asientos, ver el resumen, pagar con Apple Pay y recibir la pantalla de success [9:14]. Una vez completada la compra, la transición lleva al detalle del boleto, que vive dentro de la sección Boletos del primer nivel.

¿Cuándo conviene ocultar el tab bar?

La regla es simple: cuando necesitas atención total del usuario en una tarea específica, modificas la estructura [8:38]. Ver el tráiler y el flujo de compra son los dos momentos donde el tab bar desaparece para que nada distraiga.

¿Qué es un bottom sheet y para qué sirve? Es un panel que se desliza desde abajo sin sacarte de la pantalla actual. Sirve para acciones rápidas como compartir, donde no necesitas un cambio completo de vista.

¿Cómo replicar este flujo en Android?

Con la cartelera, el detalle de película y el bottom sheet de compra ya preparados, te toca completar el resto: boletos, alimentos, mi cuenta, el flujo de compra paso a paso y la pantalla de éxito [10:35]. Si detectas otro feature útil, como compartir película, agrégalo. Comparte tu resultado en los comentarios para que otros vean cómo resolviste tu jerarquía.