Scroll infinito y usabilidad web

¿Qué quiere decir scroll infinito? El desplazamiento infinito se produce cuando el usuario llega al final de la página de resultados y en vez de una paginación clasica (1,2,3…), sin que el usuario tenga que interactuar con ningún elemento de la interfaz, se vuelven a presentar más resultados de búsqueda o de los resultados. Esta técnica lo que hace es actualizar la página con más resultados inferiores.

¿Quién está aplicando esta técnica actualmente en su web? Por ejemplo lo hace Twitter:

O Facebook:

También lo están empezando a usar páginas de ecoomerce como la de Nike:

¿Qué es un botón “Cargar más ” en una paginación de tipo infinito? Es un botón que se muestra al final de la página para que sea el usuario activamente el que solicite cargar más resultados sin mostrar una paginación, sinó que aparecen los elementos nuevos cargados.

Por ejemplo, este tipo de paginación la está utilizando el ecommerce de Staples.com:

Ventajas e inconvenientes de los distintos tipos de paginación clasiva vs scroll infinito

Claramente durante los últimos años en el diseño web se ha puesto de moda la inclusión de la paginación mediante scroll infinito cada día más. El hecho de que páginas tan conocidas y usadas como Facebook y Twitter lo utilicen probablemente haya tenido mucho que ver en su adopción en multitud de páginas; también por el uso de los smartphones y tabletas con el movimiento mediante el dedo de forma natural, ya que puede mejorar la usabilidad en dichos dispositivos.
Sin embargo teneos que preguntar, ¿el uso del scroll infinito es la mejor elección por ejemplo en un ecommerce?. ¿Cuál es el santo grial que todo ecommerce busca, cumple sus objetivos? estaremos de acuerdo en que es la conversión, muy por encima de cualquier otra razón. Veamos a continuación lo que dicen los datos y los distintos descubrimientos de los últimos años de uso.
Las Ventajas de la paginación numerada o clásica

Si el usuario está buscando algo concreto o particular, y no simplemente explorando o descubriendo, este tipo de paginación hace que se centre en los primeros resultados mostrados. Se ha observado que los usuarios la consideran lenta, lo que les disuade de seguir navegando un poco más por más productos. Esto provoca que pasen más tiempo valorando entre los resultados de la primera página, y es decisión del usuario seguir clicando en más páginas o resultados. ¿Es que acaso es una casualidad que Google, una de las empresas más innovadoras de los últimos años y que está testando todo en tiempo real con millones de usuarios, tenga este tipo de paginación y no la haya cambiado en 18 años?…da que pensar.
Si el usuario observa que existe un número determinado de resultados también será más fácil que pueda estimar cuánto le costará encontrar lo que busca.
Le da un punto de referencia respecto al resto de resultados. Si el usuario ha navegado entre las distintas páginas de resultados, aunque no sepa exactamente dónde estaba el resultado que le había llamado la atención sí que sabrá aproximadamente dónde se encontraba.
Evita la inacción por saturación. Es decir, como los resultados mostrados tienen un tope, el usuario tiene que tomar una decisión, o bien seguir viendo resultados o bien clicar en un resultado concreto. Esta última acción le acercará un poco más a la deseada conversión.

Desventajas de la paginación numerada

El usuario tiene que clicar en un elemento de la interfaz si quiere ver más información.
La siguiente página de resultados sustituye a la página que se estaba visualizando, con lo que se pierde la visualización de parte de los productos más relevantes.
En dispositivos móviles la paginación numerada puede provocar que los elementos de interacción estén demasiado cerca entre ellos, salvo que se resuelve adecuadamente para responsive. Por ejemplo, a continuación vemos una página de ecommerce con los elementos de paginación demasiado juntos (según las directrices de buenas prácticas para dispositivos móviles).

Ventajas de la paginación mediante el uso del scroll infinito

Si el objetivo del usuario es el descubrimiento y revisión por encima de la información, el uso del desplazamiento infinito cumple perfectamente este cometido. Con ello aumentaremos el tiempo de permanencia en la página web por parte del usuario. Las páginas que se basan precisamente en este tipo de contenido y comportamiento, como las redes sociales, tienen este tipo de paginación, ya que el usuario no iba a buscar específicamente un contenido concreto (o por lo menos no es el caso la amplia mayoría de las veces) sino que iba a “descubrir” nuevas actualizaciones y navegar entre el universo de contenidos. Ejemplos de páginas con esta paginación son por ejemplo Facebook, Twitter, Instagram, Pinterest, etc.

En dispositivos móviles el desplazamiento infinito es más intuitivo y práctico que la paginación numerada, ya que no tienes que buscar los elementos de paginación para seguir navegando.
Desventajas de la paginación mediante el uso del scroll infinito

No permite que el usuario se ubique en los resultados mostrados, ya que no tienes un índice de referencia. Cuando el usuario se desplaza hacia abajo para mirar los resultados, se vuelven a cargar más resultados, y si este había visto algún resultado interesante para él perderá su ubicación y si sin muchos elementos le costará encontrarlo. Además, si el usuario vuelve atrás y vuelve otra vez a la misma página se volverán a cargar los primeros resultados, pero no los que ya había explorado anteriormente, con lo que si había algún elemento o producto que le hubiera interesado tendrá que volver a encontrarlo porque no estará ubicado en una página concreta o lugar (como hubiera sucedido con la paginación manual).

