Implementar un carrusel es fácil, implementar uno de la manera correcta es más fácil decirlo que hacerlo 🙃. Demasiados sitios de ecomm todavía piensan que un carrusel es el boleto dorado en su página de inicio, página de producto o incluso en artículos para leer el artículo completo, pero a menudo funcionan mal, se deslizan demasiado rápido o dejan al visitante adivinando si hay más detrás de la cortina. .
Nota al margen: comience preguntándose: “¿realmente necesito usar un carrusel?” Muchos estudios señalan la mala experiencia que se da al utilizar un carrusel y lo que suelen distraer.
Todo se reduce a esto: no los uses cuando no sea necesario. Asegúrese de visitar este sitio para verificar si realmente necesita uno https://shouldiuseacarousel.com/
3 buenas razones para utilizar un carrusel:
cuando puede ahorrar tiempo y clics a las personas cuando su contenido se presenta visualmente y no tiene demasiados detalles cuando puede ahorrar lugar en su página
Un carrusel que ocupa todo el lugar en la mitad superior de la página no es nada amigable con el usuario. Mantiene a la gente adivinando si hay algo más profundo en la página.
→ Deje algo de espacio para que la siguiente sección se asome al pliegue. Podría ser el título, una parte de la imagen o incluso un pequeño subtítulo con una flecha. Al menos un detonante de que hay más por venir.
Muestre un adelanto del siguiente contenido; sus usuarios se sentirán más motivados a desplazarse más
Es importante ver un carrusel como un punto destacado y una reiteración de contenido. Esto significa que el carrete solo debe mostrar contenido que también podría encontrarse en otra página o sección de su sitio.
Un estudio demostró que sólo el 1% de los usuarios hicieron clic en una función del carrusel. Por eso es importante repetir el contenido, especialmente los de la segunda o tercera diapositiva.
El contenido del carrusel debe ser lo más destacado, no el único lugar para encontrarlo.
Utilice indicadores destacados para mostrar a sus visitantes que hay más de una diapositiva en el carrusel. Todavía me topo con sitios que no usan ningún indicador y simplemente asumo que están usando una imagen principal.
Los indicadores pueden ser:
y ayudará a aumentar enormemente la tasa de clics de su carrusel. Asegúrese de agregar también una flecha/punto anterior claro.
Mostrar indicadores explícitos
Intenta mantenerte lo más lejos posible de la reproducción automática. Le quita independencia a tu usuario ya que serás tú quien decida por él cuándo se deslizará el carrusel.
Sin embargo, si decide implementarlo, asegúrese de utilizar los siguientes consejos:
No vayas demasiado rápido ni demasiado lento: hay una regla general de 1 segundo por 3 palabras con un tiempo medio de 5 a 7 segundos por diapositiva.
2. Es importante captar todas las interacciones con tu audiencia. Entonces, si se ciernen sobre tu carrusel, definitivamente debes detener la rotación automática. Además, cuando un usuario hace clic en un indicador, también debes detenerlo.
3. !! Nunca uses la rotación automática en el móvil. Le quita demasiada atención al contenido ya que la pantalla es más pequeña y la animación no será tan fluida como en el escritorio. En su lugar, utilice la siguiente regla para carruseles móviles.
Utilice el gesto de deslizar en el móvil, es más intuitivo para sus usuarios, lo que también resultará en más deslizamientos a través de las diapositivas del carrusel.
asegúrese de usar el mismo estilo en toda la diapositiva, implemente la misma animación correcta en cada diapositiva, use la aceleración para que se vea más “natural” no coloque su CTA solo en la última diapositiva. ¿Quizás también pueda ir a la primera? Optimice las imágenes para cada dispositivo, implemente gestos táctiles tanto en dispositivos móviles como en computadoras de escritorio. Se recomienda permitir que sus usuarios vean la última diapositiva deslizando el dedo 3 a 4 veces como máximo.
¡Terminando con un consejo 💡!
Una biblioteca de carrusel que me gusta usar es el control deslizante elegante. Tiene múltiples opciones personalizables y es realmente fácil de implementar en sus proyectos de desarrollo :) encuentre más información aquí (el inconveniente es que solo está disponible en Jquery).