La navigation comprend dès éléments tels que le menu, le footer mais également les chemins de fer⁽¹⁾, les liens de contenu, les éventuels pavés contextuels, etc.

Tous ces éléments forment un tout qui, bien sûr, permet de passer de page en page, mais permet aussi à l’internaute de se repérer dans le site et de comprendre quelles informations il va trouver dans quel contexte.

Enfin, en plus de l’internaute, c’est le moteur de recherche a qui une navigation soignée va servir. Le référencement naturel n’en sera que meilleur.

Bien réfléchir à la navigation d’un site au moment de sa conception, participe donc à deux critères de l’expérience utilisateur : l’utilisabilité et la trouvabilité.

Comment soigner la navigation d’un site

Le menu

Le menu est, bien sûr, un élément central du site et de sa navigabilité.

En tant qu’élément récurrent, dans les sites web, les internautes sont habitués à y trouver les rubriques du site. Il peut donc être un premier indice du contenu du site et de ce qu’on y trouvera. Le découpage et le nommage des rubriques est donc primordial et doit bien correspondre au contenu effectif.

Le rendu graphique du menu est bien sûr important. Il doit être différencié du reste du contenu et lisible. Pensez au critères d’accessibilité (contraste des couleurs de fond et de texte, par exemple). Méfiez-vous également des menus qui, pour être plus jolis, utilisent des images plutôt que des typographies systèmes : le référencement en sera moins bon.

Mis à part la mise en forme d’une rubrique qui peut changer en fonction du contexte (onglet de couleur différente lorsqu’on navigue dans la rubrique en question), le menu doit être au même endroit et avec le même rendu graphique et le même contenu sur toutes les pages. C’est un élément de repérage important ; il ne doit pas « bouger ».

Le chemin de fer

Le chemin de fer aide l’internaute a s’y retrouver dans un site. Il devient indispensable à partir du moment où l’arborescence à plus de deux niveaux.

Le chemin de fer contient deux types d’éléments qui doivent être différenciés : les pages parentes et la page en cours. Les items de pages parentes sont des liens vers les pages en question et la page en cours est du simple texte (pas de lien vers elle-même). Cette différence devrait également être relayée par du graphisme.

Chacun de ces items, pages parentes ou page en cours, doivent, pour des raisons de repérage, reprendre le titre de la page (qui reprend lui-même, le cas échéant, le titre de rubrique utilisé dans le menu).
Par exemple, si dans mon menu j’ai une rubrique « Accessibilité des pages web », la page vers laquelle pointe ce lien a pour titre « Accessibilité des pages web ». Les sous-pages de cette rubrique, dans leur chemin de fer contiennent alors un item de page parente « Accessibilité des pages web ».
Cette bonne pratique est également très utile pour optimiser une requête donnée sur une page et donc augmenter la qualité de son référencement naturel.

Pour coder le chemin de fer, vous pouvez aller consulter ces deux articles de vrais pointilleux (que j’adore ça !) : Fil d’Ariane et sémantique et Fil d’Ariane et sémantique (à nouveau).

Les liens de contenu

Les liens insérés dans un texte sont facilement lus, sont compréhensibles car contextualisés et sont fréquemment suivis. Pensez-donc, quand c’est pertinent, à rendre une allusion à une autre page du site cliquable. Là encore, l’idéal est que ce morceau de texte cliquable soit le titre de la page (que l’on retrouve dans le chemin de fer, dans le menu…)

Si un lien pointe vers un autre site, il faut le préciser. Utiliser pour cela l’info-bulle (attribut title) afin d’avertir votre internaute qu’il change de site. Cette information peut également être relayée par un pictogramme (comme le fais Wikipédia, par exemple au bas de l’article navigation).

Le plan du site

Le plan du site est indispensable, à mon sens, quel que soit l’étendue de votre site.
Il permet à l’internaute de se rendre compte du contenu d’un site dans sa globalité ; il permet à un moteur de recherche de trouver la totalité des pages d’un site.

Là encore, les items du plan du site doivent reprendre les libellés des titres de page.

Si la navigation utilise des couleurs, ces couleurs doivent être reprises dans le plan du site.

Pour en savoir plus sur le plan du site, consulter Concevoir un plan de site.

La page d’erreur

Même si on s’en passerait bien, la page d’erreur fait partie de la navigation d’un site.

Elle ne doit pas laisser l’internaute dans un cul-de-sac mais lui donner des éléments pour continuer de naviguer. Un lien vers la page d’Accueil est un minimum, une incitation à utiliser le moteur de recherche est une très bonne idée, une reprise du plan du site est indispensable.

