Menú de navegación: qué es, tipos, ejemplos y cómo crearlo

Ofrecer una buena experiencia de navegación a los visitantes de un sitio web es una de las tareas más importantes de todo desarrollador web. Y no lo decimos solamente nosotros: la ciencia ha demostrado que el diseño, la rapidez de respuesta y la correcta organización de la información son esenciales para retener a un visitante.

Cuando un sitio ofrece un menú de navegación adecuado es mucho más fácil que los visitantes encuentren la información que están buscando, ya sea un producto o una publicación en el blog. Además puede ayudar a que encuentren información importante que quizá no sabían que necesitaban, como un plan de pago, un formulario de suscripción o datos de contacto de tu marca.

Al fin de cuentas, el interés debe ser que tus visitantes se mantengan dentro de tu sitio durante el mayor tiempo posible y que interactúen con él. 

Te presentamos todo lo que tienes que saber sobre los menús de navegación, cómo usarlos y las mejores prácticas para incluirlos en tu sitio. Adicionalmente, revisaremos algunos casos de sitios en español que han creado menús realmente buenos para que te inspires.

Adicionalmente, estos menús forman parte de la arquitectura de la información del sitio, por lo que no solo son herramientas de navegación útiles para los visitantes, sino que sirven como esquemas generales para la organización interna de los contenidos que deben observar los desarrolladores.

Los menús reflejan las jerarquías de información dentro de un sitio. Por ejemplo, en tu listado de opciones puedes presentar un enlace al catálogo de tus productos, y dentro de él puedes incluir también una lista de categorías organizadas. 

Sabemos ya que la navegación es uno de los elementos más importantes que deben ser considerados a la hora de diseñar un sitio web. Este factor es determinante para que tus visitantes se queden o que huyan de él.

Pero no existe una única formula para crear un menú. Por el contrario, debes tener en cuenta las necesidades y el perfil de tus clientes potenciales para hacer que tu herramienta sea intuitiva y accesible para ellos. Veamos algunos tipos de menús de navegación comunes.

1. Menú de navegación horizontal

Las barras de navegación horizontales son el tipo de menú más común. Básicamente consisten en un listado de opciones generales dispuestas de forma horizontal en forma de cinta, que suelen estar debajo o junto al encabezado del sitio. Las opciones más comunes en estos menús son: 

• Acerca de
• Productos
• Precios
• Contacto
• Acceder

Estos menús son especialmente útiles cuando quieres dirigir la atención de tus clientes a ciertas páginas de tu sitio y para que encuentren lo que buscan más rápido.

Ejemplo de menú de navegación horizontal: Apple

Imagen de Apple

En este ejemplo vemos un menú horizontal contenido en un cintillo, en donde se incluyen los protagonistas de la marca: sus productos. Cuando un visitante accede al sitio puede elegir entre las opciones de Mac, iPad, iPhone, relojes inteligentes, audífonos y otros dispositivos.

Este menú es fijo, por lo que acompaña al visitante aunque se desplace hacia abajo, e incluye iconos fácilmente reconocibles, como la lupa de búsqueda y la bolsa de compras.

2. Menú de navegación en cascada

Los menús de navegación en cascada son ideales para para sitios con una compleja arquitectura de información o con contenidos diversos. Para solucionar este problema puedes crear grupos generales y permitir que cuando el visitante se desplace sobre ellos se despliegue un menú con más opciones relacionadas; por ejemplo:

• Secciones de artículos para mujer, hombre o niños.
• Grupos de artículos para usos diferentes.
• Listado de información de la marca (historia, acerca de, misión, etc.).
• Organización por departamentos.
• Enlaces externos.

En estos casos sería una mala idea simplemente meter todas tus categorías en una cinta horizontal.

Ejemplo de menú de navegación en cascada: Tommy Hilfiger

Imagen de Tommy Hilfiger

