Cuándo usar (y cuándo no) un mega menú para la navegación

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image — What You'll Be Creating

Si has comprado alguna vez online, es muy probable que hayas navegado por un mega menú.

Se trata de un enorme menú con enlaces a una variedad de secciones y subsecciones de un sitio. Son populares en sitios con gran cantidad de contenido, particularmente sitios de venta al por menor.

Si estás administrando una tienda online u otro tipo de sitio con gran cantidad de enlaces para que la gente pueda navegar a través de ellos, podría parecer que el empleo de un mega menú es algo obvio. Pero, ¿lo es realmente?

En este artículo, revisaré algunos de los escenarios en los que un mega menú mejorará tu sitio, y aquellos en los que no lo hará.

¿Qué es un mega menú?

Un mega menú es una especie de menú de navegación que hace que todas las opciones sean visibles al mismo tiempo, dispuestas tanto horizontal como verticalmente. A veces se dividen en secciones, y a veces no.

Un ejemplo es este menú en el sitio web de Amazon UK, que ocupa toda la pantalla:

Pero en el sitio de EE. UU., Amazon no utiliza un mega menú, sino que en cambio usa un menú de navegación desplegable estándar:

the amazon US store uses a non-mega menu

¡Lo que nos lleva a demostrar que los mega menús no siempre son la respuesta!

Los mega menús tienden a tener los siguiente:

uno o más grandes paneles divididos en grupos de opciones de navegación
opciones de navegación estructuradas mediante el diseño, la tipografía y, en ocasiones, iconos
todo es visible a la vez para que los usuarios no tengan que desplazarse o hacer clic en los submenús.

Los mega menús y la experiencia de usuario

El principio principal detrás del empleo de un mega menú debe ser la respuesta a una simple pregunta:

¿Facilita un mega menú a la gente la navegación por mi sitio?

No deberías añadir uno sólo porque son el último grito. La adición de un mega menú a tu sitio debe tener en cuenta la experiencia del usuario (UX). Si tu mega menú va a hacer que el proceso de navegación sea más fluido e intuitivo, añade uno. Si no es así, o simplemente no necesitas tantos elementos en el menú, continúa con un menú desplegable estándar.

Otra pregunta que tal vez quieras hacerte a la hora de decidir si usar un mega menú es la siguiente:

¿Ayudará un mega menú a que mi sitio web alcance sus objetivos?

Podrías estar pensando que esta es una pregunta vaga y difícil de responder, pero todos los aspectos del diseño y el contenido de tu sitio deben estar relacionados con lo que tu sitio web esté intentando conseguir. Esto podría consistir en una de varias cosas:

para vender productos online
para animar a las personas a ponerse en contacto contigo con el fin de adquirir tus servicios
para aumentar tu cantidad de seguidores
para promocionar una caridad
para crear una comunidad
para conseguir suscriptores
para vender entradas de eventos

Estoy seguro de que un sitio web podría tener muchos más objetivos, pero estos son algunos de los más habituales. Comprender el tuyo te ayudará a saber exactamente qué páginas de tu sitio deseas que los usuarios visiten para cumplir tus objetivos.

De modo que si quieres que la gente compre productos online y tienes una tienda grande y compleja, un mega menú podría ser perfectamente el camino a seguir. Pero si tienes un producto o servicio muy específico y para lograr esto deseas dirigir a la gente a la página de ventas, un mega menú podría acabar siendo una distracción.

Antes de decidir si deseas añadir un mega menú, tómate el tiempo necesario para considerar qué quieres que consiga tu sitio web, a qué lugar de tu sitio deseas animar a ir a los visitantes, y qué tipo de navegación les persuadirá a hacerlo.

A continuación se muestran algunos ejemplos concretos de cuándo un mega menú puede mejorar tu sitio.

Cuándo usar un mega menú

Echemos un vistazo a algunos escenarios en los que los mega menús son una adición útil a tu sitio.

1. Cuando los usuarios están lo esperan de antemano

Si tu sitio es un sitio de venta al por menor, los usuarios estarán acostumbrados a ver mega menús y a usarlos para navegar por los distintos departamentos de la tienda.

Por ejemplo, el sitio de John Lewis que se muestra a continuación utiliza un megamenú diferente para cada sección principal de la tienda. El siguiente es para la sección de ropa de mujer:

La gente está acostumbrada a usar mega menús en los sitios web para grandes almacenes como este, y no se sentirá confundido por ello. Si visito el sitio en busca de un vestido, por ejemplo, puedo ir fácilmente a esa sección del sitio mediante un solo clic.

2. Cuando un menú desplegable resultaría demasiado grande

En algunos casos, un menú desplegable, o varios de ellos, contendrían demasiadas opciones y en consecuencia restarían a la experiencia de usuario.

Jakob Nielsen y Angie Li hicieron un estudio que muestra que para los menús de navegación amplios, los mega menús mejoraron la experiencia de usuario en comparación con los menús desplegables. Esto se debe a que un menú desplegable con mucho contenido requerirá que el usuario se desplace hacia abajo o que a veces se desplace hacia abajo y, a continuación, tenga que volver a subir. Esto requiere más tiempo, tensa más la memoria a corto plazo y puede ser confuso.

Por lo tanto, si tu sitio necesita tener gran cantidad de elementos en el menú de navegación, un mega menú bien puede mejorar la experiencia de usuario. Pero si lo usas, asegúrate de que lo estructuras de una manera intuitiva para los usuarios y que usas señales de diseño como colores, efectos de texto y fuentes para que sea fácil de navegar.

