Patrones de navegación: tabs, sidebar, bottom nav y menú hamburguesa
Los patrones de navegación definen cómo se encuentra cada sección de tu producto. Compara tabs, sidebar, barra inferior y menú hamburguesa con datos del NN/g.
¿Por qué importa tanto la navegación?
Porque es lo primero que la persona usa cuando no sabe dónde está. Si la navegación no se ve, la persona tiene que adivinar qué existe. El NN/g lo midió: en un estudio con 179 participantes, la navegación oculta redujo la capacidad de descubrimiento del contenido en más de un 20 %, las tareas fueron al menos un 39 % más lentas en escritorio con navegación oculta, frente a la visible o la combinada, y un 15 % más lentas en móvil, frente a la combinada (NN/g: Hamburger Menus and Hidden Navigation Hurt UX Metrics).
Esos números salen del estudio original del NN/g. Léelos como una advertencia sobre la navegación oculta, no como una regla universal para cualquier producto.
¿Qué dice el NN/g sobre el menú hamburguesa?
Para escritorio, el NN/g es directo: no uses navegación oculta, como el icono hamburguesa. En móvil la regla es más flexible: con cuatro enlaces de nivel superior o menos conviene mostrarlos, y con más de cuatro, ocultar algunos es «la única solución razonable» (NN/g: Hamburger Menus).
En el mismo estudio, la navegación combinada, con algunas opciones visibles y otras en un menú, tuvo en móvil un uso del 86 %, frente al 57 % de la oculta. En escritorio, la navegación oculta se usó el 27 % de las veces, la visible el 48 % y la combinada el 50 %.
Un segundo artículo del NN/g sobre móvil recomienda, si hay cuatro o cinco opciones principales, usar navegación visible o combinada. Si decides ocultarla, el menú debe verse distinto del logo y tener una etiqueta. En un sitio analizado, el icono del menú estaba junto al logo y parecía parte de él, y su uso fue bajo (NN/g: How to Make Navigation (Even a Hamburger) Discoverable on Mobile).
¿Cómo se compara cada patrón?
| Patrón | Dónde vive | Ventaja | Riesgo |
|---|---|---|---|
| Tabs | Arriba, bajo el encabezado | Cambio rápido entre vistas relacionadas | Muchas pestañas se cortan en pantallas pequeñas |
| Sidebar | Izquierda | Más espacio para estructuras complejas | Ocupa espacio en pantallas pequeñas |
| Barra inferior | Abajo, en móvil | Secciones siempre visibles | Admite pocos destinos (de tres a cinco según Android) |
| Menú hamburguesa | Oculto, normalmente arriba a la izquierda | Ahorra espacio | Menos uso y más tiempo para llegar, según el NN/g |
Las guías de las plataformas coinciden en lo básico. La guía de diseño de Android dice que la barra de navegación admite de tres a cinco destinos del mismo nivel, que se convierte en un riel de navegación en pantallas grandes y que el cajón de navegación admite más de cinco destinos, aunque es menos cómodo en pantallas compactas. Las pautas de Apple para barras de pestañas piden evitar las pestañas de desbordamiento (la pestaña «Más»), porque dificulta llegar a lo que queda oculto, y sugieren considerar una barra lateral cuando la estructura de información es compleja.
¿Cómo se usa el icono hamburguesa hoy?
El NN/g publicó en 2025 una revisión del icono. Encontró que la mayoría de las personas lo reconoce como menú, sobre todo cuando está en la esquina superior izquierda y tiene tres líneas iguales. Los iconos de líneas parecidos, como los de lista o filtro, pueden confundirse con él. La recomendación es usar el icono estándar, sin bordes, en esa posición, y agregar la palabra «Menú». El artículo concluye que el hamburguesa es viable, pero no universal, y advierte que no conviene ocultar la navegación si no hace falta ocultarla (NN/g: The Hamburger-Menu Icon Today).
¿Cuándo NO conviene ocultar la navegación?
- Cuando las secciones principales son pocas y todas se usan con frecuencia.
- En escritorio, donde el NN/g recomienda no usar navegación oculta.
- En un producto donde la búsqueda no está bien resuelta. Si la persona no encuentra algo con la navegación, tampoco lo hallará escondido. Revisa UX de búsqueda antes de ocultar más.
Ejemplo
Ejemplo ilustrativo: una app de salud tiene cinco secciones: hoy, citas, historial, mensajes y perfil. Una versión anterior usaba un menú hamburguesa, y el equipo notó que la mayoría de los usuarios no encontraban «mensajes». El rediseño pasa a una barra inferior con las cinco secciones, con etiquetas de texto, y deja el perfil en el encabezado. Las secciones que se usan poco, como la configuración avanzada, quedan dentro de perfil. Cinco opciones caben bien en la barra; una sexta habría obligado a esconder algo.
Para que los nombres de las secciones se entiendan, revisa la consistencia y estándares de tu producto. Y si la navegación es parte de la arquitectura, el artículo sobre arquitectura de la información explica cómo ordenar el contenido antes de elegir el patrón.
Errores comunes
- Ocultar la navegación principal en escritorio por estética.
- Poner un menú hamburguesa sin etiqueta, que se confunde con un icono decorativo.
- Usar tabs con nombres que no describen el contenido.
- Meter más de cinco destinos en una barra inferior o dejar que se desborden en una pestaña «Más».
- Elegir un patrón sin probar con personas reales cómo encuentran las secciones.
Qué puedes hacer mañana
- Abre tu producto y pregunta a alguien que no lo conozca dónde está la sección de configuración. Anota cuánto tarda.
- Cuenta tus secciones principales. Si son cuatro o cinco, revisa si la navegación está visible.
- Si usas un menú hamburguesa, agrega una etiqueta de texto y compara el uso en una semana.