Que son y como usar Mega Menu en WordPress

Las opciones de navegación de grupos de menús grandes y rectangulares para eliminar el desplazamiento son excelentes para sitios con muchas páginas. Comprender qué es Mega Menú en WordPress

Los mega menús (a veces llamados "mega menús") son un tipo de menú expandible en el que se muestran muchas opciones en un diseño desplegable bidimensional. Son una excelente opción de diseño para adaptarse a una gran cantidad de opciones o para revelar rápidamente páginas de sitios web de nivel inferior.

Como muestran las capturas de pantalla a continuación, los mega menús tienen las siguientes características:

  • Grandes paneles bidimensionales dividido en grupos de opciones de navegación;
  • Opciones de navegación estructurado por diseño, tipografía y (a veces) iconos;
  • Tudo visible a la vez - sin desplazamiento;
  • factores de forma vertical u horizontal cuando se activa en las barras de navegación superiores; cuando se activan desde la navegación izquierda, pueden aparecer como mega salidas aéreas (no mostrado);
  • Opciones de menú reveladas al pasar el mouse, hacer clic o tocar

Los mega menús proporcionan suficiente espacio para imágenes y otro contenido enriquecido. Las imágenes de megamenús pueden ayudar a los usuarios a seleccionar la opción correcta. Los mega menús también permiten a los diseñadores mostrar varios niveles de la arquitectura de información del sitio, los mega menús contienen categorías de primer nivel y categorías de segundo nivel.

Mega menú en wordpress
El mega menú en el sitio web de World of Warcraft

Los megamenús son mejores que los menús desplegables normales

Para sitios más grandes con muchas funciones, los menús desplegables regulares a menudo ocultan la mayoría de las opciones al usuario. Sí, puede desplazarse, pero (a) es un dolor de cabeza y (b) el desplazamiento oculta las opciones en la parte superior del menú. Como resultado, no puede comparar visualmente todas sus opciones; tienes que confiar en la memoria a corto plazo. La gente ya tiene suficiente en la cabeza y jugar con la memoria a corto plazo reduce la capacidad de realizar tareas en su sitio web. Los mega menús muestran todo de un vistazo, para que los usuarios puedan ver en lugar de intentar recordar.

-- Publicidad --

Los menús desplegables normales no admiten la agrupación a menos que use alguna solución en su código, como anteponer opciones secundarias con un carácter de espacio para sangrarlas. Los mega menús le permiten enfatizar visualmente las relaciones entre elementos. Nuevamente, esto ayuda a los usuarios a comprender sus opciones.

Si bien el texto sin formato puede ser maravilloso, las ilustraciones realmente pueden valer muchas palabras. Los mega menús facilitan el uso de imágenes e íconos cuando sea apropiado. Y, aunque te limites al texto, tendrás una tipografía más rica a tu disposición (permitiéndote diferenciar los tamaños de los enlaces según su importancia, por ejemplo).

Consideraciones de tiempo para Mega Menu en WordPress

Si se muestran mega menús al pasar el mouse, un desafío es distinguir entre dos intenciones de usuario diferentes.

  • El usuario simplemente mueve el mouse hacia un objetivo en la pantalla, y la trayectoria del mouse cruza el enlace correspondiente al mega menú;
  • El usuario en realidad mira las categorías de navegación y necesita más información sobre ellas.

La segunda situación debería activar el mega menú, pero la primera no.

Para tener en cuenta estas dos intenciones del usuario, no haga que el tiempo de respuesta de un megamenú de WordPress sea demasiado rápido: el mouse debe permanecer estacionario durante 0,5 segundos antes de mostrar cualquier cosa que dependa del enfoque, como un mega menú o una información sobre herramientas. Romper estas reglas hará que la pantalla parpadee insoportablemente cuando los usuarios muevan el mouse. Solo después de 0,5 segundos con el puntero detenido en un elemento de la barra de navegación, puede asumir que el usuario realmente quiere ver el menú desplegable asociado.

-- Publicidad --
Menú Mega
Menú Mega

Entonces el tiempo debería ser:

1- Espere 0,5 segundos.

2 - Si el puntero aún se desplaza sobre un elemento de la barra de navegación, muestra su mega menú en 0,1 segundos.

