Creando una galería web con desplazamiento infinito. PHP y AJAX. Desplazamiento infinito vs paginación

Mientras escribía este artículo, me di cuenta de que hay dos tipos de personas que siempre están en debate: los que prefieren la paginación y los que apoyan el uso del desplazamiento infinito; ambos "clanes" proporcionan evidencia convincente a favor de su punto de vista. .

En mi opinión, tanto la paginación como el desplazamiento infinito tienen sus ventajas. Cuál de estos métodos elegir depende del criterio de cada desarrollador individual.

Por ejemplo, Google utiliza paginación en lugar de desplazamiento infinito, lo cual es muy conveniente. Y las redes sociales como Twitter y Facebook siempre preferirán el uso del desplazamiento infinito, ya que a nadie le gusta hacer clic cada vez sólo para desplazarse por las noticias.

¿Qué es el método de desplazamiento infinito?

En el desarrollo web, el desplazamiento infinito es una técnica que ayuda a cargar contenido automáticamente cuando el usuario llega al final del contenido mostrado y se desplaza por la página.

Los mejores usos de esta técnica se pueden encontrar en Twitter, Facebook y muchos otros lugares.

A continuación se muestra una lista que consta de Los 10 mejores complementos de jQuery desplazamiento sin fin (desplazamiento).

Los 10 mejores complementos de jQuery Infinite Scroll:

Si decide utilizar el complemento de desplazamiento infinito jQuery, se lo pondremos fácil. Los 10 complementos de desplazamiento infinito de jQuery que aparecen a continuación admiten todas las funciones que pueda necesitar; simplemente elija la que mejor se adapte a su sitio para que su experiencia de usuario sea más eficiente y fluida.

jQuery Albañilería

La mampostería coloca elementos en el espacio vertical disponible. Un complemento muy popular con casi 13.000 estrellas en github.

Descargar versión demo

iDesplazarse

¿Quieres crear un desplazamiento infinito y suave? iScroll definitivamente te ayudará a crear un desplazamiento jquery fluido. Con un sistema de almacenamiento en caché inteligente, puede crear un desplazamiento infinito para una experiencia de usuario sólida. Además de jQuery, también es compatible con javascript.

Descargar versión demo

Puntos de ruta

Los WayPoints facilitan la implementación de la funcionalidad de desplazamiento de páginas. Con este sencillo complemento puedes transformar la navegación como " Anterior / Siguiente» en una interfaz AJAX de desplazamiento infinito. WayPoints tiene disponible documentación detallada, por lo que ponerla en práctica no será tarea difícil.

Descargar versión demo

Desplazamiento infinito.js

Un complemento de desplazamiento infinito jQuery muy compacto. Infinite Scroll agrega automáticamente la página siguiente, eliminando la necesidad de cargar todas las páginas a la vez.

Descargar versión demo

jDesplazarse

jScroll es un complemento de desplazamiento infinito de jQuery fácil de usar que permite una personalización flexible.

Descargar versión demo

jQuery-desplazamiento sin fin

Este complemento nunca permitirá que sus usuarios se queden atascados esperando a que se cargue una nueva página. jQuery-Endless-Scroll es muy flexible e incluye características verdaderamente únicas, como agregar URL amigables, truncamiento de datos, la capacidad de desplazarse y agregar contenido en la parte superior de la página.

Descargar versión demo

Desplazamiento AJAX infinito

Infinite AJAX Scroll es un complemento inteligente de desplazamiento infinito de jQuery. Puede convertir el sistema de paginación existente en un sistema de desplazamiento infinito. Este complemento lee enlaces en el servidor " siguiente/anterior" página existente y, cuando el usuario llega al final de la misma, carga esas páginas usando AJAX.

Este enfoque también está optimizado para SEO y es muy fácil de implementar.

Descargar versión demo

JQuery-ESN-Navegación automática

Un complemento jQuery de desplazamiento infinito ampliamente utilizado que puedes usar fácilmente. Agrega automáticamente contenido de la página usando AJAX cuando el usuario ve la página desde el caché integrado del navegador. El complemento es fácil de aprender y utilizar de forma práctica.

