Navigation

Identifier un lien

Etats de bouton

Afin de faciliter le repérage, il est utile de donner différents états aux éléments de navigation. Ils vont définir l'action de l'utilisateur sur le site et parfois laisser une trace de son passage. On distingue ainsi :

• état OFF : lien non sélectionné, à l'état brut


• état ROLL : la souris survole le lien ; le lien est "sensibilisé"


• état ACTIVE : état du lien "enfoncé", au moment ou l'utilisateur clique dessus


• état ON : l'utilisateur a cliqué sur le lien et il se trouve maintenant sur la page désignée.


• état VISITE : l'utilisateur accède à une autre page en cliquant sur un lien. Lorsqu'il revient sur la page précédente, le lien sur lequel il venait de cliquer a changé d'état (couleur) pour indiquer au visiteur qu'il est déjà passé par ce lien. Ce système est très utile dans le cas de consultation de liste de liens (résultats de recherche)
  www.google.fr

Le recours à ces différents états n'est pas systématique, à part l'état OFF, qui est l'aspect du bouton par défaut. L'état ROLL et l'état ON sont parfois identiques.

Ces différences d'états se manifestent de plusieurs façons :

• par un changement de couleur (le plus fréquent)
• par un changement de forme : l'icône utilisée a subi une transformation.

Statistiques sur le type de comportement au survol :
http://www.webdesignpractices.com/navigation/linktreatment.html

Nature des liens

Les éléments de navigation peuvent être traités de différentes façons :

• Texte HTML
  Les liens traités en texte html sont très utilisés pour les navigations contenant de nombreuses rubriques, au contenu très dense ; on les retrouve également au sein du contenu lui-même. On utilise des liens-texte en HTML pour les sites dynamiques dont les rubriques et les contenus sont susceptibles de changer fréquemment.
  Leur utilisation est donc de plus en plus fréquente, car ils sont faciles à manipuler et à "habiller" via les feuilles de styles.
  www.centrepompidou-metz.fr (le sous-menu de gauche)
  
  
• Texte HTML avec un arrière-plan traité en image
  Grâce aux CSS, il est possible d'habiller des boutons avec des images en arrière-plan, tout en gardant l'intitulé en texte HTML, ce qui facilitera l'évolution du site (changement d'intitulé de rubrique, traduction...)
  sncf.com - version HTML (la navigation principale : la largeur des boutons est fixe, l'intitulé est modifiable)
  
  
• Texte traité en image
  Les boutons fabriqués en image sont souvent utilisés pour les intitulés donnant accès aux rubriques principales. Traiter le texte en image offre un plus large choix graphique et typographique. Cependant, en tant qu'images, ces boutons sont beaucoup plus lourds que des liens traités en texte HTML, et ils ont un caractère définitif.
  www.centrepompidou-metz.fr (les 3 rubriques principales)
  
  
• Iconographique
  Les icônes représentant les rubriques doivent être facilement identifiables. Pour cela, afficher un titre au survol de l'intitulé de la rubrique peut être nécessaire.
  http://www.doyouspeakmartien.com/home.htm