Les liens d’ancrage surconçus

• Un lien d’ancrage se résume en apparence à une structure simple, clic sur un bouton → défilement vers un titre, mais sa mise en œuvre réelle pose des problèmes
• Les titres situés en bas ne défilent pas exactement jusqu’en haut du viewport, ce qui dégrade l’UX
• Pour résoudre cela, différentes approches ont été tentées, évoluant progressivement vers des méthodes toujours plus précises et complexes

Solution simple : ajouter du padding

• Une méthode consiste à ajouter de l’espace pour que les titres du bas puissent être atteints par le défilement
• En calculant un delta puis en ajoutant du padding, le problème peut être résolu
• Mais l’équipe design peut ne pas apprécier cet espace inutile

Solution pratique : déplacer la ligne de déclenchement

• On déplace la ligne de déclenchement vers le bas du viewport afin que les titres du bas puissent l’atteindre
• Le problème est que le titre se retrouve tout en bas du viewport, ce qui réduit la lisibilité

Amélioration : créer un point de déclenchement virtuel

• On laisse la position réelle du titre inchangée, et l’on crée à la place une position virtuelle déplacée vers le haut où se produit le déclenchement
• Cela offre la souplesse d’appliquer un ajustement différent à chaque titre
• Mais le premier titre est déplacé trop haut, ce qui crée un nouveau problème → un réglage individuel est nécessaire

Meilleure méthode : déplacement proportionnel de la position de déclenchement

• Au lieu de déplacer tous les déclencheurs de la même manière, le premier titre reste en place et le dernier bénéficie du déplacement maximal
• Les titres intermédiaires sont déplacés proportionnellement selon leur position
• Cette méthode respecte les conditions de préservation de l’ordre des titres et de garantie d’accessibilité par défilement
• Elle est simple et pratique, et fonctionne correctement dans la plupart des cas

Approche avancée : optimisation avec une fonction de mapping personnalisée

• Comme la position de déclenchement avait été placée arbitrairement à 25 %, la position virtuelle pouvait trop s’éloigner de la position d’origine
• Pour résoudre cela, une approche d’optimisation utilisant la MSE (Mean Squared Error) a été introduite

Composition de la fonction de perte

• Anchor Penalty : mesure à quel point la position virtuelle du titre s’écarte de sa position d’origine
• Section Penalty : mesure l’ampleur du changement de distance entre les sections (longueur de défilement)
• En ajustant les poids de ces deux valeurs, on obtient une position de déclenchement optimale

Contraintes

• Rester à l’intérieur des limites de la page
• Le premier titre ne doit pas être déplacé vers le haut
• Préserver l’ordre des titres

Insight : les limites du simple déplacement proportionnel

• Sur des pages très longues (par ex. l’intégralité de la Bible), une inefficacité apparaît : il faut cumuler de petits déplacements sur l’ensemble de la page
• Plus la page est longue, plus l’erreur augmente, avec un impact potentiel négatif sur l’UX

Solution finale : une fonction de mapping variable basée sur smoothstep

• La position de chaque titre est normalisée en une valeur entre 0 et 1, à partir de laquelle on calcule un taux d’ajustement
• La fonction smoothstep (S(x) = 3x² - 2x³) est utilisée pour obtenir une transition fluide
• On définit une position de départ a pour l’ajustement : jusqu’à ce point, aucun déplacement n’est appliqué, puis la progression augmente en douceur
  • Exemple : si a = 0.4, les 40 % supérieurs des titres ne sont pas déplacés, tandis que les 60 % inférieurs sont ajustés progressivement
• Au final, les titres du haut conservent leur position d’origine, les titres du bas reçoivent l’ajustement maximal → une UX naturelle

Vérification et conclusion

• L’implémentation finale constitue une solution équilibrant finesse de conception et pragmatisme
• Bien sûr, le retour d’un designer peut se résumer à : « ...du moment que ça marche bien »
• Mais au moins, cet article de blog restera comme la trace d’une ingénierie minutieuse dont on se souviendra longtemps

[GN⁺]

Avis Hacker News

• En tant que développeur back-end, je suis parfois surpris par la complexité quand je vois du travail front-end

  • Excellent article et très bon travail, mais je me demande s’il faut vraiment introduire autant de complexité pour un simple défilement

• Question sur l’objectif UX de l’indication de l’« ancre active » dans la navigation latérale

  • Quand le lecteur se trouve au milieu d’une longue section, cela peut lui rappeler la section en cours à la place d’un titre hors écran
  • Cela signifie que le fonctionnement dépend de la section visible à l’écran, et non du titre sur lequel on a fait défiler la page
  • Si une petite section n’occupe pas la majeure partie de l’écran, l’indication active peut ne pas être très utile

• La fonction UX la plus importante des liens d’ancrage est de pouvoir être envoyés à d’autres personnes et enregistrés en favoris

  • La possibilité d’ajouter une section précise aux favoris est bien plus pratique que de repartir du haut de la page pour faire défiler ou cliquer sur un lien d’ancrage
  • Ce site n’offre pas cette fonctionnalité, car il n’utilise pas d’URL de type #anchor-name

• Agacé par les ancres/liens permanents de Jira, j’ai cliqué dessus, mais le fonctionnement est similaire tout en étant différent

  • Impossible de naviguer vers l’ancre au clavier
  • Question à l’auteur : pourquoi utiliser un écouteur d’événement JS sur un élément non interactif au lieu d’un élément HTML ?

• L’idéal serait d’ajouter du padding sous le contenu principal de la page

  • Cela résout le problème de la fin du contenu qui se retrouve collée en bas de la fenêtre d’affichage
  • Sur mobile, une marge de 90vh semble appropriée, et sur les écrans plus grands, 50vh
  • Sur desktop, une marge de 90vh peut sembler maladroite

• Dans les navigateurs modernes, on peut utiliser des fragments de texte pour mettre en évidence une partie précise d’une page

  • Dans Chrome, il suffit de surligner le texte, de faire un clic droit puis de choisir « Copier le lien »
  • Je m’en sers tous les jours pour mettre en évidence un passage précis de texte au lieu d’une ancre

• Il est aussi possible d’autoriser plusieurs états « actifs »

  • Si le contenu est long, les en-têtes de deux sections peuvent tous deux être « actifs »
  • Sur un contenu court, trop d’éléments risquent d’être mis en évidence

• C’est amusant de lire les autres commentaires

  • Sur mobile, le design du site est intéressant et la résolution du problème est clairement expliquée
  • C’est rafraîchissant de lire un blog technique sans pop-up

• Sur Firefox desktop, la « belle solution » met en évidence les « sections du milieu »

  • La conclusion est entièrement visible même sans avoir atteint le bas de la page
  • La réponse consiste à mettre en évidence toutes les ancres visibles à l’écran

• L’article est propre, et le design du blog est encore plus intéressant

  • Je n’aime pas l’alignement à droite, mais l’activation inline dans le pop-up de gauche est vraiment très réussie