Système d'UI Sticky et Flottant

Que fait Système d'UI Sticky et Flottant ?

Objectif

Le Système d'UI Sticky et Flottant fournit une méthodologie pour concevoir des composants d'interface persistants, ancrés à la zone d'affichage et réactifs au défilement. Il garantit que les contrôles critiques—tels que la navigation principale, les appels à l'action (CTA) générateurs de conversion, les widgets utilitaires contextuels et les boutons d'action rapide—restent facilement accessibles pendant les états de défilement actifs.

Un système sticky et flottant bien conçu résout la tension spatiale entre la disponibilité immédiate des actions et la consommation du contenu principal. Il prévient la fatigue de mise en page, protège la zone d'affichage de l'encombrement visuel excessif, honore les zones de sécurité physiques des appareils mobiles (telles que les encoches et les indicateurs d'accueil du système) et atténue strictement les échecs d'obscurcissement du focus clavier (WCAG 2.2 SC 2.4.11).

Cas d'utilisation

• En-têtes de navigation progressifs : En-têtes qui se masquent lors du défilement vers le bas (maximisant la zone de lecture) et se révèlent lors du défilement vers le haut (rendant la navigation immédiatement disponible).
• Docks mobiles persistants en bas : Barres du bas flottantes ou ancrées contenant les actions de conversion principales (par exemple, "Ajouter au panier", "Réserver maintenant", "Postuler") pour les mises en page mobiles.
• Widgets de barre latérale collants : Sous-navigation contextuelle, barres de partage ou configurations d'achat de produits qui défilent avec la zone de contenu principale mais se verrouillent en place avant d'atteindre les limites structurelles.
• Boutons d'action flottants (FAB) : Déclencheurs ancrés à la zone d'affichage pour des actions rapides à haute fréquence, telles que la navigation "Retour en haut", les chats de support direct ou les tiroirs de panier.
• Barres d'ancrage et de progression de lecture : Éléments collants qui suivent les taux d'achèvement de la zone d'affichage ou offrent des liens directs vers les sous-sections du corps de la page.

Quand ne PAS utiliser

• Tableaux de bord SaaS denses en données : Où l'espace d'écran est fortement contraint par des données tabulaires, des espaces de travail ou des panneaux verrouillés à la zone d'affichage ; utilisez dashboard-layout-system.
• Pages courtes / à vue unique : Où tout le contenu de la page tient dans un seul écran et peut être consulté sans défilement.
• Sites expérimentaux axés sur la narration : Où une désorientation visuelle intentionnelle ou un flux spatial 3D immersif est privilégié par rapport à l'utilitaire de navigation standard.
• Formulaires axés sur le clavier : Pages surchargées de formulaires multi-champs avec des boutons collants qui se chevauchent et couvrent les champs de saisie actifs sur les claviers virtuels mobiles.

Entrées

1. Structure du contenu et de la narration : La séquence de maquette de la page (issue de section-composition-system) pour comprendre quand et où les éléments collants doivent s'activer.
2. Contraintes de la zone d'affichage de l'appareil : Points de rupture cibles pour mobile, tablette et desktop pour adapter les mises en page entre les barres ancrées et les conteneurs latéraux flottants.
3. CTA principaux et secondaires : Identification des objectifs de conversion qui nécessitent une visibilité persistante.
4. Stratégie d'empilement des z-index : Relations et niveaux d'empilement établis dans elevation-and-depth-system pour éviter les conflits de chevauchement visuel.
5. Métriques de zone de sécurité du système : Inserts de zone de sécurité matérielle (env(safe-area-inset-bottom), encoches) nécessaires pour éviter les chevauchements avec les éléments chrome de l'appareil.

Sorties

1. Spécification du comportement collant : Définitions explicites des déclencheurs de défilement, des seuils d'animation et des formules de transition d'entrée/sortie.
2. Mise en page du dock mobile en bas : Plans de mise en page optimisés spatialement pour les écrans mobiles, détaillant les tailles cibles, les décalages de zone de sécurité et les exigences de contraste.
3. Carte d'atténuation de l'obscurcissement : Définitions de conception montrant comment empêcher les superpositions collantes de bloquer les éléments focalisés (WCAG 2.2 SC 2.4.11).
4. Spécification de verrouillage de la barre latérale / widget desktop : Règles de délimitation (en-têtes, pieds de page, points de fin de section) où les éléments latéraux défilants doivent s'enclencher et se verrouiller.

Flux de travail

1. Établir le zonage de la zone d'affichage et les budgets spatiaux

Avant de positionner les couches persistantes, définissez la "Zone de sécurité visuelle" pour garantir la lisibilité du contenu.

• La règle budgétaire des 15 % : Les éléments collants ne doivent jamais consommer plus de 15 % de la zone d'affichage verticale totale sur un écran d'appareil.
• Attribution du z-index : Attribuez des valeurs d'empilement claires en utilisant les niveaux de elevation-and-depth-system.
  • En-têtes progressifs : z-index: 100 (Niveau 3 : Sticky)
  • Docks mobiles en bas : z-index: 150 (Niveau 3 : Sticky / Flottant)
  • Boutons d'action flottants : z-index: 200 (Niveau 3 : Déclencheurs flottants)
• Éviter le chevauchement empilé : Ne permettez jamais qu'un en-tête collant et une barre du bas collante restent tous deux statiques s'ils encombrent l'écran ; assurez-vous qu'ils ont suffisamment d'espace ou cachez-les dans des états spécifiques.

2. Concevoir le comportement progressif de l'en-tête

Un en-tête collant statique occupe des pixels verticaux précieux. Implémentez un modèle "Progressif" :

• État par défaut : En-tête transparent ou intégré correspondant au fond de la page.
• Défilement vers le bas (seuil > 100 px) : Traduisez doucement l'en-tête vers le haut hors de la vue (transform: translateY(-100%)) pour maximiser la zone de balayage du contenu.
• Défilement vers le haut (delta > 15 px) : Traduisez instantanément ou en douceur l'en-tête de nouveau dans la vue, en appliquant un fond de surface solide ou flou (backdrop-filter: blur(8px)) avec une ombre subtile pour indiquer la séparation du texte du corps de la page.
• Arrêt limite : Désactivez la transition de défilement vers le haut une fois que la barre de défilement revient en haut de la zone d'affichage (scrollY < 50 px), en ramenant l'en-tête à sa mise en page statique d'origine.

3. Ingénierie du dock mobile persistant en bas

Les barres persistantes en bas sont des moteurs majeurs de conversion mobile, mais elles sont très sujettes aux interférences physiques et visuelles.

• Zones de sécurité physiques : Ancrez toujours le bord inférieur du dock en utilisant les variables d'environnement CSS : padding-bottom: calc(var(--base-padding) + env(safe-area-inset-bottom)). Cela garantit qu'il repose proprement au-dessus de l'indicateur d'accueil iOS et des barres de navigation Android sans chevaucher les déclencheurs interactifs.
• Déclencheur d'entrée de défilement : N'affichez pas le dock mobile en bas dans la zone d'affichage initiale du Hero. Attendez que l'utilisateur ait défilé au-delà du CTA en ligne principal de la section Hero (seuil > 100 % VH) avant de faire glisser le dock vers le haut depuis le bas (transform: translateY(0) à partir de translateY(100%)).
• Division de la mise en page : Limitez le dock à un seul bouton d'action principal (par exemple, "Ajouter au panier") et un bouton/badge utilitaire secondaire (par exemple, "Prix" ou "Enregistrer") pour garder les cibles tactiles très propres.

4. Structurer les barres latérales et widgets collants desktop

Un widget de barre latérale doit rester verrouillé dans le focus de la zone d'affichage tout en défilant avec les colonnes de contenu principales profondes :

• Isolation du conteneur : La barre latérale doit résider dans un conteneur de colonne correspondant à la hauteur de la zone de contenu principale.
• Spécification de position collante : Stylisez le widget avec position: sticky; top: calc(var(--header-height) + var(--space-l));. Cela empêche le widget de glisser derrière ou de chevaucher la barre de navigation principale.
• Verrouillage de la limite du pied de page : Assurez-vous que la colonne parente du widget collant a overflow: visible (ou est correctement contenue dans un wrapper flexible Grid), permettant au navigateur d'arrêter naturellement le widget de chevaucher le pied de page global ou les sections inférieures.

5. Prévenir l'obscurcissement du focus clavier (A11y Core)

L'une des défaillances d'accessibilité de conception Web les plus fréquentes se produit lorsqu'un utilisateur de navigation au clavier se concentre sur un lien, mais que ce lien est caché sous un en-tête collant ou un dock en bas (violant WCAG 2.2 SC 2.4.11 Focus non obscurci).

• Marge de défilement en haut : Appliquez une scroll-margin-top globale à toutes les sections cibles, titres (h2, h3) et cibles interactives clés :

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
  }
  

