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

https://erikrunyon.com/2013/07/carousel-interaction-stats/

* 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

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:

¡GRACIAS!

https://slides.com/juanmapd/theslideshow

juanmapd.com

@juanmapd

The Slide Show is Over

By Juan Manuel Pérez Díaz

The Slide Show is Over

Microcharlas UX

  • 1,150
Loading comments...

More from Juan Manuel Pérez Díaz