Al desplazamiento infinito o no al desplazamiento infinito: donde hemos llegado hasta ahora

Hoy estamos profundizando en los hechos más relevantes sobre cómo el desplazamiento infinito se convirtió en una técnica tan aclamada en toda la web, y por qué, a pesar de su popularidad, todavía no es tan ampliamente adoptado en el diseño web.

Esta característica apareció en un momento de la historia de Internet cuando aumentó la cantidad de información que se presentaría en las páginas web, y la velocidad de las conexiones permitió al lector acceder y transferir información a mayores velocidades. La cuestión del desplazamiento infinito en las páginas web es uno de los aspectos involucrados en el diseño de la experiencia del usuario, y no es tan sencillo como podría pensar.

Comienzos y Popularización

En Google, se llama desplazamiento continuo y puede estar también se conoce como desplazamiento sin fin. Brevemente, el desplazamiento infinito es una técnica para hacer que el navegador cargue automáticamente nuevo contenido cuando el usuario llega al final de la página, por lo que no es necesario buscar botones de paginación para pasar a la siguiente parte; todo aparecerá simplemente girando la rueda del mouse.

Esta técnica se utiliza notablemente en la página de noticias en Facebook; los resultados de búsqueda de imágenes de Google y la página de la línea de tiempo de Twitter. Se puede ver un interesante ejemplo actualizado publicado con fines de referencia en la página de demostración del complemento Isotope jQuery.

hexaedro.eu aprovecha el desplazamiento horizontal infinito para ilustrar la evolución de la humanidad

Una de las primeras referencias a este tipo de desplazamiento fue hecha en 2005 por Bill Scott (Director de Ingeniería de Interfaz de Usuario en PayPal) en su artículo Death to Paging! - Rico LiveGrid lanzado.

Fue desarrollado para presentar una tabla de datos muy grande en una sola vista al usuario antes de que tuviera que ir a la siguiente sección, y primero se le denominó la cuadrícula de desplazamiento en vivo. El artículo incluyó una sección de pros y contras, algunas consideraciones de diseño y formuló los elementos de la pregunta en palabras claras: paginación versus desplazamiento infinito.

La técnica fue refinada y comenzó a ser muy popular en la web, causando una repentina explosión de entusiasmo al respecto. Un año después del artículo de Scott, que anunciaba la cuadrícula de desplazamiento en vivo, era posible encontrar textos en línea que vilipendiaban el fenómeno de fragmentación de página y elogiaban el nuevo pergamino con el lema "No obligue al usuario a pedir más contenido: solo déselo a ellos."

A mediados de 2008, el término de desplazamiento infinita ya tenía su propia vida y un sitio con el mismo nombre dedicada a explicar en detalle cómo funciona. El sitio también ofreció un puñado de complementos para permitir el desplazamiento continuo sobre temas de WordPress, páginas a través de bibliotecas jQuery y complementos de "autopagerize" para Safari y Chrome que podrían agregar automáticamente la función de desplazamiento a sitios normales.

"No obligue al usuario a pedir más contenido: simplemente déselo".

Incluso en 2012, la técnica todavía se presenta como una innovación "para el deleite de su corazón" junto con la implementación de un diseño receptivo. Desde un punto de vista más analítico, este fue un paso más en la separación entre la existencia inicialmente impresa del contenido y su contraparte electrónica. Después de todo, la noción de una página web proviene precisamente del mundo material de periódicos, revistas y libros con páginas de papel reales.

Thomas Baekdal explica la relación entre las páginas impresas y los textos que se muestran en las pantallas digitales en Dissolving that Print Mentality. Baekdal básicamente resuelve el problema con un tipo de fórmula: primero el formato o el contenido primero. En su análisis, Baekdal afirma que las limitaciones de los medios impresos no deben transferirse a la pantalla digital.