Los tiempos de carga de la página son mucho mayores que con una paginación manual, ya que la consulta que se hace es mayor. Este aspecto es vital hoy en día, y más en dispositivos móviles, donde Google valora muy positivamente este punto, y su incumplimiento conlleva una drástica bajada en las posiciones naturales del buscador y penalizaciones, lo que provocará una menor conversión, menor imagen de marca (al no aparecer en los primeros resultados para palabras clave concretas), etc.

El pie de página se hace inalcanzable porque nunca llega a verse, ya que cada vez que el usuario llega al final se vuelve a cargar más contenido, con lo que al usuario no le da tiempo a clicar. Y como ya se ha indicado antes, en el pie puede existir información importante como ayuda, soporte, o información de contacto, categorías navegables, suscripciones, etc. Entonces, ¿cómo demonios resuelve por ejemplo Twitter y Facebook esta situación? Respuesta: Twitter no tiene pie de página. Facebook incluye los enlaces en el lateral del feed de contenido, integrado de forma natural con el tipo de layout que tiene (y que difícilmente es trasladable a otro tipo de páginas por su distinto layout). Así, para páginas que no sean redes sociales o similares, o que no tengan este tipo de contenido de descubrimiento, como por ejemplo un ecommerce, ¿están dispuestas a no tener pie de página? Ojo que todavia existen muchos usuarios que buscan deternimados contenidos en el pie de página, si la respuesta es afirmativa entonces tendrán que pensar cómo resolver la ubicación del resto de elementos que van a tener que incorporar en su página como el aviso legal, la política de privacidad y cookies, el contacto, la ayuda, enlaces a redes sociales, etc.

La barra de desplazamiento derecho del navegador se hace completamente irrelevante. La existencia de la barra de navegación en los navegadores es para darle una referencia al usuario acerca de cuánto contenido queda por visualizar verticalmente en la página, por no hablar que el menú superior puede quedarse demasiado alejado. Si cada vez que el usuario llega al final de la página se vuelve a cargar más contenido, inevitablemente el scroll de la barra de desplazamiento aumentará, con lo que su función se vuelve irrelevante, y lo que antes era útil ahora es inútil.

Pérdida de referencias con el uso del scroll infinito en la barra de desplazamiento vertical del navegador

Ventajas de la paginación mediante el botón Cargar más

El usuario está más predispuesto a centrarse en los primeros resultados, en lugar de ver contenido y más contenido como sucedería con el scroll infinito. Esto conllevará que la conversión podrá aumentar en la página.

Si informamos al usuario del número de resultados que tiene su búsqueda o selección, será más sencillo para él encontrar lo que busca. Por ejemplo:

El botón Cargar más en la paginación web

Damos referencias al usuario acerca de dónde están los resultados, y recoge lo mejor de ambas paginaciones (numerada y scroll infinito), ya que evita la sustitución de elementos de una página (que se da con la paginación numerada) cargando más resultados en la misma página, y evita a la vez el desplazamiento infinito y la desubicación del usuario que se produce con ella.
En dispositivos móviles no se genera un problema de interacción en la paginación, ya que el usuario sólo tiene que clicar en un botón.
Cuando el usuario llega al final de los resultados le hacemos escoger entre ver más resultados o considerar los que ya ha visto, con lo que conseguimos que por lo menos valore durante un tiempo más los resultados más relevantes y entrar en el detalle de uno, con lo que hacemos más probable la conversión.
El usuario puede visualizar el pie y decidir si quiere interactuar con algún elemento que puede ser importante para él (y para nosotros si consigue su objetivo).
No provocamos un problema de carga y peso en la página, como si ocurría con el scroll infinito.
Evitamos la saturación del usuario y no le abrumamos con demasiados resultados.

Desventajas de la paginación mediante el botón Cargar más

Conclusión final

Como hemos visto, dependiendo del tipo de página que tengamos, que objetivos queremos cumplir existen distintos tipos de paginación más optimizadas a nuestros objetivos y a los de los usuarios.

Si nuestra página está enfocada en ofrecer contenido de descubrimiento o fotográfico, de forma que el usuario no esté buscando nada en concreto, y tiene una tipología similar a una red social o bien muestra muchos resultados de exploración entonces la mejor paginación posible es mediante el uso del scroll infinito o navegación infinita one page.
Si nuestra página está dirigida a que los usuarios encuentren información específica sobre un elemento o producto, como por ejemplo un ecommerce, entonces la mejor paginación es mediante el botón “Cargar más”.

Uno de los ecommerce más conocidos de Estados Unidos, Etsy.com, hizo un experimento en su sitio web implementando el uso del scroll infinito con el objetivo de comprobar a través de análisis A B si obtenían mayor conversión.

La conclusión a la que llegan es que las ventas y los clicks objetivos se redujeron notablemente en la página de scroll infinito.
Consejo: Si aún tienes dudas sobre qué tipo de paginación quieres usar es mejor en tu página haz un test A/B y verifica cuál es la mejor solución. Nada como testear las cosas para comprobar qué es lo que mejor funciona en tu sitio.

2018-11-28T09:01:09+00:00

Comentame algo

Diseño web profesional

En levelupdesing hacemos realidad tus ideas, somos una agencia de artesanos del diseño web, cada uno de nuestros proyectos son tratados como lo que son, únicos y mimados hasta el último detalle.

Trabajos recientes

Últimas noticias