El mega-menú sigue siendo el método predeterminado para la navegación de escritorio en la mayoría de los sitios de comercio electrónico.
A menudo es la mejor solución integral para la navegación superior en sitios de escritorio, y es especialmente útil para los minoristas con grandes gamas de productos.
En este post, gracias a Dan Barker en Twitter, veremos algunos ejemplos y mejores prácticas para el uso de mega menús en sitios de comercio electrónico.
¿Qué es un mega menú?
Los menús Mega se utilizan principalmente en lugar de los menús desplegables, que normalmente se activan cuando los usuarios hacen clic o sobrelan sobre la categoría con el cursor.
El punto principal es que todo dentro de la categoría seleccionada es visible de un vistazo, como en el ejemplo a continuación de John Lewis.
En teoría, el usuario se beneficia porque puede encontrar lo que quiere más rápidamente, mientras que para el minorista les permite presentar un montón de opciones sin ocupar demasiado espacio en la página de inicio o en otro lugar.
La mayoría de los megamenús se muestran como el ejemplo de John Lewis, pero otros utilizan megamenús de estilo acordeón que se expanden de izquierda a derecha a medida que los usuarios eligen cada categoría.
Utilizados bien, los mega menús son una solución de diseño elegante que ahorra espacio al tiempo que hace que las opciones de navegación sean fácilmente accesibles para los compradores.
Consejo 1: La capacidad de escanear menús leídos es crucial – Así es como
En el ejemplo de Bloomingdale's, todas las opciones se presentan a la vez, pero son relativamente difíciles de escanear y diferenciar entre sí.
Contraste esto con Selfridge, donde el uso de múltiples encabezados, texto en negrita y espacio hace que sea más fácil para los usuarios escanear y encontrar la categoría que necesitan.
Otra cosa a considerar es el espaciado de los enlaces. Deben estar lo suficientemente separados como para que el usuario pueda hacer clic sin cometer un error.
Consejo 2: Más no es mejor – No agregue opciones a menos que agreguen valor real
Un problema potencial con mega menús es que, dado que muchas categorías se pueden instalar en ellos, puede haber una tendencia a añadir demasiadas opciones.
Esto puede sobrecargar al usuario y hacer que sea más difícil para ellos encontrar lo que están buscando. Por lo tanto, es importante considerar cuidadosamente todo lo que agregue y asegurarse de que cada uno esté justificado.
Esto es por lo que es importante, según Dan Barker:
"Si usted es consciente de los principios de diseño de la información, también será consciente de cómo la teoría de la 'carga cognitiva' encaja con eso – es decir, el consenso general de que la forma en que se presenta la información puede hacer que sea más fácil / más difícil (aumentar / disminuir la carga) para los cerebros de sus usuarios para procesarlo.
Esto es una simplificación, pero – aquí es más o menos cómo se puede pensar en la carga cognitiva al construir mega menús:
Hay 3 tipos básicos de carga cognitiva: 'intrínseca', 'extraneous' y 'germane'.
'Carga cognitiva intrínseca' es la carga inherente asociada a una tarea o conjunto de información en particular. En otras palabras, si tienes 1.000 productos en 25 categorías diferentes, siempre será más difícil para los usuarios procesar exactamente lo que almacenas, cómo encajan esas categorías y dentro de las cuales pueden encontrar el artículo que están buscando, de lo que lo harían si tuvieras solo 2 productos en 1 categoría.
"Carga cognitiva extraña" es la carga que coloca en los usuarios en función de la forma en que presenta esa información. Por ejemplo – si usted tiene una categoría llamada 'Vestidos', y otra categoría inmediatamente debajo de ella llamada 'Vestido para la ocasión', que puede hacer que sea más difícil para un usuario averiguar a dónde ir para encontrar lo que están buscando que simplemente tener 'Vestidos'. Es decir, 2 enlaces aquí pueden ser peores que 1.
'Germane Cognitive Load' es un tercer tipo, teniendo en cuenta la idea de que no toda la carga cognitiva es negativa – algunos realmente pueden ayudar al usuario. La carga 'germane' es el tipo que ayuda a los usuarios a construir patrones y organizar categorías de información. En otras palabras, agregar carga de alemán puede mejorar la capacidad del usuario para aprender a usar su sitio web y encontrar lo que está buscando – información adicional que hace que su navegación se sienta más fácil en lugar de más difícil.
Por poner se da el ejemplo anterior, tener un subtítulo 'Comprar por categoría', que incluye un enlace 'Vestidos', y otro subtítulo para otra sección de su navegación llamada 'Guías de estilo', que incluye un enlace 'Vestido para la ocasión', ayuda a su usuario a entender "Oh ok – este sitio web me permite comprar productos directamente por categoría, por lo que puedo encontrar todos los vestidos allí; pero también tienen algunas guías de consejos, y si hago clic en este enlace probablemente me dará algunos consejos sobre cómo armar un atuendo, y tal vez tener algunos estilos seleccionados como atajos," – y todo de simplemente incluir un par de palabras adicionales. Es decir, tienes los mismos 2 enlaces que antes, pero al añadir algo de carga 'Germane', el usuario conoce inmediatamente el propósito de esos enlaces, y construye una imagen mucho mejor de lo que ofrece tu negocio, todo en una fracción de segundo.
Esto es una simplificación excesiva, pero esperemos que esta idea ayude a ilustrar lo importante que es asegurarse de que los menús agreguen valor a los usuarios, en lugar de simplemente agregar una carga inútil.
– de Dan Barker
Consejo 3: Dedica tiempo y esfuerzo a priorizar tus opciones de megamenú
También es importante pensar en el orden de las opciones de mega menú, y aquellos que desea que los compradores vean, que debe basarse en parte en los datos que tiene sobre el comportamiento del comprador.
Aquí, IKEA muestra categorías populares a la izquierda, y utiliza el centro del menú para mostrar colecciones populares como enlaces rápidos para los compradores, así como temas y categorías de regate a la derecha.
Aquí, M&S utiliza otras formas de centrar la atención de los usuarios. Muestra:
- Pseudocategorías como la tienda de vacaciones y 'grande y alto'.
- Resalta las ofertas actuales.
- Muestra las tendencias actuales.
- Añade una opción extra de "más ropa masculina" para aquellos que no encuentran lo que quieren.
Boohoo adopta un enfoque interesante, con uno de los ejemplos más grandes de meag manus. Ofrece una selección de diferentes formas de navegar, con vestidos por ocasión, por ajuste, por color, por tamaño, y así sucesivamente.
También utiliza el menú para promover los principales USP y ofertas, desde números hasta opciones de entrega y crédito.
Consejo 4: El uso de imágenes puede diferenciar su sitio y sus productos clave
El uso de imágenes dentro de mega menús puede ayudar a captar la atención del usuario y agregar atractivo visual.
En este ejemplo, las imágenes se utilizan para resaltar las "top picks" que realmente se destacan del fondo.
ASOS también utiliza imágenes de manera efectiva, mostrando imágenes de marcas y categorías clave como entrenadores de nueva temporada.
Consejo 5: Está bien usar diferentes diseños para diferentes secciones
Dependiendo de las categorías superiores que activan cada mega menú, el diseño de cada necesidad de cambiar.
Puede haber diferentes números de productos en cada categoría de navegación superior, y diferentes tipos de enlaces para promover.
Aquí, Net-a-Porter utiliza un diseño diferente para cada sección. Por ejemplo, el menú editorial es más pesado para la imagen y se utiliza para resaltar el contenido reciente.
Consejo 6: Activa y cronometra tus megamenús para eliminar la frustración
El método de activación de menús es algo en lo que hay que pensar, ya que existe el riesgo de que los usuarios puedan activar accidentalmente los menús, o también que los menús puedan desaparecer demasiado rápido si el usuario mueve el cursor fuera del menú por error.
Para evitar el problema de los menús de activación accidental, Jakob Nielsen recomienda un breve retraso de 0,5 segundos después de pasar el ratón antes de que se active un menú. Otra opción es solo activar megamenús cuando un usuario hace clic, aunque la mayoría de los minoristas optan por activar al pasar el ratón.
Tal vez más importante es evitar que los usuarios cierren involuntariamente los menús, y esto se puede lograr retrasando el cierre del menú, o haciendo que el menú sea lo suficientemente grande como para que sea más fácil de administrar.
Por ejemplo, el menú Graham & Green se ajusta a todo el ancho de la página de inicio y tiene algo de espacio en la parte inferior, por lo que es más difícil mover accidentalmente el cursor fuera del área de menú.
En Resumen
Los megamenús son una solución de navegación superior útil para los minoristas, y pueden ayudar a que múltiples categorías y opciones sean fácilmente accesibles para los usuarios.
Sin embargo, es importante tener en cuenta el diseño y la presentación de los menús para evitar los posibles inconvenientes.
