Navegación en apps: tab bar, menús, gestos y la arquitectura que los sostiene

Hace un tiempo nos llegó una app de reservas para un club deportivo con un problema curioso: las reservas funcionaban, pero casi nadie usaba la sección de clases, que era justo la que más interesaba al club. Estaba dentro del menú hamburguesa, en sexta posición, debajo de «Mi perfil» y encima de «Aviso legal». Al moverla a la barra inferior, sin cambiar una sola pantalla más, empezó a llenarse. Nadie la había rechazado; simplemente nadie la había visto.

La navegación de una app decide qué existe para el usuario. Lo que está siempre a la vista se explora; lo que se esconde, se usa cuando alguien lo busca expresamente. Por eso elegir entre una tab bar, un menú lateral o unas pestañas superiores no es una cuestión de estilo, sino una consecuencia de cómo está organizada la app y de qué queremos que la gente encuentre.

Esta guía se centra en la navegación de aplicaciones, nativas o web. Si lo tuyo es el menú de una web corporativa, tienes la guía de menús de navegación web, y si te interesa la ergonomía del pulgar y los gestos en detalle, la de UX móvil y zona del pulgar.

01Primero la arquitectura, después el patrón

Antes de dibujar una barra conviene tener claro el mapa. En nuestros proyectos empezamos siempre con tres preguntas:

1. 01¿Cuáles son los destinos principales? Las secciones a las que alguien vuelve una y otra vez: inicio, buscar, reservas, mensajes, perfil.
2. 02¿Con qué frecuencia se usa cada uno? Diario, semanal, ocasional. La frecuencia, más que la importancia para el negocio, decide la visibilidad.
3. 03¿Cuánta profundidad tiene cada sección? Algunas son una sola pantalla; otras abren listados, detalles y subdetalles.

Con esas respuestas aparece la forma de la app. Si hay de tres a cinco destinos de uso frecuente y de peso parecido, la estructura es plana y la tab bar encaja de forma natural. Si hay uno o dos flujos principales y muchas secciones secundarias, la navegación puede ser más jerárquica, con un inicio que distribuye. Si hay diez secciones parecidas sin una clara preferencia, conviene revisar la arquitectura de la información antes de elegir el componente, y quizá hacer un card sorting con usuarios reales.

02La tab bar: lo esencial, siempre a mano

La barra de pestañas inferior es el patrón de navegación principal más extendido en apps móviles, y por buenas razones: está en la zona que el pulgar alcanza con comodidad, muestra todos los destinos principales a la vez y permite saltar de uno a otro con un solo toque. Apple la llama tab bar y Google, en Material Design 3, navigation bar.

Criterios que funcionan

• →De tres a cinco destinos. Es la recomendación tanto de las Human Interface Guidelines de Apple como de Material Design.
• →Icono y etiqueta. Las etiquetas de texto cortas (una palabra, dos como mucho) eliminan la ambigüedad de los iconos. Un icono de campana puede ser avisos, alertas o novedades; con la palabra debajo, no hay duda. En la guía de iconografía en interfaces profundizamos en esto.
• →Estado activo inequívoco. Icono relleno frente a contorno, color de acento y, en Material 3, un indicador en forma de píldora detrás del icono. El color solo no basta: conviene que cambie también la forma o el peso.
• →Cada pestaña recuerda dónde estaba. Si el usuario estaba en el detalle de una reserva y salta a «Mensajes», al volver a «Reservas» espera encontrar ese detalle. Pulsar de nuevo la pestaña activa lleva a su raíz o sube al principio de la lista.
• →Destinos, no acciones. Cada pestaña lleva a un lugar. Las acciones («Crear», «Pagar») funcionan mejor en la cabecera o en un botón flotante dentro de la sección correspondiente.

Medidas de referencia

En iOS, la barra estándar ha medido tradicionalmente 49 pt de alto más el área segura inferior del indicador de inicio, y con iOS 26 Apple la ha rediseñado como una barra flotante con su nuevo material translúcido que puede contraerse al desplazar el contenido. En Material 3, la barra de navegación mide 80 dp de alto. En web, con 56 a 64 px de altura más el área segura del dispositivo vamos sobrados, y cada destino ocupa el ancho disponible dividido por el número de pestañas, de modo que el área táctil supera con holgura los 44×44 de referencia.

03El menú lateral y la sección «Más»: el lugar de lo secundario

El menú lateral (navigation drawer, el que se abre con el famoso icono de hamburguesa) tuvo su gran momento hace una década y después pasó a un segundo plano. Las pruebas que publicó el Nielsen Norman Group en 2016 mostraron que, en móvil, la navegación oculta se descubría y se usaba menos que la visible. No es un mal patrón: es un patrón para lo que no necesita estar a la vista.

Funciona muy bien para:

• →Destinos secundarios: ajustes, ayuda, información legal, cambiar de cuenta.
• →Apps con muchas secciones de peso similar, como un lector de noticias con veinte categorías.
• →Complementar una tab bar, alojando lo que no cabe en ella.

La alternativa habitual es una quinta pestaña «Más» o «Perfil» que agrupa lo secundario en una lista. En apps de consumo suele resultar más clara que el menú lateral, porque mantiene una sola forma de navegar.

04Pestañas superiores, controles segmentados y pilas: la navegación dentro de una sección

Dentro de cada sección también hay navegación, y conviene que se distinga visualmente de la principal:

