Llévelo al límite: una descripción general de los sitios web de desplazamiento largo

Los sitios web de desplazamiento largo o desplazamiento infinito son exactamente eso: las páginas son mucho más largas que la página del sitio web "promedio" y, por lo tanto, se desplazan "infinitamente". Estos tipos de sitios se han vuelto populares entre los sitios de redes sociales y sitios como Pinterest que incluyen una gran cantidad de contenido generado por los usuarios, así como algunos sitios de noticias y blogs; los sitios web personales y las carteras también están comenzando a emplear técnicas de desplazamiento largo para aumentar participación del usuario y la cantidad de tiempo que las personas pasan en un sitio.

El desplazamiento infinito se ha convertido en un patrón de diseño popular y común; sin embargo, existen algunos peligros potenciales que los diseñadores de UI deben tener en cuenta al diseñar un sitio que utilice desplazamiento largo. También hay algunos tipos de sitios en los que no es apropiado emplear un patrón de diseño de desplazamiento largo.

El propósito y los beneficios del desplazamiento largo

Uno de los mayores beneficios de los sitios web de desplazamiento largo es que mantienen a los visitantes en un sitio por más tiempo. Cuando las personas no tienen que tomar una decisión consciente para consumir más contenido, es menos probable que hagan clic.

Piense en esto como algo similar a la forma en que Facebook, YouTube, Netflix y sitios similares reproducen automáticamente los videos cuando finaliza el que está viendo un usuario. Saben que si un visitante tiene que hacer un esfuerzo para hacer clic en un nuevo video, es probable que haga clic en un sitio completamente diferente. Pero si los videos siguen reproduciéndose, es más probable que continúen viéndolos.

Cuando los sitios de desplazamiento largo están codificados correctamente, cargan una nueva URL con cada nuevo contenido. Eso equivale a más visitas a la página del sitio, lo que puede aumentar los ingresos publicitarios y el valor general del sitio.

Al igual que con cualquier decisión de UX, es importante sopesar las ventajas y desventajas para las personas que realmente utilizarán el sitio antes de decidir un formato. El desplazamiento largo puede ser una gran opción para ciertos tipos de sitios, mientras que en otras situaciones todo lo que hace es frustrar a los usuarios. Es importante aprender la diferencia entre los dos.

Cuándo usar el desplazamiento largo (y cuándo no)

La clave para recordar al considerar el desplazamiento largo es que el contenido debe dictar el formato sin importar qué tipo de sitio se esté diseñando. Los sitios web de desplazamiento largo son excelentes para ciertos tipos de contenido, pero pueden presentar una gran falla de UX con otros tipos.

En general, los sitios orientados a objetivos y tareas no se benefician de los diseños de desplazamiento infinito (por ejemplo, sitios de comercio electrónico y tutoriales u otros sitios educativos donde los usuarios quieren ver un progreso definitivo). Estos tipos de sitios deben brindar a los usuarios una sensación de finalización y logro, lo cual es más difícil de lograr con los sitios de desplazamiento prolongado.

Etsy, por ejemplo, probó un diseño de desplazamiento infinito en 2012 y terminó volviendo a la paginación. Descubrieron que, si bien los clientes seguían comprando aproximadamente al mismo ritmo, la participación de los usuarios disminuyó considerablemente. Incluso cosas como la cantidad de búsquedas realizadas se redujeron.

Una opción que algunos sitios de comercio electrónico ofrecen a los visitantes es la opción "Ver todo" al mirar las páginas de productos. Esto le da al usuario la opción de ver el sitio en un formato de desplazamiento infinito si así lo desea, conservando las páginas de resultados más cortas para los usuarios que prefieren ese formato.

La paginación también es útil cuando es importante que las personas vean la información en orden cronológico. Mientras que un sitio web de desplazamiento de una página puede alentar a las personas a hojear y saltar, la paginación ralentiza al visitante y aumenta la probabilidad de que consuma información en el orden correcto.

Donde un sitio web de desplazamiento de una sola página realmente puede brillar es en sitios donde leer contenido o artículos adicionales es el flujo natural. Esto se aplica a cosas como sitios de noticias o blogs temáticos. Los usuarios de estos sitios a menudo quieren obtener grandes cantidades de información a la vez, y el desplazamiento infinito lo hace mucho más fácil.

Otra área obvia donde el desplazamiento infinito es una opción popular de UX son los sitios de redes sociales o sitios con mucho contenido generado por el usuario. Facebook, Pinterest y Twitter usan desplazamiento infinito. Estos sitios quieren mantener a los usuarios en el sitio el mayor tiempo posible, y el desplazamiento infinito lo hace bien.

Costos psicológicos del pergamino largo

Los efectos psicológicos de cualquier decisión de diseño siempre deben considerarse cuidadosamente. Cuando se trata de sitios web de desplazamiento de una sola página, existen efectos psicológicos a favor y en contra.

Lo primero que hay que tener en cuenta es que a los usuarios no les importa hacer clic con un propósito. Hacer clic ha sido parte de la informática, las interfaces gráficas de usuario e Internet prácticamente desde sus inicios. Las personas están acostumbradas a ese tipo particular de interacción y no se desanimarán si tienen que hacer clic en algunos enlaces para acceder a más contenido.

A muchos usuarios no les gusta el desplazamiento infinito de forma predeterminada. Enfrentarse a una página extremadamente larga para desplazarse puede sentirse un poco como ahogarse en un mar interminable de información. Cuando los usuarios buscan información específica, el desplazamiento rara vez es la forma más eficiente de encontrarla.

