Les bonnes pratiques de la conception des menus

2 mars 2011

Lorsqu’un visiteur arrive sur votre site celui-ci essaye de trouver rapidement ses repères. Il est dit que 60% des visiteurs qui arrivent sur un site ne trouvent pas ce qu’ils cherchent. C’est pour cela que la navigation est un élément très important à prendre en compte lors de la conception de votre site web.

Positionnement du menu:

Lors de la conception de votre site ou application il est important de respecter les habitudes des utilisateurs. Si celles-ci sont respectées la navigation sera fluide et claire pour l’utilisateur. Pour faciliter sa navigation la barre de menu doit toujours se placer au même endroit sur toutes les pages afin de ne pas perturber l’utilisateur. Une page profonde sans menu sera synonyme de perte de l’internaute.

On retrouve deux types de navigation : horizontale ou verticale. Afin d’améliorer l’usabilité du site il est important que celle-ci soit accessible sans scroller vers le bas. Il faut donc en général placer la barre de navigation dans la première moitié de l’écran pour être sur que même les utilisateurs qui ont de petits écrans puissent accéder directement au menu (ou au moins aux premiers éléments si c’est un menu vertical)

On peut également retrouver une barre de navigation dans le footer. Cependant celle-ci comporte en général des éléments différents du menu supérieur. On retrouve par exemple des pages qui peuvent sembler moins importantes pour l’utilisateur (conditions, termes d’utilisations).

Composition du menu :

Lors de la conception des différentes catégories à afficher il est important de garder à l’esprit la compréhension de ce que l’on trouvera dans telle ou telle catégorie. Il faut ainsi choisir des ancres claires qui restent dans la thématique du site ou de la page sur laquelle le visiteur va arriver. Il important de reprendre le nom de la catégorie dans le titre de la page afin que le visiteur sache où il est. Un bouton simple pour revenir à la page d’accueil du site est également nécessaire comme par exemple un logo cliquable.

Les images comme éléments de navigation:

Veillez à ne pas utiliser d’image dans votre navigation celle-ci sera beaucoup plus accessible. Utiliser des propriétés CSS pour styliser vos boutons et utiliser par exemple cufon pour personnaliser les typo.

Complément d’information pour la navigation:

  • Le fil d’arianne : Afin que l’utilisateur sache bien où il se trouve sur le site, il est intéressant d’ajouter un fil d’arianne. Il permet de dire dans quelle page profonde il se trouve ainsi que les pages parents de la sienne.
  • Les contenus liés : Ce sont par exemple des liens en bas de pages qui proposent des contenus similaires à l’utilisateur. On les trouve souvent dans les sites éditoriaux ou par les sites de e-commerce lors de cross-selling
  • Le sitemap : Je ne parle pas du site map xml pour les moteurs de recherche, quoiqu’un sitemap comme celui-ci aiderait aussi les moteurs de recherche à naviguer au travers du site. Mais plutôt comme une table des matières qui reprendrait les pages importante du site

Les différents types de menu :

Il existe différents types d’affichage de la barre de navigation. Le choix de celle-ci entraine un questionnement sur l’ergonomie du site au moment de sa conception. Des questions d’accessibilité sont également à prendre en compte, un abus d’utilisation de JavaScript empêchera les personnes malvoyantes de pouvoir naviguer à travers le site sans souris.

Parmi les différentes navigations on retrouve:

  • Les fat menus : Ce sont des menus très importants, une catégorie peut regrouper à elle seule une nouvelle barre de navigation. On les retrouve souvent pour des sites où le nombre de pages et de sous catégories est très important

  • Les menus déroulants : Lorsqu’on déplace la souris sur une catégorie, les nœuds enfants sont alors accessibles. Comme par exemple sur le site de capitaine commerce

Pour finir, voici des exemples de navigation qui valent le détour pour leur originalité mais pas forcément pour les usabilités :
Tympanus.net