Usabilidad del carrusel: 10 consejos prácticos

Desde hace ya algunos años, el carrusel se ha impuesto como una excelente solución para destacar las principales actualidades de un website. El principio es el siguiente: mostrar en gran formato cierta información que van “girando” o pasando una tras otra. Es una buena forma de gestionar el espacio limitado de la pantalla y aumentar el impacto.

Esta demostrado que un gran formato atrae más la atención que un puzzle con informaciones que se hacen la competencia. Sin embargo la calidad de los carruseles que se ven por la red son muy diferentes. Algunas críticas ya son habituales y, los tests de usuario y el buen sentido me han llevado a proponer 10 recomendaciones.

 1. El ritmo

Es la crítica más habitual: “¡El carrusel gira muy rápido!”. A la inversa es muy raro. Normalmente los usuarios no tienen tiempo de leer ni la cuarta parte del texto que aparece acompañando a la imagen proyectada en ese momento. Un carrusel que gira muy rápido también suele molestar en la lectura de otros elementos de la página. A los usuarios nos les gustan los movimientos nerviosos y espasmódicos y, los efectos de animación extravagantes, que parecen excesivamente publicitarios.

Hay que intentar que el carrusel gire tranquilamente, entre 8 a 10 segundos de visualización suele ser lo más óptimo. Testar el ritmo del carrusel en varias situaciones para poder evaluar su fiabilidad.

2. Transición

En algunos casos, puede ocurrir que el usuario no se percate de que la información presentada ha cambiado. Un efecto de transición explícito, como por ejemplo un fundido encadenado ayudará a marcar más claramente el movimiento del carrusel.

La fluidez de la transición es importante. Por eso, el fundido encadenado es mi preferido: permite dejar un tema con suavidad y deslizarse hacia el tema siguiente. Una breve transición por negro también puede ser interesante. Por el contrario, evitar los efectos folclóricos del tipo “espiral” o “bienvenido a la feria de los efectos”.

3. El control en el usuario

El movimiento impuesto al usuario puede suponer una actitud “ofensiva” susceptible de generar frustración. La única forma de solucionarlo es el dar el control al usuario usando elementos interactivos intuitivos y explícitos.

El usuario tiene que poder:

• Parar la animación y ponerlo en pausa.
• Ir para atrás.
• Recorrer las diferentes diapositivas a su ritmo y a su manera.

Existen varias soluciones :

• Una barra de control indicando claramente el número de diapositivas disponibles y proponer un control de navegación. El botón “pausa” me parece particularmente valioso.

• Las pequeñas flechas laterales también es una buena manera de controlar la rotación de la información.

• Los pequeños redondeles se ha convertido en un estándar, aunque es verdad que es menos explícito. Si recurrís a ellos, supervisar que son los suficientemente visibles.

Lo que normalmente no es conveniente es colocar la barra de control dependiendo del fondo de las imágenes, ya que si el fondo es claro, los pequeños botones son apenas visibles.

Cuando un usuario selecciona una diapositiva para leer su contenido, el carrusel debería pararse. Muchos websites activan de nuevo el movimiento tras unos segundos de pausa, lo que suele generar frustración en los usuarios.

Una pasada del ratón sobre el tema mostrado debería fijar la diapositiva. Pensad que la mayoría de las veces los usuarios mueven el ratón sobre un elemento porque están interesados.

4. Número de diapositivas

Si las diapositivas son numerosas, la navegación se complica. Los temas que se encuentran al final de la lista pierden efectividad y el ciclo esta demasiado espaciado. Como se puede ver en el ejemplo, la selección se dispersa y los pequeños círculos “manchan” el contenido del carrusel.

Al contrario, por debajo de tres diapositivas, el carrusel pierde todo sentido. He llegado a ver carruseles con un solo tema, rotando sobre si mismo, absurdo. Detrás de un carrusel debe haber un trabajo de preparación de contenidos, una línea editorial bien definida.

¿Cuál es el número óptimo de diapositivas en un carrusel? Por lo que he visto, lo adecuado es tener entre 3 y 5 temas.

¿Que queremos meter más temas?, se podría solucionar combinando pestañas verticales con carrusel, como en el caso de Yahoo! Health, que permite tener una lista de 10 diapositivas.

5. La posición del carrusel en la página