Dado que no mostrará con precisión la longitud de la página, el desplazamiento infinito rompe la barra de desplazamiento al costado de la página. Si bien no todos los usuarios hacen uso de la barra de desplazamiento, a este respecto, aquellos que lo hacen pueden encontrar frustrante el desplazamiento infinito.

El desplazamiento infinito también elimina la sensación de finalización que los usuarios obtienen al terminar una tarea o alcanzar un objetivo en una página y luego hacer clic en la página siguiente. Perder este sentido de finalización puede desalentar a los usuarios y hacer que busquen otras fuentes para la misma información o tarea.

Otro impacto psicológico negativo que pueden tener los sitios web de desplazamiento prolongado es que los usuarios tienden a ver el contenido que está más abajo en la página como menos importante que el contenido en la parte superior. El uso de encabezados puede ayudar con esto, ya que "reinicia" el cerebro del visitante sobre dónde está la "parte superior".

Prácticas recomendadas para sitios web de desplazamiento largo

Si se ha determinado que un proyecto de sitio web es adecuado para un diseño de desplazamiento largo, hay algunas mejores prácticas a tener en cuenta para asegurarse de que ofrece una experiencia de usuario óptima.

Primero, ¡deshazte del pie de página! Cuando el contenido se carga continuamente, el pie de página se empujará continuamente fuera de la parte inferior de la página. Eso significa que cualquier contenido o información contenida en el pie de página permanecerá fuera de la vista. Peor aún es cuando los usuarios echan un vistazo al pie de página, pero lo pierden de vista antes de que tengan la oportunidad de hacer clic en cualquier cosa. Usar un pie de página adhesivo es una forma de evitar esto, aunque deshacerse del pie de página por completo suele ser una mejor opción.

El uso de señales visuales es importante, especialmente si no es inmediatamente obvio cuando se carga la pantalla principal que hay más contenido en la página. Los sitios que tienen una imagen de encabezado grande o contenido visual que llena la pantalla cuando se carga la página, a menudo incluyen una flecha (a veces animada) o imágenes similares para indicar que hay más contenido debajo.

La navegación debe estar siempre visible, ya sea mediante un encabezado fijo o una barra lateral estacionaria con enlaces de navegación. La excepción a esto son los dispositivos móviles, donde los encabezados fijos pueden ocupar un espacio valioso en la pantalla. Facebook maneja esto bien al hacer que el encabezado desaparezca cuando los usuarios se desplazan hacia abajo, pero luego vuelve a aparecer cuando comienzan a desplazarse hacia arriba.

El navegador web Chrome hace algo similar con sus controles en la parte inferior de la pantalla; desaparecen cuando el usuario se desplaza hacia abajo y reaparecen cuando comienzan a desplazarse hacia arriba. Es una forma muy intuitiva de crear una interfaz que maximiza el espacio disponible en la pantalla.

Una característica vital de UX que afortunadamente se ha vuelto más común en los sitios web de desplazamiento infinito es cambiar la URL a medida que se desplaza cada sección. Algunos hacen esto con marcadores internos dentro de la página. Otros sitios, en particular los sitios de noticias y los blogs, actualizan la URL completa cuando el usuario se desplaza. Esto es importante, ya que permite a los usuarios vincular exactamente el contenido al que desean vincularse, independientemente de los cambios en la página misma.

Algunos diseñadores web optan por crear lo que podría considerarse un sitio de desplazamiento largo "híbrido", con un botón "cargar más" que carga contenido directamente en la misma página. Algunos diseñadores de UI usan esto repetidamente en la página, mientras que otros optan por incluirlo solo una vez y luego convierten el sitio en un formato de desplazamiento largo más tradicional.

Además de estas consideraciones de diseño específicas del sitio web de desplazamiento largo, otras mejores prácticas de UI y UX para crear buenos diseños aún se aplican a los sitios que emplean desplazamiento infinito.

Ejemplos de desplazamiento largo bien hecho

Luego está este sitio, de Andrew McCarthy. Si bien el diseño es único, se desplaza infinitamente con la misma información una y otra vez. Dado que McCarthy es diseñador, es probable que sea una elección deliberada para sobresalir entre la multitud.

Y otro ejemplo de Sam Rosen, quien también sigue repitiendo el mismo contenido una y otra vez, aunque este sitio vuelve a la parte superior en lugar de volver a cargar todo el contenido.

Conclusión

Si bien los sitios web de desplazamiento largo no son nada nuevo, están alcanzando un nuevo nivel de madurez. Los diseñadores ya no los emplean como la próxima "gran cosa" y, en cambio, prestan atención a cómo el patrón afecta la experiencia del usuario.

Seguir las mejores prácticas al crear sitios web de desplazamiento infinito permite a los diseñadores crear una UX que deleita a los usuarios en lugar de frustrarlos. Al mismo tiempo, los sitios web de desplazamiento largo implementados correctamente también pueden ayudar a las marcas a alcanzar los objetivos de su sitio web.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Diseño persuasivo: uso efectivo de la psicología avanzada
• Psicología del diseño y la neurociencia de Awesome UX
• La experiencia lo es todo: la guía definitiva de UX
• The Ultimate UX Hook: diseño anticipatorio, persuasivo y emocional en UX
• Las leyes probadas y verdaderas de UX (con infografía)