Amenez-le à la limite - Un aperçu des sites Web à long défilement

Les sites Web à long défilement, ou à défilement infini, sont exactement cela : les pages sont beaucoup plus longues que la page de site Web « moyenne » et défilent donc « infiniment ». Ces types de sites sont devenus populaires auprès des sites de médias sociaux et des sites comme Pinterest qui incluent beaucoup de contenu généré par les utilisateurs, ainsi que certains sites d'actualités et de blogs. Les sites Web personnels et les portefeuilles commencent également à utiliser de longues techniques de défilement afin d'augmenter l'engagement des utilisateurs et le temps que les gens passent sur un site.

Le défilement infini est devenu un modèle de conception populaire et courant, néanmoins, il existe certains pièges potentiels dont les concepteurs d'interface utilisateur doivent être conscients lors de la conception d'un site qui utilise un long défilement. Il existe également certains types de sites pour lesquels il n'est pas approprié d'utiliser un modèle de conception à long défilement.

Le but et les avantages du long défilement

L'un des principaux avantages des sites Web à long défilement est qu'ils permettent aux visiteurs de rester plus longtemps sur un site. Lorsque les gens n'ont pas à prendre la décision consciente de consommer plus de contenu, ils sont moins susceptibles de cliquer.

Considérez cela comme étant similaire à la façon dont Facebook, YouTube, Netflix et des sites similaires lisent automatiquement des vidéos lorsque celle qu'un utilisateur regarde se termine. Ils savent que si un visiteur doit faire un effort pour cliquer sur une nouvelle vidéo, il est tout aussi susceptible de cliquer sur un site entièrement différent. Mais si les vidéos continuent de jouer, il est plus probable qu'elles continueront à regarder.

Lorsque les sites à défilement long sont correctement codés, ils chargent une nouvelle URL avec chaque nouveau contenu. Cela équivaut à plus de pages vues pour le site, ce qui peut augmenter les revenus publicitaires et la valeur globale du site.

Comme pour toute décision UX, il est important de peser les avantages et les inconvénients pour les personnes qui utiliseront réellement le site avant de décider d'un format. Un défilement long peut être une excellente option pour certains types de sites, tandis que dans d'autres situations, il ne fait que frustrer les utilisateurs. Il est important d'apprendre la différence entre les deux.

Quand utiliser le défilement long (et quand ne pas le faire)

L'élément clé à retenir lors de l'examen d'un défilement long est que le contenu doit dicter le format, quel que soit le type de site en cours de conception. Les sites Web à long défilement sont parfaits pour certains types de contenu, mais peuvent présenter un énorme échec UX avec d'autres types.

Dans l'ensemble, les sites axés sur les tâches et les objectifs ne bénéficient pas de conceptions de défilement infinies (par exemple, les sites de commerce électronique et les tutoriels ou d'autres sites éducatifs où les utilisateurs veulent voir des progrès précis). Ces types de sites doivent donner aux utilisateurs un sentiment d'achèvement et d'accomplissement, ce qui est plus difficile à réaliser avec les sites à long défilement.

Etsy, par exemple, a essayé une conception de défilement infini en 2012 et a fini par revenir à la pagination. Ils ont constaté que même si les clients achetaient toujours à peu près au même rythme, l'engagement des utilisateurs diminuait considérablement. Même des choses comme le nombre de recherches effectuées ont chuté.

Une option que certains sites de commerce électronique proposent aux visiteurs est l'option "Afficher tout" lorsqu'ils consultent les pages de produits. Cela donne à l'utilisateur la possibilité d'afficher le site dans un format de défilement infini s'il le souhaite tout en préservant les pages de résultats plus courtes pour les utilisateurs qui préfèrent ce format.

La pagination est également utile lorsqu'il est important que les utilisateurs visualisent les informations dans l'ordre chronologique. Là où un site Web à défilement d'une page peut encourager les gens à parcourir et à sauter en avant, la pagination ralentit le visiteur et augmente la probabilité qu'il consomme des informations dans le bon ordre.

Là où un site Web à défilement d'une seule page peut vraiment briller, c'est sur les sites où la lecture de contenu ou d'articles supplémentaires est le flux naturel. Cela s'applique à des choses comme les sites d'actualités ou les blogs thématiques. Les utilisateurs de ces sites veulent souvent prendre de grandes quantités d'informations à la fois, et le défilement infini le rend beaucoup plus facile.

Un autre domaine évident où le défilement infini est un choix UX populaire est celui des sites de médias sociaux ou des sites avec beaucoup de contenu généré par les utilisateurs. Facebook, Pinterest et Twitter utilisent tous le défilement infini. Ces sites veulent garder les utilisateurs sur le site aussi longtemps que possible, et le défilement infini le fait bien.

Coûts psychologiques du long défilement

Les effets psychologiques de toute décision de conception doivent toujours être considérés avec soin. En ce qui concerne les sites Web à défilement d'une seule page, il existe des effets psychologiques pour et contre.

La première chose à considérer est que les utilisateurs ne voient pas d'inconvénient à cliquer délibérément. Le clic fait partie de l'informatique, des interfaces utilisateur graphiques et d'Internet pratiquement depuis sa création. Les gens sont habitués à ce type particulier d'interaction et ne seront pas découragés s'ils doivent cliquer sur quelques liens pour accéder à plus de contenu.

Beaucoup d'utilisateurs n'aiment pas le défilement infini par défaut. Faire défiler une page extrêmement longue peut donner l'impression de se noyer dans une mer d'informations sans fin. Lorsque les utilisateurs recherchent des informations spécifiques, le défilement est rarement le moyen le plus efficace de les trouver.

