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/Longrid - 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) Chèque 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.