Sticky Header

Tu scrolles.
Tu veux changer de page.
Tu dois remonter tout en haut.

Frustrant, non ?
C’est exactement le problème que résout le sticky header.

Définition
Le header est la zone située en haut d’une page web.

Il contient généralement :
↳ le logo
↳ la navigation
↳ les outils (recherche, panier, compte...)

Le terme sticky signifie "collé".

Un sticky header est donc un header qui reste visible en haut de l’écran lorsque l’utilisateur scrolle.

Un sticky header permet de :
↳ gagner du temps
↳ renforcer l’accessibilité
↳ limiter la charge cognitive
↳ réduire l’effort de navigation
↳ faciliter l’accès aux actions clés
↳ améliorer la mémorisation de la marque

Un simple élément.
Mais un impact direct sur l’expérience.

Qu'en est-il du sticky header partiel ?
Certains sites utilisent une variante.
Le header apparaît uniquement dans certaines conditions de scroll.

Sur le papier, cela semble optimiser l'espace.

En réalité, cela crée souvent :
↳ une accessibilité réduite
↳ une interaction moins prévisible
↳ de l'incohérence dans l'interface
↳ une perte de repères pour l'utilisateur
↳ une charge cognitive supplémentaire

Un utilisateur ne devrait jamais avoir à "chercher" la navigation.

Pour avoir un sticky header efficace, il doit être :
↳ toujours visible
↳ lisible immédiatement
↳ simple et peu encombrant
↳ clairement différencié du contenu
↳ stable (pas d'apparition/disparition imprévisible)

Sur mobile, il doit contenir uniquement l'essentiel :
↳ menu
↳ logo
↳ accès aux actions principales

À retenir
Un sticky header n'est pas un détail d'interface.
C'est un point d'accès permanent à la navigation.
Et en UX, réduire la friction d'accès vaut souvent plus que gagner quelques pixels de hauteur d’écran.

------------------------------------------------------------

Je suis Nathalie Scott, créatrice de bonheur digital.
Découvre mon lexique UX : une explication, un déclic.
Parce que la clarté, c'est le premier pas vers l'excellence.
Travaillons ensemble    et deviens meilleur que tes concurrents.