Descargar versión demo

Desplazamiento infinito de jQuery

Otro complemento de desplazamiento infinito jQuery simple que le permite desplazar texto o imágenes.

Descargar versión demo

Sin fin.JS

Endless.js es un complemento de jQuery que te ayuda a crear desplazamientos infinitos para elementos HTML. Conecta la parte inferior con la superior o la sección izquierda con la derecha, creando así la ilusión de desplazamiento infinito.

Los sitios web con desplazamiento interminable o muy largo se están convirtiendo en uno de los más populares en la actualidad. Sí, la tendencia apareció hace un par de años, pero poco a poco se está volviendo cada vez más famosa. Y llamar a ese desplazamiento moda, estilo o “truco” no es correcto. Más bien, es una necesidad. La necesidad de presentar grandes contenidos a los ojos de los visitantes. Literalmente, ábreles todo lo que hay en el sitio.

Todos conocemos las interminables descargas de novedades en VKontakte, Facebook, Twitter y otras redes sociales, por lo que no es difícil imaginar de qué estamos hablando.

Y lo más interesante es que ese desplazamiento tiene ventajas. Por un lado, hay casi un 100% de implicación del usuario en el aprendizaje del contenido. No tiene que distraerse, estudiar menús, secciones, esperar a que se carguen las siguientes páginas, ni siquiera tiene que pensar en la navegación.

Por otro lado, el desplazamiento infinito es muy demandado en los dispositivos móviles. Cuanto menor sea el tamaño de la pantalla, más desplazamiento será necesario. Es poco lo que se puede colocar en una pantalla de este tipo, por lo que los títulos, una breve descripción, una pequeña imagen, y esto es suficiente. Ya en pantallas grandes puedes visualizar navegación, botones, marcos, diferentes bloques, etc. Además, al gestionar el espacio en la pantalla del móvil, el desplazamiento se vuelve más utilizable.

Pero esta es una cara de la moneda. ¿Qué pasa con los diseñadores? ¿Qué encuentran en el desplazamiento interminable? ¿Por qué intentan aplicarlo a proyectos de diferentes temáticas y estilos, aunque no tengan una versión móvil? Es simple: Infinity es conveniente para la conversión, para llamar la atención, para ideas artísticas, por ejemplo, Apple Mac Pro, Boat, Firewatch.

Y aunque no todos los sitios pueden utilizar el desplazamiento infinito, existen ideas y soluciones de expertos sobre cómo lograr el éxito.

Promoción

Los usuarios se desplazarán más y más sólo cuando estén interesados. Especialmente cuando la página inicial termina de cargarse. Por tanto, si ven las fotografías, los titulares y el texto que necesitan, entonces no hay dudas en sus acciones. Los diseñadores plasmaron esto, por ejemplo, en Cheetos, Photobazaar, Komarnicki selecciones en Pinterest, DeviantArt Primero intentan crear interés en el contenido y luego permiten a los visitantes buscar y explorar lo que está disponible.

Discreción

Muchos diseñadores web se esfuerzan por evitar forzar a los espectadores a realizar un desplazamiento prolongado. Y esto es cierto, porque no siempre ni todos los usuarios quieren desplazarse y desplazarse sin cesar por el contenido en busca de algo interesante o necesario. Además, siempre querrás tener algunas pautas ante tus ojos: dónde estamos, qué sección, qué más hay en el sitio. Es por eso que a menudo vemos una barra de navegación flotante en la parte superior de la página. Y esto es conveniente, ya que el desplazamiento sin fin simplemente oculta la línea del menú y no siempre es conveniente cambiar a otra sección. Este Uplug, Voux, Geranandpartners, Company.airbus(la navegación se ha movido hacia la derecha).

todo tiene un comienzo

