Usabilidad

¿Qué tipo de paginación web es mejor, un scroll infinito o una paginación establecida? Puede que durante los últimos años hayas visto cómo diferentes tipos de páginas están implementando el scroll infinito en sus sitios porque aparentemente puede parecer elegante y con una buena experiencia de usuario. Sin embargo, debes saber que dependerá del tipo de página que tengas que sea más o menos efectiva, o incluso del tipo de comportamiento en el sitio web del usuario, sobretodo si es un ecommerce, provocando mejor o peor ux e incluso problemas de usabilidad. Veamos a continuación los distintos tipos.

 

Tipos de paginación web

Paginación numerada

¿Qué es una paginación numerada? Es la que tradicionalmente se ha utilizado durante muchos años en muchos sitios web, y de múltiples tipologías de página, desde ecommerce hasta buscadores. Básicamente lo que se muestra al final de la página de resultados es el número de páginas que incluyen resultados, de forma que el usuario puede ir clicando en las distintas páginas para navegar entre los resultados mostrados.

Por ejemplo, si nos fijamos en Amazon hoy en día, veremos que están mostrando este tipo de paginación:

 

También es algo que Google hace cuando muestra sus resultados de búsqueda:

 

Scroll infinito

¿Qué significa scroll infinito? El desplazamiento infinito se produce cuando el usuario llega al final de la página de resultados y, sin que tenga que interactuar con ningún elemento de la interfaz, se vuelven a presentar más resultados de búsqueda. Esta técnica lo que hace es actualizar la página con más resultados inferiores.

¿Quién está aplicando esta técnica actualmente? Por ejemplo Twitter:

 

O Facebook:

 

También en páginas de ecommerce como la de Nike:

 

Botón “Cargar más”

¿Qué es un botón “Cargar más” en una paginación? 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.

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

Claramente durante los últimos años se ha puesto de moda la inclusión de la paginación mediante scroll infinito. 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 tablets con el movimiento mediante el dedo de forma natural.

Sin embargo, ¿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? 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.

Ventajas de la paginación numerada

• 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 (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.

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

• No permite que el usuario se ubique en los resultados mostrados. 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. 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. 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, 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, 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, categorías navegables, contacto, 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? 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. 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.

 

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:

• 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

• Si el usuario quiere ver más elementos tiene que clicar en el botón.

 

Conclusión

Como hemos visto, dependiendo del tipo de página que tengamos 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, 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.

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 si obtenían mayor conversión. Muestro a continuación pantallazos del informe de mejoras de ux de Etsy (muy interesante).

(Ver diapositiva)

 

(Ver diapositiva)

 

Como se puede comprobar, los ratios de clicks y compras fueron peores cuando incluyeron el scroll infinito que cuando mantuvieron su paginación mediante el botón “Cargar más”.

Consejo: Si aún tienes dudas sobre qué tipo de paginación 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.