Deslizadores de carrusel de sitio web: Por qué, cómo y cuándo usarlos (incluidos 13 ejemplos)

Hablemos de carruseles de sitio web, también conocidos como deslizadores, presentaciones de diapositivas, galerías.

Parece que todo Internet tiene su propia variación, pero colectivamente todos queremos decir que el elemento de diseño con el contenido en movimiento y, a menudo, muestra tres pequeños puntos en la parte inferior.

Cuando se trata de carruseles, estás en equipo team o en equipo team. El primer equipo normalmente incluye a los clientes, el segundo equipo a los diseñadores web.

Aquí en Ycode, somos Suiza. Creemos que los carruseles pueden ser los centros de mesa que hacen que su diseño web sea más atractivo, pero también tienen el potencial de reducir la usabilidad de su sitio web.

En este artículo, veremos las mejores prácticas de carrusel (y qué evitar). Dado que los carruseles se pueden usar en muchas ocasiones, le mostraremos diferentes ejemplos de deslizadores bien hechos.

Mejores prácticas de diseño de carrusel (o principalmente, qué no hacer)

Aunque se utilizan en muchos sitios web, los diseños de carrusel pueden fallar fácilmente. Hay algunas buenas razones para ello. Comencemos con algunas cosas que debe evitar antes de informarle sobre las mejores prácticas de carrusel que debe usar.

Don No hacer: Errores de carrusel a evitar

1. Contenido: Cuando un carrusel quiere hacer demasiado en muy poco tiempo, puede hacer que los ojos de los visitantes del sitio web giren. El texto no se puede leer correctamente, se pierde información y los visitantes pierden interés.

2. Diseño: Si un deslizador está mal diseñado y no se integra en el diseño de tu sitio web, puede confundirse con un anuncio. Como resultado, las personas se desplazan más allá del contenido. Se llama ceguera de banner, un fenómeno de diseño web en el que las personas ignoran contenido que se asemeja a un anuncio, consciente o inconscientemente.

3. SEO: Desde una perspectiva SEO, evita múltiples encabezados H1 si usas deslizadores como lo primero en la página. Cada página web debe tener un H1 en su código HTML. Si usas varias H1 debido a las diferentes diapositivas, Google puede estar confundido acerca de qué palabras clave son las más importantes para esa página web. Además, la estructura del sitio web puede no ser clara. Ambos factores podrían tener un impacto negativo en tu ranking.

4. Móvil: Para dispositivos móviles, es mejor elegir deslizadores manuales. Asegúrese de que los gestos son compatibles (por ejemplo, los usuarios móviles deslizan para mostrar la siguiente diapositiva) y que las flechas se muestran claramente y son lo suficientemente grandes como para presionar. Si tus diapositivas contienen texto, comprueba si es legible en las pantallas de los dispositivos móviles.

5. Rotación: Con nuestra capacidad de atención limitada en estos días, es difícil mantener el interés del usuario durante más de unos segundos. Dado que todos tenemos lugares para estar, mantenga la cantidad de deslizadores baja (menos de cinco) y brinde a los visitantes la oportunidad de controlar el carrusel mostrando los controles deslizantes. Esto asegura que la gente no tenga que sentarse y esperar la siguiente diapositiva.

👍 Qué hacer: Mejores prácticas de Carrusel

1. Mantenga cada diapositiva simple para que la información se pueda digerir en segundos.

2. Haz que el diseño se mezcle con el resto de tu sitio web.

3. Deje que la gente controle la rotación con flechas claras.

4. Tenga suficiente tiempo entre diapositivas (5-10 segundos), o mejor aún, deshágase de la reproducción automática por completo.

5. Menos es más (tanto en diseño como en cantidad de diapositivas).

6. Antes de insertar un carrusel, pregunte: ¿esto añadir más valor que el contenido estático?

¿Tienes dudas?

En caso de duda, pruebe ambas opciones y vea qué opción genera una tasa de conversión más alta. A menudo, los clientes piden presentaciones de diapositivas porque no tienen claro el mensaje que quieren promover en primer lugar. ¿Por qué no mostrarlo todo? Piensan.

Si ese es el caso, el trabajo es crear un mensaje más enfocado, no usar un control deslizante. O bien, elige el USP (Punto de Venta Único) importante y menciona los otros más abajo en la página. Es más probable que las personas se desplacen en lugar de hojear las diapositivas.

Si decides que es un claro que sí, escoge cada diapositiva intencionalmente. No solo agregue todos sus nuevos blogs o productos, sino que elija cuidadosamente el contenido más importante que podría generar la mayor interactividad de los usuarios.

13 ejemplos de carrusel de sitios web

Ahora que sabe lo que no debe hacer, veamos los ejemplos de carrusel que lo están clavando. Aquí hay 13 ejemplos de carrusel de sitios web, desde la página de inicio hasta las presentaciones de diapositivas de productos e imágenes.