• Remplissage de focus : Si un élément interactif reçoit le focus clavier, la vue du navigateur doit défiler pour que l'élément soit entièrement visible en dehors de la limite de toute superposition collante persistante.
• Échappatoire : Si une modale ou un menu déroulant est ouvert à partir d'un élément collant, piégez le focus (en utilisant focus-trap-implementation) et rendez le contenu de la page d'arrière-plan inert.

6. Concevoir les boutons d'action flottants (FAB) et les déclencheurs Retour en haut

Les FAB se trouvent dans les coins inférieurs de la zone d'affichage pour offrir des utilitaires globaux secondaires rapides.

• Entrée basée sur un seuil : Cachez le déclencheur "Retour en haut" jusqu'à ce que l'utilisateur ait défilé à travers au moins deux zones d'affichage complètes (scrollY > 200 % VH). Une fois déclenché, fondez-le et mettez-le à l'échelle (transform: scale(1); opacity: 1; à partir de scale(0.8); opacity: 0;).
• Décalages de la zone d'affichage : Gardez les FAB à au moins 24px du bord droit de la zone d'affichage sur desktop, et 16px sur mobile.
• Éviter le blocage des cibles : Positionnez les FAB horizontalement à l'opposé des lignes de lecture du contenu principal. Assurez-vous qu'ils ne bloquent pas les liens, les icônes sociales ou la navigation en ligne dans le pied de page lors du défilement vers le bas de la page.

