Les headers sticky : 5 façons de les améliorer !

Les headers sticky : 5 façons de les améliorer !

On dit d’un header ou d’un entête (en français) qu’il est sticky lorsque celui-ci est toujours visible à l’écran. Il peut être très utile pour l’utilisateur seulement s’il ne gêne pas la lecture de l’écran, s’il est bien contrasté, un minimum animé, et s’il répond aux besoins de l’utilisateur ! 😉

L’entête “sticky” est un moyen très utilisé afin de garder l’entête d’un site ou d’une application affiché à l’écran alors que l’utilisateur fait défiler la page vers le bas. Vous connaissez aussi très certainement les entêtes partiellement sticky, c’est-à-dire les entêtes qui disparaissent et qui réapparaissent en haut de la page dès que l’utilisateur fait défiler la page vers le haut. 

Lorsqu’ils sont conçus de façon adéquate, les headers sticky permettent aux utilisateurs d’accéder rapidement à la navigation et à ses paramètres, ainsi qu’à l’onglet de recherche, sans avoir à remonter tout en haut de la page. En plus de cela, ils augmentent la visibilité des éléments de l’entête et donc la probabilité que les utilisateurs cliquent dessus 😉

En revanche, lorsqu’ils sont mal conçus, les headers sticky sont agaçants, perturbants et masquent le contenu de la page affichée. Quel dommage, n’est-ce pas !

Et comme vous vous en doutez, nous n’allons pas manquer de vous souffler nos bons conseils ! Voici alors 5 façons qui feront de vos headers une aide et non un obstacle à la navigation de vos utilisateurs.

N°1 : Maximiser le ratio header/navigateur en le réduisant autant que possible 

De façon inhérente, les headers prennent sur l’écran de la place qui aurait pu être occupée par du contenu, il est donc important que vous occupiez l’espace de façon réfléchie. Et vous vous en doutez, sur mobile, ce facteur est encore plus important, étant donné la taille de l’écran ! 

Vous vous devez donc d’assurer que le ratio header/navigateur soit optimal, de manière à ce que votre header occupe le plus petit espace possible tout en garantissant la lisibilité du texte ainsi que la place suffisante pour cliquer sur tel ou tel élément. 

Sur les écrans tactiles, assurez-vous que toutes les touches occupent une surface d’au moins 1 cm² et que tout texte soit d’une hauteur de 5 à 6 millimètres (cela peut être un peu plus ou un peu moins, en fonction de la typographie adoptée) .

Sur desktop, la taille de l’écran est beaucoup plus importante, alors attention… Il n’est pas recommandé de se perdre en pixels inutiles ! Veillez juste à la qualité et la lisibilité de votre logo, qui est un élément très important.  

N°2 : Ne pas oublier l’importance du contraste avec le contenu

Afin de choisir un fond approprié pour votre header, voyez s’il y a une différence visuelle suffisante entre le ce dernier et le contenu de votre page. Puisque l’en-tête apparaît tout en haut de votre site, il est important qu’il y ait assez de contraste avec le fond pour qu’il soit visible, lisible et bien différencié du reste de la page. Et n’oublions pas les sous-menus ou onglets déroulants qui doivent aussi être clairement distingués du fond. Bah oui, si Michel ouvre un onglet de fond jaune sur une page de fond jaune, il n’y verra pas grand-chose… 

Par conséquent, le header doit être d’une couleur opaque, différent du reste de la page. Même si les headers translucides ont pour intention de faire apparaître davantage de contenu, ils ont l’effet inverse, c’est-à-dire de rendre le contenu à moitié visible et donc difficilement lisible, ce qui peut agacer certains utilisateurs 😉

N°3 : Ne pas abuser des animations !

Les animations peuvent parfois être gênantes, perturbantes, ou ennuyeuses pour les utilisateurs, donc gardez en tête de les utiliser le moins possible pour vos headers ! En général, il est plutôt recommandé de ne pas les employer du tout et de simplement laisser votre header tel quel 😉

Sur le site Shein, le header contient beaucoup trop d’animations avec des promotions qui clignotent en caractère gras et en couleur rouge. De quoi faire mal aux yeux aux utilisateurs !

Mais comme on dit, il ne faut jamais dire jamais. Il y a deux cas lors desquels l’emploi de l’animation peut être nécessaire :

• Pour réduire une zone de votre header
• Pour un header partiellement “sticky”, c’est-à-dire pour un header qui disparaît

Et je suis sûr que vous êtes déjà tombé sur un site avec un header laissant place à un large logo, logo qui se réduit à mesure que l’utilisateur fait défiler la page ! Dans ce cas-ci, l’animation se doit d’être rapide et fluide. Le header doit se réduire lorsque la vitesse de défilement est relativement élevée de manière à ce que l’utilisateur ne se rende compte de rien 😉

Les headers “sticky” doivent aussi demeurer à un endroit précis en haut ou sur le côté de la fenêtre du navigateur, plutôt qu’apparaître après un certain délai. C’est ce qu’on appelle le “menu harceleur” !

N°4 : Prêter attention aux headers partiellement “sticky”

On retrouve le plus souvent les headers partiellement sticky sur mobile. Et ce qu’on peut dire, c’est qu’ils permettent d’avoir le beurre et l’argent du beurre : ils sont aisément accessibles depuis n’importe où sur la page, et n’obstruent pas la vue pendant que l’utilisateur lit ou fait défiler la page 😉

Cette technique fonctionne assez bien ! Mais attention, un header partiellement sticky est fondé sur le principe que lorsque l’utilisateur défile sur la page, cela signifie qu’il souhaite accéder au header. Cela sera vrai dans de nombreuses situations, mais dans d’autres non. Eh oui, l’utilisateur pourrait tout simplement désirer relire un paragraphe du site et non cliquer sur le header. Dans ces là, les animations associées aux headers partiellement sticky peuvent être dérangeants pour l’utilisateur. 

C’est pourquoi de telles animations ne doivent pas obstruer la vue ni apparaître trop tôt ni trop tard. En fait, il faut que l’utilisateur ait la sensation de les faire apparaître manuellement en défilant, alors qu’elles seront en vérité activées par le fait que l’utilisateur fasse défiler un certain nombre de pixels (c’est-à-dire que si l’utilisateur arrête de faire défiler la page, le header continuera de s’animer).

N°5 : Voyez si un header “sticky” est vraiment requis

Un dernier aspect à prendre en compte est de savoir si un header sticky est vraiment requis. Finalement, en employant un header sticky, vous laissez de côté un certain espace d’écran sur chaque page de votre site. Calculez la balance coût-bénéfice en répondant aux questions suivantes :

• Quel type d’éléments votre header va-t-il contenir ? Principalement des outils de navigation ? Un logo ? 
• Ces éléments sont-ils susceptibles d’être requis souvent ou à quelque moment de la session ? 

Par exemple, si votre header contient un bouton de connexion, vos utilisateurs sont-ils susceptibles de se connecter à n’importe quel moment sur votre site ? Si vos catégories principales de navigation sont dans votre header, vos utilisateurs vont-ils passer d’une catégorie à une autre durant une session ou est-il plus probable qu’ils restent dans la même catégorie durant toute la session ? 

Bien sûr, les réponses à ces questions varient en fonction du type de site, ainsi que des tâches et du contenu qui se trouvent dessus 😉

Via : Sticky Headers: 5 Ways to Make Them Better