Nous contacter

  1. Accueil
  2. Blog
  3. Développement
  4. 10 ressources Javascript pour créer la bonne navigation en toute situation

10 ressources Javascript pour créer la bonne navigation en toute situation

Le 24/06/2015

Dans Développement

La navigation de votre site web n'est pas à prendre à la légère. Point central de l'ergonomie, elle pourra souvent faire la différente entre un simple visiteur et un lecteur/utilisateur régulier. Votre navigation se doit de s'adapter aux besoins spécifiques de votre contenu tout en restant la plus simple possible, pour rester dans la zone de confort de votre utilisateur et le pas le perdre.

Face à ce genre d'enjeu, je vous propose une série de 10 ressources associées à divers exemples d'utilisation, qui vous permettront d'essayer et d'adopter des solutions certes par forcément originales, mais souvent testées et approuvées. 

La navigation principale de son site

Les navigations les plus fréquentes sont évidemment les navigations principales, qui permettront à vos utilisateurs d'accéder aux différentes sections de votre site.

Souvent sur la gauche ou en haut du site, elles doivent pouvoir se faire oublier tout en restant accessibles à tout instant, comme c'est le cas pour la ressource suivante.

Les navigations les plus simples sont bien entendues une simple liste à un seul niveau, de plus en plus cachée par défaut et ne se révélant qu'après un clic, mais il est aussi possible de faire quelque chose de hiérarchisé, comme avec un drop down par exemple.

Des navigations contextuelles

Quand on pense aux navigations contextuelles, on pense souvent aux menus contextuels, comme les clics droits, par exemple. Il faut tout de même faire attention à bien préciser à ses utilisateurs qu'un clic droit permet d'accéder à un menu. De plus, ce genre de fonctionnement n'est pas la norme sur les sites web, il faudra donc bien peser la décision d'utiliser la ressource suivante.

Autre présentation avec la ressource suivante, permettant des créée un menu se repliant sous la forme d'un petit "plus", et qui se déplie au survol.

Il est aussi possible de détourner légèrement une ressource comme Midnight js, qui permet d'afficher une zone "fixe" (que ce soit un menu, header, ou autres) en fonction du contenu que nous voyons actuellement sur la page. Souvent utilise à des fins cosmétiques, il est aussi tout à fait possible de l'utiliser pour afficher une navigation différente en fonction de notre emplacement sur la page (des articles connexes en début de lecture, pour les visiteurs finalement par intéressés par l'article qu'ils lisent, puis à la fin de l'article des boutons de partage).

Enfin, il existe aussi des navigations spécifiques à certains contenus, qui ne sont donc à afficher que pour certains cas très précis. C'est le cas par exemple de la ressource suivante, très utile pour naviguer entre les étapes d'un formulaire, ou les navigations guidées, utiles pour presenter votre nouvelle interface.

Des navigations pour les pages articles

Les navigations sur les pages articles, ou de manière générale toutes les pages dont le contenu est vraiment primordial, se doivent d'être le moins visible possible. Il est fréquent de voir des menus en header pouvant changer de taille ou se cacher au scroll, comme les deux ressources suivantes.

Enfin, ce genre de page a des besoins spécifiques, comme le fait de pouvoir suivre notre position par rapport au contenu tout en pouvant sauter simplement entre les diverses parties du contenu, comme avec la ressource suivante.