Carruseles de página de inicio

Si pensabas que los campamentos ya estaban lo suficientemente divididos, no has encontrado deslizadores de página de inicio. Alguna raíz para colocarlos directamente en la parte superior (a menudo se ve en las plantillas de blog), mientras que otros no quieren verlos implementados en cualquier lugar por encima del pliegue.

La razón por la que las personas evitan colocar un carrusel de página de inicio directamente en la parte superior es porque creen que este espacio debe reservarse para un mensaje claro que incite al lector a desplazarse hacia abajo y obtener más información. Con carruseles, es difícil transmitir un mensaje fuerte. Además, no estás seguro de si las personas están viendo todas las diapositivas o desplazándose hacia atrás.

Sin embargo, también hay muchas personas a las que les encanta saludar a los visitantes con un carrusel de página de inicio para mostrar instantáneamente historias o productos destacados.

Ejemplo 1: Nicole Gibbons Studio

¡El carrusel de inicio de Nicole Gibbons Studio funciona muy bien! Eso es bueno por un par de razones.

• Tiene una buena funcionalidad y agrega valor. La diseñadora Nicole muestra rápidamente diferentes ejemplos de interiores directamente cuando la gente entra en su sitio web

• Las diapositivas son manuales, por lo que el usuario decide si desea hojear y a qué ritmo

• No hay superposición de texto para quitar de las imágenes

Ejemplo 2: Urban Skin RX

Nos encanta este carrusel compacto de Urban Skin RX, ya que tiene una gran accesibilidad.

Incorpora dos diapositivas, ambas diseñadas de forma atractiva en el mismo estilo que el resto del sitio web. El tiempo de rotación se establece lo suficientemente largo como para leer el texto. Las fuentes grandes y los botones de llamada a la acción (CTA) claros hacen que sea fácil digerir de qué se trata la diapositiva.

Nota: Si te desplazas por la página de inicio de la marca, verás que está diseñada para personas que ya están familiarizadas con Urban Skin RX. La atención se centra en mostrar productos, sin explicar por qué alguien los necesita en primer lugar. Es por eso que un deslizador de producto se ajusta a la página: no necesitan el espacio del encabezado para mostrar un mensaje claro que motive a los visitantes a descubrir más.

Ejemplo 3: Mejuri

Lo que nos encanta de este carrusel de la joyería Mejuri es que muestra dos cosas diferentes a la vez, sin sentirse abrumado.

Todo el carrusel contiene tres diapositivas, cada una de las cuales tiene dos opciones: ver la campaña o comprar joyas. Las líneas de progresión se muestran sutilmente en la parte inferior, aunque es posible que necesites ojos de águila para ver esto. Esto podría ser un punto para la optimización.

Ejemplo 4: Pizza de Fresh Brothers

¿Quién dice que un deslizador debe abarcar todo el ancho de una página? También puedes dividir las secciones en cuadrículas y usar deslizadores más pequeños, como en la página de inicio de Fresh Brothers Pizza.

Concedido, con este diseño de diseño web, las cosas pueden obtener un poco más. Aunque los controles deslizantes muestran información a los visitantes, el ojo se dirige a la imagen grande de la izquierda. No todos verán la información del deslizador. Sin embargo, dado que la información es sobre las medidas de COVID y las nuevas pizzas que la gente verá de todos modos al hacer su pedido, esto no es gran cosa.

Carruseles de productos

Los carruseles de productos están ahí para atraer visualmente a las personas a aprender más sobre el producto, y bueno, ¡con suerte comprarlo!

Estos tipos de carruseles generalmente se colocan en uno de los dos lugares de los sitios de comercio electrónico: la página de inicio o la página de producto. El control deslizante puede mostrar diferentes productos o un producto de diferentes maneras (mostrando sus características).

Ejemplo 5: Keys Soulcare

En esta página de producto Keys Soulcare, se utiliza un carrusel para mostrar cada elemento incluido en el paquete ritual Harmony. Un deslizador se adapta perfectamente al diseño del sitio web, ya que permite a los visitantes ver toda la información relevante sin tener que desplazarse.

Ejemplo 6: KeepCup

Este carrusel de productos de KeepCup se coloca en el centro del sitio de comercio electrónico y le permite navegar fácilmente por las tazas para llevar más populares de la marca. Toma nota de cómo se colocan el nombre, el precio, el botón de compra y las flechas, súper elegantes (accesorios para los diseñadores gráficos).

Ejemplo 7: Nostalgia de casa

Empresa de velas nostalgia de casa utiliza una variedad de elementos deslizantes en su sitio web de comercio electrónico, para mostrar sus velas, así como reseñas y citas de marcas.

