Les jours de "au dessus du pli" sont terminés. Les sites de défilement long et de défilement infini sont de plus en plus populaires ces derniers temps, et ce n’est pas un hasard si cette technique s’applique bien aux appareils mobiles. L'utilisation accrue des écrans mobiles a certainement joué un rôle clé dans l'acceptation généralisée de la technique du défilement long: plus l'écran est petit, plus le défilement est long.

Le long défilement ouvre de nombreuses portes aux concepteurs. Cependant, ce modèle a ses propres inconvénients. Les concepteurs doivent faire très attention au contenu, à la navigation et à l’animation.

Voici 5 conseils à suivre pour vous assurer que votre long défilement répond aux attentes des utilisateurs.

1. Fournir un contenu intéressant dès le départ

Malgré le fait que les gens en général commencer à défiler dès que leur page se charge, le contenu en haut, la partie visible de l'écran est très importante. Ce qui apparaît en haut de la page crée une impression initiale et définit une attente de qualité pour vos utilisateurs. Les utilisateurs font défiler, mais seulement si ce qu'ils voient lorsqu'ils entrent dans la page est suffisamment prometteur.

Pour vous assurer que les internautes feront défiler, vous devez fournir un contenu qui garde vos visiteurs intéressés. Ainsi, placez votre contenu le plus convaincant dans la partie supérieure de la page:

  • Fournir des faits intéressants (des faits qui attirent les visiteurs et retiennent leur attention)
  • Utilisez des images attrayantes (les utilisateurs prêtent une attention particulière aux images et aux images contenant des informations pertinentes)

2. Donner aux utilisateurs un repère visuel

Parfois, le meilleur moyen de faire défiler les utilisateurs consiste à leur demander directement de le faire. Informez simplement les utilisateurs que la majeure partie du contenu est disponible sous le pli. Un indice visuel subtil, tel qu'une flèche pointant hors écran ou un texte déroulant, peut informer les utilisateurs que la majeure partie du contenu est disponible ci-dessous.

1

La flèche pointant hors écran informe les utilisateurs que la majeure partie du contenu sera présentée ci-dessous.

3. Gardez les options de navigation visibles de manière persistante

La navigation est un aspect décisif de l'expérience utilisateur d'un site. L'un des risques les plus importants liés à l'utilisation du défilement long dans votre conception est la possibilité de désorientation de l'utilisateur. Si la barre de navigation perd sa visibilité lorsque les utilisateurs défilent vers le bas, ils devront faire défiler complètement lorsqu'ils sont au fond de la page. Habituellement, ce comportement confond et frustrant les utilisateurs.

La solution évidente à ce problème consiste à utiliser un menu de navigation collant qui affiche l’emplacement actuel et reste à l’écran dans la même position à tout moment.

Un exemple de navigation persistante visible.

Appareils mobiles uniquement: l'écran du mobile étant beaucoup plus petit que l'écran du bureau, une barre de navigation visible peut occuper une partie relativement importante de l'écran. Une façon de résoudre le problème d'une succession de petits écrans consiste à masquer une barre de navigation lorsque les utilisateurs font défiler le contenu et à le rendre visible lorsque les utilisateurs descendent pour revenir au sommet.

4. Utiliser l'animation fonctionnelle pour engager les visiteurs

Les effets créatifs tels que le défilement de la parallaxe et les animations activées par défilement peuvent inciter les utilisateurs à faire défiler davantage. Ils transforment le défilement en quelque chose de plus amusant et incitent l'utilisateur à se demander "que se passera-t-il ensuite?"

Envisagez de diviser votre page en «blocs» à défilement. Dans chaque bloc, vous pouvez introduire le contenu par le biais d’animations créatives. Lorsque les utilisateurs défilent, les animations les font passer à l'écran suivant tout en créant un chemin de contenu à suivre.

Parallax est un autre effet animé populaire qui peut améliorer l'expérience de défilement. L'effet de parallaxe crée une illusion de profondeur et d'immersion en rendant l'image d'arrière-plan plus lente que le contenu au premier plan. Lorsque votre site souhaite raconter une histoire de manière linéaire et lisse, le long défilement associé à l’effet de parallaxe permet de créer une expérience de navigation totalement immersive.

5. Évitez le détournement de défilement

Les sites Web qui implémentent le détournement de défilement prennent le contrôle du défilement et remplacent une fonction de base du navigateur Web. Le détournement de défilement est mauvais car l'utilisateur n'a plus le contrôle total du défilement de la page et ne peut pas prédire son comportement. L'attente des utilisateurs de l'interaction de défilement d'un site Web ne doit pas être détruite pour des raisons d'expérience narrative.

6

Apple utilise le piratage de défilement sur sa page Mac Pro.

Conclusion

Le défilement long permet de créer une expérience de navigation complètement immersive. Il est tout à fait possible de faire un voyage aussi agréable que la destination. Lorsque les utilisateurs aiment le contenu de votre site et trouvent l'interface intuitive, ils ne se soucieront pas vraiment de la longueur du défilement.