Los controles deslizantes del carrusel del sitio web son una excelente manera de mostrar su contenido más importante con una serie de imágenes y texto. Sin embargo, a veces pueden resultar desagradables o, peor aún, asustar a los visitantes.
En esta publicación, repasaremos algunas de las mejores prácticas para crear un carrusel atractivo de sitios web y luego repasaremos algunos de los mejores ejemplos que hemos visto en la web. Empecemos.
Mejores prácticas de carrusel web
- Auto reproducir la zanja.
- Proporcione una navegación fácil.
- Adaptarse a todos los dispositivos.
- Optimización SEO.
- Elija diapositivas con intención.
Al implementar un carrusel de sitios web en su sitio, es importante hacerlo de una manera que mejore la experiencia del usuario (UX). A menos que tenga una intención clara de cómo el carrusel del sitio web mejorará su UX, es posible que desee considerar un elemento de diseño diferente para lograr sus objetivos.
Estratega del autor y redactor de CRO del sitio web de HubSpot, Rebeca HintonAcciones que, si bien los carruseles pueden no ser perfectos, pueden ser una excelente manera de personalizar su contenido para diferentes tipos de clientes.
Un carrusel bien diseñado debe mostrar su contenido y hacer que sea más fácil y agradable para los usuarios acceder a su sitio web. Tu carrusel debe intrigar a los visitantes para que aprendan más sobre lo que tienes para ofrecer y despertar su interés.
Ahora echemos un vistazo a las mejores prácticas del carrusel del sitio para ayudarlo a lograr esto.
1. Auto reproducir la zanja.
Los carruseles suelen voltear el contenido automáticamente. Sin embargo, por varias razones, es mejor alejarse de la reproducción automática.
El deslizamiento automático y el cambio frecuente del carrusel pueden recordar a un anuncio, lo que puede ser un gran desincentivo para los visitantes y hacer que reboten. Proporcionar al usuario el control total de la velocidad y el ritmo del carrusel proporcionará una experiencia más cómoda.
Un control deslizante de carrusel bien hecho debe atraer e informar al espectador. Es posible que los carruseles de reproducción automática no den a los visitantes el tiempo necesario para digerir el contenido de cada diapositiva. Esto puede ser frustrante y confuso para el visitante y potencialmente puede sacarlo del viaje de compras. Por esta razón, es mejor dejar el cambio de carrusel en sus manos.
Técnicamente hablando, los carruseles de reproducción automática también pueden afectar el rendimiento de un sitio web, aumentando los tiempos de carga. Además, el carrusel de expansión automática puede dañar la accesibilidad de su sitio web y alejar a los usuarios que tienen problemas de habilidades motoras.
Al darles a los usuarios el control sobre cuándo cambiar al carrusel, se mantendrán comprometidos y consumirán su contenido a su propio ritmo, lo que en última instancia empoderará a sus clientes.
2. Proporcione una navegación fácil.
Después de pasar la reproducción automática, debe proporcionar navegación para que los usuarios puedan navegar por el carrusel por su cuenta. Los tipos más comunes de navegación en carrusel en su sitio son las flechas izquierda/derecha y los sistemas basados en puntos.
Flechas izquierda/derecha
Las flechas izquierda y derecha permiten a los usuarios navegar fácilmente por el carrusel.
lo que nos gusta: Su navegación en carrusel debe ser intuitiva y fácil de usar, no más intuitiva que las flechas izquierda/derecha. Las flechas en el ejemplo anterior son consistentes con el diseño de la página, lo cual es un buen toque.
Al hacer clic en la flecha, deben ir a la siguiente diapositiva o retroceder. Solo asegúrese de que sus flechas apunten en la dirección en que se mueven.
Puntos
Los sistemas de navegación basados en puntos muestran una serie de círculos que representan la diapositiva en el carrusel. Por lo general, los círculos están vacíos de forma predeterminada, pero se muestran sólidos para la diapositiva actual.
lo que nos gusta: La navegación basada en puntos es minimalista y limpia y muestra al usuario exactamente dónde se encuentra en el carrusel.
3. Adaptarse a todos los dispositivos.
De acuerdo a Estadísticasa partir de 2017, el tráfico móvil en todo el mundo ha estado rondando constantemente el 50 %. Actualmente, existen muchos dispositivos, desde teléfonos hasta tabletas y computadoras portátiles, por lo que es importante personalizar su sitio web en consecuencia.
Esto significa que los carruseles del sitio deben tener un diseño receptivo, lo que significa que el diseño de su carrusel debe adaptarse automáticamente a los tamaños de pantalla más pequeños. Recuerde que los usuarios de dispositivos móviles también están limitados a tocar, pellizcar y deslizar, así que asegúrese de que estos gestos también funcionen en su carrusel web.
Los ejemplos anteriores muestran cómo funciona el carrusel. Estudios Chia se adapta desde escritorios a pantallas móviles.
Lo que nos gusta: En estos ejemplos, el contenido del carrusel está optimizado para el tamaño de la pantalla del móvil. En el carrusel de escritorio, muchas diapositivas se muestran horizontalmente. La versión móvil oculta el contenido a los lados y muestra solo la diapositiva actual, por lo que ocupa más espacio en una pantalla más pequeña.
4. Optimizar para SEO.
Los controles deslizantes del carrusel del sitio web no están exentos de los controles de SEO. Debe optimizar los encabezados y el texto alternativo de la imagen en el control deslizante si desea que Google vea esto favorablemente.
En cuanto a los encabezados en el control deslizante del carrusel, las propias diapositivas pueden contener encabezados y tal vez incluso encabezados H1. Los motores de búsqueda ven los encabezados H1 como el título de su página, por lo que si cada diapositiva contiene uno, puede generar confusión en el SEO. Al crear el control deslizante del carrusel de su sitio web, es mejor no incluir encabezados H1.
Cada diapositiva en el carrusel brinda la oportunidad de incrustar una de sus palabras clave usando el texto alternativo de la imagen. El texto alternativo es una descripción escrita de una imagen que se muestra cuando las imágenes no se cargan. También ayuda a las herramientas de lectura de pantalla a anotar imágenes para lectores ciegos. Incluso si no puede ver las palabras en la página, los motores de búsqueda rastrearán el texto alternativo de su imagen.
El ejemplo anterior muestra el texto alternativo de una imagen en un control deslizante del carrusel del sitio. Tras una inspección más cercana, podemos ver que el texto alternativo de la imagen dice «Logan D. Mom», que describe la imagen mucho mejor que «IMG_3607.jpg».
5. Planifique su secuencia de carrusel con intención.
Cuando se trata de controles deslizantes de carrusel de sitios web, lo mejor que se debe hacer primero debe escribirse. La primera diapositiva en el carrusel es una oportunidad para que tu audiencia se interese, así que asegúrate de comenzar con tu activo más fuerte. Si obtiene la primera diapositiva, la probabilidad de que los espectadores interactúen con el carrusel aumenta significativamente.
Cada diapositiva en su carrusel es igualmente importante. Incluso si el primero atrae la mayor atención, cada uno debe hacerse a propósito y lograr un objetivo específico. Si la diapositiva en el carrusel no mejora la experiencia del usuario y no brinda información importante, es mejor omitirla en secuencia.
Ejemplos de carrusel de sitios web
Ahora que hemos cubierto algunas de las mejores prácticas para usar carruseles en su sitio, echemos un vistazo a algunos ejemplos que pueden ser su fuente de inspiración.
1. cocina de materiales: control deslizante de productos de comercio electrónico
Nos encanta este deslizador de productos de Material Kitchen. El diseño del control deslizante es claro y atractivo. Desde el principio, el espectador se siente atraído por el diseño minimalista que enfatiza los productos. Además, este control deslizante verifica todos los campos que discutimos anteriormente. No se reproduce automáticamente, usa flechas izquierda y derecha para navegar, responde y está optimizado para SEO. Este control deslizante también incluye una barra de progreso en la parte inferior que muestra al usuario dónde se encuentra el carrusel.
2. Pelo: Una delicia a base de puntos
Este es un gran ejemplo de un control deslizante que incluye un sistema de navegación basado en puntos. El carrusel JVN Hair es atractivo e intuitivo de usar, y los puntos en la parte inferior facilitan la navegación. También nos gusta el valor que este control deslizante brinda a los visitantes. Cada diapositiva tienta al espectador con una imagen y ofrece un producto y testimonios correspondientes. Este control deslizante también incluye flechas izquierda y derecha. ¡No permitiremos que se subestimen las opciones de navegación adicionales!
3. Línea recta: Control deslizante creativo basado en tarjetas
Muchos sitios web muestran los testimonios de sus marcas, pero Beeline muestra sus críticas positivas con estilo con un elegante control deslizante de carrusel que presenta contenido en un formato basado en pestañas. Nos gusta la navegación limpia izquierda / derecha y la forma en que la diapositiva actual está completamente enfocada y las diapositivas izquierda y derecha son translúcidas y están metidas en la parte posterior.
4. Muro: carrusel adictivo
Nos encanta la experiencia inmersiva que Muros crea en este ejemplo de carrusel de sitio, lo que permite que el contenido del control deslizante ocupe toda la página. Muros se ocupa del arte y los murales, así que utilice el carrusel de página completa para mostrar su trabajo. Al crear su control deslizante, considere sus objetivos y el tipo de contenido que desea presentar y busque un diseño que satisfaga esas necesidades.
5. buzón: Un ejemplo de un carrusel web tradicional
No hay nada de malo en apegarse a los clásicos. Nos encanta este carrusel tradicional de Dropbox porque hace exactamente lo que se supone que debe hacer. Este control deslizante muestra estudios de casos destacados con una imagen asociada, un extracto y un llamado a la acción para leer más. Queda muy claro para el espectador lo que está mirando y cómo proceder para conseguir más. Este control deslizante también incluye navegación basada en flechas y no se reproduce automáticamente. ¡Lo aprobamos!
Use sitios de carrusel para atraer y convertir visitantes
Los carruseles de sitios web pueden organizar el contenido de su sitio de una manera visualmente interesante mientras atraen a su audiencia para ayudar a generar conversiones. Asegúrese de tener en cuenta las mejores prácticas anteriores al colocar carruseles en su sitio para garantizar su eficacia.
Nota del editor: esta publicación se publicó originalmente en julio de 2020 y se actualizó para que sea completa.
