19/05/2015

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

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce