La navegación es la columna vertebral de cualquier aplicación. Define cómo los usuarios se mueven entre pantallas, buscan funciones y completan tareas. La mala navegación confunde y frustra. Esta guía le presenta cómo diseñar flujos intuitivos.
Por qué es importante la navegación
Primera experiencia
El usuario necesita orientarse al instante.
Eficiencia
Llega a tu destino con un mínimo de toques.
Descubrimiento
Encuentre funciones que no sabía que existían.
Reducción de la carga cognitiva
Menos pensamiento, más acción.
Patrones de navegación
Barra de pestañas
Navegación principal en la base. 3-5 artículos. iOS y Android estándar.
Navegación inferior
Similar a la barra de pestañas. Diseño de materiales.
Cajón/Hamburguesa
Menú lateral. Más elementos, menos visibles.
Diseño de pestañas (arriba)
Pestañas en la parte superior. Contenido relacionado.
Basado en gestos
Desliza para navegar. Menos cromo, más contenido.
Jerarquía de navegación
Navegación primaria
Secciones principales. Siempre accesible.
Navegación secundaria
Dentro de secciones. Desglose.
Contextuales
Acciones relacionadas con el contenido actual.
Utilidad
Configuración, perfil, ayuda.
Arquitectura de la información
Clasificación de tarjetas
Los usuarios organizan el contenido. Revela modelo mental.
Pruebas de árboles
Estructura de prueba sin visual. ¿Los usuarios encuentran artículos?
Mapa del sitio
Visualización de la estructura completa.
Diagramas de flujo
Viajes de usuario documentados.
Patrones de flujo
Centro y radio
Pantalla central, sucursales. Regrese al centro.
Jerárquico
Desglose progresivo. Pan rallado.
###Lineal
Secuencia de pasos. Asistente, incorporación.
pila
Pantallas apiladas. Pila trasera.
Transiciones y animaciones
Propósito
Comunicar la relación entre pantallas.
Empujar/Hacer estallar
Navegación jerárquica. La dirección indica la profundidad.
modales
Enfoque temporal. Descartar devoluciones.
Elemento compartido
Los elementos comunes se mueven entre pantallas.
Desvanecerse
Transición suave para cambios sutiles.
Enlaces profundos
¿Qué es?
URL que te lleva a la pantalla específica de la aplicación.
Casos de uso
Notificaciones, correo electrónico, compartir.
Implementación
Enrutamiento que interpreta las URL.
Enlaces universales/Enlaces de aplicaciones
El mismo enlace funciona en la aplicación y en la web.
Gestos de navegación
Deslizar hacia atrás
iOS: deslizar el borde para regresar.
Navegación por gestos de Android
Sistema de gestos para navegación global.
Tirar para actualizar
Actualizar contenido.
Acciones de deslizamiento
Acciones sobre elementos de la lista.
Navegación en aplicaciones complejas
Múltiples transmisiones
Cada pestaña puede tener su propia pila.
Anidamiento
Pestañas dentro de pestañas. Tenga cuidado con la complejidad.
###Buscar
Búsqueda global como navegación alternativa.
Restauración del Estado
Regresa donde lo dejaste.
Guía del usuario
Indicadores de posición
¿Dónde estoy en la aplicación?
Pan rallado
Camino tomado.
Indicadores de progreso
En flujos lineales.
###Títulos
El título de la pantalla comunica el contexto.
Accesibilidad
Lectores de pantalla
La navegación funciona con VoiceOver/TalkBack.
Orden de enfoque
Orden de tabulación lógico.
Saltar enlaces
Salta la navegación repetitiva.
Objetivos táctiles grandes
Elementos táctiles lo suficientemente grandes.
Plataformas
iOS
Barra de pestañas preferida. De vuelta en la parte superior izquierda. Gestos de borde.
###Androide
Navegación inferior. Botón arriba. Cajón común.
Multiplataforma
Adaptar estándares a la plataforma o unificarlos conscientemente.
Pruebas de navegación
Tarea exitosa
¿Los usuarios completan tareas?
Tiempo dedicado a la tarea
¿Cuánto tiempo se tarda en llegar al destino?
Tasa de errores
Toques equivocados, callejones sin salida.
Primer clic
El primer toque correcto predice el éxito.
Errores comunes
Hamburguesa para Todo
Oculta navegación importante.
Muchos artículos
La barra de pestañas abarrotada es confusa.
Inconsistencia
Diferentes patrones en diferentes pantallas.
Jerarquías profundas
Muchos niveles de profundidad.
Callejones sin salida
No hay un camino de regreso obvio.
Documentación
Flujos de usuarios
Diagramas de viaje.
Inventario de pantalla
Lista de todas las pantallas.
Matriz de navegación
Quién conduce a quién.
Conclusión
La navegación bien diseñada es invisible, los usuarios encuentran lo que necesitan sin pensar. Utilice patrones familiares, mantenga la coherencia y pruebe con usuarios reales. Los flujos intuitivos son la base de las aplicaciones utilizables.
##Preguntas frecuentes
1) ¿Barra de pestañas o cajón? Barra de pestañas para elementos principales (hasta 5). Cajón para más artículos o aplicación con mucha información.
2) ¿Cuántos niveles de jerarquía? Idealmente 3 o menos. Más que eso es confuso.
3) ¿Cómo probar la navegación? Pruebas de árbol para estructura, pruebas de usabilidad para flujos.
4) ¿Son necesarios los enlaces profundos? Para aplicaciones con uso compartido o notificaciones, sí.
5) ¿Puedo utilizar diferentes estándares de iOS/Android? Puede, pero los usuarios esperan estar familiarizados. Evítelo con cuidado.
Lea también
- Flujo de navegación de la aplicación: herramientas cotidianas
- Flujo de navegación de la aplicación: herramientas para escalar
- Arquitectura de información digital: cómo organizar el contenido para los usuarios
- Viaje del usuario de la aplicación: mapeo completo
- Estructura alámbrica para aplicaciones: Guía de estructuración visual
- Diseño de interacción: Guía para experiencias digitales intuitivas