Si tu as regardé mes vidéos Le défi UX de Nathalie ou Le lundi, c'est gratuit !,
je préconise toujours d'avoir un sticky header.
Ce dernier doit être présent sur toutes les pages d’un site et pas uniquement sur la page d’accueil.
Le header est la partie haute d’une page qui regroupe le logo, la barre de navigation, la barre d’outils et toutes les informations positionnées au-dessus de la barre de navigation.
Le mot sticky vient de l’anglais et signifie collé.
Par conséquent, un sticky header est tout simplement un header qui reste collé en haut de page quand l’utilisateur scrolle.
Les avantages d’un sticky header sont nombreux. Je te liste les sept principaux.
1. Réduction de l’effort
Si l’utilisateur scrolle vers le bas, arrive au milieu de la page ou tout en bas et qu’il veut changer de rubrique, il n’a pas besoin de scroller. Le menu est juste devant lui.
2. Gain de temps
L’absence de scroll et l’accès au menu en un clic est un gain de temps non négligeable pour l’utilisateur.
3. Réduction de l’effort cognitif
L’utilisateur n’a pas besoin de mémoriser les libellés des rubriques. Elles sont à portée de main.
4. Accès au panier facilité
Sur les sites d'e-commerce, les clients peuvent plus rapidement finaliser leur commande puisque l’accès au panier est visible en permanence.
5. Recherche simplifiée
Lorsqu’il existe, le moteur de recherche est constamment visible et accessible, au même titre que le panier ou les autres éléments de la barre d’outils.
6. Identité visuelle renforcée
Le logo étant affiché en permanence, l’utilisateur a plus de chances de mémoriser la marque.
7. Accessibilité renforcée
L’accès aux éléments de navigation essentiels est facilité pour les utilisateurs à mobilité réduite.
Certains sites affichent un sticky header partiel :
au scroll vers le bas, le header disparaît ;
dès que l’utilisateur commence à scroller vers le haut, le sticky header s’affiche ;
dès que l’utilisateur scrolle de nouveau vers le bas, le sticky header disparaît.
L’avantage de ce sticky header partiel est de permettre à l’utilisateur de rester concentré sur le contenu.
Mais les inconvénients sont de mon point de vue nombreux.
1. Lors de la découverte du site, l’utilisateur ne sait pas qu’un sticky header existe puisqu'il ne le voit pas en scrollant vers le bas.
2. Au scroll vers le haut, l’utilisateur risque d’être surpris de retrouver un header qui avait disparu au scroll vers le bas.
3. L’utilisateur peut scroller vers le haut pour revoir un contenu et être gêné, voire perturbé par l’affichage inattendu de ce sticky header partiel.
4. L’utilisateur doit scroller vers le haut pour afficher le sticky header partiel, ce qui lui demande un effort supplémentaire, en plus de la perte de temps.
5. La disparition du header au scroll vers le bas augmente la charge cognitive.
6. La disparition du header au scroll vers le bas ralentit l’accès à la page d’accueil, à la barre de navigation et à la barre d’outils.
7. L’affichage du sticky header partiel au scroll vers le haut peut pénaliser certains utilisateurs à mobilité réduite.
Si tu décides d’afficher un sticky header sur ton site, voici mes recommandations pour qu’il soit efficace.
1. Privilégie un sticky header fixe et permanent et non un sticky header partiel.
2. La hauteur du sticky header doit être petite, mais suffisante pour que les textes restent lisibles.
3. Si le sticky header est moins haut que le header, le changement de taille au scroll doit se faire de manière rapide, fluide et immédiate.
4. Le sticky header doit visuellement pouvoir être distingué du reste de la page.
5. Pour un contraste optimisé, évite d’utiliser une couleur d’arrière-plan translucide.
6. Si le sticky header et le fond de la page sont de la même couleur, ajoute une ombre en bas du sticky header pour que l’utilisateur comprenne facilement où il se termine.
Sur un site en version mobile, je te préconise également d'afficher un sticky header fixe et permanent.
Il sera idéalement composé de trois éléments :
le burger menu ;
le logo ;
la barre d'outils.
Au vu des avantages que je t’ai listés et de la facilité technique d’implémentation, j’espère t’avoir convaincu(e) d’implémenter un sticky header sur ton site, même si beaucoup de grandes marques ne le font pas. En cas de doutes, tu peux bien évidemment réaliser des tests avec des utilisateurs pour valider la pertinence d’un sticky header sur ton site.
Avoir un libellé Accueil dans ta barre de navigation ça ne se fait plus. Vraiment ? Découvre pourquoi tu fais fausse-route.
Lire l'article
Pour ou contre le scroll infini ? Découvre les avantages et les inconvénients de cette fonctionnalité.
Lire l'article
Dans mes audits, je préconise toujours de positionner le logo à gauche sur la version desktop. Découvre pourquoi.
Lire l'article