¿Quieres un carrusel o acordeón para tu Web? ¿Seguro?

13 de febrero de 2013

Utilizar un carrusel de contenido siempre ha sido controvertido, pero lo que esta claro es que está de moda.  Recientemente el desarrollador Web de la Universidad de Notre Dame, Erik Runyon, ha publicado un artículo sobre el tema y ha puesto sobre la mesa datos reales de la eficacia de esta técnica. También Nielsen publicaba hace un mes otro artículo similar comparando la eficacia de los distintos tipos de carruseles.  Las conclusiones quedan bastante claras, y pueden causar más de un dolor de cabeza a un diseñador.

Existen dos tipos de carruseles: estáticos y automáticos. Los primeros requieren que el usuario interaccione de alguna manera para que se muestre el siguiente contenido, mientras que los segundos avanzan cada cierto tiempo y muestran el contenido nuevo sin que el usuario tenga que hacer nada. Cada uno de ellos tiene sus ventajas e inconvenientes, que pasamos a desgranar.

Carrusel estático

Carrusel automático

  • Tienden a ser ignorados si se asemejan a publicidad (además de la llamada “ceguera publicitaria” o “banner blindness”)
  • Al producirse movimiento de manera automática, los problemas de usabilidad aparecen:
    • Poco tiempo de lectura
    • Molestias y distracciones por un movimiento inesperado
    • Baja probabilidad de encontrar el elemento que se busca
    • Problemas de accesibilidad
  • Llama más la atención que un elemento estático; pero:
  • Si el contenido no es el adecuado, las molestias que causa harán que el usuario ignore el carrusel. Justo lo contrario de lo que se desea
  • Un 40% de los “clicks” se hace sobre el primer elemento, un 18% en el segundo, decayendo a un 11% en los siguientes.

¿Cómo se debe usar un carrusel?

En general no se debe usar un carrusel para mostrar contenido. Como bien dice Brad Frost, son más una chapuza para agrupar de manera desorganizada todo ese contenido que hay que poner en portada pero nadie es capaz de estructurar. Ambos tipos de carrusel tienen graves problemas; pero si insistimos (o el cliente lo hace) hay que evitar caer en los principales problemas detectados.

Quizá la recomendación más importante es que agreguemos a nuestro carrusel alguna herramienta de seguimiento (como Google Events) para poder analizar adecuadamente el impacto de nuestro carrusel en el usuario, y cómo las modificaciones que hagamos consiguen nuestros objetivos, o por el contrario han sido perjudiciales.

Hay que evitar a toda costa colocar el carrusel en zonas de columnas laterales, donde tengan un tamaño pequeño ya que se asemejaría a elementos publicitarios y serían ignorados. En segundo lugar, y por la misma razón su contenido debe ser directo, atractivo, y alejarse de la estética formal de un banner.

Si optamos por un carrusel automático, no debe tener más de tres elementos, y el tiempo de rotación debe ser el suficiente para una persona con lectura lenta y sosegada recorra su contenido. Además el contenido de los elementos del carrusel debe ser similar, seguir una línea de coherencia. No es correcto confundir al usuario poniendo una oferta de descuento, después una noticia, y finalmente un “síguenos en redes sociales”.

Los botones de navegación deben estar presentes y ser evidentes. Esto incluye las flechas laterales, no basta con los pequeños botones al pie. Hay que ser explícitos a la hora de informar al usuario de las posibles interacciones con el carrusel. Y si se puede, incluir respuesta a gestos táctiles.

¿Y los acordeones?

Un acordeón es un sistema de navegación que oculta un contenido hasta que se haga “click” en una cabecera para que se muestre. Se suele utilizar cuando el contenido es muy extenso, y el diseñador teme que el usuario rechace tener que hacer scroll más allá del límite de la pantalla (el llamado “the fold”).

El caso es que los nuevos dispositivos están especialmente preparados para hacer scroll: ruedas de ratón, “touchpads” multitáctiles y pantallas táctiles hacen que la navegación por scroll sea extremadamente cómoda. Es más, el usuario está muy acostumbrado a recorrer el contenido utilizando scroll, y le resulta muy cómodo porque es consciente en cada momento de la extensión total de la página, su posición relativa, y le permite realizar un recorrido rápido por el contenido.

Por esto, utilizar acordeones para mostrar porciones de contenido que se han ocultado puede tener más perjuicios que beneficios.

  • El usuario debe interaccionar con la página para poder consultar el contenido, no puede consultarlo rápidamente
  • El usuario desconoce su extensión real, y no sabe cual es su posición relativa
  • Cuando se expande un elemento más extenso que el alto de la pantalla el usuario pierde la noción de su posición dentro de la página

No todo es válido, claro. El uso del scroll se debe hacer con cuidado, ya que si el diseño de la página no es limpio puede resultar desconcertante. Y es que aunque parezca increíble, ¡los usuarios algunas veces hacen scroll!

Estudio de "eyetracking" sobre páginas Web

  • qrcode link