UX: Scroll Infinito vs. Paginación

Image credits: smashingmagazine

“¿Debería usar Scroll Infinito o Paginación para mi contenido?” Algunos diseñadores aun viven el tira-y-afloja entre estos dos métodos al momento de decidir cual implementar en sus proyectos. Ambos poseen sus fortalezas y debilidades, y en éste articulo vamos a revisar algunas de ellas y ayudarlos en la decisión.

Scroll Infinito

Esta es una técnica que le permite a los usuarios scrollear a través del contenido sin una “línea de meta” a la vista. Esta técnica sencillamente refresca el contenido a medida que vamos navegándola. Por más tentador que suene, no es una “bala de plata” para todos los sitios o apps.

Scroll Infinito

Pros #1: Engagement de Usuarios y Content Discovery

Cuando usamos el scroll como método primario de explorar datos, posiblemente el usuario permanezca mayor tiempo en tu web, lo cual incrementa el Engagement. Con la popularidad del Social media, una gran cantidad de datos son consumidos; el scroll infinito ofrece una manera eficiente de navegar este océano de información, sin demoras.

Esta solución es casi obligatoria para interfaces de discovery (descubrimiento). Esto quiere decir cuando el usuario no esta buscando algo específico, sino que necesita ver una gran cantidad de items hasta encontrar algo que desee.

El océano de pines en Pinterest

Podemos medir los beneficios del scroll infinito también con el Feed de Facebook. Gracias a una suerte de acuerdo implícito, los usuarios saben que no van a poder ver todo en el feed, ya que el mismo es actualizado constantemente, y bajan. Con scroll infinito, Facebook da su mejor oferta en exposición de información.

El Feed de Facebook mantiene a los usuarios scrolleando constantemente para mostrar el contenido

Pros #2: Scrollear es mejor que clickear

Los usuarios tienen mejores experiencias al scrollear que al clickear. La rueda del mouse o las pantallas táctiles hicieron el scroll aún mas simple y rápido comparado con clickear. Para contenidos continuos y largos, como por ejemplo un tutorial, scrollear provee incluso una mejor usabilidad (artículo en ingles) que dividir el texto en multiples pantallas o pasos.

Izq.: Cada actualización de contenido requiere un click adicional y un tiempo de espera. Der.: simplemente scrollea para actualizar el contenido. Créditos de Imagen: http://bit.ly/2lAGIAw

Pros #3: Scroll es bueno para dispositivos Móviles

Mientras más pequeña es la pantalla, más largo es el scroll. La popularización de la navegación en móviles es otro gran promotor de los scrolleos largos. Los controles gestuales de los dispositivos móviles hacen esta acción aún más simple e intuitiva de usar. Como resultado, el usuario disfruta de una experiencia natural, sea cual fuere el dispositivo que esté usando.

Source: Dribbble

Cons #1: Performance de la Página y recursos del Dispositivo

La velocidad de carga de la página es “fundamental” para una buena experiencia de usuario. Múltiples estudios han demostrado que tiempos largos de carga se traducen en personas abandonando tu sitio o borrando la aplicación, lo cual resulta, obviamente, en tazas de conversion más bajas. Y esas son malas noticias para quienes usan un scroll infinito. Mientras más el usuario “baja” en una página, más contenido debe ser cargado. Como resultado, la performance de la página se va a degradar considerablemente.

Otro problema son los recursos limitados de un dispositivo. En muchos sitios con scroll infinito, en especial aquellos con muchas imágenes, los dispositivos con recursos limitados como un iPad pueden comenzar a “freezarse” por el gran numero de assets cargados en memoria.

Cons #2: El buscar un elemento y recordar su locación

Otro inconveniente con el scroll infinito es cuando los usuarios llegan a un determinado punto en el stream y no pueden “marcar” (bookmark) esa posición y volver luego. Si ellos abandonan el sitio, van a perder todo su progreso y deberán scrollear todo el camino nuevamente hasta ese punto. Esta inhabilidad de determinar la posición en el scroll no solo se traduce en molestias o confusion para el usuario, sino que degrada toda la experiencia.

En el 2012 Etsy invirtió bastante tiempo implementando un scroll infinito y luego descubrieron que la nueva interface no funcionaba tan bien como la antigua paginación. Las ventas se mantuvieron relativamente iguales, pero el Engagement decayó considerablemente — la gente había dejado de usar el “Buscar”.

Muestra de la versión de Etsy’s con scroll infinito. La version actual tiene paginación.

Tal como Dmitry Fadeyev destacó: “Los usuarios van a querer comparar resultados de la lista que acaban de ver, con otro que está quizás más abajo. El scroll infinito no solo atenta contra esta dinámica, sino que también dificulta la acción de subir y bajar especialmente cuando quieres volver en otro momento, y te vas a encontrar lamentablemente en la parte superior, viéndote forzado a scrollear hacia abajo, y esperar a que los resultados se vuelvan a cargar. Transformando el scroll infinito en una solución menos eficiente que la paginación tradicional en estos escenarios.”

Cons #3: Barras de Scroll irrelevantes

