Desplazamiento de página infinito: características e ideas. “Carga diferida” de contenido en la página de destino
Es una negativa a cargar todo el contenido de una página cuando no es necesario. Esto aplica un marcador que indica que los datos no se han cargado, pero si es necesario, será necesario cargarlos.Mediante la carga diferida, las imágenes y otros materiales del sitio se cargan de forma asincrónica y, más específicamente, después de que el fragmento visible de la página web se carga por completo o exclusivamente cuando se muestra la parte visible de la ventana del navegador. Por ejemplo, si un visitante no se desplaza hasta el final de la página, las imágenes ubicadas en la parte inferior no se cargarán.
La carga diferida es relevante en muchos recursos, especialmente aquellos con abundantes imágenes. Visite cualquier servicio en línea con fotos de alta resolución y observe cómo el sitio carga solo las fotos visibles en su pantalla, y cuando se desplaza hacia abajo, las nuevas fotos comienzan a cargarse tan pronto como aparecen en su pantalla. A medida que se desplaza, los marcadores de posición se reemplazan con imágenes de alta resolución.
A menudo hay casos en los que un determinado fragmento de una página no es visible para todos, pero se gasta una gran cantidad de recursos en su procesamiento o transmisión de material. Ahí es cuando llega el momento de pensar en la carga diferida, que evita que se generen y carguen elementos ocultos hasta que sea necesario verlos o usarlos.
Sólo una nota.
La carga diferida está habilitada por y es generada por eventos monitoreados por. Por lo tanto, antes de utilizar la carga asincrónica, es importante tener en cuenta que la función no estará disponible para usuarios que no tengan JS, y los robots de los motores de búsqueda no verán el contenido oculto por el script.
En pocas palabras, las fotos no se cargarán a menos que el usuario se desplace hasta ese punto de la página. Y esto tiene un efecto positivo en el ahorro de tráfico y, por lo tanto, muchos usuarios que utilizan dispositivos y aquellos con Internet débil apreciarán esta característica del recurso. La próxima vez definitivamente querrán volver a visitarlo.
Con base en lo anterior, podemos concluir que la carga diferida mejora significativamente el rendimiento del sitio web.Modo de fondo.
5 opciones de carga diferida para imágenesHablemos de las soluciones de carga diferida para imágenes más comunes y listas para usar.
En una versión simplificada, este script de carga diferida reemplaza el atributo src con data-src en la etiqueta img:
Los elementos img que contienen atributos data-src están ocultos en . Una vez cargadas las imágenes, se muestran sin problemas mediante transiciones:
Img (opacidad: 1; transición: opacidad 0,3s; ) img (opacidad: 0; )
Luego, JavaScript pasa el atributo src a todas las etiquetas img, que finalmente reciben el valor del atributo data-src. Una vez cargadas todas las imágenes, data-src se elimina de img:
ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "fuente de datos");
David Walsh también proporcionó un recurso alternativo en caso de falla de JavaScript, que es eficiente y simple de implementar. Sin embargo, su funcionalidad no permite la carga cuando se desplaza la página web. Esto significa que el navegador carga todas las imágenes, independientemente de si el visitante las "alcanzó" o no. Sí, el respaldo le permite mostrar la página más rápido, porque las imágenes se cargan después del HTML, pero no habrá ahorro de tráfico.
La técnica implica carga diferida, que utiliza JS como una mejora de CSS y HTML estándar. La mejora progresiva garantiza que las imágenes se muestren a los usuarios incluso si el JavaScript responsable de mostrarlas está deshabilitado o aparece un error que bloquea el funcionamiento del script.
La mejora progresiva tiene varios beneficios:
Puede encontrar información detallada sobre la solución Osborne.
No 3. Complemento bLazy.js usando JS simpleEste script es liviano, realiza cargas asincrónicas y trabaja con múltiples imágenes para ahorrar tráfico y solicitudes del servidor. Su uso proporciona:
Implementación estándar. Margen:
Es necesario cambiar la etiqueta img:
JavaScript: especifique una llamada bLazy estándar y configure el objeto usando el mapa de opciones:
Var bLazy = new Blazy(( //opciones ));
No 4. Complemento jQuery de carga diferida XTUn complemento excelente para escribir cómodamente su propio script de carga diferida. Tenga en cuenta que existe una versión completa del complemento jQuery, donde puede cargar videos, iframes y otras etiquetas que contienen el atributo src mediante carga asincrónica, y hay una versión simplificada dedicada únicamente a la carga diferida simple.
Para usar el complemento en el sitio, debe agregar la biblioteca jQuery antes de la etiqueta de cierre, especificando jquery.lazyloadxt.js (versión simplificada) o jquery.lazyloadxt.extra.js (extendido):
También existe una opción alternativa que le permite no utilizar el complemento completo: un script ligero jqlight.lazyloadxt.min.js:
En imágenes, reemplace src con el atributo data-src:
El complemento se puede activar automáticamente o puede hacerlo usted mismo. Para hacer esto, simplemente ingrese:
$(elementos).lazyLoadXT();
Lazy Load XT jQuetry agrega una gran cantidad de complementos. Por ejemplo:
Puede agregar varios efectos desde Animate.css para cargar imágenes.
Puede ver todos los complementos y opciones usando este enlace.
No 5. Imagen borrosa de Craig BucklerProbablemente hayas notado en algunos sitios web cómo la imagen principal de un artículo aparece borrosa al principio, pero luego se carga una imagen clara y de alta calidad. Hay varias opciones para cargar fotografías utilizando el método del efecto de desenfoque. Uno de los mejores es Craig Buckler.
Las ventajas de la técnica son:
Puede descargar el código desde el repositorio del sitio GitHub.
Primero necesitas incluir la biblioteca jQuery:
La esencia del método es cargar el elemento div requerido desde el archivo izquierdo a la página de destino usando AJAX.
Cartera 
Mostrar más...
Todo es bastante simple y claro. Pero hay que prestar atención a los div con id=”smartPortfolio”, porque se encuentran en el script más importante responsable de cargar contenido de documentos de terceros. El “contenedor” de la cartera es SmartPortfolio. MoreButton: un botón que, al hacer clic, carga otro fragmento de cartera. LoadingDiv: parte de la página donde se mostrará el texto si el portafolio está completamente abierto o se produce algún error.
Por ejemplo, muchas personas que lean el artículo probarán el script a través del archivo de índice en el navegador en lugar de cargarlo en el servidor. Esto mostrará una notificación de error. Y si además la conexión a Internet es débil, los archivos tardarán más en descargarse. Por lo tanto, es importante escribir un mensaje o insertar una imagen para informar al usuario que la descarga está en curso.
Aquí está el script en sí, para conectarlo necesita insertar el código antes de la etiqueta del cuerpo de cierre:
Var carga diferida = carga diferida || (); (función ($, carga diferida) ( "usar estricto"; var página = 2, botónId = "#moreButton", cargandoId = "#loadingDiv", contenedor = "#smartPortfolio"; lazyload.load = función() ( var url = "./pages/" + página + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, éxito: función(respuesta) ( if ( !respuesta || respuesta.trim() == "NINGUNO") ( $(buttonId).fadeOut(); $(loadingId).text("Cartera completamente cargada"); retorno; ) appendContests(respuesta); respuesta) ( $(loadingId).text("Lo sentimos, hubo algún error con la solicitud. Actualice la página."); ) )); $(buttonId).show(); ).appendTo($(contenedor));
En la estructura del recurso web, las páginas de las que se tomarán los datos para cargar al hacer clic se encuentran en la carpeta de páginas. Contiene 3 archivos, el último está vacío. Esto lo proporciona la lógica del script. El camino en él se ve así:
Var URL = "./páginas/" + página + ".html";
Pero cuando se utiliza una ruta diferente, es importante reemplazarla en el propio script. Se debe hacer lo mismo si utilizó otras identificaciones:
ButtonId = "#moreButton", cargandoId = "#loadingDiv", contenedor = "#smartPortfolio";
Luego, como mencionamos anteriormente, antes de la etiqueta del cuerpo (cierre), indicamos el script:
Conclusión
La carga diferida le permite acelerar el rendimiento del sitio y ahorrar tráfico significativamente debido al hecho de que los objetos ubicados fuera del rango de visibilidad de la ventana del navegador se cargan solo después de que el usuario los necesita. Debido a la variedad de tipos de carga asincrónica y opciones de implementación, se puede utilizar para diferentes tipos de sitios web y su tráfico objetivo.
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 finEl 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 profundidadSi 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.
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
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
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 datosOtro 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 irrelevanteEs 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.
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
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.
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
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 elementoLa 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
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 usarSó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ónLos 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.
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 finEl 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 profundidadSi 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.
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
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
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 datosOtro 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 irrelevanteEs 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.
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
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.
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
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 elementoLa 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
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 usarSó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ónLos 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.
Si alguna vez inició sesión en Twitter o buscó una imagen en Google, probablemente haya visto el desplazamiento infinito en acción. Podrías pasar horas desplazándote por una página sin un final a la vista.
En los últimos años, los especialistas en marketing han estado experimentando activamente con diferentes tipos de contenido. Sin embargo, ahora la cuestión de cuál es la mejor manera de mostrar la información en la pantalla para que el usuario se sienta lo más cómodo posible está cada vez más en primer plano. Y el desplazamiento infinito es una de las soluciones más populares hoy en día.
¿Quiere comprender cómo el desplazamiento infinito afecta al SEO y si vale la pena usarlo en su sitio? Primero debes decidir qué es esta herramienta.
Ventajas y desventajas del desplazamiento infinito
Un mismo enfoque de trabajo puede llevar a una empresa al éxito y a otra al fracaso. El desplazamiento infinito es, sin duda, una de las formas más prometedoras de presentar contenido a los lectores. Sin embargo, esto no significa que debas cambiar inmediatamente al desplazamiento infinito: primero debes considerar todos los pros y los contras.
Los beneficios del desplazamiento infinito
1. Es conveniente para usuarios de dispositivos móviles.
Cuando se utiliza un teléfono con pantalla táctil, es mucho más fácil desplazarse por la página que hacer clic en enlaces pequeños.
2. Ayuda a mantener la atención del lector.
3. Hace que sea más conveniente mostrar grandes cantidades de información en la pantalla.
¿Quiere publicar un artículo de tamaño impresionante en su sitio web, pero no quiere dividirlo en varias partes? El desplazamiento sin fin te ayudará a salir de esta situación.
4. Es ideal para sitios que actualizan información en tiempo real
El desplazamiento infinito es la solución óptima para recursos que proporcionan datos en tiempo real. Esta es otra razón por la que a las redes sociales les gusta esta herramienta.
5. El desplazamiento infinito no causa ningún inconveniente a los usuarios relacionado con la velocidad de carga.
Los recursos que implementan un sistema de desplazamiento infinito ofrecen, en promedio, 7 mensajes nuevos al usuario con cada desplazamiento, lo que no difiere mucho de los indicadores de sitios con otros tipos de navegación.
Desventajas del desplazamiento infinito
1. Hace que sea difícil encontrar la información que necesita.
Si un lector necesita acceder a un contenido específico en un sitio de desplazamiento infinito, se verá obligado a dedicar algún tiempo a desplazarse por la página. Es por eso que Google no ofrece a los usuarios desplazamiento infinito para ver los resultados de búsqueda.
2. No te permite usar un pie de página
El pie de página es un lugar donde puede colocar un enlace al historial de la empresa o, por ejemplo, a información de contacto. Mucha gente está acostumbrada a buscar esta información al final de la página. Si utiliza el desplazamiento infinito, tendrá que buscar un lugar diferente para colocar su información de ayuda.
3. No permite al usuario omitir contenido no interesante con un solo clic.
Un visitante de un sitio con desplazamiento interminable que encuentre contenido que no le resulte muy interesante se verá obligado a desplazarse manualmente.
4. El desplazamiento infinito aumenta la carga en los servidores
Al introducir el desplazamiento infinito, se utiliza activamente JavaScript, por lo que los requisitos de rendimiento del servidor aumentan constantemente.
¿Cómo saber si su sitio necesita desplazamiento infinito?
Los pros y los contras del desplazamiento infinito enumerados anteriormente le dan una idea general sobre esta herramienta. Si aún no estás seguro de utilizarlo, responde dos preguntas:
1. ¿Su empresa requiere que los usuarios busquen productos o servicios en el sitio?
Si es así, optar por el desplazamiento infinito podría tener consecuencias extremadamente negativas para ti.
Las empresas de comercio electrónico, por ejemplo, no pueden saber qué necesitará su próximo cliente ni qué información deben proporcionarle. Si esperas que el usuario llegue a la sección que busca, tu tarea se reduce a hacerle el camino lo más fácil posible. Y el desplazamiento sin fin en este caso puede crear problemas para el cliente.
Tomemos, por ejemplo, Etsy, una gran plataforma de comercio en línea. La empresa intentó utilizar el desplazamiento infinito en su sitio web, pero no pudo obtener ningún beneficio. El ingeniero jefe de Etsy, Dan McKinley, no puede dar una explicación clara de este hecho. Esto es lo que dice sobre el desplazamiento infinito:
“La gente es extremadamente sensible a cualquier cambio en la interfaz. Pero mientras el algoritmo de búsqueda sitúa los 16 resultados más relevantes en la parte superior de la lista, el desplazamiento infinito permite al usuario obtener un número "infinito" de resultados menos relevantes (que, sin el desplazamiento infinito, tendría que hacer clic en el botón correspondiente). ) sin gastar ningún esfuerzo adicional.
No quiero decir que el desplazamiento interminable sea estúpido. Esta herramienta puede aportar muchos beneficios, pero antes de decidirse a utilizarla, intente determinar cómo reaccionarán los usuarios ante la innovación”.
Si realmente quiere utilizar el desplazamiento infinito en su sitio, tiene sentido realizar pruebas divididas. Esto le permitirá comprender cuánto les gusta a sus clientes este tipo de navegación.
2. ¿Su sitio ofrece principalmente contenido?
Si es así, probablemente lo que necesitas sea desplazamiento infinito.
Todo el contenido de los sitios diseñados para entretener a los visitantes tiene la misma utilidad para aquellos. A los propietarios de este tipo de sitios no les importa en qué página termine una persona. Lo principal es que el contenido que encuentre allí sea capaz de llamar su atención.
Un buen ejemplo es el sitio de noticias Inc. Como puede ver, una parte importante de la página está ocupada por . Al mismo tiempo, la información se organiza de tal manera que el proceso de percepción sea lo más sencillo posible.
Recursos como Inc. o Mashable, a menudo no tienen pie de página, lo que reemplaza con bastante éxito el botón de menú en la parte superior de la página. El usuario tiene así una opción: puede moverse instantáneamente a un elemento específico del sitio o simplemente desplazarse por el feed en busca de materiales interesantes.
¿Cómo afecta el uso del desplazamiento infinito al SEO?
Si va a implementar el desplazamiento infinito, debe descubrir cómo se "sienten" los motores de búsqueda con respecto a esta idea. Esto es lo que Scott Langdon de HigherVisibility tiene que decir al respecto:
“Al rastrear un sitio web con un sistema de desplazamiento infinito, los robots de Google solo “verán” la parte de la información que el usuario ve antes del primer desplazamiento. El contenido restante no se indexará y, en consecuencia, no podrá aparecer en la página de resultados de búsqueda para una solicitud en particular”.
Sin embargo, este problema se puede solucionar. Los consejos de John Muller, representante de Google, le ayudarán a conseguirlo:
El siguiente diagrama muestra cómo y cómo no paginar (en el segundo caso, algunos de los elementos de contenido se indexarán dos veces).
