3 - LES ÉLÉMENTS DE L'ARCHITECTURE
3.3 - Navigation intuitive et adaptée
• 3.3.2 - Où a-t-on rangé ma boussole ?
• 3.3.5 - Les moteurs de recherche
• 3.3.6 - Oups, quel pavé cette page !
• 3.3.7 - Et si j'ai l'habitude de naviguer avec mon navigateur...
3.3 - Navigation intuitive
et adaptée
La navigation est l'indispensable complément d'une architecture bien pensée. Elle doit être simple à comprendre, facile à mémoriser, et offrir différentss parcours adaptés aux types de visiteurs. Vous avez pensé, au par. 3.1 - Quelles informations pour quel public, à des informations de natures diverses pour des lecteurs différents. La variété de ces informations doit être servie, soutenue, par des navigations diverses. Et vous y ajouterez l'aspect "récurrence", pour un même type de lecteur : première visite ou visites multiples, voire périodiques.
La recherche d'une navigation efficace s'enrichit d'un petit détour vers l'annexe 3 - Ergonomie sur le web.
3.3.1 - Où suis-je ?
Une bonne navigation permet tout d'abord de savoir où l'on se trouve : beaucoup de visiteurs, après une recherche par un moteur de recherche type Altavista, arrivent sur votre site en tapant l'URL obtenue, qui peut être celle d'une page intérieure. Ils doivent immédiatement savoir qu'ils sont sur le site de l'association "X". Un en-tête de page efficace, toujours le même, avec votre logo et le nom de votre association, complété par le nom de la rubrique, fera l'affaire (16). Puis ces visiteurs veulent savoir où aller, depuis la page qu'ils consultent : ils y chercheront la barre de navigation générique, qui, tout comme l'en-tête, fait partie des éléments obligatoires de toute page. Bannissez les pages cul-de-sac, dont on ne peut pas sortir.
Un élément de la navigation auquel on ne pense pas souvent sont les crédits, ou pied de page. Ces informations, placées sous forme texte et de manière très discrète en bas de toutes les pages, vont surtout servir lorsque votre lecteur imprime votre page pour la lire à loisir, la conserver ou la faire circuler. Les éléments donnés dans les crédits sont :
- le nom de l'association (ou/et son logo),
- l'URL de la page,
- l'adresse e-mail de l'association,
- la date de la dernière mise à jour.
3.3.2 - Où a-t-on rangé ma boussole ?
La barre de navigation, pour être ergonomique, doit être un outil de repérage suffisant pour la recherche, et simple à mémoriser. Cette barre de navigation sera la même sur toutes les pages, et conservera la même localisation, la même apparence, la même logique. N'intervertissez pas les termes pour mettre en premier la rubrique consultée, on ne s'y retrouve plus. Par contre, il est judicieux d'y changer l'apparence du nom de la page ou de la rubrique visualisée, le lecteur sait ainsi où il se trouve : d'abord, le lien que le mot ou l'image supportent ne fonctionne plus et ne doit donc plus être proposé, puisqu'on y est, puis le mot ou l'image doivent se détacher légèrement du reste de la barre de navigation. Si vous utilisez des images pour la navigation, envisagez d'en avoir deux versions (17) : l'une pour proposer d'y aller (avec un lien actif), l'autre quand on y est (lien désactivé).
N'oubliez pas, pour vos lecteurs qui auront coupé le chargement d'images, la version "texte seul" de votre navigation, que l'usage fait généralement chercher en bas des pages, avec les crédits. Une autre possibilité consiste en indiquer sur chaque page, sous forme très discrète de navigation texte seul, le chemin intégral qui ramène à la page d'accueil, chaque étape étant elle-même un lien : c'est un système de navigation verticale qui permet de revenir à la page immédiatement supérieure, dans l'arborescence. Exemple : "Communiqué n° 3" > "Communiqués" >"Actions" > "Accueil" (18).
3.3.3 - Où puis-je aller ?
Dans une première étape, on décide que la barre de navigation générique reprend les grandes rubriques informatives du site : d'où l'importance de bien définir et nommer ces dernières, et de manière concise. Puis vous pouvez réfléchir aux autres services qu'elle pourrait proposer : un accès direct au numéro de compte chèque (19) ? à un moteur de recherche ? à votre adresse e-mail ? au sommaire ou au plan du site ? à la FAQ ? (Voir par. suivant.)
Dans le cas d'un site à trois niveaux (page d'accueil du site, rubriques et sous-rubriques), vous pouvez concevoir votre barre de navigation de telle sorte que, en cliquant sur une rubrique et en arrivant sur sa page d'accueil, la barre de navigation générique qui s'y trouve vous propose la liste des sous-rubriques (en note, un exemple commenté si mes explications sont peu claires (20). Voilà une solution sympathique et efficace, mais pour un petit site (quelques dizaines de page), car elle oblige à avoir une barre de navigation spécifique pour chaque page de rubrique et de sous-rubrique. L'avantage, c'est que vous obtenez le même résultat qu'avec un menu déroulant, mais sans javaseries peu fiables.
Une autre solution consiste à prévoir, pour chaque rubrique un peu dense, une page d'accueil qui présente celle-ci et propose, dans son texte, une navigation interne menant aux sous-rubriques, clairement différenciée (par son apparence ou sa situation dans la page) de la navigation générique dont la forme, alors, ne variera pas (en note, un exemple (21).
Au mieux, on tâchera, pour chaque page, de proposer trois types d'accès, propices à une heureuse recherche :
- la liste des rubriques principes ;
- un accès à la page immédiatement supérieure (pour aller voir ailleurs dans le même thème) ;
- enfin, toujours pour chaque page, la liste des pages hiérarchiquement inférieures (afin de poursuivre et d'affiner la lecture).
Hormis la barre de navigation, vous avez encore la possibilité d'utiliser, avec parcimonie, les liens hypertextes... dans le texte. Deux cas d'utilisation : vous voulez préciser et compléter une information par d'autres textes appartenant à une autre rubrique ; vous voulez créer des liens organiques, directs, entre des pages appartenant à des sous-rubriques différentes, alors que la division en rubriques aurait tendance à les éloigner. Prenez soin cependant de ne pas multiplier ces liens et de les regrouper en dehors du texte : il vous faudra sans doute rédiger un paragraphe spécial à cet effet. Cette navigation est typique des sites techniques, qui enrichissent chaque explication de références à d'autres points, avec un texte du type "pour cette section, voir aussi...". (En note, deux exemples (22).
[ Cette section 3.3 est divisée en deux fichiers : lisez donc la suite ]
Complétez cette section :
- Le thème des crédits est repris dans le par. 5.3 - Gabarits.
- Le graphisme de la barre de navigation est bien sûr traité dans le par. 5.1 - Graphisme simple, efficace et adpté au thème.
- Les liens hypertextes font l'objet d'un paragraphe spécial : par. 5.5 - Les liens
Notes
(16) Ne le laissez quand même pas occuper trop de place sur votre page : il doit rester discret (cf. par. 5.1.5 - L'organisation de l'écran). Voir, comme bon exemple, les en-têtes des pages de rubrique, sur le site de la Ligue des droits de l'homme :
http://www.ldh-france.org/
(17) Comme ces images sont légères (pas plus de 10 ko, s'il vous plaît), et qu'elles servent plusieurs fois, c'est à dire à chaque fois qu'on charge une page avec sa barre de navigation, ça n'est pas trop grave d'en avoir deux fois plus.
(18) C'est le principe utilisé par l'annuaire Yahoo :
http://fr.yahoo.com/
(19) La présence discrète mais têtue d'une rubrique sur le financement dans la barre de navigation est plus élégante que l'affichage du numéro de CCP, en gros, sur la page d'accueil. Cela laisse au lecteur le temps d'être convaincu par vos arguments avant de sortir son chéquier.
(20) Voyez les pages intérieures du Musée des Augustins à Toulouse : la balade au musée est agréable, et leur navigation est très efficace : modification de l'apparence du lien quand on est sur la page concernée, présentation du contenu de la rubrique quand on est sur sa page d'accueil :
http://www.augustins.org/
J'ai repris le principe dans le site de la bibliothèque Gustav Mahler, que j'ai conçu, mais en proposant la liste des sous-rubriques en format texte. C'est plus simple et plus rapide que de multiplier les petites images :
http://www.bgm.org/
(21) C'est l'option choisie sur le site d'Egide, du Centre international des étudiants et stagiaires. Notez également la version "texte seul" de la navigation générique :
http://www.egide.asso.fr/
(22) C'est ce que j'appelle la navigation transversale. Pour le site de la Bibliothèque Gustav Mahler, par exemple, j'ai imaginé de réunir les informations en deux grandes rubriques : le contenu de la bibliothèque, d'une part, et les services proposés grâce à ce fonds, d'autre part. Puisque les deux rubriques n'existeraient pas l'une sans l'autre (le personnel rémunéré par les services proposés entretient et fait vivre le fond), j'ai relié chaque page à son complément dans l'autre rubrique : par exemple, le texte décrivant le fonds iconographique - photos et illustrations originales - renvoie à la page des services proposant l'utilisation des reproductions ; et dans l'autre sens, la réalisation moyennant finances de recherches documentaires sur un thème tire sa valeur de la qualité et du nombre des livres consultés.
http://www.bgm.org
Plus simplement, le site du GISTI (Groupe d'information et de soutien des immigrés) propose, dans l'espace réservé à la navigation, des liens spécifiques complétant chaque page, intitulés "Voir aussi" :
http://www.gisti.org