El desplazamiento interminable o incluso largo puede hacer que los usuarios se pierdan en la página. Les resulta más difícil navegar: al principio están todavía o ya en el medio. Además, incluso si hay un botón "arriba" o "atrás" (generalmente en forma de flecha), los visitantes regresan al principio de la página y no al lugar donde lo dejaron. En el servicio de noticias de VKontakte, "Atrás" se implementa precisamente por conveniencia. Es decir, devuelve nuestra mirada al lugar donde impactamos antes. El trabajo se llevó a cabo de manera similar en Flickr. Si seleccionamos una imagen, la abrimos en la misma ventana y luego pulsamos el botón “atrás”, volveremos exactamente al momento en el que estábamos antes, y no al inicio de la página. Las tiendas online funcionan de la misma manera. etsy, amazonas.

Pero, por el contrario, el proyecto Fomo no permite esto. Siempre se cargará la parte superior de la página con mosaicos y materiales. e incluso Auge y corazón Tampoco, a pesar de la navegación aparentemente no tan sencilla con un gran volumen de contenido.

En su mayor parte, los diseñadores web se esfuerzan por garantizar que se recuerde la información sobre la posición de la página de un visitante en particular. Y es conveniente incluso en dispositivos móviles.

Actividad ante los ojos

De acuerdo, pero es muy conveniente si no solo sabes que la información de la página se actualiza con cierta frecuencia, sino que también ves esta actualización. Y los diseñadores usan esto con frecuencia, agregando una variedad de indicadores de progreso de carga. El indicador también se utiliza para cargar contenido. Al mismo tiempo, la animación de carga es tan rápida, casi instantánea, que muchas veces los ojos ni siquiera la captan.

Por ejemplo, este es el uso de botones "cargar más" o una animación de carga casi instantánea. Hora, Vogue, Yandex Zen, Voux, Ria.

Impacto en el infinito

Incluso si una página tiene desplazamiento infinito, los usuarios quieren desplazarse por ella más rápido. De modo subconsciente. Esto es especialmente notable si el desplazamiento no es interminable, sino simplemente largo y, tarde o temprano, termina. El deseo de los diseñadores web es diferente: mantener a los visitantes en el sitio, por lo que la mayoría de las veces el desplazamiento de las páginas siempre tiene la misma velocidad. En otras palabras, no importa qué tan rápido giremos la rueda del mouse, la velocidad a la que aparece nuevo material no aumentará y el contenido aparecerá solo cuando los desarrolladores lo pretendieron. Esto está perfectamente implementado en Apple Mac Pro. Incluso puede establecer la velocidad de desplazamiento en el número de líneas en la configuración del mouse, pero el contenido del sitio cambiará a la velocidad especificada. Funciona de la misma manera Amur Tiger, empresa Airbus.

Es difícil decir si esto es bueno o malo. Depende, por supuesto, del contenido, sus características y requisitos de asimilación.

Facilidad de visualización

En primer lugar, se trata de tiendas online y tarjetas de productos. Por ejemplo, los webmasters agregan íconos de "Me gusta" o "Agregar a favoritos" a cada producto. Esto hace que sea más fácil estudiar el contenido si hay mucho. Además, durante la búsqueda también se muestra la cantidad encontrada. Es decir, aunque la página con los productos seleccionados sea increíblemente larga, el usuario ya sabe aproximadamente cuánto ha mirado y cuánto le queda todavía. Esto es conveniente, aunque los diseñadores a menudo ignoran este enfoque. Es mucho más fácil crear tarjetas con productos y cargarlas en un solo lienzo. Eso es lo que hicieron Ericbeauduin, Vagabundo, Skechers incluso un banco de fotos Bazar de fotos No sugiere seleccionar fotografías para el futuro.

Pero otros proyectos, por el contrario, te permiten ordenar información. esto y Moras silvestres, Ozon, Lamoda.

Efectos, más efectos

Es difícil imaginar un sitio web moderno sin efectos. Sin ellos sería aburrido. Algunos incluso lo considerarían simple y aburrido. Y la forma más sencilla de animar páginas de contenido largas e interminables es agregar animaciones de carga y la apariencia suave de los mosaicos de contenido. Y por supuesto, el paralaje en sus diversas manifestaciones.

