006 - Menu de gauche vertical avec développement de la sous-categorie dans les pages internes uniquement

Note5/5, coût 2/5, accessibilité 5/5

Pour qui ?
Pour les sites contenant beaucoup de contenus. Cette navigation est très populaire auprès des sociétés et institutions qui démontrent sérieux et structure.

Affichées en colonne de gauche, les catégories principales apparaissent les unes au-dessous des autres.
Lorsque l’internaute clique sur une catégorie, il est redirigé vers une nouvelle page présentant cette catégorie. Le menu de gauche apparaît alors « ouvert » faisant un lien vers toutes les sous-rubriques de la rubrique sélectionnée. Les sousrubriques s’affichent sous le lien sur lequel l’internaute vient de cliquer.
Comme toutes les navigations en hauteur, le nombre de catégories et sous-catégories est en théorie illimité. Les ergonomes conseillent néanmoins d’afficher moins de 7 catégories par niveau.

Exemple sur www.jvcpro.co.uk

Jouez en variation avec les niveaux 1.Ici, les boutons varient
en taille et en couleur selon les besoins utilisateurs. Je
suis l’architecte de ce projet.Je vous laisse donc apprécier par
vous-même.

Il est possible de mettre en place un script qui permette aux internautes d’ouvrir et de fermer les menus de gauche sans forcément recharger la page principale. Cette pratique est déconseillée car elle déconcerte les internautes. Lorsqu’un internaute clique sur un lien, il s’attend à changer de page. Ces scripts sont aussi très souvent ignorés par les moteurs de recherche et par les internautes qui ont désactivé l’exécution des scripts.

Exemple sur www.linternaute.com

La variante de cette navigation affiche le contenu du sousmenu
en haut de liste. Cette variante s’applique bien aux
sites dont le menu est extrêmement long. Ce sont des sites
dont les rubriques sont très variées. Un utilisateur viendra
pour une rubrique et y restera. Lors de l’implémentation de
cette variante : appliquez au sous-menu des codes
graphiques(couleur de fond) bien différents du menu de
niveau 1 afin que l’internaute puisse faire la différence.

Si vous choisissez ce menu :

laissez le sous-menu d’une catégorie ouvert. Si l’internaute consulte une catégorie,
bloquez la possibilité de fermer le sous-menu.

allumez (par la couleur et l’insertion d’un signe de type « > »), voire désactivez les
liens des pages en cours de consultation.

variez le menu de gauche (couleur, picto…) afin de mettre en avant certaines catégories et ainsi de casser la monotonie. Veillez à ce que les tags ALT et TITLE soient vides s’ils sont purement décoratifs.

privilégiez le texte accompagné d’une illustration plutôt qu’une série d’images. Cela
vous permettra de faire évoluer votre site à moindres frais et le rendre plus accessible
entre autres aux moteurs de recherche.

vérifiez qu’aucune des variations du menu ne soit démesurément plus longue que
le contenu lui-même.

vérifiez que l’ensemble de vos pages soient accessibles sans javascript. Testez en
désactivant les javascripts de votre navigateur.

préférez une imbrication de liste à puces (code html UL et LI) pour la construction
de ce menu.

une variante de ce menu existe. Elle ouvre le sous-menu en haut de page.

Dans le livre “Internet, donne-moi ce que je veux !”, lors d’une interview Catherine Guichon, responsable du site Manpower.fr nous dit :

- Le pourquoi de ce choix de modèle de navigation.

- Elle nous en liste ses avantages, ainsi que ses inconvénients.

Laisser un commentaire

Les champs marqués * sont obligatoires