En este ejemplo vemos que el sitio de la marca de ropa ofrece 6 opciones principales debajo de su logotipo: artículos para mujer, artículos para hombre, artículos para niños, productos de la serie Tommy Jeans, mercancías en rebaja y sección de regalos.

No hace falta que el visitante haga clic en alguna de las opciones para que el sitio despliegue automáticamente un menú más detallado de los productos en cada sección. En este caso vemos el contenido de la sección de mujer, donde encontramos bolsos, vestidos, zapatos y perfumes, entre muchos artículos más.

3. Menú de navegación de hamburguesa

Este tipo de menú es especialmente popular para el diseño de navegación en dispositivos móviles, ya que no ocupa mucho espacio en la pantalla, pero es realmente completo cuando se despliega. Cuando los visitantes hacen clic sobre el icono de menú de hamburguesa se despliega un listado generalmente vertical con algunas opciones tales como:

• Inicio
• Ofertas
• Categorías de producto
• Botón de acceso
• Datos de contacto

El menú de navegación de hamburguesa debe su nombre al símbolo con el que los sitios web indican la opción de menú (tres líneas horizontales que recuerdan a una hamburguesa).

Ejemplo de menú de navegación de hamburguesa: Amazon

Este ejemplo ha sido tomado de la aplicación móvil que ofrece Amazon para iOS. Si bien su plataforma se distingue por un diseño saturado de información e imágenes, vemos en la parte baja cuatro iconos simples: Inicio, Usuario, Carrito de compras y el famoso menú de hamburguesa. Esto ayuda a que el cliente no se pierda entre tanta información y pueda ir a lo que está buscando.

Imágenes de Amazon

Una vez dentro del menú, el usuario accede a categorías de productos de su interés, así como a la lista de deseos y pedidos. De este modo se organiza mucho mejor la información.

4. Menú de navegación vertical

Los menús de navegación vertical destacan por ofrecer un diseño único. Generalmente se sitúan al lado izquierdo de la plantilla y ofrecen un listado apilado con algunas opciones útiles. La ventaja de estos menús es que cuentan con mayor espacio para colocar opciones o incluir nombres más largos en comparación con los menús horizontales, por ejemplo:

• Conoce más de nuestra empresa
• Contacto
• Inicia sesión
• Ver ofertas
• Contenidos para ti

Estos menús son, además, visualmente atractivos y es difícil que pasen desapercibidos, por lo que son ideales para agencias y negocios creativos.

Ejemplo de menú de navegación vertical: Twitter

Imagen de Twitter

La página de escritorio de la red social Twitter está hecha para incluir un buen listado de opciones al usuario dentro de su menú, que difícilmente podrían caber (y verse bien) en una cinta horizontal. Por ello, su menú está dispuesto en el lado izquierdo, con grandes caracteres y en un formato vertical.

Estas opciones son las que más utilizan sus usuarios, pero también añaden un último elemento en el listado para ver más opciones, como la configuración, privacidad y términos de uso.

5. Menú de navegación en el pie de página

Estos menús raramente se incluyen solos en un sitio web. Por el contrario, es común que complementen los menús de navegación horizontales. La principal ventaja de estos menús es que pueden utilizarse para añadir información a la presentada en tu encabezado. Estos menús contienen información como:

• Términos y condiciones
• Trabaja con nosotros
• Política de privacidad
• Mapa del sitio
• Sección de ayuda

Asimismo, los menús al pie pueden ser mucho más extensos que los horizontales o verticales, ya que al estar ubicados en la parte más baja de tus páginas no quitan espacio de navegación en el sitio.

Ejemplo de menú de navegación a pie: El Palacio de Hierro

Imagen de Palacio de Hierro

Toda plataforma de comercio electrónico debe ofrecer a sus clientes información sobre sus políticas, los términos de las compras y acceso a más datos de la marca. Pero sabemos que la mayoría de las personas no tiene interés en ello, por lo que situar estas opciones en un menú principal sería poco útil.

