Agence creation de site internet
Le bandeau du site Ergonomie Web retour sur la page d'accueil du site ergonomie-web.studiovitamine.com aller sur le site www.studiovitamine.com
Thèmes associés : Menu déroulant encore menu onglet, boutons de navigation, navigation rollover. Web menusmenu rollover. Menu deroulant et bouton de navigation, boutons navigation; icones navigation, ergonomie web et ergonomie site web. Barre site web ou web menu et barre navigation. Icone navigation pour menus navigation, la barre de navigation et icon navigation pour menus déroulants... Bouton navigation. Menu de navigation, barres de navigation. Barre de navigation internet, menu navigation où ergonomie des sites web, onglet site web. Liens associés : barre navigation et barre navigation
Accueil > Navigation web > Barre de navigation

AUDIT SEO GRATUIT

Barre de navigation

La barre de navigation : un repère dans le site.

La barre de navigation est un élément essentiel pour l'internaute. Elle lui procure une vue globale du site et lui montre l'ensemble des rubriques. Ainsi l'internaute peut circuler facilement en fonction de ses besoins.
 
La barre de navigation permet de circuler d'une rubrique à une autre en toute liberté et quelque soit le niveau de profondeur du site. Si l'utilisateur utilise abusivement le bouton "reculer d'une page" du navigateur comme bouton de navigation pour se déplacer dans le site, ce n'est pas bon signe.
  1. La barre de navigation
  2. Les  menus déroulants
  3. Les Onglets
  4. Les Rollovers
  5. Les Boutons de navigation

1. La barre de navigation.

Image de Barre de navigation
Le site de La Fnac propose une zone de navigation spécifique placée sous la barre de navigation
Le site de La Fnac propose une zone de navigation spécifique placée sous la barre de navigation
Toujours placée au même endroit sur toutes les pages du site, la barre de navigation est en général placée horizontalement ou verticalement dans le haut de la page et de préférence à gauche.
 
Cette position lui permet d'être toujours visible et accessible quelque soit la taille de la fenêtre dans le navigateur. Sa position, au dessus de la page, lui donne de l'importance, et c'est un repère toujours présent.
 
Les utilisateurs d'Internet ont cette habitude. Ils capitalisent sur leurs expériences et vouloir changer ce principe reviendrait à perturber les visiteurs.
 
Il est parfois utile de proposer à l'internaute des zones de navigations indépendantes de la barre de navigation. Ces zones sont spécifiques à certaines pages et permettent d'apporter des informations complémentaires et d'approffondir les contenus de la page ouverte.
Ces zones sont souvent proposées sous forme de liens hypertextes et permettent par exemple, sur des sites de vente en ligne, d'affiner les critères d'achat.
 
Il est parfois tentant de multiplier les zones et les menus de navigation en utilisant des liens redondants pour inciter l'utilisateur à visiter la page. En général, cela conduit l'utilisateur à visiter deux fois la page et sème toujours le doute dans l'esprit de l'internaute.

2. Les menus déroulants.

A partir de la barre de navigation, il est possible de créer des menus déroulants . Le principe est de faire apparaître au survol de la souris sur une rubrique, une zone contenant des liens hypertextes vers les sous-rubriques.
 
L'objectif premier c'est le gain de place et l'accès rapide aux sous-rubriques. Mais parfois cela peut occasionner une gêne pour certaines personnes surtout si les sous-rubriques sont elles-mêmes divisées en nouvelles sous-rubriques.
Lorsque l'utilisateur clique sur l'onglet, le sous-menu apparaît et il faut faire glisser la souris pour sélectionner un nouveau menu. Si la souris quitte la zone, le menu disparait et il faut recommencer l'opération.
 
Pour remédier à ce type d'inconvénient, mieux vaut parfois proposer d'atteindre les rubriques par des pages de liens.
Image de Barre de navigation
La sélection d'un élément du sous-menu est délicate
La sélection d'un élément du sous-menu est délicate
Image de Barre de navigation
Une page de lien peut être une alternative au menu déroulant
Une page de lien peut être une alternative au menu déroulant

3. Les Onglets.

Les onglets de la barre de navigation font partie de l'environnement que connaît bien l'internaute. Ils les identifient dès l'ouverture en haut de la page.
 
C'est devenu un vrai standard de l'ergonomie web et il est rare de trouver un site web qui ne les utilise pas. Ils ont une seule limite. Lorsque le site contient plus de deux niveaux de profondeur, il y a besoin d'utiliser une navigation secondaire.
 
Pour bien faire comprendre le rôle des onglets, lorsqu' un utilisateur entre dans un site web, l'onglet du menu de navigation correspondant à la page ouverte doit être sélectionné par défaut. L'utilisateur comprend de suite où il se trouve et peut ainsi naviguer entre les différentes rubriques.
 
