La navigation sur les pages web et la vitesse avec laquelle on peut le faire sont des facteurs qui contribuent grandement à la convivialité d’un site. La navigation collante, ou ce que l’on appelle plus communément « sticky navigation », est un bon outil pour une navigation rapide et efficace sur une page. Nous vous expliquons comment cela fonctionne et quels sont les avantages et inconvénients.
Qu’est-ce que la « sticky navigation » ?
Par défaut, la barre de navigation et les éléments d’une page d’accueil sont statiques : cela signifie qu’ils disparaissent lors du défilement. À l’inverse, les « sticky menus » restent toujours visibles et permettent une navigation permanente sur le site. Ainsi, le défilement n’a plus d’effet sur la navigation dans le menu.
Facebook est un bon exemple de Sticky Navigation - la barre de menu supérieure est toujours visible! Source: www.facebook.com/thehundreds?fref=ts
D’autres fonctions sont par exemple un affichage toujours visible des boutons de réseaux sociaux, de la barre latérale ou du pied de page. Il est possible de l’adapter au design, en fonction des besoins.
Les « sticky menus » présentent de nombreux avantages par rapport aux menus statiques, mais ne sont pas nécessairement la bonne solution pour toutes les pages web. Quand la navigation « collante » est-elle la plus adaptée ?
Avantage de la « sticky navigation »
Lors de l’utilisation d’une page web, la disponibilité permanente de la navigation constitue un avantage évident. Sur Facebook, Twitter et co., cet avantage revêt une importance particulière. Même si l’on fait défiler le fil d’actualité, il est toujours possible de cliquer sur les boutons destinés à la conversation instantanée, aux actualités et aux autres fonctions. On gagne du temps.
Des éléments comme une barre latérale peuvent également devenir « collants ». Ainsi, certains contenus sont présentés à l’utilisateur de manière permanente. En fonction de ses besoins, on peut choisir librement si l’on veut voir s’afficher des boutons de médias sociaux ou une barre latérale pendant le défilement. Si les éléments qui adhèrent ainsi à l’écran lors du défilement sont envahissants, ils peuvent détourner l’attention du contenu réel du site - davantage d’informations à ce sujet dans la partie dédiée aux inconvénients.
James Blake intègre les boutons des médias sociaux avec une barre latérale fixe. Source: www.jbiwebdesign.co.uk
Une étude de Hyrum Denney, expert en web design et développement web, affirme que la « sticky navigation » permet une augmentation de 22% de l’utilisation. Dans un premier temps, cela semble moins important que ça ne l’est en réalité. Vu le temps passé sur internet, les 22% se cumulent rapidement pour totaliser une ou plusieurs heures par jour. Les testeurs ont, à l’unanimité, estimé que les menus fixés étaient plus agréables que les menus statiques.
Les inconvénients de la « sticky navigation »
Mais toute médaille a son revers. De prime abord, la « sticky navigation » semble être un outil gagnant-gagnant, mais elle a aussi des inconvénients. Les menus recouvrent toujours une partie des contenus, en fonction de la largeur de la barre navigation. Une question importante qu’il convient de se poser est donc : les menus sont-ils plus importants que le contenu de la page ?
Une réduction de la taille du menu « adhérant » peut constituer un bon compromis. Mais, même en cas de rétrécissement, il faut que les contenus restent faciles à reconnaître. Une barre plus étroite recouvre tout de même du contenu.
TechCrunch rétrécit le logo lors du défilement. Source: www.techcrunch.com
Les éléments qui défilent en même temps que la page peuvent facilement détourner l’attention et devenir envahissants. Les logos, couleurs et autres images sont perçus par l’œil humain comme des éléments importants et attirent l’attention. C’est l’inverse de ce que l’on cherche à obtenir. L’accent devrait être placé sur la page et non pas sur les menus. Dans le pire des cas, des éléments sont considérés comme irritants et donnent une image négative du site web - indépendamment de la qualité du contenu.
Conclusion
Dans le domaine de la « sticky navigation », le point le plus important qu’il convient de garder à l’esprit est l’utilité individuelle. Sur Twitter ou Facebook, les menus sont importants car l’utilisateur souhaite avoir accès à divers éléments. Sur un site web avec des contenus courts, le défilement est minimal. Dans ce cas, les menus qui restent visibles en permanence n’ont pas leur place.
Si l’on a recours à des « sticky menus », il faut qu’ils soient aussi petits que possible - faute de quoi ils recouvrent des parties importantes du contenu ! Il convient donc de bien déterminer la taille minimale de la barre de menu, qui ne doit pas être trop petite sous peine de ne plus être suffisamment visible.
Il n’existe pas de règle générale en matière de navigation. Si certaines fonctions ou éléments de menus sont toujours importants et doivent toujours rester visibles, alors la « sticky navigation » constitue le bon choix. Si la priorité doit être donnée au contenu, il vaut mieux éviter tout ce qui « colle ».