Me refiero a los grandes banners rotatorios que aparecen en las portadas de webs y tiendas online. Con multitud de efectos en las transiciones, con todo tipo de diseños, se usan para dar animación a la portada, para presentar ofertas, para explicar el contenido de la web o el propósito de la empresa.

El caso es que los banners rotatorios no funcionan bien. Tal como se usan habitualmente, son un desperdicio del espacio más valioso de la web (el inicio del contenido en la portada) y un factor que reduce la eficacia de la página. Algo que es ampliamente conocido en el mundillo de la optimización de conversiones (p.e. ver este artículo de Tim Ash, o este otro de Chris Goward), pero no tanto entre los diseñadores de webs.

¿Cuál es el problema con los banners rotatorios?

Hay varios problemas. Primero, el usuario no suele quedarse a mirar lo que va a salir en la próxima pantalla, de modo que lo que está más allá de la segunda pantalla raramente se ve. Si ponemos allí algún contenido importante, lo más fácil es que no lo vea casi nadie.

De modo que tenemos varias opciones. Podemos poner un contenido importante, y arriesgarnos a que pase desapercibido. Podemos poner contenido poco importante (pero entonces, ¿para qué ponerlo?). O podemos repetirlo fuera del banner, para asegurar que se pueda ver (y entonces, otra vez, ¿para qué ponerlo en el banner?).

Segundo, esos banners se perciben muy fácilmente como anuncios – son susceptibles a la “ceguera a los banners” (“banner blindness”): los usuarios ignoran cualquier cosa que parezca publicidad. Ni siquiera ven lo que se les está presentando, es como si no estuviera.

Tercero, las animaciones suelen padecer serios problemas de usabilidad. El usuario no tiene el control  de lo que está viendo (la imagen cambia cada 4 o 5 segundos, tanto si lo está leyendo como si no). Muchas veces cambia antes de haber tenido tiempo de leerlo. Los controles suelen ser difíciles de entender y de usar (si es que hay algún tipo de control). En estas condiciones, si el usuario tiene algún interés, puede perderlo enseguida.

Cuarto, si ponemos ofertas o promociones de productos en esos banners, es una lotería que acertemos precisamente algo que el cliente quiere. Normalmente es un desperdicio del mejor espacio de la web, que se debería dedicar a cosas más importantes (como explicar qué es lo que la web tiene para ofrecer).

Quinto, el peso conjunto de las imágenes puede ser muy grande. Suelen ser imágenes grandes, que se deben ver con una calidad decente (no se puede usar grandes ratios de compresión), y se ven 4 o 5 en el mismo espacio – enseguida suman varios cientos de kilobytes, incluso pueden llegar a megabytes. Puede ser un problema serio en móviles y tablets, donde se está pagando por cada KB descargado, y cuando se tiene una conexión lenta.

¿Por qué se usan tanto, si no son buenos?

Porque son “cool”, permiten lucirse al diseñador, y porque todo el mundo los usa. Y si todo el mundo pone uno, debe de ser que es bueno, ¿verdad?

Pero seguro que tienen alguna utilidad

Yo los encuentro útiles en circunstancias muy concretas:

1)      Para llamar la atención. Una animación espectacular, o con un diseño impresionante, hace que el usuario se detenga unos instantes. Puede que haga que un visitante que marcharía enseguida de la web se lo piense y decida mirar un poco más. Llamar la atención siempre está bien (aunque seguramente llamaría igual la atención el mismo contenido, pero estático, y sin comportar todos estos problemas).

2)      Para mostrar variedad en un espacio pequeño: trabajos realizados, productos y tecnologías disponibles…

3)      Para presentar un mensaje único y coherente: nueva colección de temporada, una campaña concreta (p.e. Navidad), un evento…

Hay una regla común a todos estos casos: es indiferente si el usuario mira toda la animación o no, o qué pantalla concreta, no importa si se pierde alguna, porque los mensajes realmente importantes de la portada no están dentro de la animación. El banner rotatorio se utiliza para crear una impresión, o para transmitir un mensaje único, el mismo en todas las pantallas.

Recomendaciones

La principal: si es posible, eliminar completamente la animación. Decidir cuál es realmente el contenido más importante de la página, y ponerlo fijo, sin animaciones (aunque con diseño, por supuesto).

Pero si se decide mantenerlo, habría que seguir estas reglas:

1)      Poner el mismo mensaje en todas las pantallas de la animación (que dé lo mismo qué pantallas vea el usuario, porque todas dicen lo mismo), o poner contenidos que creen un impacto positivo pero que no sean importantes en sí mismos.

2)      Poner fuera del banner rotatorio el contenido que realmente queremos que vea el usuario.

3)      Si hay tráfico suficiente, hacer pruebas A/B, comprobar si realmente vale la pena mantener el banner rotatorio.