Desplazamiento de página infinito: características e ideas. Desplazamiento y paginación infinitos: ¿cuál es mejor?
Dos enfoques para presentar datos en páginas web y concluyeron en qué casos es más apropiado usar la numeración y en cuáles es más apropiado usar el desplazamiento infinito.
Presentar una gran cantidad de información de una manera fácil de usar puede resultar todo un desafío.
¿Debo utilizar la carga interminable para los datos o debo seguir con páginas numeradas? Esta pregunta preocupa a muchos diseñadores. De hecho, la elección no es fácil, porque cada método tiene sus propios puntos fuertes y débiles, que no siempre son evidentes a primera vista. Veamos ambos métodos para que le resulte más fácil tomar una decisión.
Desplazamiento sin fin
El desplazamiento infinito es un mecanismo que permite a los usuarios ver un flujo masivo de contenido en su conjunto, sin una línea de meta visible. La aplicación simplemente carga nuevos datos a medida que el usuario se desplaza hacia abajo en la página. Por muy tentador que parezca, el desplazamiento infinito no es una solución universal para ningún sitio o aplicación.
Ventaja 1: participación del usuario y deseo natural de estudiar el material en mayor profundidad
Si el desplazamiento se utiliza como método principal para navegar por los datos, puede tener un impacto positivo en el tiempo que un usuario pasa en un sitio o utiliza una aplicación. Aumenta la participación del público objetivo. Con el aumento de la popularidad de las redes sociales, los usuarios a menudo se enfrentan a flujos masivos de datos, y el desplazamiento interminable ofrece una forma bastante eficiente de consumir este océano de información. Independientemente del dispositivo utilizado, las personas tienden a estudiar el material con mayor profundidad cuando no requiere un esfuerzo adicional de su parte.
El desplazamiento infinito es un método casi vital para descubrir interfaces donde el usuario no busca algo específico. Sólo necesita revisar una gran cantidad de artículos para encontrar lo que le gusta.
Pinterest con su interminable océano de pines
Los beneficios del desplazamiento sin fin se pueden ver claramente en las noticias de Facebook. Evidentemente, los usuarios nunca podrán visualizar absolutamente toda la información del feed, porque el contenido se actualiza constantemente. Con la ayuda del desplazamiento sin fin, Facebook intenta mostrar la mayor cantidad de información posible y los usuarios utilizan voluntariamente el feed.
El News Feed de Facebook casi obliga a los usuarios a desplazarse cada vez más en busca de contenido.
Ventaja 2: desplazarse es más fácil que hacer clic
El uso de la rueda del mouse o la pantalla táctil facilita a los usuarios desplazarse en lugar de hacer clic. Para una sección larga de contenido único, por ejemplo, una guía, desplazarse es mucho más conveniente que dividir el texto en varias páginas separadas. Además, desplazarse requiere menos precisión que hacer clic en un enlace o botón.
Cuando el contenido se divide entre varias páginas, cada transición entre ellas requiere un clic adicional y tiempo para cargar una nueva página. Al desplazarse, el contenido se actualiza continuamente y esto requiere solo una acción
Beneficio 3: el desplazamiento es bueno para dispositivos móviles
Cuanto más pequeña es la pantalla, más largo es el desplazamiento. La popularización de los dispositivos con pantalla táctil también favorece el desplazamiento. Para los usuarios modernos, el desplazamiento se ha convertido en una acción casi intuitiva. Con el desplazamiento, los datos y la acción para recuperarlos (desplazamiento) están directamente relacionados entre sí, por lo que los usuarios obtienen una experiencia verdaderamente receptiva independientemente del dispositivo que estén usando.
Fuente de la imagen: Dribbble
Desventaja 1: rendimiento de la página y recursos del dispositivo
La velocidad de carga de la página determina en gran medida cómo el usuario final percibe una aplicación o un sitio web. Muchos estudios muestran que los tiempos de carga lentos hacen que las personas simplemente abandonen un sitio web o desinstalen una aplicación, lo que genera bajas tasas de conversión. Y esta es una mala noticia para quienes utilizan el desplazamiento infinito.
Cuanto más se desplaza el usuario hacia abajo en la página, más contenido se carga en una página. Esto lo hace notablemente más “pesado” y en la mayoría de los casos afecta negativamente al rendimiento del navegador o de la aplicación.
Otro problema son los recursos limitados del dispositivo del usuario. En muchos sitios de desplazamiento infinito, especialmente aquellos con muchas imágenes, los dispositivos con recursos limitados como el iPad comienzan a funcionar notablemente más lento debido a la enorme cantidad de datos descargados.
Defecto 2: encontrar y localizar un objeto en el flujo de datos
Otro problema con el desplazamiento infinito ocurre cuando los usuarios llegan a un determinado punto del flujo. No pueden marcar su ubicación para volver a ella más tarde. Al abandonar el sitio o cerrar la aplicación, perderán su progreso: para volver al mismo punto, tendrán que recorrer todo el camino desde el principio. Esto se soluciona en parte introduciendo marcadores, pero el problema de raíz sigue vigente.
Pinterest tiene una opción de marcadores en su interfaz.
La imposibilidad de determinar su posición mientras se desplaza causa inconvenientes a los usuarios y, como resultado, arruina toda la experiencia de interacción con el producto.
En 2012, Etsy se esforzó mucho en implementar una interfaz de desplazamiento y, para su sorpresa, descubrió que la nueva interfaz no funcionaba tan bien como la antigua versión paginada. Aunque las ventas se mantuvieron casi sin cambios, la participación de los usuarios fue menor: la gente no utilizaba la búsqueda tan activamente como antes.
Interfaz de búsqueda de desplazamiento infinito en Etsy. La versión actual se basa en la paginación.
Dmitry Fadeev señala: “La gente querrá volver a los resultados de búsqueda para volver a ver las cosas que seleccionaron antes y compararlas con las que encontraron más tarde. El desplazamiento infinito no sólo interrumpe esta dinámica, sino que dificulta el movimiento hacia arriba y hacia abajo en la lista, especialmente cuando el usuario regresa a la página en otro momento y comienza a buscar desde arriba. Nuevamente tiene que desplazarse hacia abajo y esperar a que se cargue el contenido. Por lo tanto, una interfaz de desplazamiento infinito es en realidad más lenta que una paginada”.
Desventaja 3: barra de desplazamiento irrelevante
Es posible que a los usuarios les moleste que la barra de desplazamiento no refleje la cantidad real de datos disponibles. Crees que estás cerca del final, lo que en sí mismo te obliga a desplazarte un poco más hacia abajo, y cuando casi has llegado al final, de repente ves que los resultados simplemente se han duplicado. Desde el punto de vista de la accesibilidad y comprensibilidad de la interfaz, esto, por decirlo suavemente, no es muy bueno.
La barra de desplazamiento debe reflejar la longitud real de la página.
Desventaja 4: Falta de pie de página
Los pies de página existen por una razón: contienen contenido que puede resultar útil para los usuarios. Si los usuarios no pueden encontrar algo o necesitan más información, a menudo intentan encontrarla en el pie de página. Pero el feed se desplaza sin cesar: cuando el usuario llega al pie de página, se carga otro dato y el pie de página que reemplazó desaparece de la vista.
Tomemos, por ejemplo, el servicio Bing Images. El pie de página del servicio contiene enlaces de Más información y Ayuda, pero es poco probable que los usuarios puedan hacer clic en ellos, ya que los enlaces "huirán" constantemente de ellos debido al contenido descargado.
En sitios con desplazamiento interminable, el pie de página debe ser fácilmente accesible para los usuarios. Esto se puede lograr haciéndolo “pegajoso” o incluso moviéndolo al encabezado o a la barra lateral, como hizo Facebook.
Facebook ha movido todos los enlaces del pie de página (por ejemplo, Legal, Carreras) a un panel a la derecha de las noticias.
Otra opción para la entrega accesible es descargar contenido a pedido usando el botón Cargar más. En este caso, los nuevos contenidos no se descargarán automáticamente hasta que el usuario así lo decida.
Instagram utiliza el botón Cargar más para que el pie de página esté disponible para los usuarios
Paginación
La paginación es un mecanismo que divide el contenido en páginas separadas. Si, después de desplazarse hacia abajo en la página, ve una serie de números, esto es paginación del sitio o aplicación.
Ventaja 1: buena conversión
La paginación funciona bien cuando el usuario busca algo específico en una lista de objetos, en lugar de simplemente navegar a través de un flujo de datos.
La principal ventaja de la paginación queda claramente demostrada por la búsqueda de Google. Encontrar los resultados más relevantes puede llevar un segundo o una hora, según sus necesidades. Pero cuando decidas dejar de buscar, sabrás exactamente cuántos resultados has visto y podrás decidir dónde detenerte o cuántos resultados más explorar.
Datos de resultados de búsqueda de Google
Beneficio 2: Sentirse en control
El desplazamiento sin fin es como jugar un juego sin fin: no importa qué tan lejos llegues, siempre te atormentará la sensación de que nunca llegarás al final. Cuando los usuarios conocen de antemano la cantidad de resultados disponibles, pueden tomar decisiones más informadas. David Kieras, en su estudio The Psychology of Human-Computer Interaction, señala: “Alcanzar un punto final da una sensación de control”.
El estudio también explica que cuando los usuarios tienen resultados limitados pero relevantes, les resulta más fácil entender si están buscando lo que buscan. Además, cuando los usuarios ven el número total de resultados (claro, si no es infinito), les resulta más fácil estimar cuánto tiempo les llevará encontrar el material deseado.
Beneficio 3: Posición del elemento
La interfaz basada en páginas permite tener en cuenta la ubicación de un elemento. Naturalmente, los usuarios no necesariamente recordarán el número de página exacto, pero podrán navegar de forma aproximada por la lista de resultados, y los enlaces numerados les ayudarán a llegar más rápido.
Con la paginación, los usuarios tienen control sobre la navegación porque saben qué página elegir para llegar a donde quieren ir.
La paginación funciona bien para sitios y aplicaciones comerciales. Al comprar en línea, los usuarios necesitan poder regresar al lugar donde lo dejaron para comparar artículos o comprar un artículo que les gustó anteriormente.
La tienda online MR Porter utiliza la paginación para presentar productos
Desventaja: pasos adicionales
Para ir a una nueva página usando la paginación, el usuario debe encontrar el enlace de destino (por ejemplo, "Siguiente"), pasar el mouse sobre él, hacer clic y esperar a que se cargue la página.
Para obtener el contenido debes hacer clic
El principal problema es que la mayoría de los sitios muestran a los usuarios una cantidad muy limitada de contenido en una sola página. Al alargar las páginas sin sacrificar la velocidad de carga, puede proporcionar a los usuarios más contenido en una página y reducir la cantidad de transiciones de página necesarias.
En que casos que usar
Sólo hay unos pocos casos en los que el desplazamiento infinito es efectivo. Es más adecuado para sitios y aplicaciones con contenido generado por el usuario (Twitter, Facebook) o contenido visual (Pinterest, Instagram). La paginación, por otro lado, es confiable y adecuada para sitios y aplicaciones que satisfacen acciones específicas del usuario.
Los servicios de Google son una clara confirmación de esta regla. Google Imágenes utiliza desplazamiento infinito porque ver imágenes es mucho más rápido que leer resultados de búsqueda de texto. Esta es la razón principal por la que los resultados de la Búsqueda de Google todavía se muestran de una manera más tradicional.
Conclusión
Los diseñadores deben sopesar los pros y los contras del desplazamiento infinito y la paginación antes de tomar una decisión final. Esta elección dependerá tanto del contexto de uso como de cómo se entregará el contenido en sí.
El desplazamiento infinito funciona bien para proyectos como Twitter, donde los usuarios consumen un flujo interminable de datos sin buscar nada específico, mientras que la paginación es adecuada para páginas de resultados de búsqueda, donde la gente busca algo específico y la posición de los elementos es muy importante.
Nick Babich, un desarrollador, entusiasta de la tecnología y simplemente un especialista enamorado de UX/UI, escribió una nota en el blog UX Planet sobre el desplazamiento infinito, hicimos una traducción adaptativa del material especialmente para los lectores de Habrahabr.
"¿Qué debo elegir para mi contenido: desplazamiento infinito o paginación?" Algunos diseñadores todavía se encuentran en un tira y afloja entre los dos métodos antes de decidir cuál utilizar en su diseño. Cada método tiene sus propias fortalezas y debilidades. En este artículo, proporcionamos una descripción general de las dos técnicas para que le resulte más fácil decidir cuál debe utilizar en sus proyectos.
Desplazamiento infinito
El desplazamiento infinito es una técnica tecnológica que permite a los usuarios desplazarse por una gran cantidad de contenido sin que el final esté a la vista. Este método simplemente actualiza la página cuando se desplaza hacia abajo. Si bien esto suena tentador, este método no es una solución ideal para todos los sitios o aplicaciones.
Ventaja n.º 1: participación del usuario y descubrimiento de contenido.
El uso del desplazamiento como método principal de exploración de datos puede hacer que un usuario permanezca en su página web por más tiempo y aumente su interacción con el contenido. Con la creciente popularidad de las redes sociales, aumenta la cantidad de datos consumidos; El desplazamiento infinito proporciona una forma eficaz de ver este océano de información sin tener que cargar todas las páginas.
El desplazamiento infinito es un elemento casi obligatorio en las interfaces de noticias. Cuando un usuario no busca algo específico, necesita explorar una variedad de temas para encontrar uno que le guste.
Océano de notas Pinterest
Puede ver los beneficios del desplazamiento infinito utilizando la sección de noticias de Facebook como ejemplo. Los usuarios entienden la ley no escrita de Facebook, según la cual no podrán ver absolutamente todas las publicaciones porque el contenido se actualiza con demasiada frecuencia. Sin embargo, con el desplazamiento infinito, Facebook hace todo lo posible para mostrar la mayor cantidad de información posible a los usuarios. En este caso, el desplazamiento permite a los usuarios escanear información y navegar por el flujo.
Facebook News Feed te permite ver una gran cantidad de contenido actualizado
Pro #2: Desplazarse es mejor que hacer clic.
Los usuarios encuentran que desplazarse es más conveniente que tocar o hacer clic. Los ratones con ruedas y pantallas táctiles han hecho que desplazarse sea mucho más fácil que hacer clic. Para contenido extenso y continuo, como un libro de texto, por ejemplo, desplazarse es mucho más cómodo que hacer clic cuando el texto se divide en varias pantallas y páginas separadas.
Para hacer clic/tocar: Cada actualización de contenido requiere clics adicionales y tiempo para esperar a que se cargue la página. Para desplazarse: una acción única y sencilla actualiza el contenido.
Pro #3: El desplazamiento es bueno para dispositivos móviles.
Cuanto más pequeña sea la pantalla, más larga será la barra de desplazamiento. La popularización de las versiones móviles de los navegadores es otro argumento importante a favor del desplazamiento. El desplazamiento es simple e intuitivo de usar cuando se controla desde la pantalla táctil. Como resultado, los usuarios disfrutan de una aplicación o un sitio verdaderamente responsivo, independientemente del tipo de dispositivo que utilicen.
Contras n.º 1: rendimiento de la página y recursos del dispositivo.
La velocidad de carga de la página es lo más importante para los usuarios. Numerosos estudios han demostrado que las velocidades de carga lentas hacen que las personas abandonen su sitio o desinstalen aplicaciones. Y esta es una mala noticia para quienes utilizan el desplazamiento infinito. Cuantos más usuarios se desplacen hacia abajo en la página, más contenido se cargará en una página. Como resultado, la tasa de actualización de contenido disminuirá cada vez más.
Otro problema son los recursos limitados del dispositivo. En muchos dispositivos con recursos limitados, como el iPad, el desplazamiento interminable de sitios, especialmente aquellos con muchas imágenes, puede comenzar a ralentizarse debido al enorme flujo de información que se carga.
Menos número 2: Búsqueda y localización de objetos.
Otro problema con el desplazamiento infinito es que una vez que los usuarios llegan a un determinado punto del flujo, no pueden marcar su ubicación y regresar a ese punto más tarde. Si abandonan el sitio, pierden donde lo dejaron y tienen que desplazarse nuevamente para volver al mismo lugar. La imposibilidad de fijar la posición de desplazamiento no sólo causa molestias al usuario, sino que también, como resultado, arruina la experiencia general del usuario.
En 2012, Etsy dedicó mucho tiempo a implementar una nueva interfaz de desplazamiento infinito y descubrió que la nueva interfaz tenía una funcionalidad significativamente inferior a la anterior. Aunque el número de compras no disminuyó, las tasas de uso del sitio disminuyeron significativamente: la gente ya no utilizaba la búsqueda con tanta frecuencia.
La interfaz de búsqueda de Etsy tiene una barra de desplazamiento. La versión actual contiene paginación.
Como señala Dmitry Fadeev: “La gente quiere volver a la lista de resultados de búsqueda para revisar los elementos que acaban de ver y compararlos con los que se encuentran en algún lugar al otro extremo de la lista. El desplazamiento infinito no sólo les impide hacer esto, sino que también les dificulta moverse hacia arriba y hacia abajo en la lista. Cuando los usuarios cierran una página y luego la vuelven a abrir, se ven obligados a desplazarse por la lista nuevamente y esperar a que se carguen todos los resultados de la búsqueda. Por lo tanto, una interfaz de desplazamiento infinito es en realidad más lenta que una paginada”.
Contras #3: La barra de desplazamiento no coincide.
Otra cosa molesta es que la barra de desplazamiento no refleja la cantidad real de datos. Te desplazas hacia abajo, confiado en que el final está cerca. Esto de por sí te motiva a terminarlo, porque queda muy poco. Pero luego bajaste aún más y, de repente, la barra se cargó y duplicó su tamaño, agregando la misma cantidad de información para que la veas. Desde el punto de vista de la accesibilidad del usuario, cargar barras de desplazamiento es una muy mala opción.
La barra de desplazamiento debe reflejar el tamaño real de la página.
Contras #4: Sin pie de página.
Los pies de página existen por una razón: contienen contenido que el usuario a veces necesita. Por ejemplo, si los usuarios no pueden encontrar algo o necesitan más información, normalmente recurren al pie de página. Pero como la barra de desplazamiento es infinita, los datos nuevos se cargan y cargan a medida que baja, el pie de página permanece fuera de la vista todo el tiempo.
Cuando LinkedIn introdujo el desplazamiento infinito en su interfaz en 2012, los usuarios pudieron ver la parte inferior de la pantalla antes de que se cargara un nuevo contenido.
Los sitios que implementan el desplazamiento infinito deben adjuntar el pie de página en la parte inferior de la barra de desplazamiento para que siempre esté accesible, o mover la información que contiene al encabezado de la página o a las barras laterales.
Facebook ha movido todos los enlaces del pie de página a la barra lateral derecha
Otra solución es descargar contenido a pedido usando el botón de descarga. El contenido nuevo no se carga automáticamente hasta que el usuario hace clic en el botón. De esta manera, los usuarios pueden llegar fácilmente al pie de página en lugar de tener que perseguirlo.
Instagram tiene un botón "cargar más" que permite a los usuarios acceder al pie de página
Paginación
La paginación es un marco de interfaz de usuario que divide el contenido en páginas individuales. Si se desplaza hasta el final de la página y ve una serie de números, esta será la numeración de páginas del sitio o aplicación.
Ventaja n.º 1: buena conversión.
La paginación funciona muy bien cuando el usuario busca algo específico en una lista de resultados, en lugar de simplemente escanear y resumir flujos de información.
Puede ver los beneficios de la paginación utilizando la Búsqueda de Google como ejemplo. Dependiendo de su consulta, seleccionar el mejor resultado de búsqueda puede llevar segundos u horas. Pero cuando decida dejar de buscar en el formato actual de Google, sabrá el número exacto de resultados de búsqueda. Podrás decidir dónde detenerte o cuántos resultados necesitas ver.
resultados de búsqueda de google
Ventaja #2: Sentirse en control.
El desplazamiento infinito es como un juego sin fin: no importa cuánto te desplaces, sentirás que nunca llegarás al final. Cuando los usuarios conocen la cantidad exacta de resultados disponibles, pueden tomar decisiones más informadas sobre cuándo detenerse en lugar de deambular por una lista que se desplaza interminablemente. Según una investigación de David Kieras: "Alcanzar un punto final proporciona una sensación de control". El estudio también aclara que cuando un usuario tiene resultados limitados pero aún significativos, puede determinar fácilmente si esos resultados incluyen lo que está buscando o no.
Además, cuando los usuarios ven el número total de resultados (suponiendo que la cantidad total de datos no sea infinita, por supuesto), pueden estimar cuánto tiempo les llevará encontrar lo que necesitan.
Plus No. 3: Disposición de elementos.
Una interfaz paginada permite al usuario recordar visualmente la ubicación de un elemento. Es posible que el usuario no recuerde el número exacto de la página, pero sabrá aproximadamente dónde vio el objeto deseado y los enlaces numerados le permitirán llegar a donde necesita ir.
Con la paginación, los usuarios tienen control sobre la navegación porque saben en qué página hacer clic para volver a donde estaban antes.
La paginación funciona bien en aplicaciones y sitios web de ventas en línea. Al comprar algo en una tienda online, los usuarios quieren poder volver al punto donde lo dejaron y continuar con sus compras.
El sitio web de MR Porter utiliza paginación
Contras: pasos adicionales.
Para pasar al siguiente contenido al paginar, el usuario debe encontrar el enlace de destino (por ejemplo, "siguiente"), pasar el cursor sobre él, hacer clic y esperar a que se cargue la nueva página.
Haga clic para descargar contenido
El principal problema aquí es que la mayoría de los sitios muestran a los usuarios contenido muy limitado en una sola página. Si alargas tus páginas sin sacrificar la velocidad de carga, los usuarios tendrán acceso a más contenido en una sola página sin tener que hacer clic en los botones de salto con tanta frecuencia.
¿Cuándo utilizar el desplazamiento/paginación infinito?
Sólo hay unas pocas situaciones en las que el desplazamiento infinito será efectivo. Es ideal para sitios y aplicaciones que presentan contenido generado por el usuario (Twitter, Facebook) o contenido visual (Pinterest, Instagram). Por otro lado, la paginación es una opción segura y una buena solución para sitios y aplicaciones diseñados para la actividad de usuarios específicos.Google es un buen ejemplo para ilustrar. Google Imágenes utiliza desplazamiento infinito porque los usuarios ven las imágenes mucho más rápido que el texto. Leer los resultados de la búsqueda lleva mucho más tiempo. Esta es la razón por la que los resultados de búsqueda en la Búsqueda de Google todavía se presentan de manera más tradicional, como páginas individuales.
Conclusión
Los diseñadores deben sopesar los pros y los contras del desplazamiento infinito y la paginación antes de elegir un método. La elección depende del contenido del proyecto y de cómo se presenta este contenido. En general, el desplazamiento infinito funciona bien en sitios o aplicaciones como Twitter, donde los usuarios consumen un flujo interminable de datos sin centrarse en nada en particular. Una interfaz paginada es buena para mostrar resultados de búsqueda cuando las personas buscan un producto específico y les importa la localización de cada artículo que ven.En artículos futuros, veremos las mejores prácticas para usar paginación y desplazamiento infinito. ¡Así que estad atentos!
, utiliza ejemplos para demostrar las ventajas y desventajas de una técnica popular: el desplazamiento sin fin.Presentar una gran cantidad de información, como resultados de búsqueda, enlaces, artículos o imágenes, de una manera fácil de usar puede ser bastante difícil. En el pasado, este problema se solucionaba gracias a un mecanismo de paginación fiable. Sin embargo, en los últimos años, muchos sitios han cambiado a desplazamiento sin fin. El desplazamiento infinito es un mecanismo mediante el cual la siguiente "página" de datos se carga automáticamente a medida que el usuario se desplaza hasta el final del bloque anterior.
A veces este enfoque es muy eficaz, a veces resulta extremadamente infructuoso. A continuación se muestran algunas ventajas y desventajas del desplazamiento infinito:
Ventajas
Uso eficiente del espacio de la pantalla. No más botones torpes ni enlaces de números de página.
Diseño más intuitivo para dispositivos táctiles. Desplazarse por una página moviendo el dedo hacia arriba en la pantalla es una técnica común entre los dispositivos táctiles. Esta acción requiere menos precisión que hacer clic en enlaces o botones.
Mayor implicación. Relacionado con el segundo punto está el hecho de que los usuarios, independientemente del dispositivo, tienden a estudiar el material más profundamente si no requiere mucho esfuerzo por su parte. Si alguna vez ha perdido la noción del tiempo mientras navegaba por las actualizaciones en Twitter o Facebook, comprenderá de qué estamos hablando.
Defectos
Términos de uso limitados. El desplazamiento infinito no es adecuado para todos los sitios ni para todos los tipos de contenido. Por ejemplo, una lista de productos en una tienda online es un mal lugar para implementar el desplazamiento sin fin. Es probable que el usuario quiera cambiar entre listados de productos y descripciones sin perder su posición en la página.
Complejidad adicional. Junto con guiones estándar de numerosas bibliotecas de JavaScript Un mecanismo único puede requerir un código único para implementarse. Será necesario garantizar que incluso aquellos usuarios que tengan No JavaScript. Es mejor no utilizarlo en absoluto que utilizarlo en detrimento del recurso.
Requisitos adicionales para clientes. Dado que el desplazamiento infinito requiere JavaScript, corre el riesgo de perder usuarios en consolas de juegos, decodificadores u otros dispositivos que ejecutan navegadores con capacidades limitadas de secuencias de comandos.
¡Adiós pie de página! Ya sea un desplazamiento sin fin o un pie de página: no existe una tercera opción. Si usted (o más importante aún, sus usuarios) necesita un pie de página, vale la pena considerar una plantilla más convencional. No moleste a los usuarios con un pie de página en el que no se puede hacer clic: tan pronto como aparece frente a sus ojos, inmediatamente aparece contenido nuevo en su lugar (LinkedIn y Facebook, ¡estoy hablando de usted!).
SEO. Aunque Google señala que su algoritmo tiene en cuenta páginas que contienen múltiples versiones (por ejemplo, tiene en cuenta "Página-1", "Página-2" junto con la página "Ver todo", etc.), negándose a realizar pruebas, corre el riesgo de que su sitio caiga en los motores de búsqueda.
Reducir el número de impresiones. Es posible que esto no afecte la experiencia del usuario, pero si su modelo de negocio está directamente relacionado con la cantidad de impresiones de banners publicitarios, es poco probable que el desplazamiento interminable le ayude a lograr el éxito.
Teniendo en cuenta las características del desplazamiento sin fin, veamos dos sitios donde, en mi opinión, es bastante apropiado.
En 2011, estaba muy de moda (en mi opinión, esta moda vino de Facebook) crear un "desplazamiento sin fin" en sus sitios web: aquí es cuando el usuario gira y gira la rueda del mouse, y Ajax carga todos los nuevos resultados de búsqueda en en la parte inferior de la página, lo que convierte el desplazamiento normal en interminable y provoca una “disonancia cognitiva” en el usuario que lo encuentra por primera vez.
También vi recientemente un artículo en este sitio en el que el autor expresaba su descontento con el "desplazamiento sin fin" y pedía el uso de la vieja "paginación".
Estoy de acuerdo con el autor. Yo mismo soy un drogadicto y a veces me siento frente al monitor, encantado, con los ojos vidriosos, dando vueltas, dando vueltas, haciendo girar la rueda mágica, sin poder ir a trabajar/a trabajar/a la tienda/comer/beber/al baño. , y lo hago girar con un solo pensamiento: "Bueno, ¿cuándo terminarán todos ustedes?" (¿Qué puedes hacer? Estoy acostumbrado a terminar las cosas).
Una mañana me levanté y decidí firmemente: “¡Deja de aguantar esto!”.
Les presento mi pequeño guión, que escribí recientemente para mi “red social” (con blackjack y putas).
Para ver la demostración, descargue el archivo y ejecute el archivo "test/test.html".
Qué novedades ofrece este script:
Dado que convirtieron la "barra de desplazamiento" principal en algo poco claro, necesitamos devolver la "barra de desplazamiento" normal, lo cual hicimos dibujando una franja gris en el lado derecho de la página, inmediatamente a la izquierda de la "barra de desplazamiento" normal.
Hasta dónde ha llegado esta barra en la parte superior es la cantidad de resultados de muestra por los que ya nos hemos desplazado. En general, esta franja es algo negra. Donde está gris es el lugar de toda la muestra donde nos encontramos ahora.
Tenga en cuenta también que la dirección de la página cambia a medida que se desplaza. De modo que puede desplazarse hasta la mitad de esta noche, marcar la página, apagar la computadora, irse a la cama, despertarse por la mañana, encender la computadora, ir a la página que marcó ayer antes de acostarse y continuar desplazándose desde la página. El mismo lugar donde estabas se detuvo. Y, además, desde este lugar puedes desplazarte no solo hacia adelante, sino también hacia atrás.
Y con respecto a la navegación a cualquier página necesaria: puede acceder a cualquier página aquí; simplemente sustituya el número de la página de selección que necesita en la dirección de la página web. Dado que las URL legibles por humanos ahora son estándar, esta debería ser una solución viable.
Obviamente, este guión no es algo tallado en granito, y yo mismo reescribí la mitad cuando me levanté esta mañana. Sin embargo, el rendimiento parece estable y se ha probado en las últimas versiones de Chrome y Firefox. Lo diré de inmediato: no estoy persiguiendo la "compatibilidad entre navegadores"; siempre se puede completar si alguien quiere usar este script en su sitio "entre navegadores".
Parece que todo, la demo habla por sí sola. La publicación provoca comentarios.
¿Qué más se puede hacer (según los comentarios)?
Cuando haces clic en cualquier lugar de la tira, irás a la página de selección correspondiente.
Elimine las páginas de datos de la parte superior de la página web cuando haya demasiados datos en la página web (para no ralentizar).
Ejemplos de "desplazamiento infinito" mejorado.
¡a! Dividir el contenido en páginas con números es un esquema de paginación clásico, intuitivo y familiar para los usuarios. Sin embargo, últimamente cada vez más sitios están empezando a “poner en práctica” este tipo de navegación de páginas como, por ejemplo, Pergamino infinito(desplazamiento infinito). Incluso gigantes como Google, Facebook y VKontakte no fueron una excepción. Naturalmente, este tipo de paginación tiene sus pros y sus contras, pero esa es otra conversación. En este tutorial veremos cómo implementar dicha navegación.
¡¿Cómo funciona esto?!
Sí, todo es muy simple, si el usuario ya se ha desplazado por una cierta cantidad de publicaciones y está en la parte inferior de la página, entonces se cargan más mensajes con un ligero retraso. Para hacer esto, usando $.post formamos una solicitud POST a la página para descargar datos de la base de datos (archivo .php), la estructura HTML de los registros se forma en el mismo archivo. Después de eso, estructurando el marcado HTML, los datos se devuelven al script y se colocan en la página.
El proceso de determinar la posición del usuario en la página:
1 | // Si el desplazamiento está habilitado // Comprobar si el usuario está al final de la página // Proceso en curso // Ejecuta una función para recuperar datos con un retraso establecido ObtenerDatos(); ), $configuración.retraso); }
|
Probablemente hayas notado el uso de variables, parámetros de complementos, por así decirlo, hablaremos de ellos un poco más adelante. La función de solicitud AJAX para un archivo PHP getData() se ve así:
1 | // función de solicitud AJAX // Formando una solicitud POST a ajax.php Acción: "paginación de desplazamiento" ) , función (datos) ) .html ($initmessage); // Si los datos devueltos están vacíos, repórtalo // Agrega los datos recibidos al contenido DIV // Proceso completado } ) ; |
Archivo AJAX.php
El script PHP para consultar la base de datos y generar la estructura de los mensajes de salida puede parecerle aceptable de cualquier forma. Todo lo que necesitas hacer es tomar información de la base de datos. mysql a tu elección. El siguiente es un archivo ajax.php muy simple que toma información de la base de datos. mysql y muestra el contenido con título y enlace.
1 | mysql_connect ("localhost", "nombre de usuario", "contraseña") o die (); $desplazamiento = is_numeric ($_POST ["desplazamiento"])? $_POST ["desplazamiento"]: morir (); $ejecutar = mysql_query ( "SELECCIONAR * DE ex_posts ORDEN POR id DESC LIMIT ". $ números de publicación. "COMPENSAR". $compensación); mientras ($fila = mysql_fetch_array ($ejecutar) ) ( $contenido = substr(strip_tags($fila["texto"]), 0, 500); eco " " . $fila [ "título" ] . "" ; eco " " . $contenido . "... " ; |
Usar como complemento
Para hacer esto necesitas encontrar en FUENTE(enlace al principio del artículo), archivos javascript.js y, si quieres estilos, se debe incluir style.css + la biblioteca jQuery. Todo lo que queda es decidir en qué DIV se cargarán los datos y llamar al método scrollPagination especificando los parámetros.