El carrusel, como elemento del interfaz, se ha impuesto en el centro de la pantalla en la parte superior.

Cuando el carrusel esta posicionado por debajo del límite de visibilidad o en un lateral, pierde gran parte de su capacidad de impacto y provoca una experiencia de usuario confusa. No hay que olvidar que el objetivo del carrusel es de focalizar la atención del usuario.

6. La cantidad de texto

En 10 segundos, vuestros visitantes leerán de 20 a 30 palabras.

De las siguientes diapositivas, ¿Cuál es la más legible?

Es evidente que “Wrath of Heroes» no engancha también como “Truth About Beer”. Es mucho texto que obliga a un tamaño de letra muy pequeño, y también se produce una redundancia: “Wrath of Heroes” aparece dos veces, en el titular y el cuerpo del texto. En una espacio tan limitado, hay que evitar tanto las renuncias como los textos rimbombantes. Es como los snippet, el texto debe corto, claro y directo.

7. Elemento visual

Más vale una sola imagen impactante que un fotomontaje. Debéis recurrir a imágenes concretas que representen el contenido en lugar de recurrir a efectos de estilo.

Por ejemplo, es más visual el carrusel del site oficial de la Moncloa que el de la presidencia de la república francesa. La elección de una imagen única es mas potente que el realizar un mosáico. El hacer un puzzle es un contrasentido con respecto a la idea del carrusel, que busca precisamente recurrir al gran formato de imagen.

8. Claridad en el clic to action

A parte de la posibilidad de interactuar con la navegación del carrusel (ver punto 3), el usuario por lo general hacer clic en la zona de contenido para acceder al detalle de la información.

Mis recomendaciones:

• Preferiblemente a una sola zona de clic.
• Visualmente visible (suficientemente grande y con contraste)
• Ofreciendo una interacción explícita (un botón, una fecha…)
• Colocarlo preferente en la parte inferior derecha.

En el ejemplo de a continuación el botón «Todo los detalles» cumple con las buenas prácticas: con contraste, bien posicionado en el proceso de lectura, texto explícito, invitando al clic to action.

En cambio, en el siguiente ejemplo, el carrusel de Umicore no ofrece la posibilidad de interacción, haya o no la haya. Muy pocos usuarios estarán tentados de hacer clic. Texte tipo de presentación con el texto fundido con la imagen y sin ninguna zona de clic explícita se verá como un anuncio, aunque el contenido lleve a una determinada información.

9. Coherencia

De un tema a otro, pero también de un día o de una semana a la otra, es importante mantener una coherencia para crear puntos de referencia y la sensación de un entorno editorial controlado.

Esta coherencia se observa en diferentes niveles:

• Coherencia gráfica (tipografía, color, tratamiento de las fotos…)
• Coherencia funcional (zonas de interacción, zonas de clic, wording…)
• Coherencia editorial (naturaleza de los contenidos presentados, tono empleado…)

10. Tecnología utilizada

Existen varias formas de crear un carrusel : Flash, CSS, Javascript,… la elección de la tecnología afectará a varios factores:

• Accesibilidad al contenido desde los entornos más variados. Por ejemplo, un iPad no corre el Flash.
• Indexación por los buscadores. Numerosos carruseles tienen el inconveniente de integrar texto que no es reconocido como tal y por ello no indexable.
• Facilitar la edición por parte del cliente. Un carrusel en Flash con transiciones muy fluidas esta muy bien, pero los responsables de los contenidos son incapaces de “alimentarlo”, perdiendo agilidad y capacidad de reacción.

Para las empresas que no dispongan de un diseñador gráfico a mano, hay soluciones más sobrias o más predefinidas que pueden ser interesantes.

Espero que os haya gustado el post y, si os habéis quedado con ganas de más, ahí van unos enlaces sobre el tema de los carruseles:

• Carousels: 83 examples
• Carousel Usability
• 5 Big Usability Mistakes Designers Make on Carousels

Y si preferis que alguien os haga un estudio sobre vuestro website u os platee la posibilidad de un carrusel podéis contactar conmigo 🙂 .

Related posts:

7 consejos prácticos para estropear la relación con los clientes por email Consejos básicos de usabilidad web 50 consejos para mejorar la usabilidad de tu website 14 consejos para crear pestañas ergonómicas y favorecer la usabilidad web ¿Usabilidad o SEO? Esa es la cuestión