portada-ok

El Scroll infinito es un recurso que marca tendencia. Seguro que lo has visto en númerosas página pero, ¿ Es la mejor opción para estructurar los contenidos de una página web? ¡Descúbrelo con nuestro post!

Estructuración de la información

Al enfrentarnos a páginas con mucho contenido (posts, productos, recusos, etc) se hace necesario estructurar toda esa información de forma que sea entendible e interpretable por nuestros usuarios.

Pero ¿cuál es la mejor forma de realizar esa estructuración?

 

Scroll Infinito

El scroll infinito se presenta como una solución bastante acertada para organizar todo ese grueso de información.

Se trata de una funcionalidad que permite que una página vaya cargando más y más contenido conforme el usuario va haciendo scroll en dirección descendente.

Existen muchas páginas muy famosas que optan por esta forma de presentación. Las conoces. Interactúas cada día con ellas. Twitter, Facebook, Tumblr, etc. son solo una muestra.

 

Ventajas del Scroll Infinito

  • Predisposición del usuario

Cuando se está navegando y la información va apareciendo de forma autómatica frente al usuario, éste está predispuesto a seguir asimilando dicho contenido porque no lo interpreta como información adicional que exige de su interacción. Simplemente lo percibe como una continuación.

  • Solución Intuitiva

Hacer scroll es un acto casi involuntario cuando se navega por Internet. En su artículo “Everybody Scrolls”, Rebeca Gordon habla de los procedimientos inherentes al acto de la navegación. Entre ellos se encuentra el scroll. Por lo tanto,  recurrir al scroll infinito como solución para estructurar el contenido de nuestras páginas es una opción que no requeriría de ninguna curva de aprendizaje adicional para nuestros visitantes.  Éstos podrían acceder a todo tu contenido de una forma totalmente intuitiva.

  • Velocidad de carga

Si se implementa bien el código AJAX en nuestra página, el scroll infinito puede agilizar el proceso de carga del site. Al no tener que volver a cargar contenido desde cero (solo el nuevo contenido emergente)

 

Plantillas con Scroll Infinito

Aquí te dejamos una selección de plantillas actuales que aplican la técnica del scroll infinito y además cuentan con un diseño moderno y preparado para conversión.

plantilla-1 plantilla-2 plantilla-3

 

Desventajas del Scroll Infinito

Si bien es cierto que el scroll infinito es una opción muy aceptada entre la comunidad de diseñadores, lo cierto es que también presenta una serie de desventajas. Aquí te las presentamos:

  • Desorientación

Al ir navegando “scroll abajo” llega un momento en el que el usuario pierde su punto de referencia y se desorienta, cosa que no nos conviene nada, sobretodo en lo que a Experiencia de usuario se refiere.

  • No existen enlaces de anclaje externos

Imagina que un usuario guarda la url de una página con scroll infinito para volver a consultar un contenido que le ha parecido interesante. Al volver a acceder a dicha página el punto de anclaje le redirigiría de nuevo a nivel de la cabecera de la web, teniendo que volver a recorrer todo el camino hasta toparse con la información que buscaba.

  • Saturación del browser

Como hemos dicho, si el código AJAX está bien configurado el scroll infinito puede resultarnos útil, pero ¡mucho cuidado! si no implementamos bien esta codificación, podemos saturar la memoria del navegador y hacer que la página se colapse.

  • Arañas de Google

A la hora de rastrear un sitio, el scroll infinito desorienta un poco a las arañas de Google al no acabar de  “entender” cómo está estructurada la página.

 

¿Sirve el scroll infinito para todas las webs?

En mi opinión, no.  Este tipo de scroll encaja mucho más con redes sociales, páginas de blog, etc. en las que el factor cronológico marca el flujo de aparición de los contenidos y favorece una interacción mucho más continuada y rápida.

Por su parte, en las ecommerces, el scroll infinito no acaba de cuajar ya que presenta algunas dificultades para los visitantes:

  • No se puede guardar la url en la que se encuentra el producto que consultan.
  • El tamaño de la página puede desorientar al usuario y provocarle cierta sensación de ansiedad.