Puisqu'il n'affichera pas avec précision la longueur de la page, le défilement infini casse la barre de défilement sur le côté de la page. Bien que tous les utilisateurs n'utilisent pas la barre de défilement, à cet égard, ceux qui le font peuvent trouver le défilement infini frustrant.

Le défilement infini supprime également le sentiment d'achèvement que les utilisateurs acquièrent en terminant une tâche ou en atteignant un objectif sur une page, puis en cliquant sur la page suivante. La perte de ce sentiment d'achèvement peut décourager les utilisateurs et les amener à rechercher d'autres sources pour la même information ou la même tâche.

Un autre impact psychologique négatif que les sites Web à long défilement peuvent avoir est que les utilisateurs ont tendance à considérer le contenu qui se trouve plus bas sur la page comme moins important que le contenu en haut. L'utilisation d'en-têtes peut aider à cela, car cela "réinitialise" en quelque sorte le cerveau du visiteur sur l'endroit où se trouve le "top".

Meilleures pratiques pour les sites Web à défilement long

S'il a été déterminé qu'un projet de site Web convient à une conception à défilement long, il y a quelques bonnes pratiques à garder à l'esprit afin de s'assurer qu'il offre une expérience utilisateur optimale.

Tout d'abord, abandonnez le pied de page ! Lorsque le contenu se charge en continu, le pied de page sera continuellement poussé en bas de la page. Cela signifie que tout contenu ou information contenu dans le pied de page restera hors de vue. Pire encore, les utilisateurs aperçoivent le pied de page mais le perdent de vue avant d'avoir la possibilité de cliquer sur quoi que ce soit. L'utilisation d'un pied de page collant est un moyen de contourner ce problème, bien que se débarrasser entièrement du pied de page soit souvent une meilleure option.

L'utilisation d'indices visuels est importante, surtout s'il n'est pas immédiatement évident lorsque l'écran principal se charge qu'il y a plus de contenu sur la page. Les sites qui ont une grande image d'en-tête ou un contenu visuel qui remplit l'écran lorsque la page se charge incluent souvent une flèche (parfois animée) ou des images similaires pour indiquer qu'il y a plus de contenu en dessous.

La navigation doit être visible de manière cohérente, soit en utilisant un en-tête collant, soit une barre latérale fixe avec des liens de navigation. L'exception à cela concerne les appareils mobiles, où les en-têtes collants peuvent occuper un espace précieux sur l'écran. Facebook gère bien cela en faisant disparaître l'en-tête lorsque les utilisateurs font défiler vers le bas, puis réapparaît lorsqu'ils commencent à remonter.

Le navigateur Web Chrome fait quelque chose de similaire avec ses commandes en bas de l'écran. ils disparaissent lorsque l'utilisateur fait défiler vers le bas et réapparaissent lorsqu'ils commencent à remonter. C'est un moyen très intuitif de créer une interface qui maximise l'espace disponible sur l'écran.

Une fonctionnalité UX vitale qui est heureusement devenue plus courante dans les sites Web à défilement infini est la modification de l'URL au fur et à mesure que chaque section défile. Certains le font avec des signets internes dans la page. D'autres sites, en particulier les sites d'actualités et les blogs, mettent à jour l'intégralité de l'URL lorsque l'utilisateur fait défiler. Ceci est important, car cela permet aux utilisateurs de créer un lien vers le contenu exact vers lequel ils souhaitent créer un lien, quelles que soient les modifications apportées à la page elle-même.

Certains concepteurs Web choisissent de créer ce qui pourrait être considéré comme un site à long défilement « hybride », avec un bouton « charger plus » qui charge le contenu directement sur la même page. Certains concepteurs d'interface utilisateur l'utilisent à plusieurs reprises sur la page, tandis que d'autres choisissent de ne l'inclure qu'une seule fois, puis transforment le site en un format de défilement long plus traditionnel.

Outre ces considérations de conception spécifiques aux sites Web à long défilement, d'autres meilleures pratiques d'interface utilisateur et d'expérience utilisateur pour créer de bonnes conceptions s'appliquent toujours aux sites qui utilisent un défilement infini.

Exemples de long défilement bien fait

Ensuite, il y a ce site, d'Andrew McCarthy. Bien que le design soit unique, il défile à l'infini avec les mêmes informations encore et encore. Puisque McCarthy est un designer, c'est probablement un choix délibéré afin de se démarquer de la foule.

Et un autre exemple de Sam Rosen, qui répète sans cesse le même contenu, bien que ce site revienne en haut plutôt que de recharger tout le contenu.

Conclusion

Bien que les sites Web à long défilement ne soient pas nouveaux, ils atteignent un nouveau niveau de maturité. Les concepteurs ne les emploient plus comme la prochaine "grande" chose et prêtent plutôt attention à la façon dont le modèle affecte l'expérience utilisateur.

Suivre les meilleures pratiques lors de la création de sites Web à défilement infini permet aux concepteurs de créer une UX qui ravit les utilisateurs plutôt que de les frustrer. Parallèlement, des sites Web à long défilement correctement mis en œuvre peuvent également aider les marques à atteindre les objectifs de leur site Web.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Design persuasif : Utiliser efficacement la psychologie avancée
• La psychologie du design et les neurosciences de l'expérience utilisateur impressionnante
• L'expérience est tout - Le guide UX ultime
• Le crochet UX ultime - Conception anticipatoire, persuasive et émotionnelle dans UX
• Les lois éprouvées et vraies de l'UX (avec infographie)