C'est comme sur la première page du site, l'onglet "Accueil" est toujours présélectionné.
Image de Barre de navigation
Dans cet exemple, l'onglet de la page d'accueil n'est pas préselectionné. Quand l'internaute arrive sur le site, il ne sait pas sur quelle page il se trouve.
Dans cet exemple, l'onglet de la page d'accueil n'est pas préselectionné. Quand l'internaute arrive sur le site, il ne sait pas sur quelle page il se trouve.
Image de Barre de navigation
Dans cet autre exemple, l'internaute a cliqué sur l'onglet "Vie municipale". Rien ne permet de visualiser sur la barre de navigation que l'action vient de se réaliser. L'onglet n'a pas changé d'état.
Dans cet autre exemple, l'internaute a cliqué sur l'onglet "Vie municipale". Rien ne permet de visualiser sur la barre de navigation que l'action vient de se réaliser. L'onglet n'a pas changé d'état.

4. Les Rollovers.

Image de Barre de navigation
Ici le menu utilise le rollover. Au survol du pointeur de la souris, les rubriques changent de couleur. Elles passent du jaune au vert.
Ici le menu utilise le rollover. Au survol du pointeur de la souris, les rubriques changent de couleur. Elles passent du jaune au vert.
Le rollover est une fonction qui modifie l'aspect d'un élément graphique dans sa forme, sa couleur ou son animation lorsqu'il est survolé par le pointeur de la souris.
 
L'élément revient dans son état initial lorsque le pointeur quitte l'image.
 
Cette fonction, ou comportement d'un élément graphique est souvent employé pour donner de l'interractivité à un élément de la barre de navigation, dans le but de le mettre en évidence.
 
Si l'utilisation du rollover est souvent intéressante, il est parfois source de difficultés pour les internautes. Sur le site de la Banque Postale, les titulaires d'un compte, pour s'identifier, doivent renseigner le nom d'utilisateur et le mot de passe. C'est pour le second que le système du rollover complique fortement les choses parce que son fonctionnement n'est pas intuitif et il est difficile à maîtriser.
 
Pour indiquer le mot de passe dans le champs réservé, il faut avec la souris survoler les 6 chiffres constituant le mot de passe sur les 10 proposés. Le survol des chiffres les uns après les autres provoque ainsi l'action de renseigner son mot de passe. Cela demande un effort de concentration important pour l'internaute, sous peine d'erreur. Il suffit de survoler par inadvertance un autre chiffre et il est aisé de comprendre que le mot de passe devient alors éronné.
 
Dans ces conditions l'internaute a l'impression de perdre le contrôle de sa navigation.

5. Les Boutons de navigation.

Image de Barre de navigation
Sans le texte associé au bouton, la signification des icônes est très difficile à comprendre.
Sans le texte associé au bouton, la signification des icônes est très difficile à comprendre.
Les boutons de navigation sont des élément utilisés comme liens pour naviguer.
 
Ils se présentent sous plusieurs formes : icône, texte ou parfois les deux associés.
Pour gagner de la place à l'écran, certains concepteurs web préfèrent utiliser des icônes de navigation en guise de menu. Par exemple, l'icône représentant une maison pour accéder à la page d'accueil dans le menu est souvent bien interprétée. Ce n'est pas le cas pour tous les graphismes utilisés comme icônes.
 
Dans l'exemple ci-contre, l'icône "sortir" illustrée par la maison prête à confusion, même si elle est accompagnée par un texte.
 
Si la barre de navigation est exclusivement composée d'icônes, la navigation devient plus risquée. L'utilisateur est plongé dans le doute, dans la confusion, s'il n'identifie pas immédiatement ce que l'icône symbolise. Avant d'utiliser ce type de menu, mieux vaut avoir tester la compréhension des icônes auprès d'un large public.
 
Sur les boutiques en ligne, les utilisateurs repèrent de suite le "panier virtuel" ou "caddie virtuel" pour afficher la liste des objets déposés en vue d'une commande. Les icônes utilisées parlent d'elles-mêmes. Qui prendrait le risque d'en inventer d'autres ?
Image de Barre de navigation
Sur ce site, les boutons de navigation sont parfaitement incompréhensibles. On pourrait les prendre pour des vignettes illustrant l'image de fond. Pourtant c'est un menu. Le quatrième bouton pointe vers "Economie et emploi".
Sur ce site, les boutons de navigation sont parfaitement incompréhensibles. On pourrait les prendre pour des vignettes illustrant l'image de fond. Pourtant c'est un menu. Le quatrième bouton pointe vers "Economie et emploi".
Un texte est généralement mieux compris qu'une icône. Le libellé du bouton doit être explicite de façon à ce que l'utilisateur puisse comprendre le contenu de la page.
 
Par exemple, un bouton "page suivante" ou "page précédente" n'apporte aucune information à l'internaute. Pour lui, l'emplacement de la page n'a aucune importance. Ce qui l'intéresse c'est ce qu'elle contient.
Une flèche seule en bas de page ou d'article n'est peut-être pas suffisamment explicite. La combinaison du graphisme et du texte "Haut de page" enlève toute ambiguité.

Création de sites Internet
& référencement naturel

Découvrez les références de l'agence web
STUDIO VITAMINE. Des spécialistes et passionnés
à votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE