Pautas de usabilidad para mejores carruseles UX

linkedin.com/pulse/usability-guidelines-better-carousels-ux-vitaly-friedman

Vitaly Friedman

Vitaly Friedman

Fecha de publicación: 17 de ago de 2023

Seguir

Este capítulo es parte de  Patrones de diseño de interfaz inteligente   🍣

(curso de video de 9
h) y vive la capacitación de UX del 8 de septiembre al 6 de octubre.  Vista previa gratuita .

Los carruseles  no tienen buena reputación, y con razón. Tienen muchos problemas de
accesibilidad, a menudo exhiben bajas tasas de clics y la gente suele desplazarse por ellos.
Agregue pequeños puntos de progreso con pequeñas áreas de toque, etiquetas apenas
visibles y un poco de paralaje, y tendrá un patrón de diseño bastante  problemático  en sus
manos.

1/16
Teatr Lalka (https://teatrlalka.pl), un teatro de marionetas de Polonia, con un diseño de carrusel creativo y
dinámico.

¿Los usuarios realmente usan carruseles?

Esa es una pregunta muy justa y, a menudo, la respuesta será:  no realmente . De hecho, es
casi como si algunos usuarios fueran  alérgicos a los carruseles . Es común ver a las
personas notarlos, solo para asegurarse de que puedan descartarlos durante toda la sesión.
No mucha gente conecta nada relevante con los carruseles, ya que la mayoría de las veces
el contenido oculto en el carrusel es irrelevante o promocional, o molesto y que distrae.

Sin embargo,  los carruseles pueden ser bastante efectivos , especialmente cuando
queremos  resaltar características u opciones clave , pero nos falta espacio para
mostrarlas todas a la vez. Funcionan bien cuando los usuarios quieren explorar muchas
opciones, navegar a través de reseñas, sumergirse en galerías de imágenes o examinar de
cerca las características del producto. En tales casos, las tasas de clics suelen ser
relativamente altas:  los usuarios avanzan en los carruseles a una tasa aproximadamente
lineal .

2/16
En los carruseles efectivos, las interacciones de avance de las diapositivas siguen una tasa exponencial
de decaimiento.

Los carruseles funcionan cuando:

los usuarios están explorando una opción adecuada , o eligen un plan de precios,
los usuarios navegan a través de testimonios , reseñas, productos o sus
características,
los usuarios estudian las galerías de imágenes de productos en las páginas de
comercio electrónico para comprender los detalles de un producto que les interesa
comprar,
los usuarios desean obtener una vista previa de una experiencia que desean
reservar (hotel, vacaciones, museo, teatro, restaurantes), en los casos en que desean
ver imágenes o videos grandes en pantalla completa y al mismo tiempo poder navegar
entre ellos de un lado a otro,
los usuarios exploran los detalles del contenido, como las tarjetas en el móvil,
deslizando el dedo hacia la izquierda y hacia la derecha.

En otras palabras, los carruseles funcionan cuando proporcionamos contenido

adicional dentro de un contexto específico y relevante. Desafortunadamente, la mayoría de
las veces, las formas en que diseñamos los carruseles van en contra de la usabilidad y la

3/16
accesibilidad, lo que hace que los carruseles sean apenas utilizables. Exploremos algunas
técnicas y estrategias sobre cómo diseñar mejores carruseles .

1. Reemplace los puntos de progreso con etiquetas

Estamos muy acostumbrados a  los puntos de progreso  en carruseles, pero hay algunas
buenas razones por las que podríamos querer evitarlos. A veces, los usuarios intentan
desesperadamente hacer clic en ellos y, debido a que estos puntos son increíblemente
pequeños, la navegación es lenta y requiere mucha precisión. Esto da como resultado una
combinación febril de clics (o toques) de rabia, errores y saltos inesperados de un lado a
otro.

Stripe Press (https://press.stripe.com) incluye líneas horizontales cortas, cada una de las cuales
representa una sección del sitio. Sin embargo, las etiquetas solo aparecen al pasar el mouse por encima.

Los puntos de progreso  no son una forma particularmente efectiva  de atraer a los
usuarios para que hagan clic en el carrusel. No se comunican mucho; definitivamente no es
lo que representa cada punto, ni lo que los usuarios deberían esperar mientras se deslizan
por el carrusel.

4/16
Una buena manera de fomentar la navegación a través del carrusel es agregarle más
contexto. Podemos reemplazar los puntos sin vida con etiquetas,  miniaturas  y vistas
previas de videos. Ejemplos interesantes de esto en acción están en  Creative Dinamarca  y 
Weber Grill Original , con destacados videos clave y fotos correspondientes.

5/16
Además, podemos usar filtros, pestañas y  botones anterior/siguiente  que permiten a los
usuarios elegir el contenido en el carrusel, tal como lo hicieron los diseñadores de 
Reuters.com  .

2. Botones de grupo Anterior/Siguiente

En diseño queremos minimizar los errores y percances en la medida de lo posible. Al mismo
tiempo, queremos acelerar la navegación dentro del carrusel en la medida de lo posible, y
esto significa minimizar la distancia entre acciones opuestas: en nuestro caso, avanzar  y
retroceder .

6/16
 En Ritual.com, los botones anterior/siguiente siempre están agrupados.

Un patrón útil es  agrupar flechas  en el carrusel. Esto permite a los usuarios moverse en
ambas direcciones rápidamente, sin tener que volver a calibrar el puntero o los dedos, o
desplazarse por los elementos.

7/16
En el escritorio, agrupe los botones  sobre el carrusel  (todavía  Ritual.com  en el ejemplo
anterior). Si los botones se encuentran en las secciones del carrusel, podría provocar
errores de clic y saltos accidentales a páginas incorrectas. Y si los botones se encuentran
debajo del carrusel, es posible que no se noten a tiempo, especialmente si las rebanadas
del carrusel son altas.

8/16


En dispositivos móviles, agrupe los botones  debajo del carrusel . De lo contrario, cada vez
que un usuario interactúe con los botones, especialmente cuando están separados por los
bordes del carrusel, cubrirá el contenido del carrusel con los dedos. Y cuando se centra
verticalmente, los usuarios pueden terminar con muchos toques de ira.

3. Utilice miniaturas o iconos para fomentar los clics

Cuanto más contenido relevante podamos mostrar para alentar a los usuarios a actuar en
consecuencia, mayores tasas de clics deberíamos esperar. En lugar de usar etiquetas, 
Weber Grill Original  usa miniaturas para resaltar sus recetas. Esto probablemente
funcionará mejor que los puntos sin vida.

9/16
 Philips.de, confiando en los íconos para su carrusel.

Más una navegación con pestañas que un carrusel:  Philips.de . Los íconos requieren
menos espacio, pero pueden ser misteriosos si no se eligen correctamente. Las etiquetas de
texto pueden ser un buen complemento para el diseño y, de cualquier manera, deben
comunicarse a los usuarios de lectores de pantalla. Desafortunadamente, el carrusel avanza
automáticamente y no hay forma de pausarlo o detenerlo, incluso cuando se desplaza o se
enfoca en los cortes individuales.

4. Evite el avance automático o agregue al menos 5 a 7 segundos de

retraso
Los carruseles de avance automático  se moderan con la paciencia de los usuarios y sus
prioridades. Al igual que hemos aprendido a ignorar los carteles publicitarios, tendemos a
descartar cualquier cosa que parpadee, se mueva o nos distraiga. Esto es cierto
especialmente en los dispositivos móviles donde los usuarios a menudo se desplazan más
allá del carrusel demasiado rápido como para darse cuenta de que en realidad está
avanzando automáticamente. Cualquier tipo de movimiento inesperado rara vez atrae más
atención al carrusel, sino que  desvía la atención  , tanto en dispositivos móviles como en
computadoras de escritorio.

Sin embargo, si  necesita absolutamente  el avance automático para dibujar y mantener el
interés del usuario, también podemos hacer que funcione, con un retraso sólido de  5 a 7
segundos para cada diapositiva .

10/16
 7h34.fr con un carrusel de avance automático y un retraso decente de 5s.

7h34 , un encantador sitio web de una agencia de diseño con un carrusel circular que gira
en el sentido de las agujas del reloj. Los usuarios también pueden desplazarse hacia arriba
y hacia abajo para saltar a través de las porciones del carrusel. El retraso entre el avance
automático es de alrededor de 5 segundos.

11/16
 Google Pixel Buds con un carrusel de avance automático y cada diapositiva se completa durante 6
segundos.

Una forma de mejorarlo es establecer las expectativas correctas desde el principio, para que
los usuarios tengan una idea de cuándo se debe esperar la próxima diapositiva del
carrusel. Google Pixel Buds , por ejemplo, avanza automáticamente y contiene etiquetas. El
indicador de progreso se llena de forma gradual y lenta, con un retraso de 6 s para cada
diapositiva, lo que brinda tiempo suficiente para actuar en la diapositiva actual, desplazarse
hacia abajo o abandonar la página por completo, sin ser interrumpido en el camino.

12/16
 Timeless.ee utiliza una transición en los títulos de sus trolebuses estonios.

Timeless.ee  utiliza los nombres de los trolebuses que se completan a medida que el
carrusel avanza automáticamente. Este último recorre los trolebuses retro en Estonia
disponibles para reservar o alquilar. Como en el ejemplo anterior, la velocidad de llenado
indica cuándo se debe esperar la próxima diapositiva. Para algunos nombres, lleva un poco
más de tiempo completar el nombre, pero siempre es más de 5 segundos.

Como Christian Holst  ha escrito anteriormente :

“La cantidad de texto en una diapositiva debe determinar en gran medida la duración
de la visibilidad de una diapositiva. Si es solo un encabezado corto, de 5 a 7 segundos
resultó ser apropiado en nuestras pruebas, mientras que se necesitaron duraciones
más largas para diapositivas con más texto. (Nielsen Norman Group recomienda 1
segundo  por cada 3 palabras  para diapositivas con rotación automática). Una
consecuencia de esto es que es posible que deba asignar duraciones únicas a
diapositivas individuales, mostrando algunas diapositivas más largas que otras”.

5. Incluya siempre un botón de "Pausa" para los carruseles de

avance automático 
Si es absolutamente crítico incluir un comportamiento de avance automático por una razón u
otra, considere qué objetivos está tratando de lograr el carrusel. Hay muchas posibilidades
de que un carrusel no lo ayude a atraer buenos clientes potenciales o clics efectivos. Sin

13/16
embargo, si es absolutamente necesario, asegúrese de incluir   también un botón de
"Pausa" , para que los usuarios tengan la opción de pausar la rotación automática.

Walmart.com usa un carrusel que avanza automáticamente en unos pocos segundos, pero no está claro
cuántos productos están disponibles o se mostrarán.

Un gran ejemplo de la implementación es  Walmart.com  (arriba). El carrusel avanza

lentamente, pero solo si los usuarios no actúan en ninguna de las imágenes . Lo más
importante es que hay un botón de "Pausa" visible tanto en el móvil como en el escritorio y
también hay un estado de enfoque/activo en el control deslizante. Desafortunadamente, es
un poco difícil decir cuántos artículos hay disponibles en el carrusel. Los números
probablemente ayudarían aquí.

No hace falta decir que  la rotación automática debe detenerse por completo cuando un
usuario interactúa  con una porción del carrusel, ya sea al pasar el mouse, enfocar o tocar
las opciones disponibles. Interrumpir la exploración de elementos seleccionados es una
forma segura de alejar a los usuarios del carrusel para siempre.

Terminando
Al diseñar su próximo carrusel, considere  reemplazar los indicadores de progreso  con
etiquetas o miniaturas. Indica el segmento actual del carrusel. Incluya y agrupe los botones
anterior/siguiente y muéstrelos encima o debajo del carrusel. Evite el avance automático si
puede, y si no puede, agregue un retraso de 7 segundos y permita a los usuarios pausar la
rotación.

14/16
 El restaurante 913 (https://neufuntrois.com) ofrece una pista de información para las diapositivas
anterior/siguiente.

Se publica un artículo mucho más detallado sobre los carruseles en Smashing Magazine,
así que échale un vistazo si estás interesado.

Próximamente:  Capacitación de experiencia de usuario en vivo de diseño

de interfaz  (8 de septiembre al 6 de octubre)

15/16
¡Remanga tus mangas y mejora tus habilidades de UX! Exploraremos las trampas de la
usabilidad, los KPI de diseño y los patrones de diseño en la  próxima capacitación de UX en
vivo . ¡Con 8 sesiones en vivo, desafíos de UX de la vida real, comentarios personales 1: 1 y
certificación UX para todo su arduo trabajo! Ah, también puedes obtener  solo una biblioteca
de videos . Vista previa gratuita .

¡Muchas gracias por su apoyo, a todos, y feliz diseño! 🎉🥳

— Vitaly

16/16