Le plan du site comme aide à la navigation

La toute première fonction d’un plan du site est d’aider le visiteur dans sa navigation.

Cela peut, par exemple, être un visiteur qui recherche un type d’information précis et n’arrive pas à le trouver dans le menu, ni dans les pages. Si le site n’a pas de module de recherche, ou si l’internaute ne souhaite pas y faire appel, il peut alors utiliser le plan du site.

Mais l’internaute peut tout aussi bien avoir consulter le plan du site sans avoir fait une seule recherche dans les rubriques du menu ou en navigant. Il se peut très bien que le plan soit le premier lien auquel il ait recours. Soit qu’il recherche une information pointue et estime qu’il la trouvera plus facilement en ayant accès aux sous-rubriques et autres niveaux directement. Soit, tout simplement, pour se donner une idée de la prestation d’un site et des domaines couverts.

Des mot-clés et des liens pertinents

Le plan du site, par sa fonction même, va reprendre les mots importants du site : le titre des pages.

Mais la plus grande force encore du plan du site vient du fait que c’est un véritable réseau de liens sur le site.

D’abord, en listant la totalité des pages du site (ou des pages principales), on s’assure que le robot des moteurs de recherche trouvera chacune d’entre-elles. C’est donc une page que le spider doit facilement trouver.

Comment faire ?

Emplacement

On a vu que le réseau de lien que représente le plan du site est un avantage pour le référencement. Cet avantage est réellement efficace si de nombreuses pages pointent vers le plan du site. Mais de toute façon, d’un point de vue ergonomique, la présence d’un lien vers le plan du site sur chaque page est indispensable. En effet, on ne peut savoir d’avance à quel moment un visiteur va en avoir besoin. Et comme c’est un outil d’aide à la navigation… il doit facilement être trouvable !

Par habitude, on s’attend à trouver un lien vers le plan du site au moins en bas de page.

Présentation

Un plan de site peut-avoir un aspect très différent selon que le site est composé de quelques pages ou de plusieurs centaines ! Il n’y a pas une façon de faire un plan mais il faut savoir s’adapter à la situation.

Dans le cas d’un site à beaucoup de pages, vous n’allez pas lister dans votre plan la totalité (ou en utilisant une solution faisant apparaître des sections, par exemple). Vous pouvez très bien, également, faire un plan sur plusieurs pages. Gardez d’ailleurs à l’esprit que Google déconseille d’avoir plus de 100 liens dans une page et que les règles d’accessibilité préconisent 40 liens maximum.

Au contraire, pour le plan d’un site ayant peu de pages, vous pouvez vous permettre un plus grand niveau de détails. Vous pouvez même aller jusqu’à une description succincte de la page derrière chaque lien, pour mieux aiguiller l’internaute (et glisser quelques mot-clés !)

Pour que votre plan soit vraiment utile à l’internaute, pensez à bien l’organiser. Hiérarchisez les rubriques, les pages.

Les marges, les couleurs peuvent vous aider à créer des zones. N’oubliez pas que si votre plan est agréable à consulter, cela pourrait insciter l’internaute à le regarder dans le détail et, peut-être, à voir des pages qu’il n’aurait pas pensé à chercher autrement.

Code

Un plan, ce n’est rien d’autre que la liste des pages du site. Il faut donc utiliser les balises <ul> <li> (dans certains cas <ol> <li>). Vous aurez certainement à imbriquer ces listes.

La syntaxe est la suivante :

Pour que votre référencement soit vraiment optimisé, n’oubliez pas d’utiliser l’attribut title sur vos liens.

La page 404

Votre site devrait contenir une page 404 personnalisée. Si un internaute arrive dessus, c’est soit qu’il y a une erreur dans l’URL qu’il a tapée.

Soit il identifie et corrige son erreur immédiatement, soit la page n’existe plus ou tout autre situation. Il faut alors aider votre visiteur et quoi de mieux que le plan du site ?!

Il est donc utile de prévoir, si on le peut, le plan du site dans un include qui serait appelé depuis la page plan du site et depuis la page 404.

http://www.service-public.fr/aide/plan.html