• →Pestañas superiores. Dividen una sección en vistas hermanas: «Próximas» y «Pasadas» en reservas; «Todo», «Fotos» y «Vídeos» en una galería. Admiten deslizar lateralmente entre ellas. Hasta cuatro o cinco caben bien; si son más, pueden desplazarse en horizontal.
• →Control segmentado. Dos o tres opciones que cambian la vista del mismo contenido, como «Lista» y «Mapa». Es un filtro, no un cambio de lugar.
• →Pila de pantallas. El movimiento en profundidad: del listado al detalle, del detalle a un subdetalle. La cabecera muestra el título de la pantalla y una flecha de volver, idealmente con el nombre de la pantalla anterior en iOS.

05Gestos: atajos que se agradecen, caminos que se ven

Deslizar desde el borde para volver, deslizar una fila para archivarla, arrastrar hacia abajo para actualizar. Los gestos hacen que una app se sienta fluida y rápida para quien ya la conoce. Su limitación es que no se ven: nadie descubre un gesto si no se lo enseñan o lo intuye por costumbre.

Lo que funciona es tratarlos como atajos de algo que también existe de forma visible:

1. 01Volver con gesto, y también con la flecha en la cabecera.
2. 02Acciones de fila con deslizamiento, y también dentro del detalle o en un menú contextual.
3. 03Cerrar una hoja deslizando hacia abajo, y también con un botón «Cerrar» o «Hecho».

Respetar los gestos del sistema es igual de importante. En iOS, el borde izquierdo está reservado para volver; en Android, el gesto de atrás del sistema (con su animación predictiva en las versiones recientes) funciona desde ambos bordes. Si un carrusel o un mapa capturan esos deslizamientos, el usuario se queda atrapado. Y para personas con movilidad reducida, los gestos complejos (deslizar con dos dedos, mantener y arrastrar) necesitan una alternativa con un solo toque, como recoge el criterio 2.5.1 de WCAG.

06De móvil a tablet y escritorio: la navegación que se transforma

Una app o una aplicación web rara vez vive solo en el móvil. Material Design propone una progresión muy sensata que aplicamos también en proyectos web:

• →Pantallas compactas (móvil): barra inferior.
• →Pantallas medianas (tablet, a partir de unos 600 dp de ancho): navigation rail, una columna estrecha a la izquierda con los mismos destinos en vertical.
• →Pantallas amplias (escritorio): barra lateral completa con etiquetas y espacio para destinos secundarios.

Los destinos son los mismos en los tres casos, en el mismo orden y con los mismos iconos. Lo que cambia es la forma de presentarlos. Así, quien empieza algo en el móvil y lo continúa en el ordenador no tiene que reaprender nada.

En una aplicación web, una barra inferior accesible se construye con muy poco código. Lo esencial es usar un elemento nav con nombre, marcar la página actual con aria-current y respetar el área segura del dispositivo:

<nav class="tabbar" aria-label="Principal">
  <a href="/inicio" aria-current="page"><svg aria-hidden="true">…</svg><span>Inicio</span></a>
  <a href="/reservas"><svg aria-hidden="true">…</svg><span>Reservas</span></a>
  <a href="/clases"><svg aria-hidden="true">…</svg><span>Clases</span></a>
  <a href="/perfil"><svg aria-hidden="true">…</svg><span>Perfil</span></a>
</nav>

.tabbar { position: fixed; inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding-top: 8px; font-size: 12px; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
@media (min-width: 600px) { .tabbar { inset: 0 auto 0 0; width: 80px; grid-auto-flow: row; grid-auto-rows: min-content; border-top: 0; border-right: 1px solid var(--border); } }

Para que env(safe-area-inset-bottom) funcione en iPhone, la etiqueta meta viewport tiene que incluir viewport-fit=cover. Y recuerda dejar un relleno inferior en el contenido de la página igual a la altura de la barra, para que el último elemento no quede tapado.

07Ejemplo resuelto: la app del club deportivo

Volvamos al club del principio. Así rehicimos su navegación:

1. 01Inventario de destinos. Salieron once: inicio, reservar pista, mis reservas, clases, torneos, ranking, noticias, tienda, perfil, ajustes y aviso legal.
2. 02Frecuencia real. Con los datos de uso y una encuesta breve a socios, cuatro destinos concentraban casi todo el uso semanal: reservar, mis reservas, clases y perfil.
3. 03Tab bar con cuatro pestañas. «Reservar», «Mis reservas», «Clases» y «Perfil». Inicio desapareció como pestaña: la app abre directamente en «Reservar», que es lo que la mayoría de socios quería hacer nada más abrirla según sus propias analíticas.
4. 04Lo secundario, dentro de Perfil. Torneos, ranking, noticias, tienda, ajustes y aviso legal, en una lista ordenada por uso.
5. 05Pestañas superiores en Mis reservas. «Próximas» y «Pasadas».
6. 06Gestos como atajo. Deslizar una reserva próxima muestra «Cancelar», que también está en el detalle.

Las clases, que antes vivían escondidas, pasaron a ser una de las secciones más visitadas. La app no tenía más funciones que antes; simplemente las ponía donde la gente las podía encontrar.

08Una navegación que se siente natural

La mejor navegación es la que el usuario no tiene que aprender: sabe dónde está, sabe cómo volver y encuentra lo que busca donde lo espera. Llegar ahí pide escuchar a las personas que usan la app, ordenar el contenido según su forma de pensar y elegir patrones conocidos, dejando que la personalidad de la marca se exprese en el detalle, el tono y el movimiento. Si te interesa cómo conjugar las guías de Apple y Google con una identidad propia, lo contamos en diseño de apps para iOS y Android.

En SIMA diseñamos y desarrollamos apps y aplicaciones web desde la arquitectura hasta el último icono dentro de nuestro servicio de desarrollo web y apps con IA. Si estás pensando en una app o la tuya tiene secciones que nadie encuentra, escríbenos y le damos una vuelta juntos.