logo
Los días de «arriba del pliegue» se acabaron. Los sitios de desplazamiento largo e infinito se están volviendo cada vez más populares últimamente, y no es una coincidencia que esta técnica se traduzca bien en dispositivos móviles. El uso cada vez mayor 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 a los diseñadores. Sin embargo, este patrón tiene sus propios inconvenientes. Requiere que los diseñadores presten mucha 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 principio
A pesar de que la gente suele empezar a desplazarse Tan pronto como se carga su página, el contenido en la parte superior 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, coloque su contenido más atractivo en el área superior de la página:
- Proporcione datos interesantes (hechos que atraigan a los visitantes y mantengan su atención)
- Utilice imágenes atractivas (los usuarios prestan mucha atención a las imágenes y fotografías que contienen información relevante)
2. Brinde a los usuarios una pista visual
A veces, la mejor forma de hacer que los usuarios se desplacen es pedirles directamente que lo hagan. Simplemente informe a los usuarios que la mayor parte del contenido está disponible debajo de la página. Una pista visual sutil, como una flecha que apunta fuera de la pantalla o un texto «desplazarse hacia abajo», puede informar a los usuarios que la mayor parte del contenido está disponible a continuación.
La flecha que apunta fuera de la pantalla informa a los usuarios que la mayor parte del contenido se presentará a continuación.
3. Mantenga las opciones de navegación siempre visibles
La navegación es un aspecto decisivo de la experiencia del usuario de un sitio. Uno de los mayores riesgos de utilizar un 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 volver a desplazarse hacia arriba cuando se encuentren en lo más profundo de la página. Por lo general, este comportamiento confunde y frustra a los usuarios.
La solución obvia para este problema es utilizar un menú de navegación pegajoso que muestra la ubicación actual y permanece en la pantalla en la misma posición en todo momento.
Un ejemplo de navegación pegajosa visible de forma persistente.
Solo dispositivos móviles: Dado que 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 pantalla pequeña es ocultar una barra de navegación cuando los usuarios se desplazan en busca de contenido nuevo y hacerla visible cuando los usuarios bajan para volver a la parte superior.
4. Utilice animación funcional para atraer a los visitantes
Los efectos creativos como el desplazamiento de 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 a seguir.
Parallax es otro efecto animado popular que puede mejorar la experiencia de desplazamiento. El efecto de paralaje crea una ilusión de profundidad e inmersión al hacer que la imagen de fondo se mueva más lentamente que el contenido en primer plano. Cuando su sitio quiere contar una historia de una manera suave y lineal, el desplazamiento largo combinado 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 desplazamiento 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 el 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 destruirse por el bien de la experiencia narrativa.
Apple utiliza el secuestro de desplazamiento en su página de 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 la interfaz de usuario intuitiva, entonces realmente no les importará la longitud del desplazamiento.