Como sabes, en promedio un usuario permanece en la página de un sitio web durante 8 segundos. Si está interesado se quedará más tiempo y volverá en el futuro. Y así, el paralaje puede añadir interés y atraer la atención de los visitantes. Hablamos anteriormente sobre la esencia de este efecto y cómo afecta la conversión.

Pero a veces los diseñadores, al usarlo mientras la página se carga sin cesar, por el contrario, solo causan daño. Por ejemplo, desea comprar algo y cada vez tiene que observar el efecto de paralaje mientras espera que se cargue la información del producto o ver el efecto de animación. ¿Lindo? No es bueno. Comercio ericbeauduin Utilicé el efecto pseudoparalaje, pero muy poco. No interrumpe nuestro flujo habitual de aprendizaje de contenidos, pero añade un poco de entusiasmo.

Innovación

El desplazamiento interminable de las páginas es interesante, da lugar a la imaginación y la creatividad. Pero una cosa es considerar simplemente los métodos de implementación y algunos aspectos de un fenómeno como el desplazamiento interminable de páginas. Encontrarlo es otra cuestión. Realmente hermoso.

lexus ofrece el estudio de la tecnología, el desarrollo y otras cosas de una forma muy inusual. El tema del contenido se selecciona mediante el movimiento del mouse y, después de la selección, se redirige a la página correspondiente. Aquí todas las imágenes están distorsionadas en perspectiva y se ofrece una carga adicional de material. Hay animación de transiciones y apariciones, pero es ligera y casi imperceptible. Y el paralaje se utiliza en la página principal para seleccionar temas.

Claridgeicono Tiene un desplazamiento largo, pero interesante. Incluso si nosotros no tenemos nada que ver con la construcción o el diseño de edificios, este sitio lo cautivará. Hay tanto contenido, y tan diferente, que involuntariamente te desplazas por la página y lo miras. O videos, luego dibujos, luego infografías, luego fotografías. Y sí, el menú "fijo" superior siempre está visible y cada elemento está adjunto a la sección de vagabundos. ¿Qué podemos decir del vídeo panorámico de 360 ​​grados?

Foodisforeating con un secreto. La navegación es tan pequeña que es fácil pasarla por alto y no darse cuenta, pero tiene una gran página de desplazamiento que afecta... la visualización del contenido y las infografías. Sí, esto también sucede. En otras palabras, no basta con desplazarse hacia abajo. Usando la rueda del ratón podrás ver la carga de imágenes, la aparición gradual de texto, gráficos, etc. Es difícil de describir, pero es mejor verlo con tus propios ojos. Hay muchos efectos, pero en general todo parece simple y funcional.

Canal National Geographic También es capaz de golpear. Es posible que la página no parezca grande ni larga, pero el contenido se puede desplazar en diferentes direcciones. Hay muchas secciones y secciones, y el desplazamiento en cada una es de izquierda a derecha y de arriba a abajo. En este caso, no se carga solo una selección de posts, sino todo el entorno (fotos, vídeos, noticias, artículos) sobre algún tema. Original y claro. Realmente miras, buscas e incluso examinas. Y esa implicación tiene un efecto positivo en la conversión.

Poder de lo posible habla sobre energía humana, tecnología, capacidades humanas, petróleo y energía solar y mucho más. Pero lo cuenta en forma animada, donde cada contenido aparece a medida que desplaza la rueda del mouse. Además, todo está creado sobre hermosos fondos, con la misteriosa idea de personas y pensamientos que aparecen en las nubes, y luego descienden al suelo y bajo el agua (el mundo submarino). Página larga, desplazamiento largo, pero contenido interesante.

viajedepinogemelo También ofrece historia y detalles del casino y hoteles Twin Pine en California. Por un lado, se propone simplemente ver la página de arriba a abajo y, por otro lado, desplazarse por las secciones individuales de izquierda a derecha para conocer algunos detalles. Incluso la hoja de ruta tiene animación, que depende del desplazamiento de la rueda del mouse. E incluso depende de tu velocidad de desplazamiento. Todo es interesante y hermoso.

