Creativa.dev

¿Cómo usar carruseles de imagen de la manera correcta?

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
¿Cómo usar carruseles de imagen de la manera correcta?

¿Cómo usar carruseles de imagen de la manera correcta?. Perdí la noción del número de veces que intenté localizar las diapositivas que se ejecutan en un sitio web. Es muy irritante intentar leer apresuradamente lo que se ha escrito antes de que otra diapositiva se haga cargo. Ahora, ni siquiera me molesto en escanear más allá de la primera diapositiva de carruseles de imágenes.

Pensé que era el único que no podía soportar estos controles deslizantes automáticos. Pero gracias a Dios, ¡hay otros como yo también! Estas diapositivas afectan las conversiones y la experiencia general del usuario en el sitio web, solo de manera negativa.

Un estudio de usabilidad [1] realizado  por el grupo Nielsen Norman confirmó que los carruseles de reenvío automático molestan a los usuarios y reducen la visibilidad.

El estudio destaca un par de razones por las cuales estos elementos de diseño «geniales» que se creen no son realmente buenos para la usabilidad o las conversiones de su sitio:

    • La rotación automática hace que el usuario pierda el control de su interacción con el sitio. Esto es especialmente molesto para los usuarios con problemas de habilidades motoras.
    • Crean ceguera de pancartas y, a menudo, los usuarios los ignoran fácilmente. El siguiente ejemplo de seguimiento ocular de otra fuente también valida esto. Puede ver cómo el control deslizante de la imagen (el área negra en la imagen) apenas recibe atención por parte de los visitantes del sitio.

  • Los usuarios de baja alfabetización y los usuarios internacionales (cuyo idioma nativo difiere del idioma de su sitio web) a menudo leen lentamente. Un usuario expresa claramente su frustración en el estudio cuando dice: “No tuve tiempo de leerlo. Sigue parpadeando demasiado rápido».

Me pregunto si estos controles deslizantes son tan confusos y molestos para tantos otros usuarios, ¿por qué están en casi todas partes? Abra algunos sitios web de comercio electrónico y lo sabrá.

Como resultado, los carruseles de imágenes o pancartas giratorias a menudo se consideran una solución fácil para proporcionar una mejor navegación a todos los contenidos / ofertas importantes en el sitio. Sin embargo, los datos sugieren lo contrario.

La Universidad de Notre Dame probó su carrusel. La tabla a continuación muestra los resultados que encontraron. Solo el 1% del total de visitantes hizo clic desde el carrusel, y la mayoría de estos visitantes (84%) interactuaron solo con la primera diapositiva del carrusel.

Ok, lo entiendo! Cada departamento quiere tener su oferta especial en la página de inicio.

Y, por supuesto, los carruseles son una manera fácil de hacer felices a todos.

Pero, francamente, el 1% de la tasa de clics de algo que ocupa los principales bienes inmuebles de la página de inicio es una pérdida de esfuerzos evidente. ¿Todavía crees que los controles deslizantes de imágenes son una buena idea?.

Además de plantear un desafío de usabilidad, los carruseles ofrecen múltiples ofertas en un solo lugar, lo que es un gran asesino de conversiones. Como sugiere la probada sabiduría de conversión, idealmente debería tener solo una oferta o llamado a la acción por página. Y los carruseles definitivamente son los delincuentes aquí.

Demasiadas ofertas juntas solo dicen: «No sabemos cuál debería ser nuestra principal prioridad, por lo que las descartamos todas juntas aquí y vemos cuál funciona mejor». ¡Arriba y toma algo de responsabilidad, gente! Decida la prioridad de sus ofertas antes de continuar.

¿Hecho?

Bien, ahora si está listo para superar esta “práctica estándar” bastante perjudicial, aquí hay algunas alternativas de carrusel de imágenes que puede probar…

Centra tu página de inicio en tu oferta principal

Pon tu mejor pie adelante. Deje que su oferta más relevante llame la atención de sus visitantes. Y agregué algunas ofertas que siempre funcionan bien para usted durante todo el año. Puedes ver cómo Ben Sherman implementa esto en su página de inicio:

En la imagen de arriba, solo la oferta de blazer es lo que los visitantes pueden ver arriba del pliegue.

No haga que su sitio web parezca una acumulación de promociones. No necesita conservar todas las ofertas que ha promocionado anteriormente. Como Paul Phillips mencionó en uno de sus artículos, cada oferta tiene una fecha de vencimiento.

Convierta cada diapositiva en una página de inicio dirigida para segmentos de visitantes específicos

Digamos que tienes una tienda de ropa global en línea. Ahora, los países a menudo tienen diferentes tendencias de ropa. Por lo tanto, puede segmentar a sus visitantes en función de su ubicación geográfica con la ayuda de su software de prueba A/B.

Muéstreles la página de inicio que promueve una oferta sobre la tendencia de ropa más popular en su país. Este es un gran reemplazo para una solución de control deslizante de imagen de «talla única» que muestra 4 diapositivas, de las cuales 3 son más adecuadas para las tendencias en los EE. UU. (Porque el 80% de su tráfico proviene de los EE. UU.), Y 1 diapositiva es para el Reino Unido.

¿Pero adivina que? Probablemente esté desmayándose por las preferencias de los visitantes de otros países. Entonces, incluso si ha hecho esfuerzos para enviar todo a esos países, sus conversiones para ellos seguirán siendo pobres.