El sitio web de Game que mostramos a continuación es un buen ejemplo de una serie de mega menús, cada uno relacionado con una sección del sitio. Estos han utilizado efectos de espaciado y texto, como el texto en negrita y fondos para que el menú sea intuitivo y fácil de navegar.

game website with mega menu for nintendo section showing

3. Cuando el diseño del menú mejora el sitio

A veces tienes la oportunidad de añadir algo más que enlaces de texto en tu sitio web.

El sitio de Moleskine, que se muestra a continuación, tiene un mega menú con una diferencia. Además de los enlaces de texto, tiene fotos de algunos productos clave, que actúan como enlaces junto con el texto que los superpone.

Esto anima al visitante a ir a esas páginas y hace que el mega menú sea algo más que un elemento funcional del sitio: mejora el diseño y ayuda a cumplir los objetivos de ventas.

Cuándo no usar un mega menú

Habrá ocasiones en las que no deberías usar un mega menú. Estos son algunos ejemplos.

1. Cuando no tienes muchos enlaces

Si tu sitio no tiene cientos de páginas, el uso de un mega menú será exagerado. Para un sitio o un blog promedio de una pequeña empresa, un mega menú simplemente confundirá a los visitantes, y también se verá bastante vacío.

El sitio Envato Tuts+ utiliza una combinación de mega menús y menús desplegables normales. Para aquellas secciones del sitio que no tienen una gran cantidad de enlaces, un menú desplegable normal funciona bien y cubre menos espacio en la página:

the envato tuts site uses a combination of mega menus and normal menus

2. Cuando tu página de inicio no consiste más que en enlaces

Si tu página de inicio es simplemente una página llena de enlaces a subpáginas, tampoco necesitas un mega menú.

Un ejemplo de esto es el sitio del gobierno del Reino Unido, que tiene una página llena de enlaces como página de inicio:

The UK government site - homepage is a page full of links

Si sigues navegando por el sitio, a la izquierda encontrarás un menú de navegación ampliable:

Este es también un buen ejemplo de un contexto en el que no se debería usar un mega menú dado que los usuarios podrían no estar esperándolo. Por ejemplo, los mega menús son menos comunes en los sitios web del sector público que en el comercio minorista.

3. Cuando deseas dirigir a los visitantes a una página concreta

En ocasiones, tu sitio estará diseñado para vender solo uno o dos productos o servicios, o para fomentar los registros a una lista de correo.

Si ese es el caso, es posible que tengas un banner en la página de inicio que dirija a los usuarios a una página de destino o aterrizaje.

En casos como estos, querrás mantener la navegación al mínimo. Un mega menú dará a los visitantes tantas opciones que las probabilidades de que visiten la página que tú deseas serán muy inferiores. Así que mantén tu navegación al mínimo y concéntrate en canalizar a los visitantes a tu página de destino.

El sitio de Social Media Examiner es un buen ejemplo de esto. En este momento, quieren que los visitantes hagan una de entre dos cosas: que se inscriban a su lista de correo, o que compren una entrada a su conferencia. El banner refleja lo segundo y la llamada a la acción que ocupa la sección superior de la página de inicio refleja lo primero.

Si proporcionasen a los visitantes un gran mega menú reducirían las posibilidades de que estos hagan una de esas dos cosas, por lo que en lugar de eso, conservan una sencilla navegación.

The social media examiner site has no mega menu

4. En el móvil

Va a ser difícil crear un mega menú que sea legible en una pantalla pequeña. Para que funcione tendrías que hacer que los enlaces sean pequeños, lo que significa que las personas no podrían tocarlos, o introducir el desplazamiento. Combinar un mega menú con el desplazamiento puede ser una solución confusa, ya que es difícil saber dónde termina el mega menú y comienza el contenido de la página.

Es mejor práctica utilizar en los dispositivos móviles un menú de hamburguesa: un menú que es invisible hasta que se toca en un icono que lo simboliza. A menudo se conoce como un menú de hamburguesa debido al símbolo: tres líneas horizontales que se parecen un poco a una hamburguesa.

El sitio de John Lewis que aparece arriba tiene un menú como este. Toca el símbolo y las opciones de menú desplegable debajo de él.

The John Lewis website on mobile with a burger menu in the tip right hand corner

Añadir un mega menú a tu sitio

Si has decidido que un mega menú es la opción correcta para tu sitio, la forma más sencilla de añadirlo es usando un plugin.

CodeCanyon tiene un montón de plugins de mega menú para que tengas opciones entre las que elegir. Algunos de los más populares son:

UberMenu es el plugin de mega menú más vendido. Te permite crear un mega menú totalmente personalizado en tu sitio. Incluye selectores CSS para ayudarte a diseñar un mega menú de excelente aspecto con tipografías y efectos de texto, y tiene múltiples diseños.
Mega Main Menu te permite colocar una variedad de tipos de objetos en tu menú. Así que si quieres imágenes como el anterior sitio de Moleskine, esto podría ayudarte.
Hero Menu está diseñado para ser fácil de usar y te ayudará a poner en marcha un mega menú en cuestión de minutos, gracias a su constructor de menús de arrastrar y soltar.

Si deseas más inspiración para a la creación de tu mega menú, es posible que quieras echar un vistazo a estos otros artículos disponibles en Envato Tuts+:

Utiliza los mega menús sabiamente y mejorarán tu sitio

Los mega menús pueden ser una excelente fórmula para mejorar la experiencia de usuario de tu sitio. Si tienes un sitio grande con muchos enlaces, añadir uno ayudará a los usuarios a navegar. Si tu sitio se ajusta a estas características, prueba a añadir hoy mismo un mega menú.