Heatmaps
- Muestra las interacciones de los visitantes con cada elemento de tu sitio web
- Combina múltiples KPIs
Las 3 reglas de oro del menu de navegación sticky
El tema de las cabeceras y los menús de navegación “sticky” está envuelto en la controversia. Algunos afirman que desvían la atención de la persona de aquello en lo que debería centrarse, mientras que otros creen que son una parte esencial de la estructura de los sitios web modernos. De hecho, como en muchos casos de optimización del funnel de conversión, hay verdad en ambos casos.
Esta es tu guía sobre los menús sticky y cómo averiguar si una barra de navegación fija es adecuada para la experiencia de su sitio web digital:
¿Qué es un menú sticky?
Un menú sticky es un menú de navegación fijo en una página web que permanece visible y en la misma posición mientras el usuario se desplaza hacia abajo y se mueve por un sitio. Las barras de navegación persistentes -o “cabeceras sticky”- son ahora un estándar de diseño web.
Ejemplos de menús adhesivos
A continuación se presentan tres ejemplos de barras de navegación adhesivas para demostrar cómo los diferentes sitios y marcas interpretan esta característica del sitio web.
1. Navegación superior fija
El sitio web de la empresa de consultoría global Accenture cuenta con una cabecera sticky en la parte superior del navegador del usuario para que pueda seguir viéndola aunque se desplace por la página.
2. Navegación fija en el lado izquierdo
En la homepage del sitio de reservas de viajes Kayak, los usuarios pueden saltar rápidamente a cualquier necesidad de viaje que estén buscando -vuelos, hoteles, alquiler de coches, paquetes vacacionales, etc.- a través de la barra de navegación en la parte izquierda de la página.
3. Navegación fija a la derecha
El blog de la plataforma de diseño de productos digitales InVision cuenta con una barra de navegación sticky alineada a la derecha. Gracias a este menú fijo, los visitantes del blog pueden encontrar las entradas relacionadas con el mismo y disfrutar fácilmente del contenido de InVision.
Las 3 reglas de oro de los menús sticky
Sabemos que los usuarios generalmente prefieren la navegación sticky, pero ¿utiliza tu marca las barras de navegación sticky en todo su potencial?
Utilizando la información obtenida de la plataforma de Experience Analytics de Contentsquare, hemos sacado algunas conclusiones únicas sobre cómo la gente interactúa y experimenta digitalmente los sitios web, de todas las formas y tamaños. Estas son las tres reglas de oro que hemos descubierto que funcionan mejor para la navegación sticky:
1. Las cabeceras sticky funcionan mejor en sitios web accionables
La navegación sticky funciona mejor en sitios de retail, e-commerce y otros tipos de sitios “accionables” en los que el diseñador pretende que el usuario realice una acción específica, como hacer clic para comprar un producto. En estos casos, se ha demostrado que los menús fijos mejoran significativamente la experiencia del cliente, al mantener a los usuarios bien orientados y darles más control sobre su recorrido por el sitio.
En un ejemplo de un conocido sitio de retail (lo sentimos, no podemos revelar el nombre), después de que la marca introdujera una barra de navegación sticky, sus visitantes empezaron a desplazarse más por la página y a prestar más atención a los productos individuales de las páginas. Como resultado, la empresa experimentó una importante reducción de la tasa de rebote y las conversiones aumentaron del 30% al 33%, lo que supone un aumento del 10% en la tasa de conversión.
Puede que no parezca mucho, pero un aumento del 10% en las conversiones puede suponer una gran diferencia. Y si tu marca obtiene ingresos anuales de, digamos, 100 millones de euros, podemos hacer un cálculo rápido para ver cuánto vale eso para tu negocio:
- Si suponemos que los ingresos online son sólo el 8% de los ingresos totales, entonces la empresa tendría 8 millones de dólares en ingresos directos del sitio web.
- Un aumento del 10% en la conversión daría a la marca 800.000 euros más en ingresos anuales, ¡con un simple cambio en el sitio web!
- Si sustituimos este 8% por el 58%, o el porcentaje de ventas influenciados por lo digital que se esperan para 2023, entonces tenemos un ROI aún mayor. (en torno a los 5 millones de euros).
2. Los menús sticky son ideales para las páginas largas
Toda marca puede beneficiarse de tener una navegación amigable e intuitiva, especialmente en páginas con mucho contenido que requieren que los visitantes se desplacen. Una navegación clara en la página ayuda a los visitantes a realizar un recorrido fluido a través del contenido de la página de forma manejable. Aunque los enlaces de “volver arriba” pueden ayudar a conseguir un objetivo similar, la navegación sticky es una forma más rápida y sencilla de permitir a los visitantes saltar a una nueva página de tu sitio y continuar su experiencia.
A continuación, vemos parte de una página larga y con mucho contenido de un sitio web de viajes. La parte izquierda de la imagen muestra un heatmap de desplazamiento del ratón de Contentsquare que se generó antes de que el sitio implementara la navegación sticky. El heatmap a la derecha de la imagen muestra cuánto más se desplaza la gente hacia abajo una vez que el sitio implementó la navegación fija. Los resultados hablan por sí mismos:
3. La navegación con menús sticky funciona mejor con determinados grupos demográficos
Junto con otras técnicas de navegación interactiva, se ha comprobado que la eficacia del elemento sticky mejora el rendimiento en las tareas básicas de selección de los adultos mayores y proporciona beneficios similares (aunque menores) a los usuarios más jóvenes.
Entonces, ¿por qué los adultos mayores y los usuarios más jóvenes responden mejor a la navegación sticky? Porque los niveles de confianza en la web de los adultos mayores y los usuarios más jóvenes son relativamente bajos y, por lo tanto, necesitan un apoyo adicional, que la navegación fija proporciona. Los adultos mayores y los usuarios jóvenes responden bien a la confianza que infunden los menús de navegación sticky.
Te dejamos aquí una explicación más profunda de por qué esto es así:
Por qué los usuarios de los sitios web prefieren la navegación por menús sticky
Aquí es donde entra en juego la psicología del diseño web y la experiencia del usuario. Los elementos de menú fijos aumentan la confianza de los visitantes cuando se desplazan hacia arriba y hacia abajo por una página, dándoles una sensación de control mientras interactúan con un sitio web. Saben cuáles son sus opciones y no tienen motivos para sentirse incómodos porque todo lo que pueden necesitar está justo delante de ellos.
Una encuesta de Contentsquare y CommerceNEXT realizada en 2020 a 1.000 compradores online reveló que los clientes consideran que la facilidad para encontrar lo que buscan es el tercer factor más importante a la hora de elegir dónde comprar online, después del precio y las ofertas/promociones. El 38% de los clientes también dijo que cuando un sitio web es fácil de navegar, es más probable que vuelvan a comprar allí en el futuro.
A los usuarios les gusta sentir que tienen el control. Imagina una situación en la que no eres consciente de lo que ocurre a tu alrededor. Rápidamente, se encenderá el botón de “estrés” y tratarás de hacer todo lo posible para recuperar el control. Puedes conseguirlo “aferrándote” a algo o a algún lugar que te resulte familiar, adoptando un viejo patrón de comportamiento o apoyándote en alguien en quien confíes.
La misma lógica puede aplicarse a la navegación web y a la experiencia digital. Los visitantes pueden sentirse perdidos al tratar de encontrar su camino a través de páginas web muy largas. En la mayoría de los casos, esta sensación desencadenará un estrés que les hará abandonar el sitio, o rebotar. Este es exactamente el propósito de la navegación sticky: ayudar a la gente a explorar una página web de forma cómoda y controlada.
La necesidad humana de controlar nuestro entorno
Un estudio realizado por The Journal of the Acoustical Society of America expuso a dos grupos de participantes a un ruido fuerte y extremadamente desagradable. A los participantes del grupo A se les dijo que podían detener el ruido pulsando un botón, pero se les instó a no hacerlo a menos que fuera absolutamente necesario. Por otro lado, los participantes del Grupo B no tenían ningún control sobre el ruido.
Los resultados fueron reveladores. Ninguno de los participantes que tenían un botón de control llegó a pulsarlo. Pero el rendimiento en las tareas posteriores de resolución de problemas fue significativamente peor en el grupo B que no tenía acceso a un “botón stop”.
Esa sensación de no poder controlar una situación tiene efectos dramáticos en la psicología humana.
Traducido al mundo de la optimización web: aunque la gente no aproveche las funciones de navegación sticky, el mero hecho de saber que las opciones están siempre ahí mejorará la experiencia del cliente digital. Esto es cierto incluso a nivel subconsciente.
Mejores prácticas de los menús sticky
¿Te gustan las ventajas de la navegación fija? Si vas a implementar una barra de navegación sticky en tu sitio, asegúrate de sacarle el máximo partido siguiendo estas mejores prácticas:
1. Evita los iFrames
No caigas en lo que puede parecer una implementación sencilla. Cuando necesitas que tu sitio se vea bien y funcione bien en múltiples navegadores y en diferentes dispositivos, los iFrames no son tus amigos (por no hablar de los problemas de seguridad y SEO…).
2. Di “Sí” a CSS
Si te gusta la simplicidad y la velocidad, así es como debes codificar tu navegación sticky. Presta atención a la posición, al margen superior y al índice z.
3. Oculta a medias tu búsqueda
Si vas a tener un menú permanente, debes mantenerlo lo más simple posible para que siga proporcionando a tus usuarios la red de seguridad que necesitan, sin distraerlos demasiado. Intenta ocultar el campo de entrada de la búsqueda en favor de sólo el icono de la lupa.
4. Menús colapsables
Tal vez algunos de tus usuarios conozcan tu sitio y no necesiten ver una navegación sticky. Puedes hacer que tus menús sean plegables para darles la opción. No hay una solución que sirva para todos los casos, así que se flexible. Esto puede ser especialmente útil en los dispositivos móviles, ya que tienen pantallas más pequeñas y querrás maximizar el uso del espacio limitado del dispositivo.
5. Prueba, prueba, prueba
Recuerda que lo que funciona bien para otra marca puede no ser perfecto para tus clientes. Prueba diferentes cabeceras sticky para tomar decisiones basadas en datos sobre lo que prefieren tus visitantes y adaptar tu experiencia digital a sus necesidades.
Haz clic aquí para obtener una demostración de Contentsquare y aprender cómo una plataforma de Experience Analytics digital puede ayudarte a probar los menús sticky y otros proyectos de optimización del sitio con potentes herramientas de pruebas A/B, heatmaps basados en zonas, herramientas de recorrido del cliente y mucho más.
Descubre nuestros heatmaps