Règles de décision

• En-tête statique vs. progressif : Utilisez un En-tête collant statique si le site est un portail Web axé sur les tâches ou une boutique e-commerce où la recherche et le filtrage sont constamment utilisés. Utilisez un En-tête collant progressif pour les mises en page d'articles, le marketing de contenu ou les pages de vente où la zone de lecture verticale est une priorité.
• Dock en bas vs. CTA en ligne : Sur mobile, utilisez un CTA ancré en bas si la page contient un seul objectif de conversion de grande valeur (comme s'inscrire ou acheter). N'utilisez pas de dock en bas si la page a plusieurs actions de priorité égale concurrentes.
• Taille du FAB et zone tactile : Assurez-vous que les déclencheurs flottants sont des cartes circulaires ou arrondies. L'élément visuel doit avoir au moins 48px de diamètre, et le conteneur tactile interactif réel doit avoir une empreinte minimale de 44x44px (préféré WCAG 2.2) pour permettre un accès facile au pouce.
• Flou progressif vs. couleurs unies : Utilisez backdrop-filter: blur(8px) avec une couleur légèrement transparente (par exemple, rgba(255, 255, 255, 0.8)) au lieu de fonds complètement opaques. Cela maintient un sentiment de profondeur visuelle et permet à l'utilisateur de percevoir la progression du défilement derrière le cadre collant.

Contraintes

• Accessibilité (Minimum WCAG AA) :
  • SC 2.4.11 Focus non obscurci (Minimum) : Les anneaux de focus à contraste élevé ne doivent jamais être cachés derrière des éléments collants. Assurez-vous que les éléments peuvent être parcourus par tabulation proprement sans être bloqués par les en-têtes ou les pieds de page.
  • SC 2.5.8 Taille de cible (Minimum) : Toutes les cibles interactives dans les barres collantes et les FAB doivent faire au moins 24x24px, avec 44x44px préféré pour les déclencheurs principaux du pouce sur les docks mobiles en bas.
  • Pas de piège de tabulation : Les utilisateurs de clavier doivent pouvoir naviguer dans et hors des contrôles de barre collante en utilisant les touches Tab / Shift+Tab standard.
• Réactivité (Stabilité de mise en page) :
  • Les couches collantes ne doivent jamais provoquer de débordement horizontal de la zone d'affichage. Utilisez des largeurs basées sur un pourcentage ou des mises en page left: 0; right: 0; avec des contraintes de box-sizing précises.
  • Sur mobile, transformez les barres latérales collantes desktop en panneaux en ligne simples ou regroupez-les dans le tiroir du bas.
• Atténuation du décalage de mise en page (CLS) :
  • Ne changez jamais dynamiquement un élément de position: static à position: fixed sans réserver son volume spatial d'origine. Passer à fixed efface instantanément la hauteur de son conteneur d'origine, provoquant un décalage de mise en page cumulatif (CLS) massif. Utilisez plutôt position: sticky (qui réserve le volume de mise en page) ou basculez les styles dans un conteneur pré-réservé.

Modèles d'échec courants

• Le voile de blocage du focus : Un utilisateur de clavier parcourt la page par tabulation, mais l'anneau de focus atterrit sur des liens complètement cachés sous l'en-tête collant, les rendant impossibles à voir.
• Le chevauchement de l'indicateur d'accueil iOS : Ancrage d'une barre mobile en bas sans ajouter env(safe-area-inset-bottom), ce qui fait que la barre de balayage native du système d'exploitation se trouve directement sur le bouton "Acheter maintenant".
• La boucle de défilement saccadée : Configuration d'une transition de défilement à l'aide de JavaScript qui se déclenche précisément à une ligne de délimitation, provoquant un cycle rapide de la barre collante entre les états visible et caché, créant un scintillement visuel.
• Le sandwich de zone d'affichage : Avoir un en-tête collant épais et une barre du bas collante épaisse actifs simultanément sur un petit appareil mobile, réduisant l'espace d'écran lisible à une minuscule fenêtre de 40 %.
• L'effondrement par accrochage CLS : Basculement d'un en-tête en fixed lors du défilement, ce qui remonte instantanément le contenu principal de la page de 80px et désoriente l'utilisateur.

Critères de validation

• Vérification de la zone de la zone d'affichage : Les éléments collants n'occupent jamais plus de 15 % de la zone d'affichage verticale sur desktop ou mobile.
• Protection du focus (SC 2.4.11) : Tous les éléments focalisés par le clavier restent entièrement visibles en dehors des limites des éléments collants persistants. scroll-margin-top global est configuré.
• Alignement de la zone de sécurité mobile : Le dock mobile en bas utilise explicitement env(safe-area-inset-bottom) pour éviter les chevauchements de contrôle de l'appareil.
• Logique de seuil de déclenchement : Le dock mobile en bas reste caché dans la zone d'affichage initiale du Hero, n'apparaissant par fondu/transition qu'après avoir dépassé le CTA du Hero.
• Prévention du décalage de mise en page : Les en-têtes progressifs et les widgets de barre latérale collants sont stylisés en utilisant position: sticky ou sont placés dans des conteneurs pré-mesurés pour garantir zéro décalage de mise en page cumulatif (CLS).
• Aucun conflit de chevauchement : Les z-index de contexte d'empilement sont clairement cartographiés et documentés pour éviter les erreurs visuelles de chevauchement.
• Empreintes des cibles : Les déclencheurs ancrés mobiles et les FAB répondent à la préférence de cible tactile de 44x44px.