Menús

El menú de navegación es el elemento más visible de la arquitectura de la información de un sitio web. Es la interfaz que traduce la estructura conceptual del sitio en opciones de navegación accesibles para el usuario. Un menú bien diseñado hace que la arquitectura del sitio sea transparente: el usuario entiende cómo está organizado el sitio simplemente mirando el menú. Un menú mal diseñado oculta esa estructura o la distorsiona.

Tipos de menú

El menú global está presente en todas las páginas del sitio. Contiene las secciones principales y establece el modelo mental del sitio para el usuario. Es el primer elemento de orientación que ve alguien que llega por primera vez.

Características que debe cumplir:

  • Consistencia absoluta: el mismo menú, en el mismo lugar, con las mismas opciones, en todas las páginas. Cualquier variación entre páginas genera desorientación.
  • Economía: entre cinco y ocho opciones de primer nivel. Por encima de ocho, el menú se convierte en una lista que el usuario no puede procesar de un vistazo.
  • Etiquetas claras: cada opción debe usar el vocabulario que los usuarios reconocen, no la terminología interna de la organización.
  • Indicación de posición activa: la sección actual debe estar visualmente diferenciada (color, peso tipográfico, subrayado) para que el usuario sepa dónde está.

Lo que no debe hacer el menú global:

  • Listar todas las páginas del sitio. El menú global muestra secciones, no contenidos individuales.
  • Cambiar entre páginas. Si el menú cambia cuando el usuario entra en una sección, pierde su función de referencia fija.
  • Incluir llamadas a la acción disfrazadas de secciones. “Contratar ahora” no es una sección del sitio; es una acción. Tiene su lugar (un botón destacado), pero no es una opción del menú de navegación.

El menú local es específico de una sección del sitio. Muestra las subsecciones y contenidos dentro de la sección actual. Aparece cuando el usuario entra en una sección y complementa el menú global.

Cuándo es necesario:

  • Cuando una sección tiene suficiente profundidad y amplitud como para necesitar su propia estructura de navegación.
  • Cuando la sección tiene un catálogo, un índice o un conjunto de artículos que el usuario necesita explorar.

Cuándo no es necesario:

  • Secciones pequeñas con pocos contenidos donde el menú global y los breadcrumbs son suficientes.
  • Cuando incluirlo generaría ruido sin aportar orientación real.

Contiene elementos transversales no temáticos: buscador, acceso a cuenta de usuario, selector de idioma, ajustes de accesibilidad. Habitualmente en la parte superior derecha del encabezado o en el pie de página.

No debe mezclarse con el menú de navegación temática: son naturalezas distintas y combinarlas produce confusión.

El pie de página tiene su propia navegación, habitualmente más extensa que el menú global. Incluye enlaces secundarios (sobre nosotros, contacto, información legal), un mapa reducido del sitio y los enlaces de utilidades. Es el lugar donde los usuarios que no han encontrado lo que buscaban en la navegación principal siguen mirando.

Los menús desplegables (dropdown) permiten mostrar subsecciones sin dedicarles espacio permanente en la interfaz. Son un compromiso entre mostrar más estructura y mantener la interfaz limpia.

Cuándo tienen sentido:

  • Cuando las secciones principales tienen subsecciones relevantes que el usuario puede querer acceder directamente.
  • Cuando el número de subsecciones es manejable (entre tres y siete por sección).

Cuándo no tienen sentido:

  • Cuando las subsecciones son tan numerosas que el desplegable se convierte en una lista inmanejable.
  • Cuando el sitio es principalmente para móvil y los desplegables complejos son difíciles de usar con tacto.
  • Cuando la estructura del sitio es plana y no hay subsecciones reales que mostrar.

El problema de los mega-menús: Los mega-menús (desplegables de pantalla completa con múltiples columnas y categorías) son habituales en grandes tiendas o portales. Pueden ser útiles cuando están bien diseñados, pero tienen un coste alto: requieren mucho mantenimiento, pueden abrumar al usuario y en móvil suelen ser problemáticos.

Profundidad del menú y la jerarquía de URLs

Existe una relación directa entre la profundidad del menú y la jerarquía de URLs del sitio. Si la jerarquía de URLs tiene tres niveles (/seccion/subseccion/contenido/), el menú puede reflejar esa estructura con menú global (secciones), menú local (subsecciones) y breadcrumbs (posición del contenido).

Un menú que intenta mostrar cuatro o cinco niveles de profundidad en un solo elemento de navegación está intentando compensar una arquitectura demasiado profunda con navegación compleja. La solución correcta no es un menú más elaborado, sino una jerarquía más plana.

Etiquetas de menú: el vocabulario que importa

Las etiquetas de menú son la materialización del sistema de etiquetado de la arquitectura de la información. Son las palabras que el usuario ve y que deben conectar con su modelo mental.

Principios para las etiquetas:

Usar el vocabulario del usuario. La forma de descubrir qué vocabulario usa el usuario es mediante investigación: análisis de búsquedas internas (qué términos buscan los usuarios en el sitio), análisis de consultas de entrada (con qué términos llegan desde buscadores), card sorting (pedir a usuarios que agrupen contenidos y los nombren).

Ser específico pero conciso. “Recursos” es demasiado vago. “Guías y tutoriales” es más específico. “Guías de uso, tutoriales en vídeo y documentación técnica” es demasiado largo para un menú.

Ser consistente en el nivel de abstracción. Si las secciones son “Fundamentos”, “Taxonomías”, “URLs” y “WordPress”, son todas sustantivos al mismo nivel de abstracción. Mezclar con verbos (“Aprende sobre URLs”) o frases (“Cómo organizar tu sitio”) rompe la coherencia.

Evitar la jerga interna. Los nombres de departamentos, los acrónimos internos y los nombres de proyectos internos no son etiquetas de menú. Son información que el usuario no tiene por qué conocer.

La navegación en dispositivos móviles tiene restricciones específicas que afectan al diseño del menú:

El menú hamburguesa (☰): El icono de tres líneas horizontales que oculta el menú en móvil es una convención suficientemente extendida para ser reconocible. Sin embargo, ocultar toda la navegación detrás de un icono reduce la visibilidad de las secciones del sitio. En sitios donde la navegación es un elemento central de descubrimiento, considerar si hay opciones más visibles.

Tamaño de los elementos táctiles: Los elementos de menú deben tener una altura mínima de 44px para ser cómodamente pulsables con el dedo. Menús con opciones muy pequeñas en móvil son un problema de usabilidad frecuente.

Menús de dos niveles en móvil: Los menús desplegables de escritorio deben transformarse en menús de acordeón o en navegación por niveles en móvil. Los desplegables flotantes de escritorio no funcionan con tacto de la misma forma.

Para profundizar