Faire défiler et gérer le contenu

1) Pourquoi penser à faire défiler

• accélère la recherche du bon contenu (moins de clics - plus de scrolls),
• donne une sensation de contrôle (ancres, « retour au début », filtres collés),
• économise des ressources (téléchargement paresseux, virtualisation),
• augmente la conversion (le contenu est visible plus tôt, le CTA est dans la « zone pouce »).

Principes : Vitesse> densité ; contexte> bruit ; prévisibilité> « magie ».

2) Modèles de défilement : quand quoi choisir

1. Pagination classique

Convient pour les résultats de recherche, les tableaux, les rapports. Avantages : contrôle, URL stables, navigation facile dans les pages. Inconvénients : plus de clics, « ruptures » de l'attention.

2. Bande sans fin (scroll infinite)

Pour les fides et les catalogues à faible coût d'erreur (nouvelles, cartes de contenu). Avantages : engagement, moins de clics. Les inconvénients : « pied perdu », c'est dur de revenir, l'adressage difficile.

3. Hybride : « Afficher plus « /« Télécharger plus »

Compromis : les widgets sont chargés en paquets sur le bouton. Avantages : contrôle des rendeurs, disponibilité de la chaussure, prévisibilité. Inconvénients : toujours linéaire.

4. Défilement segmenté (sections/ancres)

Pour de longs articles, aide et wiki. Avantages : carte de document, sauts rapides. Inconvénients : compliquer la navigation et la table des matières.

• Catalogues/lobby - hybride ou infini + « retour au début ».
• Recherche/tables - pagination avec taille de page et filtres rapides.
• Documentation/Longread - segments avec TOC et bar de progrès de lecture.

3) Architecture et disposition de l'information

Chapeau supérieur (sticky) : recherche, filtres rapides, tri ; ne chevauche pas le contenu lorsqu'il apparaît.
Panneau latéral (bureau) : Table des matières (TOC), filtres ; sur le mobile, le sheet de départ.
Éléments sticky : filtres supérieurs, menu d'ancrage, indicateur de progression de lecture, « Back to Top ».
Cartes de contenu : Hauteur prévisualisée → moins de sauts de mise en page.
États vides : squelettes/shimmers, pas « écrans vides ».

4) Comportement de défilement (micromécanique)

Inertie et physique : le défilement doit sembler « natif » ; ne cassez pas les schémas systémiques.
Front axial : aux horizons (carrousels), bloquer l'axe vertical après le seuil de mouvement.
Snap points : approprié pour les carrousels, les cartes et les marches du maître. N'abusez pas des longs rubans.
Scrolling Anchored : lors du chargement, gardez le focus de l'utilisateur et la position relative.
Scroll-chaining : limitez le « flux » des événements des conteneurs imbriqués afin de ne pas « sauter » à la page.

5) Gestion de l'attention

Flottant STA/« Dépôt »/ » Jouer »: dans la zone du pouce, ne chevauche pas le contenu.
Barre de progression de lecture : règle en haut, synchronisée avec les ancres.
Table des matières (TOC) : la section actuelle est mise en surbrillance, liens rapides, bouton haut.
Ancres de titres : hachages stables dans l'URL ; scroll avec compensation de la hauteur du chapeau.
Filtres « collants » contextuels : fixez après avoir fait défiler 1-2 écrans.

6) Chargement et rendu de gros rubans

Téléchargement paresseux (lazy) : images, vidéos, blocs. Le seuil de charge est le ~ 1-2 de l'écran devant.
Virtualisation/rendu de fenêtre (windowing) : dessinez uniquement la zone visible + le tampon.
Placcholders/squelettes : dimensions prévisibles, pas de « sauts ».
Chargement en lots : étape 20-60 des éléments ; équilibre entre les demandes et les rendeurs.
Cache des sections : lorsque vous revenez, restaurez les positions et les cuves chargées.

7) Gestion de contenu dans le ruban

Groupement : par date/catégorie ; les titres séparateurs adhèrent.
Tri et filtres : visibles et disponibles, avec indication des conditions actives.
Réduire/Développer : pour les descriptions longues - « Afficher plus ».
Médias dans le scroll : auto-pause vidéo en dehors de la zone visible ; auto-play uniquement sans son et avec contrôle explicite.
État d'erreur : « Perte de réseau », « Échec de chargement » - avec retry et maintien de la position.

8) Disponibilité et localisation

