Le défilement est une fonctionnalité de base du Web tel que nous le connaissons. Cependant, certains sites Web aiment modifier le fonctionnement du défilement, ce qui peut non seulement vous prendre par surprise, mais aussi affecter votre expérience globale de manière négative.

En un mot, une fonctionnalité telle que le défilement doit rester simple. Dans cet article, nous allons parler de la façon dont le défilement peut affecter l’expérience de votre utilisateur. Ensuite, nous aborderons deux astuces populaires de défilement de l’interface utilisateur que vous devriez éviter, et nous parlerons de meilleures alternatives.

Faites défiler la page pour continuer à lire !

Pourquoi le défilement a-t-il un impact sur la fonctionnalité de votre site Web ?

De nos jours, les sites Web peuvent être incroyablement complexes, tant du point de vue de la fonctionnalité que du style. Cependant, la façon dont nous interagissons avec eux est généralement très simple. Dans la plupart des cas, les interactions avec un site Web se résument à cliquer, taper ou faire défiler. Nous connaissons tous le fonctionnement de ces trois fonctions et, surtout, nous nous attendons à ce qu’elles soient universelles.

Par exemple, imaginez que vous visitez un site Web qui fait défiler la page vers le bas à chaque fois que vous cliquez dessus. Cela rendrait la navigation confuse et, dans certains cas, pourrait même vous faire croire que quelque chose ne va pas avec votre navigateur ou votre ordinateur, surtout si vous n’êtes pas un expert en technologie.

Cependant, il existe des moyens de modifier le fonctionnement du défilement sans que cela n’affecte la convivialité de votre site Web. Prenez la parallaxe, par exemple. Elle fonctionne en créant une fausse sensation de profondeur, obtenue en faisant défiler les sections à des vitesses différentes :

An example of parallax scrolling.
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Cependant, la parallaxe fonctionne parce que la fonctionnalité de défilement reste la même pour l’utilisateur. Il s’agit simplement d’une astuce visuelle, qui, si elle est bien mise en œuvre, est étonnante. En gardant cela à l’esprit, parlons de certains types d’astuces de défilement de l’interface utilisateur qui n’améliorent pas nécessairement l’expérience de l’utilisateur, mais qui sont monnaie courante.

2 astuces d’interface utilisateur défilante à éviter (et pourquoi)

Chaque fois que vous implémentez une nouvelle fonctionnalité sur votre site Web, vous devez vous demander deux choses : Remplit-elle un objectif et rend-elle votre site plus compliqué à utiliser ? Idéalement, les réponses doivent être respectivement « oui » et « non ». Sinon, vous avez un problème sur les bras.

Voici deux tactiques de défilement courantes qui offrent des réponses différentes aux questions ci-dessus.

1. Défilement à l’infini

An infinity scrolling example.
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Un site à défilement infini est élégant, mais il n’est pas très pratique.

Le défilement à l’infini est un nom accrocheur pour les sites Web qui semblent ne jamais avoir de fin – presque littéralement. S’il est mis en œuvre, les utilisateurs chargeront plus de contenu de manière dynamique au fur et à mesure qu’ils défileront, jusqu’à ce que vous n’ayez plus de contenu.

Le défilement à l’infini est souvent utilisé sur des galeries ou des index de blogs. L’objectif est généralement d’améliorer le temps de consultation du site, sans avoir à passer par plusieurs pages. Bien que l’effet soit cool et que son but soit logique, la mise en œuvre de cette tactique présente trois inconvénients majeurs :

  1. Elle ne fonctionne pas bien avec la plupart des pieds de page. Si votre site n’a pas de fin, vous ne pourrez pas utiliser de pied de page, à moins de le rendre adhésif, ce qui prend de la place sur l’écran.
  2. Trop de contenu sur une seule page peut nuire aux performances. L’augmentation du contenu d’une page consommera des ressources pour vos visiteurs. Cela signifie que votre site Web peut potentiellement commencer à être lent lorsque les utilisateurs le font défiler.
  3. Vous devez mettre en place des animations de chargement. Vous devrez souvent ajouter une sorte d’indice visuel pour indiquer que du contenu supplémentaire est en cours de chargement lorsque vous faites défiler la page vers le bas. Sinon, les visiteurs risquent de ne pas comprendre ce qui se passe.