Por ello, la tienda departamental El Palacio de Hierro incorporó un completo menú con opciones mucho más especializadas para ser consultadas por aquellos interesados: «Negocios Palacio», «Ayuda», «Sobre Nosotros» y «Publicaciones». Este menú no es desplegable, pues deja ver todas las opciones disponibles y aprovecha el lugar en el que se ubica.

Crear un menú de navegación en HTML es algo realmente sencillo, pero sería un error suponer que el diseño de estos recursos es una tarea tan simple como escribir unas líneas de código. Por el contrario, el trabajo más arduo y que requiere mayor atención comienza mucho antes de la programación. Por ello, revisaremos cómo crear un menú de navegación en HTML como un proceso que va desde la estructuración de tu información hasta la captura de tu código. 

Estrictamente no existe un modo correcto para diseñar la navegación dentro de un sitio web. El deber de tus equipos de desarrollo es encontrar aquella fórmula que funcione para tu audiencia. Al tener esto en mente, podemos hablar de algunos pasos generales que puedes seguir para asegurarte de que estás creando el menú ideal.

1. Perfila la arquitectura de la información del sitio

Cuando un sitio tiene demasiadas páginas web puede resultar muy difícil determinar cuáles son lo suficientemente importantes para formar parte de tu menú principal de navegación. Pero esta tarea es esencial para asegurar el éxito de tu sitio. De acuerdo con los expertos de Orbit Media, idealmente un menú no debería tener más de siete opciones en su listado.

Lo primero que deberás hacer es entender la organización de tu sitio y comprender la jerarquía de la información. Una buena forma de hacerlo es mediante tarjetas escritas. Incluye el tema o nombre de cada una de tus páginas y organízalas en secciones.

De este modo encontrarás denominadores comunes o puntos de encuentro que te permitan crear clusters de información. Este mapa de tu sitio será fundamental para construir el esqueleto del sitio.

2. Usa sistemas de apoyo

Existen software de análisis de marketing ideados para acompañarte en el proceso de creación u optimización de tus menús. Algunos están diseñados para rastrear las búsquedas de tus visitantes, las rutas que toman dentro de tu sitio y las elecciones que hacen en él. De este modo puedes saber qué es lo que buscan y cómo puedes hacer que lleguen más rápido a esos contenidos mediante tus menús.

Los reportes de atribución son ideales para llevar a cabo este proceso, pero no son la única opción. Otras herramientas, como Google Analytics, también pueden ayudarte a identificar los puntos más importantes de la navegación de tus clientes. 

Respecto a esta herramienta, dice Google: «El informe Flujo de usuarios es una representación gráfica de las rutas que los usuarios siguieron en su sitio web: la fuente desde la que llegan, las distintas páginas que visitan y el punto en el que abandonan el sitio. Con el informe Flujo de usuarios se pueden comparar volúmenes de tráfico de distintas fuentes, examinar patrones de tráfico de su sitio web y solucionar problemas relacionados con la eficacia de este».

3. Organiza tu información 

El orden es esencial en la navegación de un sitio. Por ejemplo, algunos estudios han demostrado que los visitantes de un sitio suelen recordar la primera y la última página que visitan de forma mucho más vivida; también es común que recuerden el primero y el último elemento listados en un menú. Por ello, debes asegurarte de que tus contenidos estén bien ordenados.

La estrategia es fácil de seguir: pon tus opciones más relevantes al inicio del menú y las menos importantes en el medio. Una vez que llegues al final del listado deberás incluir las cosas que quieres que se mantengan en la mente del visitante: datos de contacto, suscripciones, etc.

El siguiente paso deberá ser idear el modo en que interpelarás a tus visitantes. Este factor dependerá enteramente de las relaciones que quieras establecer con él o ella, e incluso del sector en el que te desempeñas.

5. Idea el tipo de navegación para tu visitante

Una primera forma de interpelar al visitante es mediante menús que ofrezcan un catálogo de opciones. En este tipo de menús se usan sustantivos como «Inicio», «Productos», «Contacto», «Precios», etc. Con estas opciones ofreces categorías cerradas de una forma clara y dejas que el visitante pondere sus alternativas de navegación.