3- Siga mostrando hasta que el puntero esté fuera del elemento de la barra de navegación y del menú desplegable durante 0,5 segundos. Luego retírelo en menos de 0,1 segundos.

Una excepción al elemento 3: las mejores implementaciones pueden detectar cuando un usuario está moviendo el puntero del elemento de la barra de navegación a un destino desplegable. Cuando el puntero se encuentra en dicha ruta, la lista desplegable debe permanecer visible. Esta guía complementaria aborda el problema de la diagonal, que ocurre cuando la ruta saca temporalmente el puntero del área activa. La lista desplegable no debería desaparecer cuando el usuario se dirige a señalar algo dentro de ella.

-- Publicidad --

Agregar un mega menú en WordPress

Lo primero que debe hacer es instalar y activar un complemento Mega Menu. Podemos recomendar el Max Mega Menu. Es el mejor complemento de WordPress de megamenú gratuito disponible en el mercado. Después de la activación, el complemento agregará un nuevo elemento de menú, Mega Menú, a su menú de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.

Configuración de WordPress de Mega Menú

La configuración predeterminada funcionará para la mayoría de los sitios. Sin embargo, deberá cambiar los colores del menú para que coincidan con los colores utilizados por el menú de navegación de su tema de WordPress. Para averiguar qué colores se utilizan en su tema, puede utilizar la herramienta Inspeccionar (haga clic con el botón derecho en el sitio web e "inspeccionar elemento" o presione F12) en su navegador.

Una vez que obtenga el código de color hexadecimal, puede pegarlo en un archivo de texto para su uso posterior. A continuación, debe visitar la página de configuración del mega menú, hacer clic en la pestaña 'Temas del menú' y luego hacer clic en la sección 'Barra de menú'.

Configurando tu mega menú
Configurando tu Mega Menú

Aquí puede sustituir el color de fondo utilizado por el mega menú para que coincida con los colores del menú de navegación de su tema. No olvide hacer clic en el botón Guardar cambios para almacenar su configuración. Ahora que hemos configurado los ajustes del mega menú, sigamos adelante y creemos nuestro mega menú.

Primero debe visitar la página Apariencia »Menús y luego agregar elementos de nivel superior a su navegación, estos probablemente coincidirán con las páginas principales de su sitio. Luego, en la pantalla de menús, debe habilitar el mega menú marcando la casilla debajo de 'Configuración máxima del menú Mega'.

-- Publicidad --

Después de eso, debe mover el mouse a un elemento del menú y verá aparecer un botón "Mega Menú" en la pestaña del menú. Al hacer clic en el botón se abrirá una ventana emergente. Aquí puede agregar cualquier widget de WordPress a su mega menú y seleccionar la cantidad de columnas que desea mostrar.

También puede hacer clic en el icono de llave inglesa en un widget para editar la configuración del widget. No olvide hacer clic en el botón Guardar para almacenar la configuración del widget. Una vez que haya terminado, puede cerrar la ventana emergente y visitar su sitio web para ver el mega menú en acción.

Agrupar opciones en un mega menú

Las principales pautas de agrupación son:

  • Divida las opciones en conjuntos relacionados, como los que descubra después de hacer un estudio de clasificación de cartas del modelo mental de los usuarios de recursos;
  • Mantenga un nivel medio de granularidad. No ofrezca grupos grandes con múltiples opciones que requieran mucho tiempo para estudiar. Por otro lado, no haga que los grupos individuales sean tan pequeños que el mega menú tenga una gran cantidad de grupos que los usuarios deban dedicar tiempo a comprender;
  • Utilice etiquetas concisas pero descriptivas para cada grupo. Recuerde las reglas estándar para escribir en la web: mejore la legibilidad comenzando con la palabra que contiene más información y evite términos inventados;
  • Mantener las palabras breves y al grano; la forma básica de los verbos ("comprar") es generalmente mejor que los gerundios ("comprará");
  • Diferenciar las etiquetas ayudará a los usuarios a saber lo que buscan;
  • Ordena los grupos. Puede hacer esto usando un orden inherente entre recursos (como para un flujo de trabajo) o según la importancia, colocando el grupo más importante o de uso frecuente en la esquina superior izquierda (asumiendo un idioma de izquierda a derecha como el portugués);
  • Muestre cada opción solo una vez. Las opciones duplicadas hacen que los usuarios se pregunten si las dos ocurrencias son iguales o diferentes. Además, la redundancia hace que toda la interfaz sea más grande y complicada.