L’alternative simple au défilement infini est la « pagination ». Si votre site Web est riche en contenu, il est logique de le décomposer en pages. Non seulement votre mise en page sera moins encombrée, mais le passage d’une page à l’autre est aussi simple que la navigation.

Les utilisateurs de Divi peuvent choisir le nombre d’articles à afficher dans un index, et le thème ajoutera automatiquement des pages en fonction du contenu. Il en va de même pour le module Galerie , qui prend en charge la pagination pour les cas où vous avez trop d’images pour les faire tenir sur une seule page.

Vous pouvez éviter d’ajouter des pages à votre site Web si vous n’avez qu’une quantité modeste de contenu. Cependant, au fur et à mesure qu’il se développe, vous devez faire des choix de conception qui n’ont pas d’impact sur la navigation des utilisateurs. L’ajout de pages est une solution élégante à un problème complexe, et nous parions qu’aucun de vos utilisateurs ne s’en plaindra.

2. Détournement de défilement

An example of scroll hijacking.
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Le détournement de défilement peut donner lieu à une expérience narrative intéressante, mais peu conviviale.

Normalement, le défilement se fait à une vitesse déterminée selon que vous utilisez votre clavier ou une souris. Cependant, certains sites Web « détournent » ces fonctions, vous faisant sauter d’une section à l’autre avec peu de transition. Ce problème peut sembler mineur, mais il peut être déroutant lorsque vous le rencontrez dans la nature.

En général, les sites à forte composante de design et de style utilisent le détournement de défilement. Ils comportent beaucoup d’animations, d’arrière-plans vidéo et d’autres gadgets. S’ils peuvent être étonnants, ils sont également écrasants. Voici pourquoi nous nous opposons spécifiquement au détournement de défilement :

  • Cela donne l’impression que la navigation est lente. Dans la plupart des cas, les transitions seront artificiellement ralenties, afin de ne pas paraître instantanées. Le résultat, cependant, est que votre site Web finit par sembler lent.
  • Cela prive vos utilisateurs de leur liberté. Les utilisateurs doivent pouvoir naviguer librement sur votre site, et le détournement de défilement peut leur donner l’impression d’être limités par ce que vous voulez qu’ils voient.
  • Certains visiteurs peuvent être déroutés par ce changement. Si un utilisateur doit avoir des connaissances techniques pour naviguer sur votre site Web, celui-ci est probablement très mal classé en termes de convivialité.

L’objectif du détournement de défilement est d’accroître l’interactivité. Cet objectif est parfaitement acceptable et, heureusement, il existe plusieurs moyens d’y parvenir sans affecter la convivialité de votre site Web. L’ajout de micro-interactions, par exemple, est un excellent moyen de donner aux visiteurs l’impression que votre site est plus « vivant ».

Cependant, il n’est pas nécessaire de remplir votre site d’animations pour créer une expérience utilisateur attrayante. Si vous voulez que votre site sorte du lot, la meilleure façon de le faire est de concevoir un schéma de navigation unique, ce que Divi peut vous aider à réaliser grâce à son système modulaire.

Conclusion

Le défilement n’est pas un aspect auquel beaucoup d’entre nous prêtent attention lorsqu’il s’agit de conception de sites Web. Après tout, la fonctionnalité est la même sur la plupart des plateformes et des applications. Dans cette optique, le modifier est généralement une mauvaise idée, car la convivialité de votre site Web est intrinsèquement affectée pour tous les visiteurs.

D’une manière générale, nous sommes contre les modifications de votre site Web qui ont un impact négatif sur sa convivialité, et la modification du fonctionnement du défilement en fait partie. Il existe deux astuces de défilement de l’interface utilisateur que nous vous recommandons d’éviter en particulier :

  1. Le défilement à l’infini : Cette astuce de conception peut être très esthétique, mais elle peut affecter les performances de votre site Web.
  2. Détournement de défilement : Les fonctionnalités de base telles que le défilement et le clic doivent rester les mêmes sur tous les sites Web que vous visitez.

Que pensez-vous de la modification du fonctionnement du défilement sur votre site Web ? Partagez vos idées avec nous dans la section des commentaires ci-dessous !