Apple también rindió homenaje a la tendencia de desplazamiento. Una de las principales características del nuevo iBooks 3.0 fue la posibilidad de desplazar los libros verticalmente. Ahora el lector podría olvidarse del efecto de pasar de página y leer a sus bestsellers moviendo el dedo. Esa fue precisamente una implementación del lema de "deshacerse del oso danzante" de Baekdal: permitir que el lector sea liberado del viejo paradigma del libro físico. Afortunadamente, había una opción para decidir entre el tema tradicional de cambio de página o el desplazamiento continuo a voluntad, por lo que el lector anticuado aún tendría la oportunidad de imitar libros verdaderos dentro de su dispositivo.

¿Por qué evitar esta mejora UX?

Una de las pocas excepciones a la regla de adoptar el desplazamiento infinito fue el caso de Dan McKinley en Etsy, donde una investigación práctica utilizando la metodología de prueba A / B mostró que la técnica no estaba funcionando como se esperaba.

De hecho, se eliminó el desplazamiento infinito del sitio después de que disminuyó el número de clics en los favoritos y la función de búsqueda ya no se utilizó. A pesar de un posible sesgo en el método utilizado para evaluar las reacciones de los usuarios, está claro que el desplazamiento infinito no maximizaba la actividad en sí mismo, o al menos que el público habitual del sitio no estaba de acuerdo con el cambio.

Google es otro ejemplo en el que el desplazamiento sin fin no tuvo éxito para ser aplicado plenamente. Solo la búsqueda de imágenes tiene un desplazamiento infinito, e incluso allí, el desplazamiento está limitado con el botón "mostrar más resultados".

Uno de los usos más creativos del desplazamiento infinito se representa en el sitio distancetomars.com

Los beneficios

Más que ser simplemente una característica elegante, el desplazamiento infinito tiene varias ventajas que hacen que valga la pena en muchos casos:

• La atención ininterrumpida que mantiene un usuario cuando se proporciona automáticamente más contenido es el núcleo del atractivo del desplazamiento infinito. El lector no tendrá que detenerse para pensar dónde encontrar el siguiente botón o qué número de páginas deberían aparecer, luego de una mejor atención.
• En términos psicológicos, el desplazamiento infinito parece desencadenar respuestas automáticas basadas en la curiosidad y el alivio de la expectativa producida mientras se espera nueva información, lo que provoca una especie de emoción y voluntad de continuar desplazándose para ver qué surge. Este mecanismo psicológico merece una comprensión suficiente, ya que la ventaja inicial puede convertirse en un problema. Por ejemplo, los hallazgos de McKinley sugieren que desplazar sin cesar la página de resultados de la búsqueda de alguna manera sorprendió o confundió a los usuarios, sobrecargándolos con más y más información hasta el punto de evitar el uso de la búsqueda.
• Los diseños de plantillas pueden beneficiarse con más limpieza, más espacio para el contenido y menos elementos que distraigan, como la lista de números para paginación.

Los inconvenientes

Por supuesto, también hay una serie de problemas con el desplazamiento infinito que deben considerarse:

• Aumento del tiempo de carga de la página: es obvio que el contenido adicional que se agregará al final de una página necesita más tiempo para descargarse. Los usuarios con conexiones de acceso telefónico o planes de datos móviles deficientes tendrán una capacidad reducida para navegar de manera efectiva esa página.
• Uso de memoria: los navegadores, tanto en computadoras de escritorio como en dispositivos móviles y tabletas, pueden quedarse sin memoria y bloquearse, especialmente cuando la página carga toneladas de imágenes.
• El mayor tiempo de carga junto con más memoria del sistema requerida y el uso del procesador inevitablemente podría resultar en una navegación desagradable y entrecortada.
• Compatibilidad del navegador: dado que el desplazamiento infinito pertenece al ámbito del diseño web receptivo, depende de bibliotecas y complementos que pueden no ser totalmente compatibles en dispositivos más antiguos o versiones de navegador.
• Tanto ver desaparecer el pie de página como no poder alcanzarlo puede ser una experiencia "traumatizante" para el usuario. Además, todo el contenido del pie de página y, por lo tanto, la función del pie de página desaparecerá.
• La falta de orientación y referencia espacial: En un esquema de usuarios paginados pueden establecer una simple referencia visual para orientarse a través del contenido de la página y marcar los lugares donde se encuentra algo de interés, por lo que es posible volver rápidamente allí más tarde. Podría haber usuarios que se sientan perdidos o confundidos al no saber dónde están realmente o al perderse lo que estaban buscando.
• Pérdida de la última posición del usuario en la secuencia de datos, cuando se presiona el botón Actualizar o Atrás. Dado que el desplazamiento infinito tiene como objetivo mostrar grandes cantidades de entradas, debe implementarse también como una forma de recuperar la posición real en la lista, para evitar situaciones frustrantes. La mayoría de las quejas contra páginas sin fin se refieren a estos dos últimos puntos, ya que los usuarios estaban perdiendo el control sobre la página que visitaban.
• Los marcadores tienden a ser inútiles ya que un punto de interés no se marcará en una página discreta sino que flotará en algún lugar del flujo de entradas.
• Si bien no es necesariamente algo malo, las clasificaciones pueden variar mucho en las páginas de búsqueda, ya que esos resultados confinados después de la página número 2 aparecerán en la página número uno simplemente desplazándose hacia abajo el tiempo suficiente.

