Los días de "arriba del doblez" han terminado. El desplazamiento largo y los sitios de desplazamiento infinito son cada vez más populares últimamente, y no es coincidencia que esta técnica se traduzca bien en dispositivos móviles. El uso creciente de pantallas móviles definitivamente ha jugado un papel clave en la aceptación generalizada de la técnica de desplazamiento largo: cuanto más pequeña es la pantalla, más largo es el desplazamiento.

El desplazamiento largo abre muchas puertas nuevas para los diseñadores. Sin embargo, este patrón tiene sus propios inconvenientes. Requiere que los diseñadores presten una gran atención al contenido, la navegación y la animación.

Aquí hay 5 consejos a seguir para asegurarse de que su desplazamiento largo cumpla con las expectativas del usuario.

1. Proporcione contenido interesante desde el comienzo

A pesar del hecho de que las personas usualmente comience a desplazarse tan pronto como su página se carga, el contenido en la parte superior y visible de la pantalla es muy importante. Lo que aparece en la parte superior de la página crea una impresión inicial y establece una expectativa de calidad para sus usuarios. Los usuarios se desplazan, pero solo si lo que ven cuando ingresan a la página es lo suficientemente prometedor.

Para asegurarse de que las personas se desplacen, debe proporcionar contenido que mantenga a sus visitantes interesados. Por lo tanto, ponga su contenido más atractivo en el área superior de la página:

  • Proporcione datos interesantes (hechos que atraen a los visitantes y mantienen su atención)
  • Use imágenes atractivas (los usuarios prestan mucha atención a las imágenes e imágenes que contienen información relevante)

2. Proporcionar a los usuarios una señal visual

A veces, la mejor manera de hacer que los usuarios se desplacen es pedirles directamente que lo hagan. Simplemente informe a los usuarios que la mayoría del contenido está disponible debajo de la tapa. Una señal visual sutil, como una flecha que señala fuera de la pantalla o un texto "desplazarse hacia abajo", puede informar a los usuarios que la mayoría del contenido está disponible a continuación.

1

La flecha que apunta fuera de la pantalla informa a los usuarios que la mayoría del contenido se distribuirá a continuación.

3. Mantenga las opciones de navegación persistentemente visibles

La navegación es un aspecto decisivo de la experiencia del usuario de un sitio. Uno de los mayores riesgos de utilizar el desplazamiento largo en su diseño es la posibilidad de desorientación del usuario. Si la barra de navegación pierde su visibilidad cuando los usuarios se desplazan hacia abajo, tendrán que desplazarse hacia atrás cuando estén en lo profundo de la página. Por lo general, este comportamiento confunde y frustra a los usuarios.

La solución obvia para este problema es usar un menú de navegación adhesivo que muestre la ubicación actual y permanezca en la pantalla en la misma posición en todo momento.

Un ejemplo de navegación adhesiva persistentemente visible.

Dispositivos móviles solamente: como la pantalla del móvil es mucho más pequeña que la pantalla del escritorio, una barra de navegación visible puede ocupar una parte relativamente importante de la pantalla. Una forma de resolver el problema de una propiedad de pantalla pequeña es ocultar una barra de navegación cuando los usuarios se desplazan por el contenido nuevo y hacerlo visible cuando los usuarios lo hacen para volver a la cima.

4. Use la animación funcional para involucrar a los visitantes

Los efectos creativos, como el desplazamiento paralaje y las animaciones activadas por desplazamiento, pueden hacer que los usuarios se desplacen más. Convierten el desplazamiento en algo más divertido y hacen que el usuario se pregunte "¿qué pasará después?"

Considere dividir su página en "fragmentos" desplazables. Dentro de cada fragmento, puede presentar el contenido a través de animaciones creativas. A medida que los usuarios se desplazan, las animaciones los transfieren a la siguiente pantalla mientras crean una ruta de contenido para seguir.

Parallax es otro efecto animado popular que puede mejorar la experiencia de desplazamiento. El efecto Parallax crea una ilusión de profundidad e inmersión haciendo que la imagen de fondo se mueva más lentamente que el contenido en primer plano. Cuando su sitio quiere contar una historia de manera suave y lineal, el desplazamiento prolongado junto con el efecto de paralaje puede crear una experiencia de navegación completamente inmersiva.

5. Evite el secuestro de desplazamiento

Los sitios web que implementan el secuestro de scroll toman el control del desplazamiento y anulan una función básica del navegador web. El secuestro de desplazamiento es malo porque el usuario ya no tiene control total del desplazamiento de la página y no puede predecir su comportamiento. La expectativa de los usuarios de la interacción de desplazamiento de un sitio web no debe ser destruida por el bien de la experiencia narrativa.

6

Apple usa el secuestro de scroll en su página Mac Pro.

Conclusión

El desplazamiento largo puede crear una experiencia de navegación completamente inmersiva. Es completamente posible hacer un viaje tan agradable como el destino. Cuando a los usuarios les gusta el contenido de su sitio y encuentran que la interfaz de usuario es intuitiva, no les importará la longitud del desplazamiento.