UX, diseñando un slider, ¿qué no debo hacer?

por Omar Benyakhlef | Diseño Web, UX

Cualquier interacción realizada por un usuario será siempre más efectiva cuanto más se aproxime a un aprendizaje ya obtenido. Por ejemplo, el desplazamiento vertical se basa en el aprendizaje que tenemos todos de llevar años leyendo, por eso este desplazamiento funciona en general, siempre mejor que el horizontal.

El desplazamiento horizontal es el más complejo, se utiliza rara vez por eso mismo, aunque para mostrar información se lleva utilizando hace mucho tiempo en forma de sliders. La complejidad radica en que el movimiento en una página resta valor a cualquier otro mensaje de la página porque atrae la mirada, además, resulta extraño que haya tenido tanto tiempo de vida, porque está probado por numerosos estudios UX, que tienen una tasa de clics verdaderamente ridícula para todo el espacio en página que consumen, llevándose casi todos los clics el primer elemento del carrusel.

Si os fijais en la página de Apple, hace tiempo que prescindieron de esta fórmula, muestran esos mismo contenidos uno debajo del otro, siendo el resultado mucho más eficaz.

Sin embargo, dado que es muy difícil convencer a un cliente de no ponerlo, aquí van unas pautas para que funcionen de la mejor manera:

• No usar sólo el movimiento programado para acceder a cada diapositiva o banner, permitir que el usuario tenga la forma de controlar el slider accediendo al contenido que le interese. Lo ideal sería no dejar un movimiento programado, de tal modo que sea el propio usuario el que si está interesado en ver más ofertas sea él quien decida desplazarlas para verlas.
• En caso de movimiento programado, los intervalos han de ser lo suficientemente lentos, para dar tiempo a leer todo el contenido y por supuesto que no suponga un mareo en la página. La velocidad más rápida recomendada es de 10 segundos.
• El contenido de cada imagen ha de ser directo y breve, de tal modo que en ese tiempo al usuario le de tiempo de sobra para conocer todo el contenido.
• Los controles manuales han de ser siempre visibles y no perderse sobre las imágenes.
• El usuario tiene que conocer en todo momento la posición actual del slider, normalmente esto se muestra gráficamente con unos círculos huecos y uno macizo que indica el frame actual, es un sistema que de tanto verse ya se ha convertido en familiar y el usuario lo tiene perfectamente conocido, al igual que las flechas en ambos lados del slider.
• La animación entre imagen e imagen es mejor si la hacemos horizontal, de ese modo estamos dejando claro a cualquier usuario, que se trata de una lista en la que van a ir apareciendo más imágenes.
• Las animaciones han de ser sin fin, es decir, debemos evitar que después de llegar al último, regrese a toda velocidad al primero, eso produce estrés a la vista, es un movimiento muy brusco, por lo que después del último, mostraremos el primero con la misma velocidad que los anteriores.
• Aunque personalmente hago que toda la imagen sea enlace, si es recomendable que exista un botón que sea perfectamente identificable con mensajes claros y cortos, como «Más información» o «Comprar ahora».
• Hay que  tener muy presente, que la información que mostramos en desktop va a llevar más contenido que en móvil. Si simplemente lo escalamos, seguramente será tan pequeño que no se leerá, por eso es mejor optar por mostrar una versión especial para dispositivos móviles. Por este motivo, es casi más práctico crear los banners no como imágenes, si no como elementos HTML, de tal modo que cada elemento se escale y coloque en su lugar más óptimo.
• Imágenes a medio mostrar. Si os fijáis en los sliders que tienen en Netflix, HBO… Veréis que las imágenes se cortan, tanto el primer como el último elemento cuando ya estamos hemos interactuado, y cortada la de la derecha en la primera pantalla, de este modo sin necesidad de flechas ni círculos, queda claro al usuario que hay más detrás, entenderá que es un carrusel desplazable e interactuará sobre él.