El impacto de los sliders sobre la usabilidad de un sitio web

Un slideshow es una presentación de una serie de imágenes, generalmente estáticas, que se muestran en un orden preestablecido. Su origen se remonta al siglo XVII, y desde entonces no han perdido vigencia. De hecho, es un recurso que encuentra cada vez más formatos y casos de uso. Por ejemplo, muchos sitios web muestran presentaciones de imágenes y texto para dar a conocer sus productos o los valores de la empresa. En este ámbito, se los conoce como sliders o carousels.

De acuerdo con la diseñadora Kara Pernice, los sliders suelen presentar las siguientes características:

  • Aparecen en la parte superior de la página de inicio.
  • Ocupan una sección considerable del área above the fold (aquella que se ve apenas se ingresa la página, sin necesidad de hacer scroll hacia abajo).
  • Disponen más de una pieza de contenido en el mismo lugar (aunque en realidad se muestra una sola a la vez).
  • Ofrecen algún indicador (o navegador) de que hay más de una pieza de contenido a mostrar, o diapositiva, dentro del carousel.
  • Contienen imágenes y una pequeña cantidad de texto en cada diapositiva.
  • Incluyen contenido sobre la marca o la misión de la organización, información importante o promociones.

Podemos usar sliders para representar distintas clases de datos:

  • Tours de producto (cada diapositiva nos muestra alguna característica del artículo).
  • Contenido nuevo y relevante (por ejemplo, noticias o nuevos productos).
  • Galerías de fotos.
  • Portfolios.
  • Series de productos.
  • Presentaciones tradicionales (por ejemplo, para explicar un proyecto).

amazon

La homepage de Amazon utiliza dos clases de sliders. El de arriba sirve para anunciar novedades. Tiene reproducción automática y botones redondos, que indican la cantidad de diapositivas. El de abajo muestra una serie de productos. No tiene reproducción automática, pero ofrece flechas de navegación laterales.

La mayor ventaja de los sliders es que permiten colocar varios bloques de contenido en el mismo lugar. De esta manera, se ahorra espacio y se evita que el usuario tenga que desplazarse hacia abajo. Además, podemos cargar los elementos a medida que el usuario los ve, evitando cargar todos los elementos juntos y mejorando el rendimiento de la página. Sin embargo, muchos expertos en usabilidad señalan varias desventajas:

  • Muchos usuarios tienden a confundir los sliders con banners publicitarios y los ignoran automáticamente.
  • En muchas situaciones, se avanza automáticamente a la siguiente diapositiva sin que el usuario haya tenido tiempo de leer la anterior. Esto es especialmente común entre usuarios con algún tipo de discapacidad.
  • En un estudio, el desarrollador Erik Runyon descubrió que solo el 1% de los usuarios cliqueaba en alguna de las diapositivas del slider; y, dentro de este grupo, el 84% lo hacía en la primera imagen. Es decir, la gran mayoría de los usuarios ignora los sliders, y el resto no lee más allá de la primera diapositiva. Otras investigaciones arrojan resultados similares.
  • Si el usuario avanza hacia una diapositiva que todavía no fue cargada por el browser, se encontrará con un espacio vacío.

Aun así, es posible sacarles el máximo provecho a los sliders si seguimos estas directivas:

  • En general, no incluir más de cinco diapositivas. Las galerías de fotos pueden llegar a incluir muchas imágenes, pero, en estos casos, la modalidad slider debe combinarse con otro tipo de controles (por ejemplo, una lista de miniaturas).
  • No usar reproducción automática. El usuario debe tener el control, a través de flechas laterales u otro elemento de navegación.
  • Ofrecer una pista visual que indique la cantidad total de diapositivas y cuántas vimos hasta el momento.

Muchos expertos desaconsejan por completo el uso de sliders. Si queremos utilizarlos, debemos hacer las pruebas necesarias para asegurarnos de que realmente sean visibles y le aporten al usuario la información que necesita.