Cómo diseñar el menú de una web para que nadie se pierda

El menú es la parte de una web que más gente usa y la que menos tiempo se lleva en las reuniones de diseño. Suele decidirse rápido, casi de pasada, copiando lo que tenía la web anterior o lo que hace la competencia. Y luego resulta que es por donde pasa casi todo el mundo que no encuentra lo que busca en la portada.

Cuando reviso una web, una de las primeras cosas que hago es abrirla en el móvil y buscar algo sencillo: el teléfono, los precios, la dirección. Si eso me cuesta más de un par de toques, el problema rara vez es estético. Es de navegación. En esta guía repaso cómo pensamos el menú en el estudio, desde cuántos elementos poner hasta cómo comprobar que funciona con personas de carne y hueso.

01Menos elementos, mejor elegidos

La tentación habitual es meter en el menú todo lo que la empresa considera importante. El resultado es una fila de nueve o diez enlaces que nadie lee entera. La gente no repasa un menú como una carta de restaurante; lo escanea buscando una palabra que se parezca a lo que tiene en la cabeza. Cuantas más opciones hay, más le cuesta encontrarla.

En la mayoría de webs de empresa caben entre cuatro y siete elementos en el menú principal sin que nadie tenga que pararse a pensar. No lo tomes como una regla escrita en piedra, sino como una señal: si te salen doce, probablemente hay cosas que pueden agruparse, otras que pueden vivir en el pie de página y alguna que, siendo sinceros, solo le interesa a quien la escribió.

Para decidir qué entra, me sirve una pregunta muy simple: ¿qué vienen a buscar los que llegan? En un restaurante, la carta, las reservas y dónde está. En un despacho profesional, qué hacen, quiénes son y cómo contactar. Lo que no responda a esa pregunta puede esperar un nivel más abajo. Esto enlaza con todo el trabajo previo de ordenar el contenido, que contamos con calma en la guía sobre arquitectura de la información.

El orden también comunica

En una lista corta, lo que más se mira es el principio y el final, así que los extremos del menú son los mejores sitios: al principio, lo que más se busca (servicios, carta, productos); al final, la acción que quieres provocar, normalmente el contacto, y a menudo destacada como botón. Lo de en medio, «Estudio», «Proyectos», «Blog», funciona como apoyo.

Un detalle que parece menor y no lo es: el enlace al inicio. El logo ya lleva a la portada en casi cualquier web, y la gente lo sabe. Un «Inicio» explícito en el menú ocupa un hueco que podría usar algo más útil.

02Nombres claros antes que nombres ingeniosos

Esto es lo que más les cuesta a las marcas con personalidad, y se entiende: si has trabajado tu tono de voz, apetece que el menú también lo tenga. Pero el menú es señalética, y la señalética funciona cuando no hay que interpretarla. «Lo que hacemos» o «Nuestro universo» suenan bien en una presentación, y obligan a quien visita a adivinar qué hay detrás.

Mi consejo es reservar el ingenio para los titulares, los textos de cada página o los mensajes de confirmación, donde sí suma, y dejar el menú con las palabras que usaría un cliente al contárselo a un amigo: «Servicios», «Precios», «Carta», «Reservas», «Contacto». Son nombres poco originales justamente porque todo el mundo los entiende.

Hay un truco que funciona bien: escuchar cómo te llaman los clientes por teléfono o por WhatsApp. Si te dicen «quería ver las tarifas», puede que «Tarifas» sea mejor nombre que «Planes». Y si hay un término técnico de tu sector que tus clientes no usan, ese no va al menú.

Clave: un buen nombre de menú es el que alguien que no conoce tu negocio entiende sin tener que hacer clic para comprobarlo.

03El menú en el móvil: hamburguesa, barra inferior y lo que no debe esconderse

En el móvil, la mayoría de la gente navega con una mano y con el pulgar. Eso cambia bastante las cosas, y por eso conviene pensar el menú móvil como un diseño propio y no como la versión encogida del de escritorio. Si quieres profundizar en esa forma de trabajar, la guía sobre diseño mobile first va por ahí.

La hamburguesa, sin complejos (pero con criterio)

El icono de tres rayas tiene mala fama en algunos círculos de diseño, y creo que es injusta. La gente lo reconoce, ocupa poco y permite tener un menú completo y legible al abrirlo. El problema no es el icono, es lo que se esconde detrás. Si la única forma de llamar o de reservar es abrir el menú y buscar, has puesto la acción más importante de la web a dos toques de distancia. Lo que más se usa, se saca fuera: un botón de llamada, uno de reserva o el de contacto, visible siempre en la cabecera o fijo en la parte baja.

En escritorio la cosa cambia. Si el menú tiene cinco o seis elementos, hay espacio de sobra para mostrarlos, y verlos de un vistazo ayuda a entender qué ofrece la web antes de hacer scroll. Esconderlos tras una hamburguesa en una pantalla de 27 pulgadas es una decisión estética con poco a favor.

La barra inferior

