¡Deja de construir sitios web con scroll infinito!

TL; DR: Aunque infinite scroll proporciona una solución en algunos casos, puede ser menos que ideal para los usuarios.

El desplazamiento infinito puede ser desorientador, incontrolable y puede causar estrés a los usuarios.

En este artículo, explicaremos por qué necesita dejar de crear sitios web con desplazamiento infinito. Pero para empezar, veamos un breve historial de desplazamiento.

Un breve historial de desplazamiento

Para entender qué es realmente el desplazamiento, veamos de dónde viene el término desplazamiento.

pergamino (n.): c. 1400,»rollo de pergamino o papel»

Los rollos se usaban originalmente para cuando la información se volvía larga (como el contenido religioso). Tanto contenido se volvió difícil de manejar, leer y escribir.

Cuando las computadoras llegaron a nuestras vidas, todavía necesitábamos una forma de navegar a través de grandes piezas de contenido.

La evolución de los pergaminos en computadoras

Líneas (y columnas)

En los primeros años de Internet, los diseñadores de experiencia de usuario inventaron/exploraron muchas formas de paginar/desplazar el contenido. Antes de que la web fuera popular, estábamos desplazando líneas en nuestra pantalla.

Los desplazamientos horizontales hicieron del desplazamiento una herramienta no solo para leer el contenido, sino también una forma de navegar en la pantalla del ordenador.

Windows (no el sistema operativo)

El uso de pergaminos para navegar por la pantalla animó a las personas a crear ventanas. Al usar Windows, podrás ver varias piezas de contenido a la vez.

Páginas web

El desplazamiento resuelve un problema muy fundamental que tenemos mientras navegamos por páginas web. Sin embargo, el desplazamiento puede causar muchos problemas para los usuarios y puede afectar negativamente la experiencia del usuario. Echemos un vistazo más de cerca.

Las experiencias inventadas para navegar por páginas web

Voy a intentar definir cómo los desarrolladores y diseñadores crearon experiencias para navegar por los usuarios en sus páginas web.

Comencemos por aprender algunos sistemas de paginación de back-end:

Paginación basada en desplazamiento

Este es el sistema de paginación más conocido. En esta técnica, primero, tenemos que encontrar cuántos elementos tenemos que paginar:

-- All posts countSELECT COUNT(*) AS total FROM posts

Después de contar todos los elementos, tenemos que calcular las páginas. Supongamos que mostraremos 10 elementos por página:

-- First page itemsSELECT * FROM posts LIMIT 10

Y si queremos saltar a la página 3, necesitamos saltar primero los elementos 30 usando OFFSET:

-- Third page itemsSELECT * FROM posts LIMIT 10 OFFSET 30

Y enviaremos la información de paginación al cliente de la siguiente manera:

