Si tu as regardé mes vidéos Le défi UX de Nathalie ou Le lundi, c'est gratuit !, tu as pu constater que sur la quasi-totalité des sites que j'ai audités, il manque un élément essentiel : le bouton Haut de page.
Combien de fois ai-je entendu « l'utilisateur ne scrolle pas ».
Mais bien sûr...
Et la marmotte, elle met le chocolat ... (bravo si tu as la référence de la pub !).
Allez, avoue-le.
Tu passes ta journée à scroller : LinkedIn, Instagram, Facebook, TikTok, etc.
Même sur les sites Internet.
Tu scrolles, tu scrolles, tu scrolles.
Tu arrives en bas de la page et là... C'est le drame.
Tu veux revenir rapidement tout en haut sauf que…il te manque quelque chose !
Il te manque ce fameux bouton Haut de page qui est un raccourci te permettant de remonter tout en haut de l’écran en un seul clic, sans avoir besoin de scroller vers le haut.
J’avoue avoir du mal à comprendre cette nouvelle tendance.
Pourquoi tant de sites n’implémentent-ils pas ce bouton Haut de page ?
Un peu comme les cahiers de vacances, quand on regarde les réponses, on se dit « Ah oui, c’est vrai ! ».
Je constate que quand je préconise l’ajout du bouton Haut de page, les personnes me répondent « Ah oui, c’est vrai ! ».
Serait-ce donc un simple oubli de la part des concepteurs de sites ?
Si tu souhaites ajouter un bouton Haut de page pour faciliter la navigation à tes utilisateurs, je te préconise d’appliquer les conseils ci-dessous pour le rendre encore plus efficace.
1. Affiche le bouton Haut de page uniquement sur les pages qui scrollent. Le Nielsen Norman Group recommande de le faire sur les pages qui font plus de 4 écrans.
Personnellement, je recommande de le faire dès 2 écrans.
2. Fais en sorte que le bouton Haut de page s’affiche de manière collée, comme le sticky header, dès le deuxième écran de scroll.
3. Pour minimiser l’effort de l’utilisateur, affiche le bouton Haut de page de manière permanente, au lieu de le faire apparaître au scroll vers le haut.
4. Le bouton Haut de page doit être affiché en bas à droite de l’écran, car c’est là que les utilisateurs s’attendent à le voir.
5. En cas de conflit avec une fonction de chat, je te préconise d’afficher le bouton Haut de page en premier et d’afficher celui du chat en dessous.
Ainsi, le bouton Haut de page restera visible quand le chat sera ouvert.
6. La taille du bouton Haut de page doit être relativement grande pour être facilement accessible, mais relativement petite pour ne pas masquer les contenus de ta page.
7. Certes, ajouter un libellé Haut de page permet d’avoir un bouton explicite, mais le texte prend de la place. Un bouton avec une simple flèche vers le haut peut suffire.
En cas de doute, tu peux réaliser des tests utilisateurs pour t’assurer que la flèche est bien comprise par ta cible.
8. Choisis une flèche traditionnelle facilement reconnaissable. Innove dans ton produit, pas dans ton ergonomie. Si tu optes pour une flèche trop originale,
voire pour un picto qui n’a rien à voir, l’utilisateur risque de ne pas comprendre la fonction de ce bouton Haut de page.
9. La couleur du bouton Haut de page doit être homogène avec la couleur définie pour les éléments cliquables sur ton site.
10. Assure-toi que ton bouton Haut de page reste visible, peu importe la couleur de l’arrière-plan de tes pages.
Un bouton Haut de page est clairement une bonne pratique que tu dois implémenter sur ton site même si beaucoup de grandes marques ne le font pas. Tu le sais : les utilisateurs sont pressés, ils n’ont pas de temps à perdre et encore moins sur ton site. En ajoutant un bouton Haut de page, tu permettras à tes utilisateurs de naviguer plus facilement et rapidement sur ton site et tu créeras moins de frictions.
Le burger, on l'aime dans l'assiette. Le burger menu, on l'aime sur smartphone, mais surtout pas sur desktop.
Découvre cette astuce UX
Sur un site, avoir un sticky header est indispensable. Découvre les raisons pour lesquelles tu dois en avoir un.
Découvre cette astuce UX
Avoir un libellé Accueil dans ta barre de navigation ça ne se fait plus. Vraiment ? Découvre pourquoi tu fais fausse-route.
Découvre cette astuce UX