Es difícil imaginar el comercio electrónico sin los menús desplegables; son una característica tan importante del diseño web para casi cualquier tipo de sitio web. Sin embargo, sorprendentemente pocos e-comerciantes han dominado el arte de hacerlos verdaderamente fáciles de usar. En este artículo, discutiremos las opciones para diseñar menús de navegación efectivos, tanto para escritorio como para móvil. Te daremos 8 consejos para optimizar los menús desplegables de tu tienda en línea y hacer que tu sitio sea aún más fácil de navegar.
Menús desplegables: ¿Qué tipos de navegación mejoran la tasa de conversión de tu sitio?
¿Qué es la navegación de un sitio web?
La barra de navegación en tu sitio ayuda a tus clientes a encontrar su camino más fácilmente. Contiene enlaces que llevan a tus usuarios a las categorías más importantes de tu sitio. Por eso también se le conoce como un ‘menú responsive’.
Pero la navegación del sitio web no termina ahí. Algunas otras características comunes de la navegación del sitio incluyen:
El menú principal, que enumera todos los contenidos del sitio web en orden de categorías jerárquicas.
Navegación de utilidad, que consiste en enlaces a funciones secundarias útiles como el carrito de compras o el inicio de sesión del usuario.
Filtros, que permiten al cliente reducir los resultados de búsqueda.
Rutas de navegación, que muestran a los clientes en qué página se encuentran dentro de la estructura de navegación del sitio web.
Navegación en el pie de página, que generalmente contiene enlaces útiles a páginas de contenido, como la página ‘Sobre nosotros’ y el aviso legal de tu sitio.
¿Cómo ayuda una buena navegación en un sitio web a mejorar la conversión en el comercio electrónico?
Ofrecer una experiencia de usuario (UX) positiva es tan importante para un minorista de comercio electrónico como lo es para un negocio offline. Eso significa que tiene que ser fácil para los clientes encontrar su camino en tu sitio web. Desde el segundo en que llegan a tu sitio, necesitan ver un resumen claro de la información más importante para que puedan encontrar rápidamente lo que buscan. Por eso es importante ofrecer menús prácticos y fáciles de usar en tu tienda online. Al permitir que tus clientes encuentren de manera intuitiva todo el contenido y funciones que necesitan, aumentas la probabilidad de realizar una venta.
Por el contrario, si tu sitio es confuso o difícil de navegar, es probable que los clientes se vayan y lleven su negocio a otro lado. Eso incrementa tu tasa de rebote y disminuye la conversión. A continuación, te mostraremos cómo crear una mejor UX con menús desplegables y otras opciones de navegación, para que puedas optimizar la tasa de conversión de tu tienda online.
Eligiendo el tipo correcto de menú principal: ¿Cuáles son tus opciones?
Al crear un sitio web para tu negocio de comercio electrónico, una de las primeras decisiones que tienes que tomar es si mostrar el menú principal de tu sitio de forma vertical u horizontal.
Un menú vertical se extiende a lo largo del lado izquierdo de la página, de arriba a abajo.
Un menú horizontal se extiende a lo largo de la parte superior de la página, de izquierda a derecha.
Con un menú horizontal, el espacio está limitado por el ancho de la pantalla. Por eso, a menudo solo contiene palabras clave cortas. En cambio, puedes hacer un menú vertical tan extenso como desees. Solo recuerda: Es mejor limitar tu menú principal a las categorías más importantes para mantenerlo claro para tus clientes.
A continuación, describimos algunos tipos comunes de diseño de menús principales. La mayoría de estos pueden organizarse de manera vertical u horizontal en la pantalla.
Navegación estática
Con la navegación estática (también conocida como ‘encabezado fijo’ o ‘menú fijo’), el menú principal es permanentemente visible. Eso significa que permanece en la pantalla, incluso cuando el usuario se desplaza hacia abajo en la página. La ventaja es que el usuario no tiene que desplazarse de nuevo al principio de la página cuando quiere navegar a un elemento de menú diferente. Si deseas usar un encabezado fijo, asegúrate de que no ocupe demasiado espacio. De lo contrario, podría ocultar otro contenido útil en la pantalla mientras el usuario se desplaza hacia abajo.
Navegación interactiva
La navegación interactiva no es generalmente una opción muy buena para las tiendas en línea. Con este tipo de navegación, no hay enlaces que lleven a tus usuarios de A a B. En cambio, navegar por el sitio se ve como parte de la experiencia. Los elementos interactivos convierten la experiencia de navegación en un juego, guiando de manera divertida al usuario de una sección o subdominio a la siguiente hasta que hayan visto todo el contenido.
Menú de hamburguesa
El menú de hamburguesa (o menú burger) también es conocido como menú de alternador o menú off-canvas. Fue desarrollado especialmente en respuesta al rápido crecimiento del uso de smartphones. Un menú de hamburguesa es fácilmente reconocible por el botón con tres líneas horizontales paralelas, que usualmente aparece en la esquina superior derecha o izquierda de un sitio web. Estas líneas vagamente se asemejan a una hamburguesa, que es como este menú obtuvo su nombre.
Si tu sitio utiliza un menú de hamburguesa, entonces los usuarios solo verán primero el contenido del sitio y el botón del menú de hamburguesa. Cuando el usuario toca el botón, el menú principal aparecerá a lo largo de toda su pantalla, presentándoles todas las opciones para navegar por tu sitio.
Este tipo de menú es también cada vez más común en los sitios web de escritorio, pero eso significa que los usuarios deben hacer clic en un botón adicional solo para ver el menú. Por eso, el menú de hamburguesa se recomienda principalmente solo para la versión móvil de tu sitio.
Menús desplegables
El tipo más común de menús en los sitios web de comercio electrónico son los menús desplegables receptivos. Estos primero muestran un menú principal que lista solo las categorías principales. Cuando el usuario hace clic o pasa el cursor por encima de un elemento del menú, la lista se expande para mostrar más subcategorías. Puedes agregar tantas capas de subcategorías desplegables como desees. Sin embargo, es mejor no tener más de dos. Si tu gama de productos es tan extensa que necesitas más de dos niveles desplegables, tienes un mega menú (ver abajo).
Un menú desplegable horizontal a veces también se llama menú deslizante. Un menú desplegable vertical a veces se refiere como un fly-out. Ambos tipos de menús expandibles aseguran una alta usabilidad para tus clientes. Si eliges usar un menú desplegable, primero piensa en cómo deseas estructurar el contenido de tu sitio. De lo contrario, el menú puede volverse rápidamente desordenado y difícil de usar.
Menús desplegables mega: pros y contras
Un mega menú puede ofrecer muchas ventajas en términos de experiencia de usuario, pero también tiene limitaciones. Una vez más, es importante planificar cuidadosamente la estructura de tu sitio. Al fin y al cabo, tu mega menú solo es útil si todos los elementos en la barra de navegación de tu sitio están claros desde el principio. Así que, antes de optar por usar un mega menú, dedica un tiempo a pensar en la mejor manera de presentar los contenidos de tu sitio. La tabla a continuación muestra los principales pros y contras de los mega menús.
Diseño web: 8 consejos para hacer los menús desplegables fáciles de usar
A continuación tienes algunos consejos sobre opciones de navegación web que puedes usar para mejorar tu tasa de conversión. Nuestros consejos de usabilidad te ayudarán a hacer que tu menú principal —y toda tu tienda online— sea más fácil de usar.
Consejo #1: Planifica con antelación la navegación de tu página de inicio
Antes de empezar a elegir elementos del menú, es importante planificar cada función y cada pieza de contenido de tu sitio web. Normalmente puedes dividir las funciones y el contenido en categorías principales y subcategorías. Asegúrate de dar nombres claros y concisos a cada categoría. Por lo general, los usuarios solo repasan los elementos del menú muy por encima, así que es importante que puedan distinguirlos fácilmente e identificar de inmediato qué son.
Consejo #2: Coloca primero los elementos más relevantes
Los elementos del menú que más interesan a tus usuarios siempre deberían aparecer al principio de tu menú principal. Si, por ejemplo, eres un proveedor de SaaS, una buena idea es empezar tu menú con elementos que convenzan a los visitantes de que tu solución es la adecuada para ellos. Prueba con elementos como estos:
¿Por qué nosotros?
Sobre nosotros
Precios
Si gestionas una tienda online para una marca de moda, tu menú debería centrarse en tus productos. Los enlaces a otros contenidos, como consejos sobre productos o entradas de blog, deberían aparecer hacia el final del menú. En general, las mejores formas de optimizar la conversión de tu negocio online dependen del sector en el que trabajes.
Consejo #3: Usa una estructura visual
Un menú normal solo puede mostrar texto en un formato sencillo. En cambio, los mega menús desplegables te dan la opción de resaltar elementos concretos del menú. Por ejemplo, puedes usar distintos:
Tamaños de texto
Colores de texto
Tipos de letra
Iconos
Esto te permite dar más estructura al contenido de tu menú desplegable. No hace falta que todos los elementos lleven a una página real; algunas palabras pueden funcionar simplemente como encabezados no clicables para las distintas subcategorías clicables.
Consejo #4: Evita incluir funciones adicionales
No incluyas interacciones complejas en tus menús desplegables, como el registro a la newsletter o campos de selección y búsqueda, ya que a menudo pueden resultar poco atractivos para los usuarios. Lo último que quieres es que tu menú principal tenga un diseño recargado. Además, elementos como estos suelen aparecer en varias ubicaciones de un sitio web. Tienen un mayor impacto si los colocas en las páginas donde encajan mejor.
Sin embargo, puede ser muy eficaz incluir un botón de llamada a la acción (CTA) en la barra de navegación. Por ejemplo, añade un botón que permita a tus clientes hacer una reserva o una compra con un solo clic. Solo recuerda que el CTA debe colocarse junto al menú principal y no dentro del propio menú desplegable.
Consejo #5: Elige entre pasar el cursor o hacer clic
Muchos sitios web usan menús desplegables que se abren en cuanto el usuario pasa el cursor por encima del elemento del menú con el ratón. Si estás pensando en usar esta opción, hay algunos puntos que deberías tener en cuenta:
Todo de un vistazo: un mega menú debería abrirse de golpe, en lugar de ir abriéndose poco a poco, nivel por nivel de subcategorías.
Momento perfecto: el menú no debería ser demasiado sensible. Quieres evitar que “parpadee” cuando el usuario pasa el cursor demasiado rápido. Al mismo tiempo, tampoco debería reaccionar con demasiada lentitud. Recomendamos un tiempo de reacción de 0,1 a 0,5 segundos para una usabilidad óptima. También es buena idea permitir una pequeña pausa antes de ocultar el menú, por si el usuario sale del menú por accidente. Un menú demasiado sensible o errático frustrará a tus usuarios y hará que algunos se rindan y abandonen tu sitio por completo.
Programación de MouseOut: cuando se activa el menú desplegable, los clientes mueven el cursor desde la barra de navegación hacia el menú. A menos que tu sitio esté programado correctamente, registrará por error un evento MouseOut cuando el ratón salga de la barra de navegación, lo que hará que el menú se cierre. Por eso es importante configurar tu menú para que el menú desplegable solo desaparezca cuando el ratón salga tanto de la barra de navegación como del propio menú desplegable.
Versión móvil: pasar el cursor no es posible en smartphones ni tablets. Si quieres usar un menú desplegable activado por hover en tu sitio de escritorio, recuerda usar ajustes distintos en la versión móvil.
Consejo #6: Respeta la regla de los tres clics
En la mayoría de los sitios web, la navegación debería seguir la “regla de los tres clics”. Eso significa que tus usuarios deberían poder llegar a cualquier información de tu sitio en como mucho tres clics. Claro, esto no es más que una guía general. Si tienes un sitio web grande y muy detallado, el número de clics no es tan importante siempre que el sitio esté bien organizado. Lo más importante es que tus clientes sientan siempre que encontrar lo que buscan es fácil.
Consejo #7: Usa varios menús
Para sitios web con mucha información, puede ser útil añadir más de un menú. Puedes elegir un menú desplegable con tus categorías de producto como menú principal y, al mismo tiempo, usar un menú aparte en el pie de página que contenga categorías secundarias. Así evitas que tu menú principal quede demasiado cargado. Mira la tabla de abajo para ver cómo queda.
Consejo #8: La apariencia importa
Un diseño de menú atractivo debería mantener el mismo tamaño, incluso cuando los elementos del menú principal contienen diferentes cantidades de subcategorías. Si tu sitio web incluye una función de búsqueda, asegúrate de que los menús desplegables no la tapen cuando se expandan.
También deberías incluir una pequeña señal visual para indicar si un elemento de la barra de navegación se expandirá en un menú desplegable cuando el usuario haga clic o pase el cursor por encima. Por ejemplo, coloca una pequeña flecha junto al nombre del menú: para los menús desplegables, la flecha debería apuntar hacia abajo; para los fly-outs, debería apuntar hacia la derecha. Esto ayuda a tus compradores a entender de forma natural que pueden esperar encontrar más información.
Comercio móvil: Hacer que tu tienda online sea fácil de navegar en un smartphone
Los clientes cada vez más usan sus smartphones para pedir productos en línea. Eso significa que es importante tener en cuenta a los compradores móviles cuando eliges las opciones del menú para tu tienda en línea. Ya no se considera una buena idea ocultar ciertos elementos del menú en tu versión móvil. Después de todo, ¿no esperan los usuarios móviles tener acceso a la misma información que los usuarios de escritorio? Veamos algunas opciones fáciles de usar para facilitar la navegación por tu sitio web en un dispositivo móvil.
El enfoque de ‘no hacer nada’
La forma más sencilla de diseñar la navegación de tu sitio móvil es hacerla prácticamente idéntica a la de tu sitio de escritorio. Solo tendrás que hacer algunos ajustes menores para facilitar que los usuarios toquen los elementos del menú usando sus pantallas táctiles. Por ejemplo:
Aumenta el espacio entre los elementos de navegación individuales.
Elige un tamaño de texto adecuado.
Sin embargo, este enfoque solo funciona realmente para sitios web con menús cortos y pocos elementos para navegar. Para sitios web más grandes, un diseño de navegación móvil en varias capas es una opción más fácil de usar.
Menús desplegables
Los menús desplegables te permiten ofrecer las mismas opciones que tu sitio web de escritorio en un diseño más adecuado para compras móviles. Cuando el usuario toca un elemento del menú, sus opciones de navegación se expanden sobre el contenido. Por eso, este tipo de menú para sitios web móviles también se conoce como un menú superpuesto.
Menús deslizables
Para sitios móviles, los menús deslizables son un tipo de menú más conveniente que los desplegables. Cuando un menú deslizable se abre, no cubre el contenido de la página, sino que lo desplaza hacia abajo. Esto permite que el cliente siga desplazándose hacia abajo y vea el contenido si lo desea, incluso cuando el menú está abierto. Este tipo de menú es un poco más difícil de programar, pero es muy popular entre los usuarios.
Navegación fuera del lienzo
Con esta opción, el menú no está integrado en el diseño de la página, por lo que no ocupa espacio en la pantalla. El usuario simplemente tiene que tocar el botón del menú para abrirlo, cubriendo el resto de la página. Entonces, la estructura de navegación del sitio web es lo único en la pantalla. Esta es una opción especialmente buena para sitios con muchas subcategorías para navegar.
Conclusión: ¿Qué tan fácil es navegar por tu tienda online?
Hay muchas opciones para crear un menú fácil de usar para tu tienda en línea. Dependiendo de qué sistema de tienda estés utilizando, puedes elegir entre muchos diseños de navegación. Independientemente de tu elección, es importante comenzar estructurando claramente el contenido de tu sitio desde el principio. Si tienes una gran variedad de productos, tu mejor opción es usar menús desplegables para tu sitio web de escritorio y menús desplegables en la versión móvil. Usa la lista de verificación a continuación para asegurarte de no olvidar ninguno de nuestros consejos al diseñar el menú de navegación para tu sitio web.
Lista de verificación para crear menús desplegables fáciles de usar
Los nombres de las categorías son cortos y fáciles de entender.
Las categorías principales están organizadas en orden de relevancia para el usuario.
Hay una señal visual (como una pequeña flecha) junto al nombre del menú para indicar que el menú se despliega.
El menú desplegable se abre entre 0.1 y 0.5 segundos cuando el usuario pasa el cursor sobre él en la barra de navegación.
El menú desplegable se abre completamente desde el inicio. Los clientes no tienen que hacer clic en una categoría para ver sus subcategorías.
Se utilizan señales visuales, como íconos y diferentes colores de texto, para hacer que el menú desplegable expandido sea más fácil de navegar.
El menú no se cierra si el usuario mueve el cursor fuera de la barra de navegación y hacia el menú desplegable expandido.
Los menús desplegables son todos del mismo tamaño, independientemente de cuántas subcategorías contengan.
No hay funciones interactivas (como el registro de boletines) dentro de los menús desplegables.
El menú desplegable expandido no cubre el campo de búsqueda ni otros contenidos importantes.
Las funciones secundarias están listadas en menús separados (por ejemplo, en el pie de página).
Más actualizaciones
3 tendencias en B2B: conclusiones del evento de Mollie x Shopware para agencias digitales
Descubre 3 tendencias de comercio electrónico B2B del evento Mollie x Shopware, incluyendo la personalización, experiencias de compra digitales y nuevos métodos de pago en el panorama B2B.
Ecommerce en Bélgica: todo lo que necesitas saber
Todo lo que necesitas saber sobre ecommerce en Bélgica: tendencias, perspectivas, datos y consejos de expertos de la industria.
Las mejores características para sitios web de comercio electrónico
Descubre las mejores características para tiendas en línea con datos de 10,000 consumidores europeos y consejos de expertos de la industria.
Elige la mejor pasarela de pago para BigCommerce
Aprende más sobre lo que los mejores procesadores de pago de BigCommerce deberían ofrecer a tu negocio y qué cosas deberías considerar al elegir un proveedor de servicios de pago (PSP)
Mantente al día
Nunca te pierdas una actualización. Recibe actualizaciones de productos, noticias e historias de clientes directamente en tu bandeja de entrada.