Qu'est-ce qu'un bouton de retour en haut ?

Un bouton de retour en haut est un petit contrôle, généralement ancré dans un coin bas de la fenêtre, qui ramène le visiteur au début de la page courante. Il apparaît à partir d'une profondeur de défilement définie et disparaît à proximité du haut de page. Le motif est fréquent sur les pages longues : listes de catégorie à défilement infini, articles éditoriaux et fiches produit au contenu abondant sous la ligne de flottaison. Sa fonction est de navigation : il raccourcit le chemin vers les filtres, la recherche et le menu principal.

Définition

Ce contrôle est un élément de confort et non un substitut à la structure. Il devient utile lorsque la navigation principale ne suit pas le défilement et que la page est longue, et devient redondant lorsqu'un en-tête fixe donne déjà accès à la recherche et au menu. Les détails de mise en oeuvre font la qualité : le bouton a besoin d'un nom accessible, d'une gestion du focus clavier qui place le focus au début du document et pas seulement la position de défilement, et du respect des préférences de mouvement réduit. La position fixe entre en concurrence avec les widgets de chat, les bandeaux de consentement et les barres d'achat fixes.

Pourquoi c'est important

Dans une vitrine composable, ce bouton est purement présentationnel et ne porte aucune donnée commerce, ce qui en fait un bon composant de mise en page partagé dans le design system plutôt qu'un élément propre à chaque page. Sa visibilité gagne à être pilotée par un intersection observer sur un élément témoin plutôt que par un écouteur de défilement, afin de laisser le thread principal libre et la latence d'interaction basse. Comme l'élément est fixe, il ne doit pas appartenir au chemin de rendu critique ni réserver d'espace dans le flux. Sur les listes à défilement infini, il s'associe à une restauration de la position précédente.

Cas d'usage

Les longues pages de catégorie à chargement continu constituent le cas le plus net, le bouton étant souvent associé à un retour vers les filtres. Les pages éditoriales et les guides l'emploient à la fin de textes longs. Sur les fiches produit riches en avis et en tableaux techniques, il ramène aux contrôles d'achat, raison pour laquelle une barre d'achat fixe répond parfois plus directement au même besoin. Les pages de documentation et d'aide en tirent également parti. Sur les pages courtes, le contrôle ne devrait pas être affiché, car un bouton permanent sans usage encombre et concurrence des actions plus importantes.

Voir aussi

Découvrez Mobile Commerce · Bounce Rate.