Hoy profundizamos 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, aún no se ha adoptado tanto en el diseño web.
Esta característica apareció en un momento de la historia de Internet cuando la cantidad de información que se presentaba en las páginas web aumentaba, y la velocidad de las conexiones permitía al lector acceder y transferir información a mayor velocidad. 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 simple como podría pensar.
Inicios y popularización.
En Google, se llama desplazamiento continuo y también puede ser referido como desplazamiento sin fin. Brevemente, el desplazamiento infinito es una técnica para que el navegador cargue automáticamente contenido nuevo cuando el usuario llega al final de la página, de modo que no es necesario buscar botones de paginación para ir a la siguiente parte; Todo esto aparecerá simplemente haciendo girar la rueda del ratón.
Esta técnica se usa notablemente en la página de noticias en Facebook; La página de resultados de búsqueda de imágenes de Google y la línea de tiempo de Twitter. En la página de demostración del complemento Isotope jQuery se puede ver un interesante ejemplo actualizado publicado con fines de referencia.
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 realizada en 2005 por Bill Scott (Director de Ingeniería de Interfaz de Usuario de 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 para el usuario antes de que tuviera que ir a la siguiente sección, y primero se la llamó la cuadrícula en vivo. El artículo incluía una sección de pros y contras, algunas consideraciones de diseño y formuló los elementos de la pregunta en palabras claras: paginación frente a 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 el desplazamiento de la cuadrícula en vivo, fue posible encontrar textos en línea vilipendiando el fenómeno de fragmentación de la página y elogiando el nuevo rollo con el lema: no obligue al usuario a pedir más contenido: simplemente entréguelo ellos.?
A mediados de 2008, el término scroll infinito ya tenía su propia vida y un sitio con el mismo nombre dedicado a explicar en detalle cómo funciona. El sitio ofreció también un puñado de complementos para permitir el desplazamiento continuo en temas de WordPress, páginas a través de las bibliotecas jQuery y "autopagerize". complementos para Safari y Chrome que podrían agregar automáticamente la función de desplazamiento a los sitios normales.
"No obligue al usuario a pedir más contenido: simplemente dárselo".Incluso en 2012, la técnica aún se presenta como una innovación, ¿para deleite de tu corazón? Junto con la implementación de diseño responsivo. Desde un punto de vista más analítico, este fue un paso más allá en la separación entre la existencia del contenido inicialmente impreso y su contraparte electrónica. Después de todo, la noción de una página web proviene precisamente del mundo material de los 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 mostrados en las pantallas digitales en Disolver esa mentalidad de impresión. Básicamente, Baekdal resuelve el problema con un tipo de fórmula: formato primero o 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 al desplazamiento. Una de las características principales del nuevo iBooks 3.0 fue la posibilidad de desplazar los libros verticalmente. Ahora el lector podría olvidarse del efecto de cambio de página y leer sus libros más vendidos con un movimiento de dedo. Eso fue precisamente una implementación de? Deshacerse del oso bailando? Lema de Baekdal: para permitir que el lector se libere del viejo paradigma del libro físico. Afortunadamente, había una opción para decidir entre el tema tradicional de giro de página o el desplazamiento continuo a voluntad, por lo que el lector tradicional todavía tendría la oportunidad de imitar libros verdaderos dentro de su dispositivo.
¿Por qué evitar esta mejora de UX?
Una de las pocas excepciones a la regla de abarcar 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 funcionaba como se esperaba.
De hecho, se eliminó el desplazamiento infinito del sitio después de que la cantidad de clics en favoritos disminuyera y la función de búsqueda no se utilizara más. 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 estaba maximizando la actividad por sí mismo, o al menos que el público habitual del sitio no estaba de acuerdo con el cambio.
Google es otro ejemplo donde el desplazamiento sin fin no tuvo éxito para ser implementado completamente. Solo la búsqueda de imágenes tiene un desplazamiento infinito, e incluso allí, el desplazamiento está limitado con "¿Mostrar más resultados?" botón.
uno de los usos más creativos del desplazamiento infinito se muestra 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 un usuario mantiene cuando se proporciona más contenido de forma automática 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ía recibir, 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 la nueva información, lo que provoca una especie de entusiasmo y disposición para continuar desplazándose para ver qué sucede. 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 el desplazamiento sin fin de la página de resultados de búsqueda sorprendió o confundió a los usuarios, sobrecargando con más y más información hasta el punto de que se evitó 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 distraen, como la lista de números para la paginación.
Las desventajas
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 debe agregar al final de la 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 efectivamente esa página.
- Uso de la memoria: los navegadores, tanto en computadoras de escritorio como en dispositivos móviles y tabletas, pueden potencialmente quedarse sin memoria y fallar, especialmente cuando la página carga toneladas de imágenes.
- El aumento del 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 con el navegador: dado que el desplazamiento infinito pertenece al ámbito del diseño web sensible, depende de las bibliotecas y los 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 llegar puede ser traumático. Experiencia para el usuario. Además, todo el contenido del pie de página, y por lo tanto, la función del mismo pie desaparecerá.
- Falta de orientación y referencia espacial: en un esquema paginado, los usuarios pueden configurar una referencia visual simple 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í. Puede haber usuarios que se sientan perdidos o confundidos sin saber dónde están realmente o extrañando lo que estaban buscando.
- Pérdida de la última posición del usuario en el flujo de datos, cuando se presiona la actualización o el botón Atrás. Dado que el desplazamiento infinito tiene como objetivo mostrar grandes cantidades de entradas, debe implementarse también 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 perdían el control sobre la página que visitan.
- 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 los resultados confinados después de la página número 2 aparecerán en la página número 1 al desplazarse hacia abajo el tiempo suficiente.
Es por eso que, a pesar de su alta 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.
Unas pocas soluciones
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 debía tener un desplazamiento infinito en una lista central para mostrar noticias y grandes imágenes; esto creó la necesidad de una forma conveniente de manejar todos los elementos sin afectar el rendimiento del desplazamiento. Los trucos de HTML5 y CSS se combinaron para obtener el resultado final de una aplicación que muestra el contenido sin interrupciones.
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 a las que realmente les gustó la implementación del desplazamiento infinito en Etsy.com pueden volver a habilitarlo en su página instalando este complemento 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.
Soluciones de WordPress: Los blogs son quizás los candidatos favoritos para el desplazamiento infinito. Tal vez una pequeña proporción de usuarios todavía no pueda lidiar con el pie de página flotante semitransparente que WordPress coloca cuando se habilita el desplazamiento infinito, pero para la gran mayoría a quien le gusta la técnica, Infinite-Scroll es un complemento que activará el modo de desplazamiento infinito en la mayoría de temas WP y requiere poca experiencia o habilidades de codificación. El plugin 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 utilizando jQuery; este tutorial está dirigido a los valientes usuarios que desean implementar el desplazamiento infinito ingresando el código ellos mismos.
Discusión y recomendaciones: StackOverflow ofrece una gran cantidad de tutoriales sobre cualquier aspecto concebible relacionado con el desplazamiento infinito.
Alternativas móviles: El desplazamiento infinito funciona bien con dispositivos móviles debido a la naturaleza de sus pantallas táctiles. Es posible obtener el efecto en Android mediante el enlace de Android. Los métodos para el desplazamiento de imágenes utilizados en aplicaciones también están disponibles, por ejemplo, para trabajar en iPhones.