Diseño de Mega-menús para mejorar la usabilidad y conversión de su sitio Web

Mega-menú mejora la usabilidad y conversion del sitio WebEl mega-menú desplegable es una evolución de los menús desplegables de los sitios Web que permiten mostrar mayor cantidad de información de una manera más amigable y fácil de usar. Mejora la usabilidad ya que disminuye la cantidad de clics necesarios para llegar a cualquier parte del sitio Web.

Considero que todos los sitios Web, sin excepción, debían tener menú desplegable y que los sitios grandes o complejos deberían modernizar su menú a Mega-menú desplegable. Me asombra ver hoy en día sitios importantes sin menú desplegable. Un ejemplo de esto es el sitio del Citi Bank.

Características de los mega-menús

Las principales características de los mega-menús son:

  • Generalmente se diseña a varias columnas lo que evita el scroll que se generan en muchos menús desplegables a una columna.
  • Puede tener elementos de conversión, tal como el registro, suscripción a boletín, solicitud de pedidos entre otros.
  • Puede tener imágenes, lo cual mejora la conversión para muchos tipos de negocios ya que permite mostrar la foto de los productos.
  • La tipografía es muy importante para darle orden, agrupar opciones y facilitar su uso

Aspectos a tener en cuenta en el diseño de mega-menús:

  • Rapidez: debe cargar rápidamente (de 0.1 segundo o menos) para que sea natural su uso.
  • Amigable con motores de búsqueda: es muy importante que el mega-menú se forme con la etiqueta HTML <li> para que Googlebot pueda reconocer la estructura del sitio Web.
  • Tener en cuenta el escaneo vertical: Cuando se diseñe el mega-menú se debe tener en cuenta que el escaneo es vertical y no horizontal. Si escribimos opciones en orden alfabética se debe tener en cuenta este aspecto.

Ejemplos de sitios con mega-menús

A nivel internacional el diseño de mega-menús en los sitios Web se viene generalizando en los últimos días debido a sus múltiples beneficios. Veamos un ejemplo de un sitio complejo que utiliza este tipo de menú para mejorar la usabilidad: Whitehouse.gov

El sitio sin activar el menú se ve como sigue:

White house sin megamenú

El mismo sitio con el mega-menú activo se ve como sigue:

Whitehouse con megamenu

Como se puede ver estos menús permite tener muchas opciones y elementos de acción.

Otros ejemplos de sitios con Mega-menú son:

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿Su empresa ya utiliza el mega-menú para mejorar la usabilidad y conversión?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

3 comments

  1. Muy interesante Juan. De hecho lo vemos muy útil para nuestro sitio. Coincido con tu artículo en que los Mega-Menú te hacen ver moderno, ágil y rompre con el esquema tradicional. Muy buen artículo.

    Muchas gracias.

  2. Manuel   •  

    Hay que tener en cuenta también que los mega-menús no son una panacea, sino una herramienta más.

    Una gran desventaja de estos menús es que el usuario no sabe con certeza que lo son hasta que experimenta con los elementos de navegación. Además, no necesariamente contribuyen a las conversiones porque sus elementos no son visibles inicialmente y por tanto no llaman la atención.

    Un mega-menú es sumamente útil si eres un portal de venta o una empresa con infinidad de secciones y categorías, pero quizás no sea necesario para sitios más simples.

    • Marketing Digital   •     Autor

      Hola Manuel,

      Estoy de acuerdo contigo, los mega-menús son para sitios grandes y complejos.

      Saludos,

      Juan Carlos Mejía Llano

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>