Pour ce site aux nombreuses pages, en plus des rubriques déjà présentes, le plan a été découpé en trois espaces thématiques.

http://pourpre.com/pied/plan.php

Pour ce site très riche autour d’un thème unique, la courte description a côté des rubriques et des sous-rubrique apporte une aide en plus.

En Février 2005, la Loi sur l’Accessibilité Numérique laissait aux quelques 5000 sites publics français jusqu’à 3 ans pour être accessible à tous. Plusieurs sites privés, pourtant non concernés par cette obligation, ont d’ores et déjà fait le choix de l’accessibilité. On peut penser qu’ils ont anticipé une généralisation de la loi, aux sites commerciaux, par exemple, et se sont alignés. Mais le premier impact pour eux, en plus de s’ouvrir à une part supplémentaire de la population, est, bien sûr, l’image de marque, l’impression donnée qui va de l’ouverture d’esprit au respect du visiteur.

Et le nombre de visiteurs à bénéficier de ces efforts est bien plus important qu’on ne se l’imagine. Il y a d’abord, bien sûr, les non-voyants, les handicapés moteurs. Mais les obstacles que l’accessibilité abat concernent aussi les personnes âgées, malvoyantes, les handicapés mentaux… En tout, 30% de la population française déclare rencontrer des difficultés, plus ou moins importante*. 30% de la population qui bénéficient directement des mesures d’accessibilité. Car indirectement, nous en profitons tous. En veillant à des impératifs d’accessibilité, on met à la disposition de chaque visiteur des infos pratiques en plus, on veille à avoir une navigation fluide, on laisse beaucoup de liberté à chacun quand à l’affichage.

Non seulement le site y a gagné en ouverture vers ses visiteurs, mais il y gagne aussi en qualité de code et toutes ses considérations optimisent son référencement. Il ne s’agit pas de miracle ou de techniques pointues propres aux référenceurs, mais de détails auxquels les moteurs de recherche seront sensibles : des titres de liens renseignés, des balises sommary et caption détaillées, l’attribut longdesc utilisé à bon escient… sont autant d’informations données aux moteurs de recherche, cernant ainsi mieux votre page et votre site.

Le développement d’un site en considérant les points d’accessibilité vous permet donc d’obtenir un code plus propre, plus efficace, ergonomique et ouvert à tous. Des articles à venir vous détaillerons, de manière pratique, comment faire. Pour les plus curieux, voici quelques liens utiles :

Accessibilité : pourquoi et comment l’améliorer (Open-S)

Loi sur l’Accessibilité Numérique (Assemblée Nationale)

Directives pour l’accessibilité aux contenus Web

* : D’après une enquête de l’INSEE (Institut National de Statistiques et des Etudes Economiques) menées en 1999.

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir.

Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne.

N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être.

Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc.

Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page.
Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter.

Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui.

Découpez les types d’informations en zones, grâce aux balises et

L’ergonomie s’intéresse à la facilité d’utilisation. En ergonomie informatique, nous nous attachons particulièrement à l’usage des produits interactifs. Quel que soit le média, qu’il s’agisse de web, de logiciel, de PDA ou de téléphone mobile, nos missions visent à mesurer et à améliorer l’utilisabilité du produit. Ce concept, traduit de l’anglais usability , résume la capacité du produit à permettre à l’utilisateur de réaliser efficacement la tâche pour laquelle il a été conçu.

L’analyse de l’ergonomie de navigation sur internet ne diffère pas de celle d’un autre produit interactif : Un site doit permettre au visiteur de trouver rapidement l’information qu’il cherche, de la même manière que le produit doit permettre à l’utilisateur de réaliser facilement la tâche.

A partir de là, la tâche de l’ergonome est simple : Il suffit d’identifier quels sont les freins, les difficultés qui vont empêcher l’utilisateur d’atteindre rapidement l’information qu’il cherche. C’est en analysant la cause de ces difficultés, qu’il identifie les manières d’y remédier et permet ainsi d’améliorer l’utilisabilité du site.

Pouvez-vous nous donner un exemple concret de « frein » que l’on rencontre sur les sites ?

