Naviguer sur ton site

Un site Web conséquent pose le délicat problème d'une navigation facile, claire, mais gérable par le webmaster. Il n'existe évidemment pas de solution toute faite pour résoudre ce problème. Voici cependant quelques pistes de réflexions.

Au menu ce soir ...

La plupart des sites n'ont rien trouvé de mieux qu'un menu pour présenter leur système de navigation, qui plus est si le nombre de pages est important.

Un site scout classique, que ce soit celui du National, celui d'une Codépie ou celui d'un groupe, est nécessairement très structuré. On trouve une section pour chaque unité ou chaque branche, etc. L'approche consistant à découper son site en fonction des centres d'intérêt du visiteur (s'agit-il d'un scout, d'un chef scout, d'un ancien scout, d'une personne extérieure au mouvement), est également courante. Le problème de la navigation est donc très présent sur les sites scouts.

La première manière de résoudre ce problème est de l'ignorer !

Comme sur de trop nombreux sites, on met un bouton Back qui ramène à la home page sur toutes les pages, et le problème est résolu. On peut même essayer les boutons Back, Home, Next, avant de se rendre compte que sur un site dynamique avec de nombreuses pages, c'est tout bonnement ingérable, même avec un bon éditeur HTML comme Dreamweaver.

La deuxième manière de résoudre ce problème consiste à utiliser un menu fixe.

Il trouvera avantageusement sa place dans une frame à gauche de l'écran dans la plupart des cas, ou en ayant recours à des SSI dans des cas plus rares. Dès que le site est conséquent et que la frame du menu scrolle sur des kilomètres, on se rend compte que cette solution n'est pas adaptée à la taille du site.

La troisième approche : l'applet Java.

Elle est relativement similaire à la précédente, on utilise une applet Java dans une frame (comme sur le site du Centre National à une époque). C'est une assez bonne solution, à quelques détails prêts :

• il est assez risqué de mettre quelque chose d'aussi important que la navigation dans une technologie qui n'est pas réellement "universellement compatible".
• il faut déjà trouver ou développer une applet qui ait des fonctionnalités sympas quels que soient la plate forme, le browser, etc...
• il est sympa que cette applet s'adapte aux dimensions de l'écran de l'utilisateur, ce qui est rarement le cas.
• la hiérarchie du site est transmise à l'applet par un format généralement propriétaire (et non des liens), et si on veut que les moteurs de recherche indexent correctement le site, il faut faire une autre page avec tout le sitemap en liens, ce qui est difficile à gérer si le menu de navigation n'est pas stocké dans une base de données.
• enfin, l'utilisation des frames est vivement déconseillée par les professionnels.

Les frames

Les frames facilitent grandement le travail de développement d'un système de navigation. Pourtant, les professionnels et les sites professionnels (Apple, Microsoft, Adobe, etc..) y ont rarement recours. Pourquoi ?

Principalement à cause des utilisateurs novices qui ne savent même pas ce qu'est une frame.

• si depuis le menu "Favoris" de IE, tu ajoutes un favori sur une page contenant des frames, c'est la frame principale qui est gardée en mémoire.
• de même, l'utilisation des boutons Impression et Refresh est délicat pour un utilisateur novice sur une page framée.
• certains moteurs de recherche ne suivent toujours pas les liens définis dans un frameset.
• lorsqu'un moteur de recherche renvoie une de tes pages à l'issue d'une requête de l'utilisateur, il manque la navigation si ton site utilise des frames. Tu as intérêt à avoir un bouton home sur chaque page qui pointe sur la page de définition du frameset, ou un Javascript client qui réoriente l'utilisateur directement vers la bonne page avec son menu de navigation.
• la barre de titre du navigateur ne change pas au cours de la navigation.

Ce ne sont là que quelques-uns des reproches que les professionnels font aux frames. On constate assez rapidement que sur tous les gros sites, les frames ne sont utilisées que lorsqu'elles ont une réelle plus-value. C'est le cas de MSDN Online. Non seulement la plupart des problèmes présentés ci-dessus sont résolus par un mélange de scripts clients et serveurs assez gratinés, mais en plus, le contenu du menu se charge au fur et à mesure de la navigation dans les menus. En outre, une synchronisation du menu en fonction de la page actuelle est possible. C'est donc un petit bijou de navigation, géré par une usine à gaz !

Différentes navigations courantes

Parmi les propositions ci-dessous, couramment rencontrées sur Internet, tu trouveras peut-être le modèle de navigation idéal pour ton site:

1. La "barre horizontale, barre verticale" : C'est celle qu'utilise LaToileScoute, mais aussi la FNAC ou Microsoft. Elle convient particulièrement pour les gros sites, puisque le menu vertical permet d'afficher beaucoup de sous-menus. Elle est très intuitive, puiqu'elle utilise le même principe de sélection que les menus de IE, ou de n'importe quel programme Windows.
2. La "double barre horizontale" : C'est ce qu'utilisent Apple ou Lycos. Toute la navigation est stockée à un seul endroit sur la page, ce qui maximise la place pour le contenu. A noter que Dreamweaver MX 2004 permet très facilement de créer des menus comme celui du site de Macromedia, et que Adobe ImageReady 7 et FireWorks MX 2004 permettent facilement de faire des barres de menus Aqua comme celle d'Apple.
3. La "barre horizontale drop-down" : C'est celle d'Adobe. Elle est un peu plus difficile à mettre en place puisqu'elle demande du script client pour gérer les sous-menus. C'est la copie parfaite des menus des applications Windows.
4. Le "site de news" : C'est le modèle le plus récent, apparu en même temps que les Weblogs. Il ne s'agit pas d'une barre de menu, mais d'une simple liste de news, triées généralement chronologiquement. Son principal atout : ce modèle est utilisé sur des sites connaissant une mise à jour quotidienne, voire plus. C'est le cas de TF1 ou de SVM par exemple.
5. Le "modèle en ronds" : C'est le modèle à ne surtout pas utiliser. Il consiste à mettre plusieurs entrées de menus autour d'un logo par exemple, au milieu de la page. D'une part, l'informatique, et les navigateurs en particulier, n'aiment pas les ronds, et préfèrent les carrés. D'autre part, à chaque ajout d'une entrée de menu, il faut repositionner harmonieusement les autres entrées de menus. Un vrai casse-tête !

En conclusion...

La navigation sur ton site est l'un des points clés qui feront que tes visiteurs reviendront ou non, il faut donc bien y réfléchir. Il ne faut pas voir trop grand (passés 3 niveaux de profondeur, le visiteur est perdu), pas trop loin (après 3 pages "en construction", le visiteur quitte le site), et il ne faut pas perdre de vue que même sur un site scout, la navigation, ca doit être tout le contraire d'un jeu de piste ;-)