≡En resumen
- La navegabilidad mide si el usuario sabe dónde está, qué hay y cómo llegar; la usabilidad mide si puede completar sus tareas en general.
- Menú claro, migas de pan, buscador interno, enlaces contextuales y un pie de página útil son sus piezas básicas.
- Las heurísticas de Nielsen sobre visibilidad del estado, control del usuario y consistencia son la mejor guía para evaluarla.
- La regla de los tres clics es un mito: importa más que cada clic deje claro que vas por buen camino.
- La navegabilidad se mide con usuarios (tree testing, test de tareas), no con la opinión del equipo.
01 ¿Qué es la navegabilidad web?
El concepto viene de la arquitectura de la información y del diseño de interacción, donde se habla también de wayfinding (orientación) y findability (encontrabilidad). Aquí lo tratamos desde el punto de vista del usuario; si lo que te preocupa es que Google pueda recorrer tu web, lee la entrada sobre navegabilidad desde el punto de vista SEO.
02 Navegabilidad, usabilidad, accesibilidad y arquitectura: diferencias
| Concepto | Pregunta que responde | Ejemplo de fallo |
|---|---|---|
| Navegabilidad | ¿Sé dónde estoy y cómo llegar a lo que busco? | No hay forma de volver a la categoría desde una ficha |
| Usabilidad | ¿Puedo completar la tarea con eficacia, eficiencia y satisfacción? | El formulario de compra pide datos repetidos |
| Accesibilidad | ¿Puede usarla cualquier persona, también con discapacidad o con teclado? | El menú solo se abre pasando el ratón |
| Arquitectura de la información | ¿Está el contenido organizado y etiquetado con lógica? | Categorías con nombres internos que el cliente no entiende |
| Encontrabilidad (findability) | ¿Puedo encontrar un contenido concreto? | El buscador interno no tolera errores tipográficos |
La navegabilidad es, por tanto, una parte de la usabilidad y se apoya en una buena arquitectura web: si la estructura es confusa, ningún menú bonito la arregla.
03 Elementos que forman la navegabilidad de una web
Menú principal
Pocas opciones, con etiquetas que usen las palabras de tus clientes, visibles en escritorio y accesibles en móvil.
Migas de pan
La ruta jerárquica desde la home hasta la página actual; imprescindible en tiendas y webs con varios niveles.
Indicador de ubicación
Resaltar en el menú la sección activa, igual que el «usted está aquí» de un plano.
Buscador interno
Visible, tolerante a errores y con sugerencias; en catálogos grandes es la vía de navegación principal.
Enlaces contextuales
Enlaces dentro del contenido hacia productos, guías o servicios relacionados que llevan al siguiente paso lógico.
Pie de página
Red de seguridad con accesos a contacto, políticas, categorías principales y ayuda.
De todos ellos, las migas de pan (breadcrumbs) son el recurso más barato y con más impacto cuando los usuarios llegan desde buscadores a páginas profundas.
04 Navegabilidad y heurísticas de Nielsen
Jakob Nielsen formuló en 1990, y refinó en 1994, sus 10 heurísticas de usabilidad, todavía hoy la referencia para evaluar interfaces. Varias se aplican directamente a la navegación:
| Heurística | Qué significa para la navegación | Cómo se aplica |
|---|---|---|
| 1. Visibilidad del estado del sistema | El usuario sabe dónde está en cada momento | Sección activa resaltada, migas de pan y títulos claros |
| 3. Control y libertad del usuario | Puede deshacer y salir de un camino equivocado | Volver atrás sin perder filtros; enlace al inicio siempre visible |
| 4. Consistencia y estándares | La navegación funciona igual en toda la web y como en otras webs | Logo que lleva a la home, menú en el mismo sitio en todas las páginas |
| 6. Reconocer antes que recordar | Las opciones están a la vista, no hay que memorizarlas | Menús con etiquetas visibles en lugar de iconos sin texto |
| 7. Flexibilidad y eficiencia | Atajos para usuarios expertos sin estorbar a los nuevos | Buscador con autocompletado y accesos directos a lo más usado |
05 ¿Existe la regla de los tres clics?
Lo que de verdad importa es el rastro de información (information scent): que cada etiqueta y cada enlace dejen claro que el usuario va por buen camino. Cuatro clics obvios son mejores que dos clics ambiguos. Forzar la regla suele producir menús gigantes que empeoran la navegación.
06 Cómo medir y mejorar la navegabilidad
-
1
Card sorting
Pide a usuarios que agrupen y nombren tarjetas con tus contenidos. Descubrirás cómo organizan ellos la información y qué etiquetas entienden.
-
2
Tree testing
Presenta solo la estructura del menú, sin diseño, y pide que encuentren cosas concretas. Mide el porcentaje de éxito y por dónde se desvían.
-
3
Test de usabilidad con tareas
Observa a cinco o seis personas intentando tareas reales en la web y anota dónde dudan o se pierden.
-
4
Analítica
Revisa las búsquedas internas (lo que buscan y no encuentran en el menú), las páginas de salida y los recorridos entre secciones.
-
5
Iteración
Cambia etiquetas, reorganiza categorías y vuelve a medir con los mismos indicadores.
El card sorting es el punto de partida para rediseñar un menú, porque te da la arquitectura de la información tal como la entienden tus clientes, y en la guía de métodos de UX research tienes cuándo usar cada técnica y cuántos participantes necesita. Si prefieres que un equipo lo haga contigo, un proyecto de diseño UX/UI incluye estas pruebas antes de tocar el diseño visual.
07 Navegabilidad en móvil
En móvil la pantalla obliga a esconder parte de la navegación, y ahí se pierden muchos usuarios. El menú hamburguesa ahorra espacio, pero lo que no se ve se usa menos: por eso las tiendas y apps dejan a la vista las tres o cuatro acciones clave (buscar, categorías, carrito, cuenta) y esconden solo lo secundario.
Barra inferior
Tres a cinco accesos fijos al alcance del pulgar; es el patrón habitual en apps y cada vez más en webs de comercio.
Menú hamburguesa
Útil para listas largas de secciones, siempre con la palabra «Menú» o un icono reconocible y con la sección activa marcada.
Buscador destacado
En catálogos grandes, un campo de búsqueda visible en la cabecera sustituye a varios niveles de menú.
Zonas táctiles amplias
Enlaces y botones con espacio suficiente para no pulsar el vecino por error, y sin depender del hover.
08 Buenas prácticas de navegabilidad (y ejemplos de lo que no hay que hacer)
- ✓Usa las palabras de tus clientes en el menú, no las de tu organigrama.
- ✓Limita el menú principal a las opciones que de verdad importan y agrupa el resto.
- ✓Muestra siempre dónde está el usuario: sección activa y migas de pan.
- ✓Haz que el logo lleve a la home y que el menú esté en el mismo lugar en todas las páginas.
- ✓En móvil, deja el buscador y el carrito a la vista aunque el menú se esconda.
- ✓Evita enlaces rotos y páginas sin salida: cada página debe ofrecer un siguiente paso.
- ✓Revisa la navegación cada vez que añadas secciones; las webs se desordenan con el tiempo.
Para inspirarte en lo que no hay que hacer, Horrible Webs recopila ejemplos de websites de baja navegabilidad. Y como la navegación también condiciona cómo los buscadores recorren tu sitio, conviene revisarla dentro de una auditoría web SEO cuando rediseñes.
Preguntas frecuentes sobre Navegabilidad
Es la facilidad con la que un usuario sabe dónde está dentro de la web, qué contenidos hay y cómo llegar a ellos. Depende del menú, las migas de pan, el buscador interno y los enlaces.
La usabilidad mide si el usuario puede completar sus tareas de forma eficaz, eficiente y satisfactoria; la navegabilidad es una parte de ella centrada en orientarse y moverse por la web.
Con pruebas con usuarios como el tree testing, el card sorting y los test de usabilidad con tareas, y con datos de analítica: búsquedas internas, páginas de salida y recorridos.
Una web donde, llegues por donde llegues, ves en qué sección estás, puedes volver al nivel superior y encuentras lo que buscas con el menú o el buscador. Las grandes tiendas online con migas de pan y buscador predictivo son el ejemplo clásico.
No. Nielsen Norman Group señala que ningún estudio publicado la respalda. Importa más que cada clic deje claro que el usuario va por buen camino que el número total de clics.
Sí. Una estructura clara con enlaces internos rastreables ayuda a que los buscadores descubran y entiendan tus páginas, y además mejora las señales de uso. Ese enfoque técnico se explica en la entrada de navegabilidad SEO.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