Le moteur de recherche

La complexité du site imposera ou non la présence d’un moteur de recherche.

Conclusion

On le voit, les éléments de navigation d’un site sont nombreux et variés. Cela n’a rien d’étonnant le lien étant la particularité même du web. Pour autant, ces liens sont à traités de manière soignée et adaptée à leur fonction. Les principes vus ci-dessus s’appliqueront à chacun des éléments de votre navigation.

Utilisabilité et interfaces riches

Fred Cavazza défini l’utilisabilité comme étant la faculté d’un produit à être utile, utilisable et utilisé et les interfaces riches comme étant de nouvelles possibilité d’affichage.

Dans les deux cas, il s’agit d’améliorer l’existant ou de faire de nouvelles choses.

L’utilisation de système d’interfaces riches implique de ne plus penser en terme de page mais en terme d’îlots. C’est tout un nouveau raisonnement, de nouveaux usages.

Néanmoins, l’émergence des interfaces riches ne veut pas forcément dire interfaces « lourdes ». Bien au contraire, les interfaces riches peuvent permettre d’alléger l’affichage en ne dévoilant des éléments qu’en fonction de l’action de l’internaute, par exemple.
Par contre, le web va pouvoir se doter de plus d’interactivité, de plus se ressenti, de la robustesse et des usages hérités des applications…

Je rajouterais que l’utilisation des interfaces riches impliquent certains questionnement en matière d’ergonomie et je renvoie alors vers la conférence « Ergonomie et interfaces riches » de Amélie Boucher qui a eu lieu le lendemain lors de Paris Web 2008. (1)

RIA et systèmes de navigation

Patricia Gallot-Lavallée, auteur de 60 modèles de navigation, nous a donné sa vision des interfaces riches. Une phrase clé a rapidement attirée mon attention : elle ne s’est pas présentée comme une convaincue des interfaces riches mais, accessibilité en tête, elle dit les aborder a priori avec circonspection.
Néanmoins, selon elle, il faut maintenir l’internaute dans un état de découvertes et lui présenter les choses de manière ludique.
Le parallèle qu’elle a fait avec la conception de jeu vidéo est très intéressant.
Pour garder un bon « gameplay », il faut savoir maintenir le joueur dans un état entre la maîtrise et l’excitation.
Comme le faisait remarquer Fred Cavazza, cela va à l’encontre du principe ergonomique selon lequel on doit tout faire pour simplifier la tâche de l’utilisateur.
Néanmoins, il est vrai qu’une partie au moins de la population d’Internet est friande d’innovation et c’est aussi cette portion qui tirent les usages vers le haut.

Bon, je dois tout de même avouer une déception dans la présentation de Patricia Gallot-Lavallée : moi qui suis son blog, j’espérais qu’elle ne résisterait pas à l’envie de se servir de son mini vidéo-projecteur !

Une approche holistique des interfaces riches

« holisme ontologique : système de pensée pour lequel les caractéristiques d’un être ou d’un ensemble ne peuvent être connues que lorsqu’on le considère et l’appréhende dans son ensemble, dans sa totalité, et non pas quand on en étudie chaque partie séparément. » (Source : Wikipédia)

Ce que je retient de l’approche holistique au moment de concevoir une interface, c’est de ne pas prendre en compte uniquement l’application et l’utilisateur de l’application mais bien l’ensemble de la chaîne dans laquelle l’application s’inscrit. L’orateur, Dick Lantim, citait l’exemple d’un site de livraison de colis. L’ajout du numéro de téléphone du destinataire est devenu, au sein de l’interface, un élément obligatoire quand on a constaté, sur le terrain, que de nombreux colis ne pouvaient être livrés pour cause d’absence du destinataire. Pouvoir l’appeler est convenir avec lui d’un arrangement a permis de livrer beaucoup plus de colis qu’avant.

Rappel du programme :

1. Utilsabilité et interfaces riches – F. Cavazza
2. RIA et système de navigation – P. Gallot-Lavallée – Kenazar
3. RIA et applications métier – Mathieu Isaia et Emmanuel Lévi-Valensi – PIA
4. RIA et sites grand public – tequilarapido
5. RIA et expérience utilisateur – Thibault Imbert, Michael Chaize et Sam Woodman – Adobe
6. Approche holistique des interfaces riches – Dick Lantim – Microsoft

(1) Voir Ergonomie des interfaces riches – Amélie Boucher