La navegación fija en la parte baja de la pantalla, la que usan muchas apps, queda justo donde llega el pulgar. Tiene mucho sentido en webs que la gente usa varias veces, como un área de clientes, una tienda o una plataforma de reservas, con tres a cinco destinos claros. Para una web corporativa que se visita una o dos veces, suele bastar con una cabecera limpia y un botón de acción fijo abajo.

Cuando abras el menú en el móvil, cuida también lo básico: enlaces con espacio suficiente entre ellos para no pulsar el de al lado, texto grande, y una forma evidente de cerrarlo. Los submenús que en el ordenador se abren al pasar el ratón no existen en una pantalla táctil, así que en móvil hay que resolverlos como desplegables que se abren con un toque y se ven claramente abiertos o cerrados.

04Más allá del menú: pie de página, migas de pan y búsqueda

El menú de la cabecera no tiene por qué cargar con todo. Una web bien navegable reparte el trabajo entre varias piezas.

El pie de página como segunda navegación

Mucha gente baja hasta el final de la página precisamente para buscar algo concreto: el teléfono, la dirección, el horario, el aviso legal, una página de empleo. El pie es el sitio natural para todo eso y para las secciones que no merecen un hueco arriba pero que alguien buscará. Me gusta tratarlo como un pequeño mapa del sitio, ordenado en dos o tres columnas con títulos claros, más que como un cajón donde acaba lo que sobra. Y si la empresa tiene local, que la dirección y el horario estén ahí escritos como texto, no solo dentro de un mapa.

Migas de pan, cuando hay profundidad

Las migas de pan («Inicio › Servicios › Diseño web») indican dónde estás y permiten subir un nivel sin volver a empezar. En una tienda con categorías, un centro de recursos o una web con muchos servicios agrupados, ayudan muchísimo, sobre todo a quien entra directamente desde Google a una página interior y no ha visto la portada. En una web de cinco páginas planas sobran: no hay a dónde subir.

Búsqueda, solo si hay volumen

Un buscador interno tiene sentido cuando hay mucho contenido: un catálogo, un blog con años de artículos, una tienda. Ahí puede convertirse en lo más usado de la web, y merece estar visible (un campo de texto, no solo una lupa diminuta) y devolver resultados útiles incluso con faltas de ortografía. En una web pequeña, un buscador que devuelve siempre las mismas tres páginas transmite más vacío que ayuda. Mejor un buen menú.

05Cómo comprobar que la navegación funciona

Un menú puede parecer perfectamente lógico a quien lo ha diseñado y resultar confuso para todos los demás. Le pasa a cualquiera: conoces tu negocio demasiado bien. Por suerte, comprobarlo no exige un laboratorio ni un gran presupuesto.

Un card sorting de andar por casa

El card sorting consiste en escribir cada página o contenido de la web en una tarjeta (vale un pósit) y pedir a alguien que no conozca la empresa que los agrupe como le parezca y ponga nombre a cada grupo. Con tres o cuatro personas ya aparecen patrones: qué cosas juntan casi todos, qué nombres usan ellos y qué tarjetas no saben dónde meter. Esas tarjetas «huérfanas» suelen ser las que tienen un nombre poco claro o las que sobran.

Hay herramientas online para hacerlo a distancia, pero la versión con papel sobre una mesa funciona igual de bien para una web pequeña, y además permite escuchar a la persona pensar en voz alta, que es donde está lo interesante.

Mirar a alguien usar la web

La segunda prueba es todavía más sencilla y, para mí, la más reveladora. Sienta a alguien delante de la web (mejor en su propio móvil) y pídele tareas concretas: «busca cuánto cuesta», «encuentra cómo pedir cita», «mira si trabajan en Marbella». Luego calla y observa. No expliques, no señales, no digas «está ahí arriba». Cada vez que te muerdas la lengua, has encontrado algo que mejorar.

Lo hacemos en el estudio con prototipos antes de diseñar el aspecto final, porque cambiar un nombre o mover un enlace en esa fase cuesta muy poco. Si te interesa cómo encaja esto en el proceso completo, en nuestro método está paso a paso.

Una vez publicada la web, las analíticas añaden otra capa: qué enlaces del menú se usan, qué se busca en el buscador interno si lo hay y en qué páginas abandona la gente. No sustituyen a mirar a una persona, pero ayudan a saber dónde volver a mirar.

06Un menú que no se nota

Cuando la navegación está bien resuelta, nadie la comenta. La gente llega, encuentra lo que buscaba y pasa a lo siguiente, que es justo lo que queríamos. Detrás hay decisiones pequeñas y poco vistosas: quitar un enlace, cambiar una palabra, sacar un botón de dentro de la hamburguesa. Casi ninguna luce en un portfolio, pero se notan cada vez que alguien usa la web.

Si estás preparando una web nueva o sientes que la tuya se ha llenado de secciones con los años, en el estudio trabajamos la navegación como parte del diseño web y la experiencia digital. Y si prefieres contárnoslo directamente, escríbenos y lo vemos juntos.