Por lo tanto, será el contexto o el entorno de la página el que marque si debemos utilizar o no este tipo de scroll.

 

Alternativas al Scroll Infinito

Suponiendo que tu página no acabe de encajar con el scroll infinito, aquí te presentamos algunas opciones alternativas que puedes utilizar para estructurar tu contenido:

  • Paginación (lo de toda la vida)

Aunque es más tediosa, su uso continuado a lo largo de los años ha hecho que los usuarios estén totalmente familiarizados con ella, por esta razón se convierte en la opción más segura a la hora de estructurar contenido.

Eso sí. Si la implementas, asegúrate de que su apariencia así como su funcionalidad estén preparadas para “la vida moderna”. Es decir, nada de iconos raros, ni instrucciones inteligibles.

Utiliza un rango de números para indicar al usuario las páginas en las que se divide tu contenido y unas flechas indicando el avance o retroceso en la navegación por dichas páginas.

paginacion-bing

p-amazon-carrito

paginacion-amazon

Para que amplies un poco en el tema de la paginación tradicional vs el scroll infinito aquí te dejamos un intersante artículo que seguro que te gusta.  Click aquí.

 

  • Cargar más

Este recurso está a caballo entre la forma de paginación tradicional y el scroll infinito. Es una opción que permite cargar mas contenido en la página pero no de forma automática, sino a través de la función que desencadena el botón “cargar más” “leer más” o, como vemos aquí, “más resultados”

ver-mas-google

Esta es la forma en la que Google muestra sus resultados de búsqueda de imágenes. Aunque las primeras líneas de scroll las añade con la función corrida de scroll infinito, al llegar a un punto concreto este recurso se para y  aparece el botón “Más resultados”

En términos de Experiencia de Usuario, muchos expertos afirmar que 20 líneas de scroll es el nivel máximo hasta el que descienden los usuarios que visitan una web sin perder la atención en aquello que consultan. A partir de ese nivel, según se ha concluído, la atención se dispersa.

De ahí podemos suponer que quizá Google, sabiendo esto, presenta con scroll infinito una determinada cantidad de información y al llegar a la línea en la que la atención de sus users se dispersa, paraliza esta funcionalidad para que el navegador no se sobresature, dejando a elección del usuario si cargar más contenido o no.

 

  • Scroll Horizontal 

El scroll horizontal se había visto en los famosos carruseles de imágenes de muchas webs, sin embargo, para estructurar contenido no se había utilizado hasta el momento en el que el diseño responsive emergió de las cavernas y se instauró en el panorama web.

Con una interfaz tan reducida, los diseñadores y maquetadores están aportando un monton de soluciones muy válidas para estructurar el contenido de una forma intuitiva y muy muy atractiva Fíjate:

imagen-mobile1

Evidentemente, utilizar el scroll horizontal es mucho más coherente en versión mobile ya que el factor “Táctil” de su navegación facilita la interacción del usuario con este recurso.

Aún así, en la actualidad, las versiones “desktop” también recurren al scroll horizontal en sus diseños, aunque en términos de usabilidad y experiencia de usuario creo que no presentan la solución más acertada. Echa un vistazo:

theme1 theme2 theme3

Sea como sea, seguro que el tema del scroll horinzontal se desarrollará más ampliamente conforme vayamos avanzando en diseño de interfaz. Finalmente encontraremos este tipo de opción tanto en desktop como en mobile indistintamente.

 

Y hasta aquí nuestro artículo de hoy.  Esperamos que te haya gustado y, sobretodo, que hayas podido sacar ideas para tus propios proyectos.

Por nuestra parte esperamos que nos dejes algún comentario para que podamos conocer tu opinión sobre el uso del scroll infinito y si has encontrado algún ejemplo de página web que lo utilice de forma diferente.

¡Nos vemos en el próximo post!