- Le scrolljacking remplace la vitesse, la direction et les effets de défilement par défaut du navigateur, perturbant une navigation web prévisible telle que l’utilisateur s’y attend
- Dans une étude d’utilisabilité du Nielsen Norman Group, de nombreux participants ont ressenti une perte de repères, et certains ont pris le défilement modifié pour un bug
- Les plugins de défilement à momentum, fluide ou inertiel perturbent la mémoire musculaire et les fonctionnalités natives du navigateur, ce qui rend difficile de savoir où l’on se trouve sur les longues pages
- Les animations de transition d’écran et la dépendance à JavaScript augmentent la charge en accessibilité et en performance en cas de mal des transports ou de vertiges, pour les technologies d’assistance, les appareils peu puissants et les environnements mobiles
- Les utilisateurs viennent pour voir du contenu, pas des mises en scène du défilement ; mieux vaut donc conserver un défilement natif et rapide
Comment le scrolljacking gâche la navigation web
- Le scrolljacking consiste à redéfinir le comportement de défilement par défaut du navigateur afin de modifier la vitesse, la direction et les effets de défilement d’une page web
- Les plugins de défilement à momentum, de défilement fluide et de défilement inertiel sont des formes courantes de scrolljacking
- Ils peuvent sembler être des améliorations, mais ils nuisent à une expérience de navigation web naturelle, efficace et prévisible
- Les dommages se traduisent principalement en matière d’utilisabilité, d’accessibilité et de performance
La confusion observée dans les études d’utilisabilité
- Une étude d’utilisabilité du Nielsen Norman Group montre que le scrolljacking peut provoquer une perte de repères chez les utilisateurs
- De nombreux participants ont ressenti au moins une légère désorientation
- Certains utilisateurs ont interprété le comportement de défilement modifié comme un bug
- Les utilisateurs orientés tâche se sont montrés beaucoup moins tolérants envers le scrolljacking que les utilisateurs orientés exploration
- Un participant a réagi en substance en disant qu’il avait « balayé complètement l’écran, mais n’était allé nulle part », et a ajouté qu’en tant que client potentiel il aurait été très agacé
- Sur mobile, le problème s’aggrave en raison de la longue durée du défilement et de la petite taille de l’écran
Atteinte aux attentes et au contrôle de l’utilisateur
- Les utilisateurs s’attendent à ce que le contenu bouge immédiatement lorsqu’ils font défiler la page
- Les plugins de défilement à momentum fournissent un comportement mêlé d’animations au lieu d’un déplacement immédiat et prévisible
- Ce changement perturbe la mémoire musculaire et les habitudes existantes sur lesquelles les utilisateurs s’appuient pour naviguer efficacement
- Remplacer le défilement natif fait passer la mise en scène du site avant les préférences ou les besoins de l’utilisateur
- Les utilisateurs visitent un site pour voir du contenu, pas pour vivre une expérience de défilement trop scénarisée
Mal des transports et charge d’accessibilité
- Les plugins de défilement à momentum ajoutent des animations flottantes ou vacillantes qui peuvent gêner les utilisateurs sensibles au mal des transports ou aux vertiges
- Beaucoup de sites ne proposent aucune option pour les désactiver, ce qui rend difficile pour les utilisateurs d’éviter l’inconfort lorsqu’ils lisent
- Les technologies d’assistance comme les lecteurs d’écran et la navigation au clavier peuvent être perturbées par les délais de synchronisation
- Pour les utilisateurs ayant des troubles moteurs ou des limitations visuelles, ces délais peuvent rendre le site plus difficile à utiliser
- L’accessibilité doit être traitée comme une exigence fondamentale de l’usage du web, et non comme une option
Dégradation des performances et de la cohérence selon les appareils
- Les plugins de défilement à momentum chargent du JavaScript et peuvent provoquer des latences, des saccades ou des pannes sur les appareils anciens ou peu puissants
- Au lieu de paraître « fluide », la page peut sembler cassée sur les appareils modestes
- Le rendu des animations implique des bibliothèques JavaScript gonflées, des dépendances supplémentaires et davantage de cycles CPU
- Le résultat peut être un temps de chargement des pages plus lent
- Sur les réseaux mobiles ou dans les zones où la connexion est mauvaise, les effets de défilement tape-à-l’œil rendent les pages plus lentes et moins accessibles
Fonctionnalités natives du navigateur et problèmes de repérage
- Les navigateurs modernes incluent déjà des paramètres de défilement à momentum pour les utilisateurs qui le souhaitent
- Les plugins tiers peuvent remplacer ces fonctionnalités natives ou entrer en conflit avec elles, cassant les gestes de défilement personnalisés ou le défilement à momentum
- Les préférences utilisateur, comme le réglage système de réduction des animations, peuvent ne pas fonctionner comme prévu
- Les animations de défilement à momentum ajoutent un délai entre l’entrée de l’utilisateur et le résultat
- Sur les longues pages, il devient plus difficile de savoir précisément où l’on se trouve, et la navigation rapide devient fastidieuse
Power users et coûts de maintenance
- Pour les power users qui parcourent rapidement la documentation ou se déplacent avec précision dans une page, le défilement à momentum ralentit le flux de travail
- Devoir attendre des animations lentes entre en conflit avec les attentes des utilisateurs qui veulent aller vite
- Les plugins de défilement à momentum ne sont pas une fonctionnalité que l’on installe une fois pour toutes
- Ils nécessitent des mises à jour régulières pour rester compatibles avec les navigateurs, systèmes d’exploitation et appareils récents
- Chaque mise à jour risque d’introduire de nouveaux bugs, et elle ajoute du travail aux équipes de développement, au lieu de leur laisser ce temps et ce budget pour rendre le site plus rapide, plus sûr ou mieux optimisé
Conclusion : laisser le défilement à son comportement par défaut
- Le scrolljacking et les plugins de défilement à momentum ajoutent une complexité inutile, dégradent l’utilisabilité et frustrent les utilisateurs
- Comme le formule le Nielsen Norman Group, « l’utilisabilité est le socle du plaisir »
- Plutôt que de réinventer le défilement, il faut conserver un comportement de défilement natif, prévisible et rapide
- Ne faites pas du défilement un événement spécial : laissez simplement les utilisateurs faire défiler
1 commentaires
Avis sur Hacker News
Il ne faut pas non plus toucher aux URL, à la navigation du navigateur ni au bouton Retour
On dirait une bataille perdue depuis longtemps, et les SPA ont cassé le web en l’aggravant encore davantage
La History API fonctionne très bien, donc on peut faire en sorte qu’une SPA et son navigateur interne se comportent correctement vis-à-vis du navigateur et de l’utilisateur
Mais beaucoup de développeurs ont ignoré les bases du web, comme les signets ou la navigation, et ont tout cassé
Une bonne SPA devrait se comporter comme un site web normal, au point qu’on ne remarque pas que c’en est une, à part sa rapidité et sa réactivité
Il est normal de pouvoir mettre en favori ou partager un état précis, mais dans ce cas il vaut bien mieux modifier l’URL sur place que créer une nouvelle étape de navigation
Ce ne sont pas les SPA en elles-mêmes le problème, ce sont les gens qui ont saccagé le web en négligeant les fondamentaux du web, les URL, le bouton Retour et l’expérience de défilement
Les navigateurs devraient corriger ça, mais l’inertie est sans doute trop forte pour que cela arrive
Cette attitude du type « nous savons mieux que l’utilisateur » ne s’applique pas seulement au défilement à inertie, mais aussi à beaucoup de modes actuels en design UX
Je me demande comment on en est arrivé à ce culte de l’esthétique au prix de tous les autres compromis
Il y a derrière une attitude extrêmement condescendante qui empêche les utilisateurs d’assumer la moindre responsabilité eux-mêmes
Aujourd’hui encore, j’ai cherché comment désactiver sur macOS ce comportement agaçant : « un mot de passe est requis pour activer Touch ID » ; je comprends l’exigence après un redémarrage, mais celle qui semble basée sur le temps ne peut apparemment pas être désactivée
La solution la plus proche que j’ai trouvée consistait à réduire la limite de temps avec la commande
bioutil, sans possibilité de l’augmenterJ’en viens à me demander s’il ne faudrait pas faire de la rétro-ingénierie sur l’endroit où la valeur maximale est vérifiée pour appeler directement l’API de niveau inférieur et contourner ça
Ce serait plutôt une absence de design UX
Il y avait un très bon billet de blog intitulé quelque chose comme « Button presses You », mais je n’arrive pas à le retrouver
L’idée centrale était que la finalité d’une application dérive du fait d’aider l’utilisateur à faire quelque chose avec le programme vers le fait que l’application dicte à l’utilisateur quoi faire et comment le faire
Il ne faut pas non plus toucher aux barres de défilement
En ce moment, on dirait qu’il y a une mode consistant à les réduire à 1 px de large partout
Si l’on veut vraiment rendre une application ergonomique, il faut au minimum que les gestes à un ou deux doigts, comme faire glisser le doigt pour défiler, fonctionnent correctement
Dans ce cas, sur ordinateur, la seule façon de défiler consiste à sélectionner du texte en le faisant glisser au-delà du bord du cadre
J’essaie d’éviter les contenus débordants, mais quand c’est inévitable, les barres de défilement nuisent au design et les barres natives sont trop laides, donc je les cache
Elles apparaissent dès qu’on bouge la souris, puis disparaissent quand on s’arrête
Si je veux voir où j’en suis, il me suffit de faire un petit mouvement de souris
J’utilise Internet depuis l’époque de Gopher, et j’aime le minimalisme de l’esthétique HTML pure
J’ai aussi beaucoup aimé le lien en bas du texte vers le site web qui a inspiré cet article
Quand on affiche le code source de ce genre de page, ce n’est pas juste de la nostalgie : on ressent une chaleur particulière, comme si « ces gens savent ce qu’ils font »
Cela m’a rappelé une scène du documentaire Helvetica, où des designers expliquaient ce qu’ils avaient ressenti en pouvant enfin choisir Helvetica à la place des polices scriptes médiocres typiques des années 1950
J’inclus aussi là-dedans les landing pages tape-à-l’œil où le contenu affiché en arrière-plan change avec le défilement, ou bien où la page elle-même est segmentée par sections
Ex. : https://webflow.com/made-in-webflow/website/Translate-Webflo...
Le défilement par inclinaison sur iPad aide même les personnes âgées à lire et à faire défiler rapidement, et le défilement automatique est lui aussi plutôt bon
Je déteste toujours autant les lignes d’éléments avec des boutons < > ajoutées dans des pages qui, à l’origine, ne défilaient que verticalement
Les plateformes de streaming sont les pires dans ce domaine, même si elles ne sont pas les seules coupables
Ce que je déteste le plus en ce moment, c’est l’interception de Ctrl+F ou Ctrl+K
Il a forcément fallu du code supplémentaire côté navigateur pour rendre ça possible, et cela n’aurait rien coûté à Google, Apple ou Mozilla de ne pas l’écrire
Le navigateur devrait fournir un raccourci alternatif, comme Shift+Ctrl+F, pour ces cas-là
Je viens justement d’apprendre que Shift+Cmd+F fait quelque chose dans Firefox
Il ne faut pas toucher aux combinaisons de touches standard
Il ne faut pas retirer des fonctionnalités à d’autres applications au point de surprendre l’utilisateur
Récemment, dans Google Sheets sur Mac, Cmd-F a cessé de fonctionner pour rechercher dans la feuille ; cette approche reposait certes sur l’interception d’un raccourci système, mais il n’y avait même pas de vraie fonction de remplacement
Pour faire une recherche, il fallait donc passer par la barre de menus de Sheets, puis chercher dans le menu
Il ne faut pas non plus toucher aux pages où une animation avance pendant qu’on fait défiler, où les éléments se déplacent latéralement, et où il faut franchir un portail de défilement avant de pouvoir redescendre dans la page
C’est affreux, agaçant, perturbateur et hostile à l’utilisateur
Le plus drôle, c’est que le lien « Back to the normal version » ne peut être cliqué qu’après un retour tout en haut en défilement fluide
Bien joué, on s’est fait avoir
Je me demande si on peut désactiver ça dans Firefox via
about:settingsOu bien est-ce que cela casserait la détection d’événements ?
À défaut, une extension de navigateur pourrait peut-être aider
L’implémentation semble varier selon les cas, et l’exemple de page [1] utilise la bibliothèque luxy.js [2]
Sur cette page précise [1], on pouvait désactiver le défilement fluide en exécutant la commande suivante dans la console des outils de développement
luxy.init({ wrapperSpeed: 1.0});