Carrusel en e-commerce: cuándo usarlo y cómo diseñarlo bien

Usa un carrusel cuando los elementos se parecen entre sí y ninguno tiene que verlo todo el mundo. Para una oferta que importa, un banner fijo o una cuadrícula funcionan mejor, porque mucha gente baja por la página y pasa de largo frente al carrusel. Si lo mantienes, limítalo a pocos elementos, muestra que hay más contenido, acepta el gesto de deslizar y no dejes que gire solo.

Por qué todas las tiendas tienen carrusel

La guía de carruseles de Nielsen Norman Group (en inglés) señala la mayor ventaja: varios contenidos comparten el mismo espacio privilegiado de la portada. Eso ayuda a resolver la disputa interna sobre qué campaña merece la parte de arriba. La misma guía señala el mayor problema: la gente suele bajar de inmediato y perder todo lo que no está en el primer cuadro.

El mismo texto plantea un segundo riesgo. Quien diseña piensa en el conjunto de imágenes, pero quien visita ve solo una. Si esa única imagen tiene poca relación con el negocio, la persona se va con una idea equivocada de la tienda.

La guía de NN/g (en inglés) sugiere considerar una sola imagen principal fija en lugar del carrusel. Con una sola imagen, la elección suele ser más fuerte, y el menú del sitio deja de competir con algo que se mueve. La guía también recomienda repetir el contenido importante del carrusel en otro punto de la navegación.

En la práctica, la pregunta es directa: si la persona ve solo el primer cuadro, ¿la tienda pierde algo? Si lo pierde, ese contenido no puede depender del carrusel.

Cuántos elementos caben

La guía (en inglés) recomienda cinco cuadros o menos. A partir de ahí cuesta recordar lo que ya se vio y volver a encontrar un elemento.

El artículo de NN/g sobre carruseles en el móvil (en inglés) mira el límite desde otro ángulo. La mayoría de las personas se detiene después de ver tres o cuatro páginas del carrusel. Por eso, el último elemento debería quedar a tres o cuatro toques o deslizamientos de distancia. Cuando cada página muestra varios productos, caben más elementos sin romper esa cuenta.

Con muchos elementos, el mismo artículo propone cambiar el carrusel por una lista, donde la persona llega directo a cualquier producto.

Mostrar que hay más

El artículo sobre móvil (en inglés) separa las señales fuertes de las débiles. Los puntitos debajo de la imagen son débiles, porque son pequeños y pasan desapercibidos. Una imagen cortada en el borde de la pantalla es una señal fuerte: la persona entiende al instante que hay contenido más allá.

Otras reglas de la guía general (en inglés):

muestra cuántos cuadros hay y en cuál está la persona;
deja los controles dentro del carrusel, no debajo;
haz botones lo bastante grandes para verlos y pulsarlos, incluso sobre una foto recargada;
si hay un botón por cuadro, haz que cada uno sea distinto y fiel al cuadro que abre.

El primer elemento pesa más que los demás. El artículo sobre móvil (en inglés) lo compara con una carta de recomendación del resto: si no interesa, la persona ignora todo el carrusel. Pon primero lo que más le interesa a tu público y mantén los elementos parecidos entre sí.

Deslizar en el móvil

En el móvil, la gente desliza el dedo para ver el siguiente elemento. El mismo artículo (en inglés) trata como un fallo un carrusel que no acepta ese gesto. También advierte de un conflicto en el iPhone: en Safari, deslizar desde el borde izquierdo vuelve a la página anterior. Un margen en blanco alrededor del carrusel ayuda a deslizar lejos del borde.

Por qué no debe girar solo

El artículo de Jakob Nielsen sobre la rotación automática (en inglés) cuenta una prueba hecha en el Reino Unido. La participante buscaba ofertas de lavadoras en el sitio de Siemens. La oferta estaba en el bloque más grande de la portada, pero el bloque cambiaba de panel cada cinco segundos. Se rindió y concluyó que no había ninguna oferta. En ese ejemplo, la promoción solo estaba visible el 20% del tiempo.

El mismo texto enumera otros costes de la rotación. Quien tiene dificultades motoras pierde el clic antes de que el panel desaparezca. Quien lee despacio no termina el texto. Y lo que se mueve parece un anuncio, así que tiende a ignorarse.

La guía general (en inglés) acepta la rotación con cuidado. Si la usas, calcula el tiempo de cada cuadro según la lectura, con la referencia de tres palabras por segundo. En el móvil, la guía pide no girar: la página se vuelve más lenta, y la persona ya bajó cuando el cuadro cambia.

Lo que exige la accesibilidad

Las WCAG 2.2 (en inglés), las pautas de accesibilidad del W3C, incluyen el criterio 2.2.2, de nivel A. El contenido que se mueve solo, dura más de cinco segundos y aparece junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo. Un carrusel con rotación automática encaja justo en ese caso.

El patrón de carrusel de la guía de prácticas ARIA del W3C (en inglés) detalla lo mínimo para quien usa teclado o lector de pantalla. ARIA es el conjunto de atributos que describe un componente para la tecnología de apoyo. El patrón pide:

botones de anterior y de siguiente;
un botón para detener y reanudar la rotación, como primer elemento enfocable dentro del carrusel;
una rotación que se detiene cuando el foco del teclado entra en el carrusel y solo vuelve si la persona lo pide;
una rotación que se detiene mientras el ratón está sobre el carrusel.

El mismo patrón explica el riesgo para quien usa lector de pantalla. Si la diapositiva cambia sin aviso, la persona oye un elemento de la diapositiva 1, y la orden siguiente ya cae en la diapositiva 2, sin saber que el contexto cambió.

Cómo aparece en Le Biscuit

En el caso de Le Biscuit, la tienda de escritorio tiene cuatro bloques: la barra promocional, el carrusel de categorías, la cuadrícula de ofertas y el carrusel de más vendidos. La tienda vende miles de productos de hogar y estilo de vida, y el escaparate tenía que aguantar el calendario de merchandising sin romperse.

En ese diseño, las ofertas están en una cuadrícula, donde todas aparecen a la vez. Los carruseles quedan para conjuntos de elementos parecidos: categorías por un lado, más vendidos por el otro. Es la división que sugieren las fuentes de arriba. Lo que tiene que verse no depende de que un cuadro gire, y el carrusel guarda lo que la persona explora si quiere. Los bloques salen de un sistema de diseño de componentes ligado a los esquemas de contenido de VTEX IO, tema del texto sobre VTEX IO headless.

Dónde difieren las fuentes

Rotación automática. La guía general (en inglés) acepta que gire solo con un tiempo bien calculado y un ciclo continuo. El artículo de Jakob Nielsen (en inglés) dice que un carrusel solo debería cambiar cuando la persona lo pide.
Cuántos elementos. La guía general (en inglés) habla de cinco cuadros o menos. El artículo sobre móvil (en inglés) cuenta pasos hasta el último elemento, tres o cuatro, y acepta más elementos cuando cada página muestra varios.
El valor de la parte de arriba. La guía general (en inglés) cita como ventaja poner más contenido cerca de la parte superior de la página. La misma guía y el artículo sobre móvil muestran que mucha gente baja de inmediato y no ve nada más allá del primer cuadro.

El error común

El error común es usar el carrusel para acomodar todas las campañas que se disputan la portada. Resuelve la pelea interna y esconde el problema: solo el primer cuadro tiene una posibilidad real de verse. Decide antes qué contenido tiene que verse y dale un lugar fijo. Deja el carrusel para lo que la persona puede explorar si le interesa.