Patrones de navegación móvil: pestañas, menús laterales y flujos anidados

Empieza por la estructura, no por el componente

Enumere los destinos de la aplicación y agrúpelos según el modelo mental del usuario. Un destino como Búsqueda puede ubicarse junto a Inicio como par; El detalle de un elemento guardado debe quedar dentro de la sección Guardados. Si las personas necesitan cambiar a menudo entre destinos del mismo nivel, mantenga esas opciones visibles. Si normalmente pasan de una colección a un elemento y luego regresan, una pila o un flujo anidado comunica esa relación de forma natural.

Separe los destinos de las acciones. Redactar, compartir, filtrar y ordenar modifican el contexto actual o actúan sobre él; por lo general, no son destinos dentro de la aplicación. Colóquelos en una barra de herramientas, menú o control contextual en lugar de convertir cada acción en un elemento de navegación principal.

• Nombra los trabajos que la gente hace repetidamente e identifica qué áreas deben ser accesibles desde cualquier lugar.
• Dibuje relaciones entre padres e hijos antes de elegir los controles de navegación.
• Mantenga los destinos en el mismo nivel jerárquico visual y conductualmente coherente.

Compara los tres patrones

Una barra de pestañas o una barra de navegación hace que algunos destinos de nivel superior sean visibles y se puedan cambiar rápidamente. Funciona cuando los destinos son pares y cada etiqueta es reconocible sin explicación. Mantenga seleccionada el área actual. Evite incluir acciones no relacionadas en la barra o dejar que destinos importantes desaparezcan.

Un menú lateral puede contener un conjunto más grande de destinos agrupados y, a veces, cambiar de cuenta o espacio de trabajo. Un menú lateral modal ahorra espacio en la pantalla, pero requiere un paso adicional para abrir y elegir y cubre temporalmente el contenido. En teléfonos compactos, ese costo puede hacer que los destinos frecuentes queden demasiado ocultos. La guía actual de Android de Material 3 favorece una barra de navegación para tres a cinco destinos compactos y adapta la navegación para tamaños de ventana más grandes; Las recomendaciones anteriores de Material, que sugerían menús laterales para cinco destinos o más, no deben interpretarse como un umbral universal vigente.

La navegación anidada utiliza una lista, tarjeta o enlace para abrir una vista secundaria, con un título y un control Atrás que conserva la ruta. Se adapta a categorías, configuraciones, detalles del producto y tareas paso a paso. La navegación demasiado profunda resulta frustrante cuando la jerarquía está oculta, el comportamiento de Atrás es inconsistente o hay que retroceder repetidamente para llegar a una sección del mismo nivel. Agregue búsqueda, accesos directos o una estructura de nivel superior más clara cuando las personas saltan con frecuencia entre ramas.

Elija por frecuencia de tareas y tamaño de pantalla

Pregunte con qué frecuencia las personas cambian de área durante una sesión típica. Un conjunto compacto y estable de destinos de alta frecuencia favorece una barra visible. Si la mayor parte del uso se centra en una tarea o en leer un detalle, mantenga la navegación más silenciosa y reserve espacio para el contenido. Un menú lateral puede funcionar para secciones menos frecuentes, pero verifique que las personas aún puedan encontrarlas y regresar sin adivinar.

Planifique el tamaño de la ventana, la orientación y las convenciones de plataforma. Las pautas actuales de interfaz humana de Apple describen la barra de pestañas del iPhone como navegación de nivel superior y admiten una presentación de barra de pestañas/barra lateral adaptable en iPad. Material 3 llama a su patrón compacto barra de navegación y ofrece diferentes formas de navegación a medida que crece el ancho disponible. Estos patrones comparten un propósito pero no son componentes idénticos; siga la ubicación, el comportamiento y la adaptación nativos en lugar de copiar los elementos de interfaz de una plataforma en otra.

Facilita la orientación y la recuperación

Los iconos por sí solos hacen que la navegación sea más difícil de aprender y pueden resultar poco claros para los usuarios de lectores de pantalla. Proporcione a los destinos etiquetas breves visibles, exponga semánticamente el estado seleccionado y asegúrese de que los controles tengan nombres accesibles y zonas táctiles fáciles de usar. Verifique el contraste en los estados seleccionados y no seleccionados, texto más grande, localización y diseños de derecha a izquierda. Pruebe con VoiceOver o TalkBack y con teclado o navegación por interruptor cuando sea compatible; El foco debe moverse de manera predecible cuando se abre un menú lateral, se elige un destino o se descarta una vista.

La recuperación es parte de la navegación. Mantenga el comportamiento Atrás y Cerrar distinto: Atrás vuelve sobre una jerarquía, mientras que Cerrar sale de una presentación temporal o modal. Conserve una posición útil y los datos ingresados ​​cuando cambie de área de nivel superior o regrese de los detalles. Cuando un destino está vacío o no está disponible temporalmente, mantenga su lugar estable y explique el estado en lugar de eliminar o deshabilitar silenciosamente la navegación. Para una tarea destructiva o costosa, deje clara la ruta de regreso antes de que el usuario se comprometa.

Una revisión práctica de la navegación

Recorra la aplicación con una tarea real y luego repita con las funciones de accesibilidad habilitadas. Registre si las personas pueden identificar el área actual, llegar a un destino frecuente y recuperarse después de un giro equivocado. Compara el mismo viaje en un teléfono compacto y una ventana más grande; un diseño adaptable debe preservar la arquitectura de la información a medida que el control cambia de forma.

Utilice la biblioteca de pantallas para comparar ejemplos reales de secciones y flujos de aplicaciones, luego evalúe cada uno de ellos con las tareas de su producto. El patrón más adecuado mantiene su estructura legible a medida que la aplicación crece y aclara el camino de regreso después de una interrupción.

• ¿Puede un usuario nuevo explicar las áreas de nivel superior únicamente a partir de sus etiquetas?
• ¿Es fácil cambiar entre destinos pares y la selección se muestra claramente?
• ¿Las pantallas detalladas muestran un título significativo y una ruta de regreso predecible?
• ¿Abrir y cerrar un menú lateral preserva el contexto y mueve el enfoque de accesibilidad de manera sensata?
• ¿Las etiquetas, los objetivos, el contraste y los estados seleccionados siguen siendo utilizables con texto más grande y tecnología de asistencia?
• ¿Puede una persona regresar sin perder la entrada del borrador, la posición de desplazamiento o un lugar útil en la jerarquía?
• ¿La estructura se adapta a una pantalla más grande sin duplicar la navegación principal de la competencia?