Mantenga los megamenús simples

La pauta de usabilidad estándar para "mantenerlo simple" también se aplica a los mega menús. El hecho de que pueda poner cualquier cosa en ellos no significa que deba hacerlo. La simplicidad se aplica a la semántica de interacción, al menos tanto como a la capa de presentación. Menos opciones significan menos para escanear, menos para comprender y menos para cometer errores.

En particular, evite los widgets y otros elementos de la interfaz que impliquen una interacción más avanzada que un simple clic. Los megamenús son una presencia pasajera en la pantalla y no deberían reemplazar los cuadros de diálogo, que son el hogar natural para interacciones más complejas y pueden manejarlas mejor. Entre otros beneficios, los cuadros de diálogo tienen un método de dispensación predeterminado (los botones Aceptar / Cancelar), permanecen en la pantalla hasta que se cierran y se pueden mover si los usuarios necesitan ver algo que oculta el cuadro.

-- Publicidad --

Del mismo modo, pero aún peor, esconde el cuadro de búsqueda dentro de un mega menú. Esto es malo por dos razones:

  • El cuadro de búsqueda debe estar continuamente visible en la página, en lugar de solo mostrarse cuando los usuarios activan el mega menú.
  • Tener widgets gráficos (un campo de texto y un botón de comando) hace que el mega menú sea un área de interacción pesada en lugar de un simple menú de navegación.

Accesibilidad de los megamenús

Debido a que los elementos dinámicos de la pantalla siempre tienen el potencial de causar problemas de accesibilidad, es importante codificarlos teniendo en cuenta los lectores de pantalla y otras tecnologías de asistencia.

Incluso si están codificados correctamente, los mega menús pueden causar problemas a los usuarios con baja visión que usan lupas de pantalla para agrandar pequeñas partes de la pantalla. (El mismo problema afecta a los usuarios de teléfonos inteligentes y tabletas). Con una pantalla pequeña o una lupa de pantalla, solo una pequeña parte del mega menú puede ser visible.

Los usuarios pueden asumir que el contenido visible es todo el contenido disponible y, por lo tanto, el sitio podría perder pedidos si tuviera demasiados clientes con discapacidades visuales (una situación común para los sitios dirigidos a usuarios mayores). Tener una señal visual fuerte para los bordes del menú es una forma de aliviar este problema.

Además, las pequeñas opciones dentro de los mega menús provocan errores de selección en las pantallas táctiles y los comportamientos demasiado exigentes de mostrar / ocultar dañan a las personas con discapacidades físicas.

-- Publicidad --

Hay dos enfoques principales para mejorar la accesibilidad de los mega menús:

  • Simple: no se preocupe por hacer accesible el menú desplegable. En su lugar, haga que se pueda hacer clic en cada opción del menú de nivel superior, lo que lo llevará a una página web normal donde presente todas las opciones desplegables en HTML simple y totalmente accesible.
  • Avanzado: Edite el sitio de backend usando un complemento jQuery que hará que el lector de pantalla del mega menú sea accesible. Esto también requerirá cambios estructurales en HTML y CSS.

Si eres una gran empresa y / o estás especialmente preocupado por la accesibilidad, debes implementar funciones simples y avanzadas. La mayoría de los sitios, sin embargo, probablemente tendrán que conformarse con un enfoque simple.

Aprovecha al máximo tus Mega Menús

Los mega menús pueden mejorar la navegabilidad de su sitio web. Al ayudar a los usuarios a encontrar más, lo ayudarán a vender más (o cumplir con otros objetivos comerciales, como atraer donaciones o difundir información útil a sitios web gubernamentales o sin fines de lucro).

Ahora déjalo en el comentario, ¿tienes o usas un Mega Menú en tu sitio web? Ya conocía esta característica. Aprovecha para leer más sobre WordPress en nuestro sitio web.

-- Publicidad --
Avatar de paulo fabris

Paulo Fabris es periodista, escritor, jugador de rol, jugador, cosplayer, nerd y fanático del anime desde la época de TV Manchete.