- L’article critique l’effet de “scroll fade”, qui fait apparaître progressivement des éléments lors du défilement d’un site web, en soulignant son inconfort visuel et la complexité qu’il ajoute au développement
- Il explique que la plupart des implémentations nuisent à l’expérience utilisateur à cause d’effets de transition excessifs et d’un timing inadapté, tout en alourdissant le travail des développeurs
- Il évoque les problèmes d’accessibilité et les effets négatifs bien réels sur les utilisateurs, notamment ceux souffrant de troubles vestibulaires (vestibular disorders)
- Ces effets peuvent aussi entraîner une baisse des performances et une dégradation des Core Web Vitals (comme le LCP), et sont souvent appliqués sans tests ni validation suffisants
- L’auteur affirme que le scroll fade n’est pas une solution rapide, mais une fonctionnalité complexe qui doit être conçue dès le départ, et appelle clairement à cesser de l’utiliser
Les problèmes du scroll fade
- Le scroll fade est un effet visuel dans lequel des éléments apparaissent progressivement quand l’utilisateur fait défiler la page, souvent avec une transformation (
transform) sur l’axe Y
- L’auteur le décrit comme une « expérience horrible » et souligne qu’il est appliqué de la même manière à tous les utilisateurs
- Il reconnaît que l’effet pourrait éventuellement fonctionner s’il était réglé avec finesse, mais estime que, dans la plupart des cas, il est utilisé de manière excessive et devient visuellement désagréable
- Il cite le cas fréquent où, à la toute fin d’un projet, quelqu’un demande soudain de « mettre un fade sur tous les éléments »
- L’auteur y voit une mauvaise tentative de lutter contre l’ennui, qui rend en réalité le site plus grossier
Accessibilité et impact utilisateur
- Plusieurs développeurs avancent les problèmes d’accessibilité comme argument principal contre cette pratique
- Les utilisateurs souffrant de troubles vestibulaires (vestibular disorders) peuvent être gênés par les effets de mouvement
- Une certaine protection est possible via la media query CSS
prefers-reduced-motion, mais l’auteur estime que le mouvement devrait être désactivé par défaut et activé seulement sur choix explicite
- Il pointe aussi des problèmes de surcharge cognitive et de distraction de l’attention
- Il note en particulier que les sites conçus sur des appareils Apple se comportent souvent différemment sous Windows, Linux ou Android
Tests et performances
- L’auteur insiste sur la nécessité de procéder à de vrais tests utilisateurs et à une validation des performances avant d’appliquer un effet de scroll fade
- Il faut notamment vérifier que les utilisateurs peuvent toujours accomplir leurs tâches et que le taux de rebond n’augmente pas
- Si l’on n’a pas l’intention de tester, il avertit qu’il vaut mieux ne pas prendre le risque
- Il mentionne que son script s’appuyait sur la technique “This CSS Will Self-Destruct” de Scott Jehl
- Celle-ci est présentée comme une mesure de protection lorsque JavaScript est désactivé
Impact sur les Core Web Vitals et le SEO
- Il souligne que le scroll fade risque fortement de dégrader des indicateurs de Core Web Vitals comme le Largest Contentful Paint (LCP)
- Il ne fournit pas de données directes, mais dit avoir déjà vu des sites affichant un « LCP catastrophique »
- À propos du SEO, il adopte un ton ironiquement sceptique, allant jusqu’à dire qu’on entend aussi que Google fournit du contenu de mauvaise qualité
- Il explique néanmoins qu’il espère, avec ce billet de blog, contribuer à faire sortir cet effet de mode
Conclusion : interdiction du scroll fade
- Sous le titre « 5 effets de scroll fade géniaux », l’auteur conclut de manière satirique en répétant cinq fois : « ne le faites pas »
- Il rappelle que le scroll fade n’est pas une solution rapide, mais une fonctionnalité complexe qui doit être pensée dès la conception en tenant compte de toute la structure du site
- Il termine sur une boutade en suggérant que les développeurs devraient déclarer collectivement que c’est techniquement impossible
- Son message final est sans ambiguïté : « Mort au scroll fade »
Aucun commentaire pour le moment.