Créer des univers adaptés à mes utilisateurs. À chaque profil utilisateur son « onglet ».

Exemple sur www.templatemonster.com

Pour qui ?
Ce type de navigation correspond aux sites contenant beaucoup de contenu. Idéal pour les sites affichant une offre de services ou de produits pouvant aller de 10 à 20 grandes pages thématiques.

Cette navigation est à deux niveaux. Chaque catégorie de niveau 1 contient un ensemble de sous pages/sections. Le système peut afficher directement deux niveaux de navigation directement à l’arrivée sur le site où c’est en cliquant sur un des éléments de niveau 1 qu’un sous-menu s’ouvre. Il reste affiché tant que l’utilisateur ne change pas de catégorie de niveau 1. Comme le modèle de navigation 002, utiliser cette barre de navigation vous limite en nombre de catégories et sous-catégories affichables en largeur. Cette largeur dépend
de l’équipement de vos internautes. Affichez votre barre de navigation sur 980 pixels maxi si vos utilisateurs ont une résolution d’écran de 1024.

Rappel
Un utilisateur moyen ne mémorise pas plus de 5 éléments (+/- 2) selon le sujet. Limitez vos sous-sections à 7.

Important
Affichez les catégories en cours de consultation de manière différente des autres liens. Ceci permet aux internautes de se situer facilement dans le site. Cette différenciation peut se faire par la couleur et par l’insertion d’un caractère de type « > » devant le libellé de la catégorie en cours de consultation. Le caractère « > » sert aux internautes qui n’affichent ou ne perçoivent pas les couleurs.

Surveillez les constrastes des couleurs utilisées. Même actif un libellé doit être bien visible.
Tant qu’un internaute n’est pas au bout de l’arborescence du site, les libellés doivent être cliquables.
Pensez comme pour la navigation 002 :

- à insérer un tag ALT et TITLE. Ils sont visibles en passant la souris sur les images
et en affichant les propriétés de l’image grâce à un clic droit sur l’image.
- à garder une copie des fichiers sources pour les faire évoluer plus facilement.

Si votre site a un objectif de transformation de type
« inscription » ,« acheter », « faites la promotion de nos
produits », faites comme Template Monster.com - voir
exemple à droite - et utilisez le décoché créé par les
deux niveaux pour introduire un bouton de transformation
de manière évidente. Le site d’Apple utilise ce système
de navigation. Les produits les plus en vogue sont mis en
avant dans la barre de navigation. L’utilisateur qui vient
chercher un élément en particulier sera donc servi très
rapidement.

Exemple sur www.apple.com.com

Ce système de navigation permet aux utilisateurs de retrouver aisément leurs sections « favorites ». Veillez à ce que les libellés soient explicites aux utilisateurs et non uniquement à votre organisation. Bannissez tout jargon interne.

Astuce
Testez votre navigation auprès de votre cible. 5 utilisateurs suffisent pour identifier 80% des problèmes d’ergonomie du site.

Attention !
La souplesse d’évolution de cette navigation peut générer des incohérences entre les différentes sections. Certains libellés deviennent parfois redondants.