2.3 Comprende un flujo de navegación

1. ¿Qué es un flujo de navegación?

El flujo de navegación es el recorrido que hace una persona al moverse entre las diferentes vistas o páginas de una aplicación. Es como un mapa que guía al usuario desde el punto A al punto B de forma lógica y sencilla.

Objetivo: Hacer que el usuario encuentre lo que busca sin perderse.

Ejemplos:

1. De la página de inicio a "Mis tareas".
2. De un producto a "Agregar al carrito".

2. Estructura y tipos de navegación

La estructura define cómo se organizan las vistas de una app o sitio. Existen distintos tipos de navegación, cada uno con sus ventajas según el contenido.

Tipos comunes:

1. Jerárquica: una vista principal con subniveles (ej. Menú > Submenú).
2. Lineal: vistas que se recorren en secuencia (ej. tutorial).
3. Global: accesible desde cualquier parte (ej. menú fijo).
4. Contextual: aparece según la acción del usuario

3. Componentes de navegación

Son los elementos visuales que permiten moverse entre vistas. Ayudan a orientar y guiar al usuario en todo momento.

Componentes clave:

1. Menú: lista principal de secciones (usualmente arriba o a la izquierda).
2. Breadcrumbs (migas de pan): muestran el camino recorrido (“Inicio > Perfil > Editar”).
3. Navs o botones de navegación: enlaces visibles, botones o íconos que redirigen a otras vistas.

4. Diseño de Rutas

Una ruta es la dirección (URL) que lleva a una vista específica dentro de la aplicación. Cada vista debería tener su propia ruta clara y fácil de entender.

Recomendaciones:

1. Usa nombres simples: /inicio, /tareas, /perfil.
2. Mantén consistencia en los nombres.
3. Asocia cada ruta con una vista o componente.

Ejemplo:

/tareas → vista con la lista de tareas.

5. Buenas Prácticas

Un buen flujo de navegación mejora la experiencia del usuario. La navegación debe sentirse natural y rápida.

Buenas prácticas:

1. Visibilidad: Menús visibles y organizados.
2. Claridad: Indicadores claros de dónde estás (resaltado o título).
3. Simplicidad: No más de 3-4 clics para llegar a lo importante.
4. Opción a Regresar: Incluir botón de “volver” o “inicio” cuando sea útil.
5. Consistencia: Misma ubicación para menús en todas las pantallas.
6. Retroalimentación: Botones que cambian al interactuar.
7. Jerarquía visual: Destacar opciones importantes (ej: tamaño, color).
8. Accesibilidad: Navegación con teclado y lectores de pantalla.

6. Errores Comunes

Evitar errores comunes ayuda a que el sistema sea fácil de usar y no confunda al usuario.

1. Rutas rotas o enlaces que no funcionan.
2. Demasiadas opciones en el menú.
3. Falta de retroalimentación (no sabes dónde estás).
4. Cambios inesperados en el menú o navegación.
5. Rutas redundantes con pasos innecesarios para tareas simples.
6. Menús ocultos o no intuitivos, como iconos genéricos o sin texto descriptivo

Consejo: Prueba el flujo como si fueras un usuario nuevo.

7. Recursos Adicionales

“No me hagas pensar” – Steve Krug Clásico sobre usabilidad y navegación web. Muy claro, directo y con ejemplos.

1. Ideal para entender cómo debe sentirse una buena navegación para el usuario.

“Diseño Web Responsive” – Ethan Marcotte

1. Habla de estructuras y navegación adaptables a diferentes pantallas.
2. Relevante si enseñas también navegación en móviles

Figma Community – Plantillas de navegación we Puedes encontrar ejemplos gratuitos de flujos de navegación y menús, Ideal para mostrar prototipos rápidos.

1. https://www.figma.com/community

Adobe XD – Kits de UI gratuitos Kits con navegación lista para modificar y analizar.

1. https://www.adobe.com/products/xd/resources.html