I. Avant-propos▲
Il existe différents types de sites Internet : site de e-commerce, intranet de société, site personnel.
Tous ont pour objectif, pour des raisons différentes, d'accroître le nombre de visites, et de fidéliser un grand nombre d'internautes. Ce document donne une vue d'ensemble sur les bonnes pratiques à mettre en œuvre en termes d'ergonomie sur une application Internet. Le terme « ergonomie » englobe les notions de « design » et d'« usabilité ». La satisfaction des utilisateurs est une des notions fondamentales à prendre en compte pour la bonne réalisation d'un site web.
« La conception d'un site utile et performant demande non seulement que les contenus et services répondent aux besoins des utilisateurs, mais surtout que l'ergonomie et la navigation en soient pensées afin de les rendre facilement accessibles aux utilisateurs finals. ».
Les éléments énumérés dans ce document ne constituent pas une liste exhaustive, mais un aperçu des éléments à prendre en compte.
II. Généralités sur l'ergonomie▲
II-A. Axes de travail▲
Un site web a pour objectif de fidéliser ses utilisateurs présents et à venir. Il existe trois axes généraux permettant la réalisation de cet objectif : un contenu cohérent en corrélation avec les attentes de l'utilisateur ; une architecture et une navigation performantes et facilement compréhensibles ; un environnement graphique agréable et structuré.
les cinq facteurs de succès d'un site web selon Jakob Nielsen(1) :
- la facilité d'apprentissage et de compréhension. Tout utilisateur qui n'a jamais vu le site doit en comprendre rapidement le fonctionnement ;
- l'efficacité d'utilisation. L'utilisateur doit trouver rapidement l'information qu'il cherche ou réussir à acheter rapidement le produit voulu ;
- la facilité de mémorisation. Les utilisateurs, même après une période de non-utilisation, doivent pouvoir utiliser le site sans avoir à réapprendre son fonctionnement ;
- l'utilisation sans erreur. L'utilisateur doit atteindre l'objectif sans effectuer de « fausses manœuvres » ;
- la satisfaction. C'est l'appréciation subjective du site par l'utilisateur, conditionnée par les aspects esthétiques du site, ainsi que par les quatre attributs précédents.
Un moyen efficace de vérifier si la mise en œuvre de ces trois critères est réussie est : le test utilisateur. Au travers de ces tests, l'utilisateur fera remonter des informations précises sur les défauts de navigation, de cohérence, et de structure du site, autrement dit d'ergonomie. La précision de ces informations optimisera les délais d'amélioration des points noirs de l'environnement.
II-B. L'utilisateur▲
La lecture d'une page par un utilisateur représente une certaine charge de travail : appréhension des informations, leur compréhension, décisions à prendre, etc.
Si cette charge devient trop importante, elle risque de le décourager et de diminuer fortement son intérêt pour le site qu'il est en train de visiter.
L'internaute qui voit une page pour la première fois commence par la scanner. C'est-à-dire que son œil parcourt rapidement l'ensemble de l'écran afin d'en avoir un aperçu global. C'est à ce moment crucial que le lecteur va se faire une idée du contenu qu'il a sous les yeux.
L'être humain possède essentiellement deux types de mémoire. Une à long terme (mémoire de sa vie) et une autre à court terme (ou mémoire de travail).
Lors de la première lecture (sans répétition), c'est la mémoire de travail qui est sollicitée. Elle peut, selon les personnes, stocker environ sept éléments (+/- 2).
Quelques règles basiques régissent la perception visuelle d'un internaute :
- de manière générale, la vision regroupe instinctivement les objets vus selon leur similitude graphique ;
- leur proximité relative ;
- et leur régularité spatiale ;
- pour leur donner la même valeur sémantique.
Tous ces éléments sont à prendre en compte lors de la conception ergonomique d'un site Internet.
III. Logique de parcours visuel▲
III-A. Tests expérimentaux▲
Un test expérimental a été effectué sur un panel de trente-trois utilisateurs.
Il consistait à montrer à trois reprises durant quelques secondes une page à des utilisateurs (lambda) qui n'avaient aucune information sur le contenu de la page qu'ils allaient voir.
Après chaque visualisation, ils devaient, selon certains critères, décrire ce qu'il avait vu et retenu.
Globalement les tests ont mis en évidence les points suivants :
- la plupart des internautes ne lisent pas à l'écran, mais scannent les pages ;
- ils regardent en premier le centre de l'écran, puis latéralement à droite ou à gauche.
Ces éléments sont à prendre en compte dans l'ergonomie générale du site. On optimisera donc les pages en permettant aux visiteurs d'en appréhender le contenu sans avoir à lire.
III-B. Notion d'identité du site Internet▲
Il faut donner une identité au site. Cela permet à l'internaute d'identifier rapidement l'entité qui se trouve derrière le site en cours de consultation. Cette identité doit être reconnue rapidement par l'intermédiaire d'éléments clefs.
Voici une liste (non exhaustive) de ces éléments :
- logo ;
- le graphisme qui fait écho à la charte graphique de l'entreprise (couleurs, visuels ?) ;
- standards du secteur d'activité ;
- se limiter à deux ou trois couleurs avec une seule couleur dominante ;
- limiter les photos et autres illustrations à ce qui est « utile » ;
- préférer un fond de page clair ;
- illustrer la page d'accueil d'exemples, qui permettront aux visiteurs d'identifier rapidement qu'ils sont sur le bon site.
Il faut impérativement garder une cohérence, en termes de structure de page et de graphisme sur l'ensemble du site.
III-C. Éléments de fidélisation : la page d'accueil▲
La fidélisation des utilisateurs contribue à l'évaluation positive d'un site Internet. Un internaute, venant consulter un site, est à la recherche d'une information précise. Son objectif (dans la majeure partie des cas) : obtenir le maximum d'informations en un minimum de temps. Si l'utilisateur atteint son objectif, il y a de grandes chances pour que l'utilisateur garde une bonne image et revienne sur le site : le voilà fidélisé !
La page d'accueil est le premier contact entre l'utilisateur et le site web. C'est pour cette raison qu'elle doit fournir des informations permettant de donner une réponse (très) rapide à certaines questions élémentaires : quelle société ?, que me propose ce site ?, où puis je chercher l'information sur ce site ?, etc.
Donc la page d'accueil doit permettre de reconnaître en un minimum de temps l'identité de la société (voir §II.B) ; d'identifier, tout aussi rapidement, ce que propose le site au travers d'un contenu clair et hiérarchisé. L'utilisateur n'a pas forcément beaucoup de temps pour chercher l'information, il faut donc mettre en avant les éléments clefs répondant à ses attentes et à ses besoins.
L'obtention d'une information passe, inévitablement, par un certain nombre de clics de souris. Ceux-ci doivent, logiquement, être réduits au minimum.
L'utilisateur ne doit pas « cliquer pour voir », les libellés (des boutons, des liens, etc..) doivent être suffisamment explicites en ce qui concerne le contenu de la page suivante.
Il y a aussi un phénomène d'apprentissage de la part de l'utilisateur qui a des points de repère vis-à-vis d'Internet. En respectant certains standards (implicites) visibles sur Internet, l'utilisateur retrouvera un environnement familier.
Par exemple, l'utilisation de pictogrammes. Le pictogramme d'impression d'une page doit être représenté par une imprimante (ceci est un exemple !).
L'utilisation d'un moteur de recherche permet d'accéder plus rapidement à l'information (la notion de moteur de recherche sera reprise dans le paragraphe suivant).
Un peu de technique
L'affichage de la page d'accueil ne doit pas excéder un certain temps d'affichage. La limite haute, en termes de délai d'affichage, ne doit pas dépasser 10 secondes. Car les connexions bas débit ont des temps de latence plus importants que les lignes ADSL. Si l'affichage de la page excède les 20 secondes, le visiteur n'aura pas la patience d'attendre et partira ailleurs. En général, cela concerne sept internautes sur dix.
IV. La navigation▲
Par le terme navigation, il faut comprendre l'enchaînement des pages au fil des clics de l'utilisateur. Il n'existe pas encore de GPS pour les sites Internet, c'est pour cette raison que la navigation sur un site ne doit pas être prise à la légère. Il ne faut pas qu'après une dizaine de clics l'utilisateur ne sache plus où il se trouve et que, par désespoir de ne plus retrouver « sa route », il quitte définitivement le site Internet.
Par éviter de perdre l'internaute, il faut se mettre à sa place et se poser les trois questions suivantes :
- Où suis-je ?
- Où suis-je déjà allé ?
- Où puis-je aller ?
La navigation en étoile est à proscrire, il vaut mieux utiliser la navigation circulaire. Elle ne donne pas l'impression à l'utilisateur de revenir en arrière en repassant systématiquement par la page d'accueil.
IV-A. Où suis-je ?▲
À tout moment l'usager du site doit pouvoir identifier l'endroit où il se trouve.
D'une manière globale, par l'intermédiaire d'un logo qui doit être général au site. Ainsi que par un titre indiquant le nom de la page courante, cet aspect peut être renforcé par la mise en évidence du lien dans le menu correspondant à la page courante.
Il faut mettre en place un module de navigation, communément appelé « fil d'Ariane ».
Accueil > PageA > PageB > PageCChaque item de page sera représenté par un lien hypertexte, sauf l'item représentant la page courante. Cela permettra à l'utilisateur d'identifier facilement la page courante et de pouvoir accéder directement aux pages précédentes.
IV-B. Où suis déjà allé ?▲
Au fur et à mesure de sa navigation sur le site, l'utilisateur ne mémorise pas forcément l'ensemble des pages qu'il a déjà visitées. Dans un souci d'optimisation de sa recherche d'information, il est préférable de mettre en évidence les endroits du site qu'il a déjà explorés. Cette distinction peut être réalisée par un changement de couleur des liens qui ont déjà été sollicités. De cette manière, l'internaute ne reviendra pas deux fois de suite sur une page de manière hasardeuse.
IV-C. Où puis-je aller ?▲
La réponse à cette question pourrait être un plan global du site. Effectivement c'est une solution, encore que la consultation de ce plan implique la mémorisation du chemin à suivre pour atteindre son objectif (le plan ne pouvant pas être en permanence à l'écran).
En utilisant un menu, stable et commun à l'ensemble du site, on a la structure générale du site en permanence sous les yeux. En complément, on peut utiliser le principe d'un menu contextuel rattaché à chaque grande section. Ce sous-menu détaillerait chaque rubrique.
Il est préférable de disposer le menu sur la largeur de la page plutôt que dans sa hauteur. Cette disposition permet de structurer la page.
La notion de profondeur d'un site représente le nombre de niveaux et de sous niveaux dans les pages. Afin d'éviter de perdre l'internaute dans « l'abîme des profondeurs », il est fortement recommandé de limiter le nombre d'occurrences à trois. Cette limite offre plus de clarté sur les possibilités de navigation.
Le scrolling : action de se déplacer une même page qui, de par ces dimensions, dépasserait la taille de l'écran. Cette notion peut être verticale ou horizontale.
Le scrolling vertical est toléré sur une page web, à l'inverse du scrolling horizontal.
La limite d'un déplacement vertical se situe au défilement de trois pages. Dans le cas d'un défilement vertical, il est impératif de rappeler au bas de la page les éléments permettant à l'internaute de se situer géographiquement sur le site (fil d'Ariane, logo, etc.).
L'élément canonique de la navigation est le lien hypertexte. Il permet de faire le « lien » entre deux pages consultables sur un site.
Un lien doit respecter une structure cohérente et commune afin de l'identifier sans effort pendant la phase de « scannage » de la page. Leurs libellés, interprétés dans une seconde temps, doivent être suffisamment explicite sur le contenu de la page suivante (voir §II.C). Plus généralement, le libellé doit répondre explicitement à la question : Où puis-je aller ?
En dernier recours, si les informations manquent sur les possibilités de déplacement depuis la page courante, l'utilisateur doit pouvoir cliquer sur le logo du site afin de revenir à la page d'accueil.
IV-D. Le moteur de recherche▲
Cet outil, de plus en plus présent sur Internet, permet un accès rapide à l'information recherchée. Le fonctionnement d'un moteur de recherche est, maintenant, devenu intuitif et classique.
La façon d'accéder à l'outil peut avoir un impact sur son taux d'utilisation. Souvent le moteur de recherche est accessible par l'intermédiaire d'un lien hypertexte ; En cliquant sur celui-ci, on accède à une page contenant le moteur. Ce lien intermédiaire peut rendre invisible cet outil au regard de l'utilisateur.
On préférera placer directement un champ de saisie accompagné d'un bouton de validation directement dans la page d'accueil. En outre cela permet d'économiser un clic de souris et rend plus explicite la présence du moteur.
V. Réalisation de pages attractives▲
Il a été mis en évidence que la lecture sur un écran se fait 25 % moins rapidement que sur un support papier. Pour compenser ce problème on se doit proposer des pages plus simples à appréhender.
Une page attractive est une page que l'on peut lire simplement, sans plisser les yeux, n'y se tenir la tête. Certaines règles d'ergonomie, si elles sont bien respectées, permettent d'obtenir ce type de page.
L'idée générale est d'obtenir des pages aérées (pas de textes compacts et denses). Les pages contenant, un ou plusieurs, article(s) doivent commencer par un « chapeau ».
Il doit présenter l'idée générale du contenu qu'il englobe par l'intermédiaire de phrases courtes.
Si l'article est long et scindé en plusieurs paragraphes, on doit retrouver à l'issue de l'entête de l'article une liste des titres de paragraphes sous forme de liens hypertextes permettant un accès direct au contenu ; chaque lien pourra être agrémenté d'une description très brève.
Il est important aussi de regrouper les fonctionnalités, proposées, par similitude.
La structure de la page fait partie de l'attractivité d'un page. Les espaces libres peuvent être utilisés pour organiser le contenu.
VI. Conclusion▲
Lorsque l'on se penche sur les problèmes d'ergonomie, on vise à faire de ce site un outil de support efficace et agréable à l'utilisateur.
Lors de la conception et la réalisation, cet aspect est souvent mis au second plan. C'est une erreur !!
La mise en application des règles d'ergonomie permet de faciliter l'interactivité entre le site Internet et l'utilisateur. Celui-ci navigue sur le site de manière plus naturelle. L'issue de sa visite sera positive et le poussera à le « bookmarquer » pour revenir dans un futur proche.