Photo by n0vi: http://www.flickr.com/photos/23343381@N08/2515112693/in/photolist-4QfBnX-5JSn82-6naJpg-6n5ff9-5QPNAk-6neTRE-6naGv4-6CWLpD-b9dxCT-9QRoqB-b9dxMF-7BR1Gs-h8HMX-9QRq44-7j2rPp-dd1Mr7-g1HMDj-6aQSGK-fJiK6F-dHF1s8-2gmrFa-ePXsk4-6pz3vT-9y6LVT-61RTi9-fJAPB5-fJj3Ck-fJAwyL-fJjkiF-fJAUt9-fJjiqg-fJjo9i-8HfxJ4-bvuZVE-4NwYAW-4NwYtS-4NwYxj-fJAXWj-fJiM8V-fJj5qn-fJjHdt-nfPrD-7YA6LR-7YDsPA-XtBwf-97CUwQ-4qPta-4qPnS-4qPwR-4qPuW-4qPre

Photo by n0vi

En el post anterior comentaba que el infinite scroll es una solución muy popular pero que no siempre está bien utilizada. Lo mismo sucede con los carousels. Están por todos lados y dejan contentos a todos los clientes: cuando en una homepage se quiere mostrar todo y no hay espacio suficiente, la solución es un carousel y todos felices.

El tamaño y la ubicación son las principales ventajas que tiene: es imposible de ignorar; está ahí al comienzo, a la vista de todos. El mayor problema es que muy poca gente los navega y visita los siguientes slides. Si lo que se quiere mostrar en el carousel es una diversidad de productos o servicios, entonces habrá que mirar las estadísticas y ver cuantos usuarios pasan del primer slide. Si no lo hacen, se quedarán con lo que ven en el primero solamente.

Como solución, el uso del Hero (imagen del mismo tamaño, pero estática) puede sernos útil. Esto es lo que plantea Jakob Nielsen en su post Designing Effective Carousels.

Lo más importante es saber cual es el objetivo del carousel y, una vez implementado, poder ver las estadísticas y ajustar a partir de allí. Eric Runyon nos muestra las estadísticas del sitio de la Universidad de Notre Dame (Indiana, EEUU) en donde el casi 30.000 visitantes (1% del total) hizo clic en el carousel. De todos esos clicks, el 84% lo hizo en el primer slide y el 16% restante lo hizo en los 4 slides siguientes (4% c/u). 84% vs. 4%. Una diferencia muy grande como para ignorar.

Brad Frost, en su post sobre carousels nos recomienda lo siguiente:

  • Que el contenido tenga la misma importancia
  • Que la navegación sea obvia
  • Cargar solo lo necesario
  • Mostrarle al usuario que hay más contenido
  • Que los carousels sean táctiles para mobile
  • Indicarle al usuario que puede navegarlo a través del tacto.

Les recomiendo los tres posts y si tienen más, podemos comentarlo.