Terminación

Todavía hay muchas ideas innovadoras y desplazarse sin cesar o durante mucho tiempo por estos sitios no causa irritación ni inconvenientes. De una forma u otra, esto, si no una tendencia, sino un fenómeno, puede crear una experiencia emocionante completamente inimaginable al visitar un sitio. Si el desplazamiento es intuitivo, similar a la interfaz de usuario, entonces es bienvenido.

En cualquier caso, debes decidir claramente por ti mismo si este proyecto necesita desplazamiento infinito o no. No basta con seleccionar el contenido y escribir código para que todo se cargue inmediatamente en la página principal.

Esto significa que hay mucho espacio para ideas y se pueden implementar muchas veces y siempre de diferentes maneras. Lo que confirma una vez más que el diseño web es un campo muy creativo, innovador y tecnológico.

¿Alguna pregunta? ¡Escribe un comentario!

¡Hola! ¡Seguimos analizando los complementos más interesantes y útiles para el sitio de WordPress! Hoy aprenderá cómo puede crear de manera muy simple y rápida un desplazamiento sin fin de cualquier tipo de publicaciones en su sitio web. Puede realizar un desplazamiento infinito de páginas, publicaciones, archivos multimedia, imágenes, chat, grabaciones de audio, enlaces, galerías, videos, etc. Puede agregar desplazamiento infinito a cualquier página con un simple código corto. Puede crear un código corto directamente desde el menú del editor visual de WordPress.

Desplazamiento infinito de publicaciones Complemento de WordPress

Instalar súper complemento Ajax Cargar más – Desplazamiento infinito Puedes hacerlo directamente desde el panel de administración de WordPress. Ir a la página: Complementos – Agregar nuevo, ingrese el nombre del complemento en el formulario de búsqueda, presione Entrar, instale y active el complemento.

Primero necesitas configurar los parámetros básicos:

– Tipo de contenedor, aquí puedes cambiar el tipo de contenedor, pero no necesariamente.

– Deshabilitar CSS, puede deshabilitar los estilos CSS del complemento para usar sus propios estilos. No necesariamente.

– aquí debes seleccionar el estilo de carga de contenido. Tienes dos opciones para elegir: botón o desplazamiento infinito. Haga clic en el campo "Persiguiendo flechas" para seleccionar la opción que más le convenga.

– Clases de botones, puedes agregar clases para el botón. No necesariamente.

– Ajax Security, que protege las URL del abuso de las solicitudes de Ajax. Se recomienda habilitarlo.

– Parte superior de la página, en la página de carga inicial, mueva la ventana del navegador del usuario a la parte superior de la pantalla. Esto puede ayudar a evitar que se descarguen mensajes innecesarios.

– Contenido dinámico, deshabilite la población dinámica de categorías, etiquetas y autores en el shortcode del Generador. Recomendado si tienes un número inusual de categorías, etiquetas y/o autores.

– Botón Editor, puede ocultar el botón para crear códigos cortos desde el editor visual de WordPress, en la página de edición de publicación o página.

– Avisos de error, notificaciones de error. Se recomienda habilitarlo.

– Guardar configuración.

Si desea agregar desplazamiento infinito directamente a una publicación o página, puede crear un código corto directamente desde el editor visual de WordPress usando un botón especial.

Tanto en la primera como en la segunda opción las configuraciones son absolutamente las mismas, ahora las analizaremos:

– Plantilla, deja la plantilla como predeterminada, no necesitas cambiar nada aquí.

– ID, si va a agregar desplazamiento infinito en varias páginas, con diferentes tipos de salida de publicaciones, entonces debe especificar un identificador único aquí para que los códigos cortos sean diferentes. Haga clic debajo del campo en la pestaña – Generar identificación única, para agregar una identificación única.

– Tipo de contenedor, puede especificar el tipo de contenedor. No necesariamente.

– Clases de contenedor, puedes agregar clases para el contenedor, pero no es necesario.