{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": }

Pros y contras de la paginación basada en desplazamiento

• 👍 Bueno: Fácil de saltar a cualquier página
• Good Bueno: La experiencia del cliente es más gratuita
• Bad Malo: Problemas de rendimiento
• Bad Malo: Los elementos duplicados se pueden mostrar si los cambios de datos

La paginación basada en el cursor

El big data dificultó el cálculo del recuento de tablas, ya que está en constante crecimiento (piense en Twitter). Por lo tanto, a los desarrolladores se les ocurrieron técnicas más nuevas para paginar los datos: cursores.

Cada fila debe tener un cursor único. No tiene que contar toda la tabla, lo que hace imposible conocer el recuento de páginas real:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDER BY id DESC LIMIT 11

Supongamos que cada publicación tiene un campo de cursor único (o su ID en este ejemplo) para ayudar a la paginación. El cliente tendrá la información de paginación de la siguiente manera:

{ "pagination": { "next": 1234 // extra item's ID (cursor), null if end of data. }, "items": }

Y puedes pedir la siguiente página usando el cursor:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Pros y contras de la paginación basada en el cursor

• 👍 Bueno: Más rendimiento, sin recuentos de tablas
• Good Bueno: Mostrar elementos duplicados no es posible si alguien inserta una fila en el centro de la tabla
• Bad Malo: Imposible saltar a cualquier página
• Bad Malo: El cliente no es libre con la experiencia, la página total y la página actual no se calculan

Echemos un vistazo a algunas técnicas de navegación.

La experiencia: basada en clics

La técnica: basado en desplazamiento o basado en cursor

Esto se usa principalmente para navegar por blogs. Esta es la versión más antigua de desplazamiento infinito. Usando este enfoque, el usuario puede no saber dónde termina el contenido.

Paginación numerada

La experiencia: basada en clics

La técnica: basada en desplazamientos

Este es el tipo de navegación más utilizable (según mí). Utiliza paginación basada en desplazamiento que le permite saltar a la página que desea, o ir al final o al principio con un solo clic.

Google utiliza este tipo de navegación en los resultados de búsqueda:

Cargar más

La experiencia: basada en disparadores de clic

La técnica: basada en el cursor: también puede estar basada en desplazamiento, pero sería incómodo

Esta es una de las técnicas de paginación más nuevas, y también utiliza la versión anterior de infinite scrolls.

En el ejemplo anterior, el usuario hace clic en el botón» Cargar más » para ver más contenido.

Rollos infinitos

La experiencia: basado en desplazamiento

La técnica: basado en cursor – también puede estar basado en desplazamiento, pero sería MUY incómodo

Los rollos infinitos son la experiencia más reciente de las técnicas de paginación basadas en cursor.

Hugh E. Williams afirma que inventó infinite scroll en 2005 en Microsoft.

Metafizzy también creó una herramienta para ayudar a los desarrolladores a crear pergaminos infinitos.

¡Deja de crear sitios web con scroll infinito!

Hasta esta sección, hemos revisado cómo llegamos aquí. Ahora hablemos de por qué aquí apesta.

Encontrar pie de página

El pie de página es una unidad muy básica de anatomía de la página web, al igual que un encabezado. Los sitios mantienen información detallada y enlaces en el pie de página, como números de teléfono, direcciones y enlaces de ayuda y soporte. Si los usuarios están buscando esta información detallada, en su mayoría se desplazan hacia abajo para encontrar el pie de página.

Con infinite scrolls, los usuarios pueden tener dificultades para encontrar el pie de página. El desplazamiento infinito hace imposible encontrar el final de la página. No poder llegar a la parte inferior de un sitio web puede estresar al usuario (lo cual no es genial).

Los sitios con una fuente infinita (como Twitter) resuelven el problema del pie de página poniendo esta información y enlaces requeridos en la barra lateral. La barra lateral es una solución a este problema, pero no es buena. El pie de página debe permanecer en el pie de página.

No use desplazamiento infinito si no tiene una línea de tiempo o fuente

Las aplicaciones de redes sociales funcionan con el tiempo. La intención de los usuarios es navegar por el pasado. En este caso, el desplazamiento infinito facilita la navegación. Aquí, el desplazamiento infinito es bueno para el rendimiento, especialmente en dispositivos móviles.

Pero si tiene un sitio web de comercio electrónico, noticias, revistas o blogs, y la intención del usuario es moverse por los artículos o artículos, el desplazamiento infinito se convierte en una pesadilla para ellos. En una lista basada en la línea de tiempo, la mayoría de las personas no buscan una fecha o un momento único. En las listas basadas en elementos, el usuario desea encontrar un elemento. Los pergaminos infinitos hacen que sus artículos sean casi imposibles de encontrar para sus usuarios.

Dar a los usuarios más control

A los usuarios generalmente no les gustan las interfaces de usuario cuando sienten que no pueden controlarlas.

Un evento de desplazamiento no es muy intencional para hacer algo. Las personas navegan por la página y, si quieren llamar a una acción, en su mayoría hacen clic o tocan (lo que se conoce como disparadores). Informan a la IU sobre su decisión. Pero el desplazamiento se activa sin ninguna decisión.

Los pergaminos infinitos hacen que las páginas sean menos controlables para los usuarios. Los usuarios también pueden encontrar fallos de salto.

En lugar de desplazamiento infinito, coloque un botón «cargar más», que es un disparador. Esto le dará el control al usuario. (Preferiría paginación numerada de estilo antiguo, pero asumimos que usamos paginación basada en el cursor en este momento).

Permite a los usuarios ir a donde quieran

Las personas navegan entre páginas, marcan algunas de ellas, comparten páginas con sus amigos, etc.

Sin embargo, los pergaminos infinitos no pueden mantener el estado por su diseño. Los usuarios no pueden compartir su estado actual, lo que también significa que no puede realizar un seguimiento de las acciones de los usuarios mediante herramientas de análisis.

Si su técnica de paginación de back-end está basada en el cursor, es casi imposible permitir que sus usuarios vayan a cualquier lugar. Si tiene un sitio web de comercio electrónico, dé a los usuarios el control para navegar a los productos que desean.

Además, si tiene una funcionalidad de «ordenar por» en su anuncio, debe mostrar al usuario una paginación. En una lista ordenada alfabéticamente, no debes obligar a los usuarios a desplazarse hacia abajo hasta productos que comiencen con K. Se volverán locos con esta experiencia.

Debe permitir que los usuarios vean dónde están. Los usuarios se desplazan durante un tiempo, y debido a que es un diseño sin estado, no saben cuántas veces se cargó la «página siguiente». Cuando actualicen la página, se restablecerán hasta la página original. El usuario tendrá que desplazarse hacia abajo para encontrar dónde estaba antes.

Conclusión

Los pergaminos infinitos son agradables en algunos casos, pero generalmente no son solucionadores de problemas, sino creadores de problemas. Las personas de experiencia de usuario no deberían considerar el desplazamiento infinito como una bala de plata para resolver sus problemas de paginación. Deja de crear sitios web con scroll infinito.