4 consejos importantes para el scrolling de tu web

A la hora de diseñar páginas webs uno de los consejos es tratar de que las pantallas queden lo más ajustadas posibles y no sea necesario que el usuario tenga que hacer scroll para completar la visualización de la información. Sin embargo, la mayoría de las veces esto no es posible. Por lo general las webs suelen tener mucho más contenido que el que se puede condensar en la primera pantalla. En este Marketing de un minuto veremos cuáles son las mejores prácticas para crear scrollings largos en tus webs.

La técnica de desplazamiento largo permite a los usuarios recorrer trozos de contenido sin ninguna interrupción o interacción adicional. La información aparece simplemente cuando el usuario desplaza hacia abajo la página. El desplazamiento infinito es una variedad de desplazamientos largos que permiten a los usuarios desplazarse a través de un enorme fragmento de contenido sin línea de meta a la vista (es el desplazamiento sin fin que se ve en Facebook, Twitter y feeds Tumblr).

1. Índice del contenido

   • Anima a los usuarios a desplazarse
   • Mantén las opciones de navegación persistentes
   • Asegúrate de que el botón «Atrás» funciona correctamente
   • Cambia la URL basado en la posición de desplazamiento

   Anima a los usuarios a desplazarse

A pesar del hecho de que la gente suele comenzar a desplazarse tan pronto como se carga la página, el contenido por encima del doblez sigue siendo muy importante. Lo que aparece en la parte superior de la página establece la impresión inicial y la expectativa de calidad para los visitantes. La gente hace scroll, pero sólo si lo que está por encima del pliegue es lo suficientemente prometedor. Por lo tanto, debes poner tu contenido más atractivo por encima del doblez:

• Ofrece una buena introducción. (Una buena introducción establece el contexto para el contenido y ayuda a responder a la pregunta del usuario, «¿Qué es esta página?»)
• Utiliza imágenes atractivas. (Los usuarios prestan mucha atención a las imágenes que contienen información relevante.)

2. Mantén las opciones de navegación persistentes

Al crear un sitio web de desplazamiento más largo, ten en cuenta que los usuarios todavía necesitan un sentido de orientación (es decir, su ubicación actual) y un sentido de la navegación (otras rutas posibles). El desplazamiento prolongado puede dificultar la navegación para los usuarios. Si la barra de navegación pierde su visibilidad cuando el usuario se desplaza hacia abajo, tendrá que desplazarse hasta el fondo cuando se encuentre dentro de la página. La solución obvia a este problema es un menú que muestre la ubicación actual y que permanezca en la pantalla en una ubicación coherente en todo momento.

3. Asegúrate de que el botón «Atrás» funciona correctamente

El desplazamiento largo a menudo hace que el usuario pierda su posición en la página. Esto sucede cuando hacen clic lejos de una lista de desplazamiento larga y, al regresar haciendo clic en el botón «volver», se llevan a la parte superior de la página original en lugar de donde lo dejaron. Pero cuando el usuario sigue un enlace en la página y luego hace clic en el botón «Atrás», esperan volver al mismo lugar en la página original. Perder su lugar los obliga a tener que desplazarse por el contenido que ya han visto. No es ninguna sorpresa que los usuarios se sientan frustrados rápidamente al no obtener la funcionalidad adecuada de «volver a la posición inicial».

Al activar un elemento en el feed, los usuarios deben ser capaces de volver al elemento original que lo activó. Flickr es un buen ejemplo de igualar el comportamiento del botón de «atrás» del navegador a la expectativa del usuario. El sitio web recuerda la posición de desplazamiento del usuario, por lo que cuando el usuario presiona el botón «volver», vuelven a su posición original.

4. Cambia la URL basado en la posición de desplazamiento

Uno de los problemas más comunes con el desplazamiento largo es que no es posible compartir una URL con un punto concreto de la página: la posición de desplazamiento del usuario no se refleja en la URL y la URL lleva a la parte superior de la página. El usuario se frustrará fácilmente cuando no pueda cambiar fácilmente entre dispositivos para continuar navegando desde su ubicación actual porque la URL no captura ese punto. A partir de HTML5, es posible cambiar la URL que se muestra en el navegador sin recargar la página. La función history.pushState () permite invocar un cambio de URL sin recargar la página, lo que permite hacer coincidir el comportamiento de desplazamiento con la expectativa del usuario.