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.