Por el contrario, puedes usar un lenguaje directo que invite al visitante a actuar si incluyes opciones como «Suscríbete», «Aplica ya», «Regala», etc. Este tipo de menús interpelan directamente al visitante y lo que buscan es hacerlo actuar dentro del sitio.

Una alternativa más es incluir opciones dirigidas a diferentes tipos de público. Por ejemplo, es común ver que los menús de los sitios web de instituciones bancarias tienen diferentes páginas para cada perfil de cliente: «Personas», «Empresas», «Pymes», etc.

4. Crea tus listados en HTML

La creación del menú para sitios web real comienza en la programación en HTML. En diseño web, los menús funcionan como listas no ordenadas de información. Esto significa que el software no organizará los contenidos por orden alfabético, sino que tienes la libertad de determinarlo tú mismo.

Para crear tu lista deberás incluir cada opción dentro de la etiqueta <li> y todos estos elementos deberán estar contenidos en un listado mediante la etiqueta <ul>. Además, para que el sistema reconozca este listado como un menú de navegación, tendrás que indicarlo mediante la etiqueta <nav>. Un menú en HTML lucirá así:

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Servicios</a></li>

<li><a href="#">Especiales</a></li>

<li><a href="#">Cotiza hoy</a></li>

<li><a href="#">Iniciar sesión</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

¿Notas que en cada uno de los elementos se incluye una referencia? Dentro de la indicación <a href="#"> deberás situar el enlace a la página correspondiente. 

Con este código ya tienes un menú de navegación, pero solo será un listado sin formato y en vertical. Para hacerlo más atractivo, es momento de optimizarlo con CSS.

5. Optimiza la experiencia en CSS

El diseño de un menú en CSS no solo permite cambiar el color de fondo, los tonos de las letras y las tipografías de cada etiqueta. Por el contrario, al utilizar CSS es cuando podrás dar un formato especial al menú y situarlo como encabezado, al pie de la página o como un menú en cascada o vertical.

Algunas de las indicaciones que deberás usar a la hora de dar formato a tus menús son:

1. position: fixed hace que el menú se mantenga visible en todo momento durante la navegación y sin importar el desplazamiento en la página.
2. float: te ayudará a situar tu menú a la derecha o izquierda de la pantalla; tras los dos puntos deberás incluir la anotación left o right.
3. list-style: funciona para poner viñetas a las opciones de tu listado; esta función raramente es utilizada, ya que no aporta de manera positiva al diseño web.
4. overflow: hidden te permite ocultar el texto cuando la opción tenga un nombre demasiado largo para el cuadro del menú.

Este paso es completamente libre, pero requiere conocimiento y un buen manejo del lenguaje CSS. Si utilizas algún software de apoyo para la creación de sitios web puedes evitarte este proceso y centrarte en darle el mejor diseño a tu menú y optimizar la experiencia del usuario.

6. Permite visualizar el camino de navegación

Un último consejo es que permitas a tus clientes visualizar el camino de navegación que han tomado en tu sitio. Esto se logra mediante un pequeño apartado en el que se desplieguen las secciones visitadas. Con esto, los clientes pueden regresar a la sección anterior o ver contenidos relacionados en otros niveles de tu arquitectura de la información, como en el siguiente ejemplo:

Imagen de IKEA

Como puedes ver, diseñar una estrategia de navegación en sitios web requiere un detenido análisis sobre el perfil de tus compradores y sobre los objetivos de tu marca. Lo que debes buscar siempre es que tanto las personas como los motores de búsqueda encuentren rápidamente tus contenidos y que entiendan las relaciones existentes entre tus páginas. 

De este modo, puedes programar sus acciones y mejorar la experiencia de navegación en tu sitio, en lugar de causar en ellos desencanto o frustración. 

Conoce más acerca de las tendencias de diseño web y optimiza tu sitio web con ellas.