Toutes les actions sont disponibles sans gestes : le bouton Télécharger plus, Au début, Ouvrir TOC.
Gestion du focus : lorsque vous naviguez à travers les ancres - déplacer le focus vers le titre de la section.
Lecteurs d'écran : descriptions pour les boutons de défilement/TOS, logique d'ordre.
RTL : miroir des carrousels horizontaux et des indicateurs.
Mouvement réduit : désactivez les animations « complexes » et la parallaxe pour ceux qui préfèrent les effets simplifiés.

9) Performance : objectifs et métriques

INP (Interaction to Next Paint) des gestes clés/scroll : ≤ 200 ms.
Scroll-jank : <1 % des images> 16,7 ms sur les devis types.
CLS (décalage cumulatif de mise en page) : ≤ 0,1 (surtout pendant le dosage).
TBT/Blocking : évitez les calculs synchrones lourds pendant le scroll.
Mémoire : utilisation stable pour les longues sessions (pas de fuites pour la virtualisation).

• Les auditeurs passifs du scroll, les calculs retardés via « requestAnimationFrame » ;
• les ombres « légères »/sans blur complexe pendant le défilement ;
• dimensions fixes ou prévisibles des cartes ;
• économie de redessinage (mises à jour batched).

10) Télémétrie et événements

• _ scroll_start '/'scroll_end'(source, vitesse, direction),
• « content_load_request/success/fail » (paquet, taille),
• « viewport_item_exposed » (id, temps de visibilité),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'List_restore'(position, temps de récupération).

• Depth Reached (combien d'écrans/éléments ont été affichés),
• Exposition Time per Item (moyenne/médiane),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (sorti avant le chargement du prochain lot),
• Return-to-Position Success.

11) Modèles pour différents types de contenu

Catalogues de jeux/produits : bande hybride, filtres sticky, virtualisation, bouton « Afficher plus ».
Longrides/wiki : TOC, barre de progression, ancres, « copier le lien vers la partition ».
Fid d'information : une bande sans fin avec des dates séparatrices, « retour à la dernière ».
Tableaux/grids : pagination + "afficher par N', gel des titres et des colonnes clés, scroll horizontal par nécessité.
Bandes en direct/trames : Auto-scroll avec « pause/rattrapage », limite tampon.

12) Caractéristiques mobiles

Zones du pouce : CTA et « vers le début » - en bas ; filtres - dans le sheet sortant.
« Extracteur » : afficher uniquement à l'arrêt ; ne pas gêner le scroll.
Gestes : carrousels horizontaux - avec lock axial ; pull-to-refresh - seulement là où cela est attendu.
Fluidité : vérification de 60 FPS sur des listes « lourdes » ; réduire la densité des effets.

13) Anti-modèles

« Bande sans fin + revêtement caché sans sortie » (aucun lien/contact/règles).
Le dosage qui déplace ce que vous avez lu est une perte de contexte.
Panneaux flottants chevauchant le texte et le CTA.
Hauteur illimitée des cartes → « errant » layout-shift's.
Analyse automatique des médias avec le son lors de l'apparition dans la zone de visibilité.
L'absence de rétablissement de la position en arrière.

14) Check-list de mise en œuvre (par sprints)

Sprint 1 : choix du modèle (pagination/hybride/infini), contenants de base, sticky-chapeau/filtres, « Back to Top ».
Sprint 2 : chargement paresseux d'images/blocs, squelettes, dimensions prévisibles des cartes.
Sprint 3 : virtualisation des listes, maintien de la position et cache des paquets, ancrage/TOS.
Sprint 4 : télémétrie du scroll et de l'exposition, ainsi que des alertes par scroll-jank.
Sprint 5 : disponibilité (focus/lecteurs), RTL, mouvement réduit, navigation clavier (bureau).
Sprint 6 : optimisation subtile : recto axial, points snap, amélioration UX des médias dans le ruban.

15) Glossaire

Infinite Scroll est un chargement infini d'éléments.
Windowing/Virtualization : Rend uniquement les éléments visibles de la liste.
Anchored Scrolling - maintien de la position relative lors du chargement.
Scroll-jank - « derganya » en raison de l'omission des images lors du défilement.
TOC (Table of Contents) : Table des matières avec ancres.
CLS/INP - métriques de stabilité de mise en page et de réactivité.

16) Résultat

1. sélectionne le modèle d'écoulement approprié (pagination/hybride/infini),

2. donne le contrôle (ancres, TOC, filtres sticky, « au début »),

3. rendu rapide et stable (téléchargement paresseux, virtualisation, pas de décalage),

4. reste accessible et prévisible,

5. mesure la télémétrie et améliore l'UX en fonction des données.