En lugar de mostrar a sus visitantes un control deslizante de imágenes en constante rotación que enumera tal vez incluso una oferta por diapositiva para los 5 países principales de donde obtiene la mayor parte de su tráfico, ¿por qué no eliminar ese maldito control deslizante y reemplazarlo con mostrar solo a sus visitantes su oferta específica de ubicación? Puede usar fácilmente segmentos preestablecidos en VWO para configurar esto en solo unos pocos clics.

Como Depesh Mandalia, el experto en comercio electrónico y digital, ha sido citado correctamente en este artículo de eConsultancy:

Un mensaje de banner enfocado generará CTR más altos que unos pocos banners desenfocados. Servir al 100% de sus visitantes es casi imposible sin saber algo sobre ellos, sin embargo, parece haber una auto-persuasión con los administradores de contenido de que más opciones son buenas = más clics = más ventas. No funciona de esa manera.

¿No es suficiente? Demasiado terco, ¿verdad?

Entonces, si REALMENTE desea continuar con esto incluso después de escuchar todas esas razones, hágalo de la manera en que lo hizo Sephora:

Vea la imagen a continuación de la página de inicio de Sephora:

¿Cómo usar carruseles de imagen de la manera correcta?
Ahora bien, esta es una de las mejores ejecuciones de controles deslizantes de imágenes que he visto en Internet. Algunas de las razones por las que es tan genial:

  • Limitan su carrusel a solo 2 toboganes
  • Cargas súper rápidas
  • El control deslizante es manual y no gira automáticamente
  • Limpie los botones de navegación en los lados que se colocan cuidadosamente sobre las superposiciones blancas para que sean fácilmente visibles
  • Las dos ofertas que se muestran en la presentación de diapositivas son relevantes para su mercado objetivo completo, y no solo para una persona de visitante en particular (como adolescentes o mujeres mayores de 40 años)

Si crees que puedes llevar esto a cabo como Sephora, entonces sigue adelante y pruébalo.

Aunque todos los expertos en conversión, incluidos Peep Laja [2], Tim Aish [3] y Chris Goward [4], recomiendan estrictamente que debe deshacerse de los controles deslizantes de imagen, creo que hay una pequeña excepción a esta regla. Y eso es sitios web de fotografía donde los controles deslizantes se pueden utilizar para mostrar carteras de imágenes.

Pero esto no cambia el hecho de que los elementos móviles de la interfaz de usuario son conocidos por su reputación de ser nada más que una distracción. Por lo tanto, incluso cuando planee usar un carrusel de imágenes en un sitio web de fotografía, asegúrese de que su frecuencia de deslizamiento no sea demasiado rápida. Alrededor de 4-5 segundos por diapositiva debería estar bien. Y, por supuesto, capacite a sus visitantes. Dales el control. El carrusel a continuación de Royal Mail es un ejemplo perfecto:

Vea cómo los botones de pausa y reproducción se proporcionan de manera prominente sobre el carrusel para adaptarse a las preferencias de los usuarios. Un aviso adicional a este para hacer que la llamada a la acción principal sea permanente sobre el control deslizante y no una parte de las imágenes giratorias.

Para llevar clave

  • No uses controles deslizantes de imagen

Pero admitámoslo: estas pancartas giratorias no irán a ningún lado pronto. ¡Gracias a la mentalidad de rebaño [5]! Entonces, si realmente tiene que hacerlo, aquí hay un resumen rápido de lo que debe tener en cuenta:

  • Tiempo de carga rápida
  • Mantenga su frecuencia de deslizamiento lenta
  • Permita que los usuarios controlen el espectáculo (ya sea proporcionar botones de pausa y reproducción, o mantener las rotaciones de imagen manuales y no automáticas)
  • Sus opciones de navegación de diapositivas deben ser muy prominentes y obvias (las flechas enormes en ambos lados colocadas sobre la superposición blanca funcionan bien. Los pequeños puntos enterrados en las esquinas de los controles deslizantes de imagen no lo hacen)
  • Las ofertas en las diapositivas deben ser relevantes para todo su público objetivo (y no solo para una persona en particular)
  • Cuanto menor sea el número de diapositivas, mejor.

No importa cuál de estas alternativas de control deslizante de imagen intente, no olvide probar A/B. Incluso si está 100% seguro de que su página de tratamiento aumentará las conversiones, pruébela solo para ver cuánto porcentaje de mejora significa sobre su página de Control. Y, por supuesto, vuelve aquí y comparte tu experiencia conmigo.

Referencias:

  1. https://www.nngroup.com/articles/auto-forwarding/
  2. https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
  3. https://www.clickz.com/rotating-banners-just-say-no/45917/
  4. https://www.widerfunnel.com/rotating-offers-the-scourge-of-home-page-design/
  5. https://www.investopedia.com/terms/h/herdinstinct.asp

Fuente: Artículo original en inglés.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

FAQ's

Si aún tiene dudas, lo invitamos a revisar nuestras preguntas frecuentes sobre nuestros servicios.

Diseño Web & Desarrollo

¿No encuentra la respuesta que busca para su sitio web? ¡Compartimos algunas de nuestras preguntas más frecuentes para ayudarlo!

Branding & Diseño Gráfico

¿Quiere un logotipo, una ilustración o un diseño pero no puede encontrar la respuesta que está buscando? Eche un vistazo a nuestras preguntas frecuentes.

Marketing Digital

¿Estás listo para impulsar tu negocio pero no encuentras la respuesta que estás buscando? Echa un comentario a nuestras preguntas frecuentes.