Otro punto molesto es que las barras de scroll no reflejan la cantidad de datos disponibles. Vas a scrollear felizmente asumiendo que estas cerca del final, lo que en sí mismo te tienta a continuar incluso un poco más, solo para descubrir que los resultados se duplicaron en el tiempo que te llevó llegar allí. Desde el punto de vista de la Accesibilidad, es malo romper esta convención con tus usuarios.

La Scroll bar debe reflejar la longitud real de la página

Cons #4: El Footer inexistente (o peor, inalcanzable)

Los Footers existen por una razón: ellos poseen información que el usuario necesita— si los usuarios no encuentran algo o necesitan información adicional, ellos van allí. Pero como el feed scrollea infinitamente, mas información es agregada al momento que el usuario llega al fondo de la página, empujando el footer fuera de su alcance, nuevamente.

Cuando LinkedIn introdujo el scroll infinito en 2012, los usuarios tenían un pequeño tiempo para ver el footer antes de cargar las próximas historias.

Los sitios que implementaron scroll infinito deberían hacer el footer accesible, siendo sticky o re-ubicando los links en una barra superior o sobre los lados.

Facebook movió todos los links del Footer (e.j. ‘Legales’, ‘Trabajo’) a la barra del lado derecho.

Otra solución es cargar el contenido a demanda utilizando un botón de Ver Más. De esta forma el usuario puede acceder fácilmente al Footer en lugar de tener que perseguirlo.

Instagram usa el botón ‘Load More’ para hacer el Footer más accesible.

Paginación

Este es un patrón de interface que divide el contenido en diferentes páginas. Si scrolleas al final de la misma encontrarás una línea de números —esos números son la paginación del sitio o app.

Paginación

Pros #1: Buena conversión

Esta opción es buena cuando el usuario esta buscando algo en particular en una lista de resultados, no solo scaneando y/o consumiendo el flujo de información.

Podemos medir los beneficios de la paginación con el ejemplo de Google Search. Encontrar el mejor resultado de la búsqueda puede llevar segundos, u horas, dependiendo de nuestro criterio. Pero cuando decides detener la búsqueda en el modelo actual de Google, puedes saber el número exacto de resultados arrojados y en qué página te encuentras.

Resultados de Google search.

Pros #2: Sentido de Control

Scroll infinito es como un juego que nunca termina — no importa que tan lejos scrollees, la sensación es que nunca se va a acabar. Cuando el usuario sabe la cantidad de resultados disponibles, ellos pueden tomar mejores decisiones, en lugar de disponerse a descubrir algo. De acuerdo al estudio (en ingles) de David Kieras sobre la Psicología en la interacción Hombre-Computadora: “Llegar a un fin provee un sentido de control”. Este estudio también clarifica que cuando el usuario obtiene opciones limitadas pero relevantes, le damos la posibilidad de determinar fácilmente si lo que está buscando se encuentra en ese grupo, o no.

También cuando los usuarios ven el total de resultados (siempre y cuando este no sea infinito) pueden estimar el tiempo que les tomará encontrar lo que ellos de hecho están buscando.

Pros #3: Posición de los items

Teniendo una interface paginada el usuario puede recordar una posición mental del elemento.

Con paginación los usuarios están en control por la posibilidad de ir y volver entre páginas.

La Paginación es buena para sitios de ecommerce y apps mobile. Cuando el usuario compra en línea, quiere poder volver a un sitio que dejó y continuar comprando.

El sitio MR Porter utiliza también paginación

Cons: Acciones extras

Para continuar en la próxima página en el modelo de paginación, el usuario debe encontrar el link de target (e.j. “Siguiente”) , llevar el puntero del mouse hasta allí, clickearlo, y esperar a que el destino sea cargado.

Clickear para más contenido.

Un problema común con la paginación es que muchos sitios muestran una muy escasa cantidad de elementos, amplificando la necesidad de navegar entre páginas para satisfacer la búsqueda. Siendo muy sencillo de resolver tan solo con ampliar dicha cantidad.

Cuando usar Scroll Infinito/Paginación?

Hay pocas instancias donde el scroll infinito es efectivo. Una de ellas es cuando el sitio o la app muestra contenido generado por usuarios (Twitter, Facebook) o contenido visual (Pinterest, Instagram). La Paginación es una opción segura y efectiva para sitios y apps que intentan satisfacer actividades orientadas a objetivos (e.j. ventas, encontrar un elemento, etc.).

Google, por ejemplo, ha sabido mezclar los dos patrones de manera excelente. Google Images (Imágenes) utiliza Scroll Infinito ya que de este modo el usuario puede escanear rápidamente los resultados. Leer resultados siempre resulta en tiempos muchos más largos y por esta razón Google Search mantiene la tradicional técnica de Paginación.

Conclusión

Debemos evaluar todos los Pros y Cons al momento de definir qué técnica dispondrá nuestro contenido. La elección depende del contexto de tu diseño y como el contenido es generado. Para recordarlo fácilmente, scroll infinito para cuando el usuario no está buscando nada en particular, paginación funciona perfectamente cuando los usuarios están buscando un item específico y cuando la posición de los elementos y cómo el usuario los ve es relevante.


Juan Carlos Ferraris

Written by

UX and Product Design Head @redbeestudios - Idea Amplifier and Creator of Things @venturebees

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade