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é.