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!