Un frein c’est un problème qui ralentit l’utilisateur dans l’exécution de sa tâche. Par exemple, il ne comprend pas le libellé d’un lien et arrive sur une page qui ne correspond pas à ce qu’il cherche. Il doit revenir en arrière. Il perd du temps et de l’efficacité.

Il arrive aussi que l’utilisateur ne trouve pas le lien qu’il cherche, car il n’est pas suffisamment mis en évidence. Par exemple, sur un site de e-commerce, j’ai observé que certains utilisateurs cherchaient le lien qui permettait d’afficher le contenu du panier.

Un problème que l’on rencontre fréquemment dans les boutiques en ligne est celui de la description du produit qui ne correspond pas aux informations que recherche l’internaute. Il lui manque des renseignements qui lui permettraient de choisir. Sur un site, je me souviens par exemple, que les utilisateurs cherchaient le prix car celui-ci n’était pas suffisamment mis en évidence.

Parfois le designer pêche par excès. Des éléments visuels ou textuels masquent l’information importante aux yeux de l’utilisateur. Il cherche, filtre les données affichées pour isoler ce qui l’intéresse. Bref, il perd du temps inutilement.
Le test utilisateur permet d’identifier ce type de problèmes. Ces difficultés freinent l’utilisateur dans son cheminement sur le site et contribuent à une mauvaise expérience. Au contraire, lorsque ces freins ont été éliminés, la navigation sur le site est fluide. Elle semble naturelle à l’utilisateur qui est plus enclin à revenir.

Ces principes, comment les a-t-on mis en place ? Comment en vérifie-t-on la fiabilité, l’efficacité ?

En fait, on ne parle pas de principes mais de « critères ergonomiques ». Il s’agit d’un ensemble de critères qui vont permettre d’évaluer l’utilisabilité d’un produit interactif. Un chercheur français, Ch. Bastien de l’INRIA, a élaboré une liste de critères qui fait référence [[Scapin, D. L., & Bastien, J. M. C. (1997). Ergonomic criteria for evaluating the ergonomic quality of interactive systems. Behaviour & Information Technology, 16, 220-23]]. Ces critères s’appuient sur le fonctionnement psycho-cognitif de l’individu. Ils sont initialement issus de l’expérience des chercheurs du domaine. Ch. Bastien a ensuite mené plusieurs expérimentations qui ont permis de les valider.

A dire vrai, les critères présentent l’intérêt de permettre à un ergonome expérimenté d’identifier les problèmes d’utilisabilité potentiels et donc de lever des difficultés d’utilisation par une simple analyse du logiciel. Ils nous évitent la mise en œuvre, parfois complexe, d’un test avec les utilisateurs finaux.

Toutefois, peu importe le nom qu’on leur donne et les principes auxquels ils se réfèrent, les véritables problèmes d’ergonomie sont ceux qui rendent le logiciel difficile à utiliser, ceux qui freinent l’utilisateur dans sa tâche. C’est en ce sens que le test utilisateur reste à mon avis, la meilleure manière d’évaluer l’ergonomie d’un produit interactif, car il permet d’observer les véritables problèmes que rencontre l’utilisateur lorsqu’il se sert du logiciel.

Qu’est-ce qu’un test utilisateur ? Comment cela est-il organisé et quel genre de résultats recherche-t-on ?

Le test utilisateur consiste à observer en situation quasi-réelle l’utilisation d’un site. On donne à l’internaute une « consigne », c’est à dire qu’il doit réaliser une tâche précise. Ensuite, il se sert du site comme il le ferait chez lui, seul, sans aide extérieure. Nous observons son comportement et relevons les difficultés qu’il rencontre (pour une description détaillée de la méthode, voir Conseil en ergonomie informatique : Test d’utilisabilité).

L’organisation d’un test se fait en trois étapes. Dans un premier temps, nous identifions avec le concepteur ce qu’il souhaite évaluer par le biais du test : certaines fonctionnalités du site, le ressenti de l’utilisateur sur certains points, etc. Dans un second temps, nous recrutons les utilisateurs en sélectionnant des internautes correspondant au profil visé par le site. Puis une session de test est menée avec chaque utilisateur.