Es por eso que, a pesar de su gran popularidad, las páginas infinitas no siempre son la mejor opción para cada sitio o incluso para el mismo sitio visto en diferentes dispositivos.

Algunas soluciones alternativas

Los desarrolladores encuentran constantemente soluciones para estos inconvenientes, haciendo que el desplazamiento infinito sea más efectivo. El caso bien documentado de la nueva aplicación de LinkedIn para iPad proporciona un buen estudio de caso sobre problemas y soluciones al implementar el desplazamiento infinito.

La aplicación tenía que tener un desplazamiento infinito en una lista central para mostrar noticias y fotos grandes; Esto creó la necesidad de una forma conveniente de manejar todos los elementos sin afectar el rendimiento del desplazamiento. Los trucos HTML5 y CSS se combinaron para obtener el resultado final de una aplicación que muestra el contenido sin problemas y sin fallar.

Sin lugar a dudas, esta mejora de la experiencia del usuario todavía tiene una forma justa de evolucionar, pero los usuarios ya disfrutan de una mejor experiencia de navegación, especialmente cuando se trata de navegar páginas con mucha información, gráficos y texto.

Zona de repositorio

El desplazamiento infinito está aquí para quedarse, por lo que es recomendable conocer diferentes métodos para que funcione:

Enhantsy: El puñado de personas que realmente le gusta la implementación de desplazamiento infinito en Etsy.com puede volver a activarlo en su página mediante la instalación de este plugin desde la página Enhantsy. El complemento ofrece varias otras funciones además de restaurar el desplazamiento continuo en todas las páginas de Etsy.

WordPress Soluciones: Los blogs son quizás los candidatos favoritos para el desplazamiento infinito. Tal vez una pequeña proporción de usuarios aún no puede lidiar con el pie de página flotante semitransparente que WordPress coloca cuando el desplazamiento infinito está habilitado, pero para la gran mayoría que le gusta la técnica, Infinite-Scroll es un complemento que activará el modo de desplazamiento sin fin en la mayoría de temas de WP y requiere poca experiencia o habilidades de codificación. El complemento Jetpack también ofrece desplazamiento infinito como uno más entre docenas de funcionalidades. Tuts + ha publicado un tutorial sobre cómo lograr un desplazamiento infinito usando jQuery; Este tutorial está dirigido a los valientes manipuladores dispuestos a implementar un desplazamiento infinito ingresando el código ellos mismos.

Discusión y Recomendaciones: StackOverflow ofrece un montón de tutoriales sobre cualquier aspecto imaginable relacionada con el desplazamiento infinito.

Alternativas móvil: desplazamiento infinito funciona bien con dispositivos móviles debido a la naturaleza de sus pantallas táctiles. Es posible obtener el efecto en Android utilizando Android-Binding. Los métodos para el desplazamiento de imágenes utilizados en aplicaciones también están disponibles, por ejemplo, para trabajar en iPhones.