Lo que vas a crear
Si ha comprado en línea, es muy probable que haya navegado por un mega menú.
Este es un gran menú con enlaces a una variedad de secciones y subsecciones de un sitio. Son populares en sitios con gran cantidad de contenido, especialmente en sitios de venta minorista.
Si está ejecutando una tienda en línea u otro sitio con una gran cantidad de enlaces para que las personas naveguen a través de ellos, puede parecer que un mega menú es una obviedad. ¿Pero es?
En este artículo, veré algunos de los escenarios en los que un mega menú mejorará su sitio y aquellos en los que no lo hará.
¿Qué es un mega menú?
Un mega menú es un tipo de menú de navegación que hace que todas las opciones sean visibles a la vez, distribuidas horizontal y verticalmente. A veces se dividen en secciones, 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 usa un mega menú, sino un menú de navegación desplegable estándar:
Lo que demuestra que los mega menús no siempre son la respuesta.
Los mega menús suelen tener:
- Uno o más paneles grandes divididos en grupos de opciones de navegación.
- Opciones de navegación estructuradas utilizando diseño, tipografía y (a veces) iconos.
- Todo lo que está visible a la vez para que los usuarios no tengan que desplazarse ni hacer clic en los submenús.
Mega Menus y Experiencia de Usuario
El principio fundamental de usar un mega menú debe ser la respuesta a una pregunta simple:¿Un mega menú facilita que las personas naveguen por mi sitio?
No deberías simplemente agregar uno porque son lo último y genial. La adición de un mega menú a su sitio debe tener en cuenta la experiencia del usuario (UX). Si su mega menú hará que el proceso de navegación sea más suave y más intuitivo, entonces agregue uno. Si no es así, o simplemente no necesitas tantos elementos en el menú, apégate a un menú desplegable regular.
Otra pregunta que tal vez quiera hacerse al decidir si usar un mega menú es esta:
¿Un mega menú ayudará a mi sitio web a cumplir sus objetivos?
Podría estar pensando que esta es una pregunta vaga y que es difícil de responder, pero todos los aspectos del diseño y el contenido de su sitio deben estar relacionados con lo que su sitio web está tratando de lograr. Esto podría ser una de varias cosas:
- vender productos online
- Animar a la gente a contactarte para comprar tus servicios.
- para crecer un seguimiento
- para promover una caridad
- para crear una comunidad
- para obtener suscriptores
- vender entradas para eventos
Estoy seguro de que hay muchos más objetivos que podría tener un sitio web, pero estos son algunos de los más comunes. Comprender el suyo le ayudará a saber exactamente qué páginas de su sitio desea que visiten los usuarios para lograr sus objetivos.
Entonces, si quiere que la gente compre productos en línea y tiene una tienda grande y compleja, un mega menú puede ser el camino a seguir. Pero si tiene un producto o servicio muy específico y desea canalizar a la gente a la página de ventas para eso, entonces un mega menú podría ser una distracción.
Antes de decidir si agregar un mega menú, tómese el tiempo para considerar qué quiere lograr con su sitio web, a qué lugar de su sitio desea animar a los visitantes y qué tipo de navegación los animará a hacerlo.
A continuación se muestran algunos ejemplos específicos de cuándo un mega menú podría mejorar su sitio.
Cuándo usar un mega menú
Echemos un vistazo a algunos escenarios cuando los mega menús son una adición útil a su sitio.
1. Cuando los usuarios están esperando uno
Si su sitio es un sitio de venta minorista, los usuarios estarán acostumbrados a ver mega menús y usarlos para navegar por los departamentos de la tienda.
Por ejemplo, el sitio de John Lewis que se muestra a continuación utiliza un mega menú diferente para cada sección principal de la tienda. El de abajo es para la sección de ropa de mujer:
Las personas están acostumbradas a usar mega menús en los sitios web de grandes almacenes como este, y no se confundirán con eso. Si visito el sitio buscando un vestido, por ejemplo, puedo ir fácilmente a esa sección del sitio con un solo clic.
2. Cuando un menú desplegable sería demasiado grande
En algunos casos, un menú desplegable, o una serie de ellos, contendría tantas opciones que restaría valor a UX.
Jakob Nielsen y Angie Li realizaron un estudio que muestra que para los menús de navegación grandes, los mega menús mejoran el UX en comparación con los menús desplegables. Esto se debe a que un menú desplegable con una gran cantidad de contenido requerirá que el usuario se desplace hacia abajo o, a veces, hacia abajo y luego vuelva a realizar una copia de seguridad. Esto lleva más tiempo, pone más tensión en la memoria a corto plazo y puede ser confuso.
Por lo tanto, si su sitio necesita tener muchos elementos en el menú de navegación, un mega menú puede mejorar UX. Pero asegúrese de que si usa uno, lo estructure de una manera que sea intuitiva para los usuarios y que use señales de diseño como colores, efectos de texto y fuentes para facilitar la navegación.
El sitio web del juego 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 el espaciado y los efectos de texto como el texto en negrita y los fondos para hacer que el menú sea intuitivo y fácil de navegar.
3. Cuando el diseño del menú mejora el sitio
A veces, tiene la oportunidad de agregar más que solo enlaces de texto a su 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 más que un aspecto 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ú. Aquí hay unos ejemplos.
1. Cuando no tienes muchos enlaces
Si su sitio no tiene cientos de páginas, entonces un mega menú será excesivo.Para el sitio promedio de una pequeña empresa o blog, un mega menú simplemente confundirá a los visitantes, y también se verá bastante vacío.
El sitio de Envato Tuts + utiliza una combinación de mega menús y menús desplegables normales. Para aquellas secciones del sitio que no tienen muchos enlaces, un menú desplegable normal hace el trabajo y cubre menos de la página:
2. Cuando tu página de inicio no es más que enlaces
Si su página de inicio es solo una página llena de enlaces a subpáginas, entonces tampoco necesita 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:
Una vez que navega más en el sitio, hay un menú de navegación a la izquierda que se puede ampliar:
Este también es un buen ejemplo de no usar un mega menú en un contexto donde los usuarios no lo esperen. Los mega menús son menos comunes en los sitios web del sector público que en el comercio minorista, por ejemplo.
3. Cuando quieres canalizar a los visitantes a una página específica
A veces, su sitio estará diseñado para vender solo uno o dos productos o servicios, o para alentar a suscripciones a una lista de correo.
Si ese es el caso, es posible que tenga un banner en la página de inicio que dirija a los visitantes a una página de destino.
En casos como estos, desea mantener la navegación mínima. Un mega menú le dará a los visitantes tantas opciones que será mucho menos probable que visiten la página que desea. Así que mantenga su navegación al mínimo y céntrese en canalizar a los visitantes a su 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 dos cosas: inscribirse en su lista de correo o comprar un boleto para su conferencia. La pancarta refleja el segundo de estos, y el llamado a la acción que ocupa la parte superior de la página de inicio refleja el primero.
Si les dieran a los visitantes un gran mega menú, reduciría las posibilidades de que hagan una de esas dos cosas, por lo que mantienen la navegación simple en su lugar.
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, deberías 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 confuso ya que es difícil saber dónde termina el mega menú y comienza el contenido de la página.
Es mejor utilizar en el dispositivo móvil un menú de hamburguesas: un menú que es invisible hasta que se toca un símbolo para ello. A menudo se lo denomina menú de hamburguesas debido al símbolo: tres líneas verticales se parecen un poco a una hamburguesa.
El sitio de John Lewis que se muestra arriba tiene un menú como este. Toca el símbolo y las opciones de menú se despliegan debajo de él.
Agregando un Mega Menú a su sitio
Si ha decidido que un mega menú es la opción correcta para su sitio, la forma más fácil de agregar uno es a través de un complemento.
CodeCanyon tiene muchos complementos de mega menús para que elijas. Algunos de los más populares son:
- UberMenu es el complemento de mega menú más vendido. Te permite crear un mega menú totalmente personalizado para tu sitio. Incluye selectores de CSS para ayudarlo a diseñar un mega menú de excelente apariencia con fuentes y efectos de texto, y tiene múltiples diseños.
- El menú principal de Mega le permite colocar una variedad de tipos de objetos en su menú. Así que si quieres imágenes como el sitio Moleskine anterior, esto podría ayudar.
- Hero Menu está diseñado para ser fácil de usar y te ayudará a poner en funcionamiento un mega menú en minutos, con un generador de menú de arrastrar y soltar.
Use los mega menús sabiamente, y mejorarán su sitio
Los mega menús pueden ser una excelente manera de mejorar la UX de su sitio. Si tiene un sitio grande con muchos enlaces, agregar uno ayudará a los usuarios a navegar. Si su sitio cumple con los requisitos, intente agregar un mega menú hoy.