A l’issue des tests, nous présentons à l’équipe projet une synthèse des résultats, illustrée au moyen de captures d’écran, enchaînements fonctionnels d’écrans (cinématique) et verbatims d’utilisateurs. Les difficultés rencontrées par les internautes sont décrites et des recommandations sont proposées afin d’y remédier. Généralement, lors de la restitution, les solutions préconisées sont analysées, et parfois revues, afin de prendre en compte les contraintes de développement.

En quoi l’ergonomie telle qu’elle est présente dans notre quotidien (voiture, appareils, etc.) peut-elle se retrouver dans la conception d’un site Internet ?

Les critères ergonomiques qui vont faciliter notre utilisation des objets de tous les jours : guidage, homogénéité, concision , etc. vont contribuer de la même manière à l’ergonomie des sites web.

La navigation Internet est probablement le domaine où les règles d’ergonomie de la vie de tous les jours s’appliquent le mieux. En effet, ce sont les mêmes principes ergonomiques qui vont s’appliquer qu’il s’agisse de permettre à un individu de se repérer dans une ville, dans les couloirs d’un immeuble ou sur un site web. Pour qu’il puisse se repérer, l’utilisateur doit savoir se situer par rapport au reste et comprendre par où il est passé.

La difficulté sur Internet est que l’utilisateur arrive directement sur la page qu’il cherche, à plus forte raison lorsqu’il se sert d’un moteur de recherche, sans passer par les pages intermédiaires. Contrairement au monde réel, il ne découvre pas progressivement le site dans lequel il se déplace.

Quelle est la part de l’ergonome dans la conception d’un site Internet ? N’est-il pas amené à travailler étroitement avec d’autres intervenants ?

Au démarrage, nous intervenons généralement dans la conception d’un site en collaboration avec l’équipe marketing pour définir l’architecture de communication du site. En interviewant les futurs utilisateurs du site, nous identifions leurs attentes et leurs besoins par rapport aux services qui seront mis en œuvre sur le site. Il nous arrive également de mener une analyse ergonomique des sites concurrents afin de construire le design du nouveau site en évitant les erreurs des concurrents.

Nous travaillons avec le web designer à la fois sur la charte graphique et sur l’architecture du contenu du site. Sur ce dernier point, il nous arrive de mener des séances de « tri par carte » pour construire la structure du site du point de vue des utilisateurs (voir Conseils en ergonomie informatique : Tri par carte , pour une description de la méthode).

Finalement, nous menons une série de tests d’utilisabilité avec les utilisateurs du cœur de cible afin d’identifier les problèmes d’utilisabilité avant de mettre le site en production.

Comment devient-on ergonome informatique ? Existe-t-il des formations ?

Il existe assez peu de formation pour devenir ergonome informatique. Les deux formations les plus connues à Paris sont le DESS « Ergonomie et conception des systèmes de production » de Paris 1 Sorbonne et le DESS « Ergonomie » de Paris 5 (voir aussi CNAM – DEA d’Ergonomie pour une liste de l’ensemble des formations en ergonomie). Il s’agit généralement de formations complémentaires à un cursus d’informatique ou un cursus de psychologie.

A mes yeux, ces formations manquent encore aujourd’hui d’ouverture. En effet, le métier d’ergonome informatique est typiquement un « métier d’interface ». Il est souvent au cœur des débats lors de la conception. C’est pourquoi, il nécessite non seulement, une meilleure compréhension des différents métiers intervenant dans la réalisation d’un produit interactif, mais aussi une sensibilité forte au coté subjectif de l’interaction.

De mon point de vue, une véritable formation d’ergonome informatique devrait également enseigner le marketing et les techniques de communication, mais aussi et surtout la création artistique et l’histoire de l’art tout comme le font les écoles de design. En effet, n’est-ce pas la finalité du métier d’ergonome que d’accompagner le designer dans la conception du produit ?

Merci beaucoup, Jean-François Nogier, d’avoir répondu à mes questions et de nous avoir fait découvrir, un peu plus, le métier d’ergonome en informatique.