– Etiqueta, puede agregar su propia etiqueta al botón si seleccionó un botón en la configuración principal. Si elige el desplazamiento infinito, no tiene que cambiar nada aquí.

– aquí puede especificar la etiqueta que se muestra en el botón mientras se carga el contenido.

– Imágenes cargadas, carga imágenes antes de cargar el contenido principal. No es necesario habilitar esta característica.

– Pausar, no descargar mensajes hasta que el usuario haga clic en el botón.

– Habilitar desplazamiento, habilite esta opción para habilitar el desplazamiento infinito. A medida que se desplaza por la página, las entradas se cargarán automáticamente, lo que significa que no necesita presionar ningún botón.

– Distancia de desplazamiento, la distancia desde la parte inferior de la pantalla para hacer que se carguen los mensajes. (Predeterminado = 150)

– Páginas máximas, el número máximo de páginas que se cargan mientras se desplaza. (0 = sin restricciones)

– Anulación de pausa, permite que el desplazamiento anule la configuración de Pausa y fuerce la carga de mensajes al desplazarse.

– Tipo de transición, puede seleccionar el estilo de carga de la transición.

– Transition Speed, velocidad de transición en milisegundos.

– Contenedor de transición, retire el contenedor de carga, ¡no recomendado!

– Destruir después, elimina la carga ajax después de cargar una cierta cantidad de páginas (especifique el número en el campo). ¡No necesariamente!

– Publicaciones por página, especifique aquí cuántas publicaciones o páginas se cargarán a la vez.

– Tipo de publicación, seleccione aquí qué tipos de publicaciones desea agregar al desplazamiento infinito.

– Formato de publicación, puede seleccionar el formato del mensaje. Seleccione Formato estándar para mostrar los valores predeterminados.

– Categoría, puedes incluir o excluir ciertas categorías. No seleccione nada, entonces se utilizarán todas las categorías.

– Fecha, puede especificar la fecha de una consulta por fecha de archivo, de modo que se muestren los registros de un archivo específico. No necesariamente.

– Campos personalizados (Meta_Query), puede mostrar ciertos campos personalizados especificando sus datos aquí. ¡No necesariamente! ¡Déjalo sin cambios!

– Término de búsqueda, aquí puede especificar la palabra o palabras mediante las cuales se mostrarán los registros. Es decir, si la entrada contiene dicha palabra, se mostrará la entrada. ¡No necesariamente!

– Parámetros de publicación, aquí puede incluir o excluir ciertos registros especificando su ID. Puede seleccionar el estado de la publicación, como publicada o no.

– Ordenar, aquí puedes elegir por qué parámetros ordenar los registros al mostrarlos en desplazamiento sin fin. Puedes dejarlo como predeterminado.

– Compensación, aquí puede configurar la compensación. Por ejemplo, si especifica 5, se omitirán los primeros 5 registros.

– Argumentos personalizados, lista de valores personalizados separados por punto y coma. Se puede utilizar para solicitar parámetros que no están disponibles en el código corto. ¡No necesariamente!

El shortcode debe agregarse a la página donde habrá desplazamiento infinito. Si seleccionó el tipo de publicación en el código abreviado, las últimas publicaciones se mostrarán en desplazamiento sin fin, etc. ¡Es muy sencillo! Probé personalmente el complemento, ¡todo funciona! 22 de diciembre de 2018 por:

Ilya Zhuravlev

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.

¿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 web 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 sin fin 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. En el caso del desplazamiento, los datos y la acción para recuperarlos (desplazamiento) están directamente relacionados entre sí, por lo que los usuarios reciben una experiencia verdaderamente receptiva desde la interfaz, independientemente del dispositivo que estén utilizando.

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.

La interfaz del servicio Pinterest tiene una opción de marcadores.

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 ver nuevamente lo que seleccionó anteriormente y compararlo con lo que encontró 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

Una 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 comprometer 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 tácita 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 está dividido 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, perderán donde lo dejaron y tendrán 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 da 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 comprometer 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!