A mitad de la página de inicio, hay esta presentación de diapositivas, una galería conmovedora de sus velas más vendidas (¡nos encanta el concepto de aroma!). Una vez que pasa el cursor sobre un deslizador de imagen, se detiene y se muestra una imagen ligeramente diferente (por ejemplo, mostrando la vela encendiéndose).

Ejemplo 8: Milk Bar

Las páginas de productos de Milk Bar son un placer para desplazarse, y no solo porque las imágenes son deliciosas. Tome la página web de Animadoras a continuación, con el elemento deslizante a la izquierda y todos los detalles del producto a la derecha, los visitantes pueden ver todo a primera vista.

Sin embargo, cuando te desplaces hacia abajo, verás banners interactivos y más información de productos como entrega, ingredientes, golosinas similares y otro carrusel que muestra las reseñas de los clientes.

Carruseles de contenido

Si desea agregar un carrusel de contenido a su sitio web, tenga en cuenta que el contenido más valioso debe estar en la primera diapositiva. La diapositiva inicial siempre obtendrá la mayor exposición, y las impresiones disminuirán después de cada diapositiva adicional.

Ejemplo 9: Art of Tea

En el siguiente sitio web de Art of Tea, verá muchas cosas diferentes en un deslizador de pantalla completa.

El control deslizante de apertura es un CTA para unirse a su programa de afiliados. A continuación se presentan diapositivas que muestran latas de té, bolsas, paquetes y agitadores nuevos. One slide también está dedicado a unirse a su club de té mensual.

Lo que este diseño web de carrusel hace bien es que las imágenes muestran de qué se trata cada diapositiva, y el texto de soporte se mantiene al mínimo. Una cosa a mejorar son los botones. Cuando eliges botones que solo tienen un contorno, es difícil verlos claramente en la imagen.

Ejemplo 10: Escuela de Diseño Canva

La página de Escuela de Diseño de Canva es un buen ejemplo de una instancia en la que un carrusel es más efectivo que cualquier otro elemento del sitio web.

Dado que hay mucho contenido que mostrar en la página de destino, un carrusel ayuda a mostrar los diferentes cursos de forma más compacta. Por ejemplo, la sección tutorial a continuación ocupa mucho más espacio en comparación con la presentación de diapositivas.

Carruseles de blog

Muchas veces las plantillas de WordPress para blogs vienen con un elemento deslizante interactivo que muestra automáticamente los artículos más recientes.

Aunque esta es una gran característica, manténgase al tanto de los artículos que se muestran. Algunos pueden no ser tan dignos de hacer clic, pero se muestran primero en el control deslizante de la página de inicio porque se publicaron más recientemente. En este caso, es mejor seleccionar manualmente los blogs que crees que atraerán a los visitantes a hacer clic.

Ejemplo 11: COCOCOZY

La bloguera de diseño de interiores Colette Shelton abre su blog con un deslizador que muestra una selección de sus blogs. Una vez que pasas el cursor, se muestra el título del blog. En el móvil, la imagen se muestra con el título debajo de ella.

Carruseles de imagen

Los carruseles de imagen a menudo se ven en sitios web similares a portafolios, donde se utilizan para mostrar piezas de la obra del artista. Asegúrate de que tus imágenes sean de alta calidad y hablen por sí mismas, sin necesidad de texto adicional.

Ejemplo 12: Mix Design Collective

Mix Design Collective es una empresa de diseño. Dado que su trabajo es altamente visual, tiene sentido abrir el sitio web con la navegación y un control deslizante de fotos directamente debajo.

La presentación de diapositivas tiene una mezcla de imágenes, desde cocinas hasta baños y salas de estar, para que los visitantes se hagan una idea del estilo de diseño y los servicios del colectivo.

Carruseles de comparación

Los deslizadores funcionan bien cuando los usuarios necesitan escanear rápidamente una variedad de contenido o productos. Este es exactamente el caso cuando la gente está comparando artículos. Echemos un vistazo a algunos ejemplos.

Ejemplo 13: Amazon

Podría decirse que el ejemplo de comparación más conocido proviene de Amazon. En cada página de producto, encontrarás un carrusel con todos los productos relacionados que también podrías comprar. En este caso, un control deslizante es más efectivo que las imágenes estáticas, ya que permite a los usuarios navegar rápidamente por muchos productos similares.

¿Cuál es su opinión sobre los carruseles de sitios web?

Como has leído, los deslizadores web pueden ser un sí por favor o un no por favor. Todo depende de cómo se use el elemento en su diseño web y de lo fácil que sea navegar por el deslizador. Asegúrese de que cada diapositiva tenga un propósito claro y que la experiencia general del usuario sea excelente. Si puedes decir con confianza que un deslizador es el mejor elemento para mostrar el contenido, estás listo.