Creando carruseles efectivos

Experiencia de usuario
25/7/2019
|
Samuel Gimeno Artigas

UX Matters ha lanzado un artículo sobre cómo crear carruseles efectivos.  

2019 07 25 blog
Carrusel en Aliexpress. Imagen de UX Matters

La interacción más usada habitualmente es el scroll. Sobre todo en dispositivos móviles donde el scroll es todavía más predominante que en escritorio. 

El scroll vertical es algo sobre lo que no se llama la atención de hecho, cuando se habla de scroll lo que todo el mundo entiende por ello es el scroll vertical. Porque por defecto en páginas web y en apps es el estándar el scroll vertical. Por lo que el scroll vertical es lo que mejor funciona para la gente. 

Cuando diseñamos contenido es importante recordar que la gente no hace siempre las cosas de la misma manera. Ellos consumen los contenidos leyéndolos pero la mayoría de las veces los escanean. Los ojos de la gente saltan de sección en sección. Si tú organizar poco o mal el contenido, la gente se perderá gran parte del contenido. 

El scroll horizontal está cargado de problemas cuando es el método primario de descubrir contenido, pero puede ser útil para un subconjunto de información. 

El usuario puede ser capaz de controlar el scroll directamente. Como método que se puede controlar individualmente, las áreas con scroll horizontal pueden funcionar bien. 

Banners de carrusel  

Casi cualquier página o landing page hoy en día tiene un gran banner en la parte superior que rota con un temporizador. Esto se llama un banner de carrusel o también se le denomina carrusel de imágenes. 

Los banners de carrusel permiten tener más contenido en una página por lo que los equipos de Marketing y Ventas no tienen que elegir qué elementos pueden colocar y pueden tenerlos todos. 

Es conocido que estos banners no funcionan, nadie hace click en ellos. Y si lo hacen, lo hacen en el primer elemento del carrusel. 

Ya que tus clientes te forzarán a usar banner de carrusel, te ponemos unos consejos para ellos: 

  • Considera no usar un temporizador automático, dales a los usuarios la posibilidad de controlar el scroll horizontal mediante unas flechas. 
  • La rotación automática debe ser suficiente para que los usuarios lean, entiendan el mensaje y puedan actuar en el banner. 10 segundos debe ser la velocidad más rápida a la que rote un banner. 
  • Asegúrate que el contenido del banner es breve y va al grano para que los usuarios puedan leerlo y comprenderlo antes de que el banner rote. 
  • Da controles individuales (unas flechas a los lados por ejemplo).
  • Indica la posición actual en el carrusel. Usar puntos funciona bien y los usuarios están familiarizados. Además en móvil los puntos son muy pequeños como para pulsarlos directamente. 
  • Da un CTA(Call to Action, llamada a la acción) claro, debe ser generalmente un botón.

Carruseles de categoría

Un montón de compañías multimedia desde Netflix o Amazon Prime Video, a la Google Play Store usan un patrón denominado carrusel de categoría. 

En un carrusel de categoría, cada uno de los elementos que se muestran como miniaturas es un título, una app u otro producto. Cada fila de imágenes de producto representa una categoría. 

Este método es útil para resolver el problema de mantener alerta a los usuarios del contenido, así como de explicar las categorías de páginas de inicio o landing pages. 

Este patrón funciona porque ordena la información orgánicamente. Aunque hay títulos que se aplican a cada fila, son normalmente innecesarios. Las miniaturas de producto muestran en un vistazo de que va la categoría, mucho mejor que un título. 

Aún así se pueden hacer fácilmente carruseles de categoría incorrectos, te damos unas pautas para realizarlos correctamente:

  • Asume control gestual, especialmente en móvil 
  • Los elementos a la derecha no deben de estar completos para que los usuarios asuman que tienen que hacer scroll horizontal. Esto es importante para que los usuarios vean que es un lista con scroll horizontal, y no una lista de mostrado de elementos. 
  • Asegúrate que el primer elemento y el último de la izquierda y la derecha se muestran parcialmente aunque el usuario haga scroll horizontal. Asegúrate que la anchura de los elementos se ajustan a diferentes tamaños de teléfono. 
  • Asegúrate que los elementos individuales son legibles y entendibles. Los servicios de libros y vídeo asumen que las portadas y carteles son legibles pero muchas veces no. Usa siempre una etiqueta de texto debajo de cada gráfico. 
  • El título de la categoría debe estar por encima del carrusel pero no debe hacer scroll. Si vas a poner iconos de categoría usalos con el título. 
  • El enlace a una página de categoría debe ser para aquellos que no puedan o no quieran usar el carrusel. Por lo tanto asegúrate de que listas los productos de una manera simple, fácil de usar y accesible. 
  • La posición en un carrusel de categoría no es importante, por lo que no pongas ningún indicativo de posición, ya que el usuario tienen el control. 
  • No hagas scroll automáticamente. Si diseñas el carrusel bien el usuario sabrá cómo utilizarlo. 
  • El carrusel debe usar scroll infinito para cargar pedazos de contenido y permitir a los usuarios ver la categoría entera. 

Los diseñadores de UX y los product managers deben velar por la calidad de los carruseles, ya sean banners de carrusel o carrusel de categorías, para ello deberán seguir las pautas que os hemos enseñado dependiendo del tipo de carrusel.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.