THE SLIDE SHOW IS OVER
Microcharlas UX
https://slides.com/juanmapd/theslideshow
juanmapd.com
@juanmapd
Uso y abuso de los elementos de carrusel
FUNCIONALIDAD
NOS PLANTEAMOS CUAL ES SU FUNCIÓN Y SI LA CUMPLEN
RECOMENDACIONES
SI LOS VAMOS A USAR, CUAL ES LA MEJOR FORMA
OMNIPRESENCIA
TODO EL MUNDO LO USA
OMNIPRESENCIA
El 100% de las plantillas más vendidas para cms en 2016 incluyen ejemplos con slideshow en portada
Fuente: Themeforest
El plugin más vendido en 2016 es SliderRevolution un plugin para realizar slideshows. (+2.5M)
Fuente: Themeforest
“una de las plagas que realmente está en la web ahora es el uso excesivo de carruseles y esta noción de que la página principal no puede tener una característica principal. Tiene que tener diez, y girar a través de ellas a un ritmo rápido que nadie puede leer, o tan lento que nadie sabe que están allí”
Jakob Nielsen (2014)
FUNCIONALIDAD
Los slides intentan resolver dos problemas universales de diseño:
La cantidad de contenido es mayor que el espacio para mostrarla
No se conoce la prioridad de los contenidos a mostrar
PROBLEMA: CTR BAJO
Las llamadas a la acción (CTA) en los Slides suelen tener un Click-through rate (CTR) muy bajo, más propios de un anuncio de display que de un contenido del site.
Solo un 1% de los visitantes hacen click en un slide
De ese 1% el 89% hace click en el primer slide
Fuente: Web Universidad de Notre Dame ND.edu
* En otra prueba con "autoscroll" los clicks aumentan a un 9% con una distribución del primer slide del 54%
Una image única es hasta 22 veces más efectiva
Text
Fuente: Conversionista.se
https://conversionista.se/okar-bildspel-pa-forstasidan-din-konverteringsgrad/
SlideShow con auto-rotación: CTR 1,96%
Imagen única: CTR 43%
Incremento del 23% de ventas al eliminarlo
PROBLEMA: USABILIDAD
Navegación poco clara.
Tiempo para lectura en animaciones.
Personas con dificultades de lectura, niños o segundo idioma.
Poco constráste, sin navegación por teclado, sin indice.
Tiempos de carga.
Pueden aumentar los tiempos de carga si se precargan al inicio.
Navegación por gestos.
No todos los slides usan navegación por gestos en dispositivos táctiles.
RECOMENDACIONES
Cuando usar un Slideshow:
Contar una historia (pasos de un proceso)
Presentar contenido sin llamadas a la acción (galería de imágenes)
Cuando conociendo sus limitaciones lo sigamos encontrando útil
MEJORAR LA USABILIDAD
Proveer de una guía de navegación: Miniaturas, números o botones.
Permitir parar "autoscroll", pausar al tener foco.
No colocar más de uno por pantalla visual.
Transiciones sencillas.
Suficiente contraste con los elementos de navegación.
MEJORAR LA USABILIDAD
Proveer de navegación por teclado.
Permitir pasar slide con gestos táctiles.
Permitir parar totalmente el "autoscroll".
Un correcto etiquetado.
Pocos Slides (3 o 4) y "lazy load" (carga progresiva).
CONCLUSIONES
Si usas un carrusel animado con la esperanza de que la gente vea una variedad de contenido, ten en cuenta que algunas personas solo verán el primer fotograma o ninguno en absoluto.
Considera usar un carrusel estático o mejor una imagen en lugar de un carrusel animado.
Asegúrate que los elementos de navegación son claros y de tamaño apropiado.
Cuestiónate si el slideshow es el elemento que necesitas...
Y sobre todo... PRUEBA Y MIDE!
The SlideShow Challenge
Coloca un código de seguimiento a tu slideshow para ver el CTR. Si es muy bajo ELIMÍNALO.
Haz un test A/B de tu página con slideshow contra una versión con imagen única. Si la imagen única gana a la suma de los slides, ya sabes... ELIMÍNALO.
Referencias:
Smashing Magazine
An Exploration Of Carousel Usage On Mobile E-Commerce Websites
Erik Runyon
Carousel Interaction Stats
Metricspot
¡GRACIAS!
https://slides.com/juanmapd/theslideshow
juanmapd.com
@juanmapd