Bastien et al. (1998). L'ergonomie des sites web

Cet article donne un ensemble de conseils pour concevoir un site web ergonomique, qui attire l’œil et facilite la navigation. L’idée principale est de faciliter l’utilisation et de décharger l’utilisateur de toute réflexion sur l’utilisation et l’organisation du site.

Pour concevoir un site, il faut :
- identifier les objectifs du site (collaborer, vendre, échanger des informations, etc.)
- identifier les utilisateurs (par des questionnaires notamment, en s’intéressant à leur matériel informatique, leur métier, leurs habitudes d’utilisation et leurs préférences)
- décrire les tâches (comment arriver aux buts des utilisateurs, peut aussi se faire avec des questionnaires, focus group, une description de scénario (ce qui pourrait les amener à visiter le site, pourquoi et comment), analyse des autres sites)
- prototyper (pour créer les catégories, on peut utiliser la méthode du tri de carte (faire regrouper par des utilisateurs les thèmes du sites en catégories)
- évaluer le prototype (on peut utiliser des tests utilisateurs, par exemple, qui consistent à faire visiter le site à des utilisateurs potentiels en leur faisant réaliser des tâches, et on calcule le temps, le nombre de clics, d’erreurs, etc.)
- modifier le prototype
- développer, mettre en service, maintenir le site à jour (travail de l’informaticien)

Au niveau de cette conception, il faut toujours garder en tête les critères ergonomiques existants pour concevoir un site agréable et efficace. Les critères ergonomiques à respecter sont (parfois divisés en sous-critères) :

- Le guidage
L’incitation : Il faut faciliter la tâche de l’utilisateur en lui disant ce qu’il peut faire, lui dire où il faut qu’il fasse une action, etc. Il faut également que l’utilisateur sache toujours très facilement où il en est dans son exploration. Sur un site web, on utilisera donc des boutons qui donnent envie de cliquer, des titres (concis et significatifs) pour chaque page, qui soient les mêmes que les liens qui y mènent, avoir toujours un lien vers la page d’accueil et d’aide. Chaque lien doit être concis et significatif de son contenu, sans être trop complexe.
Groupement/distinction entre les items : il faut respecter les règles de la Gestalt, c’est à dire que des éléments communs doivent être proches (dans le format et la topologie), et ceux qui sont différents doivent avoir des éléments de topologie et du format les différenciant. Pour le site web, on évitera donc d’utiliser les cadres (frames) car 9 personnes sur 10 préfèrent un site sans cadres. Il faut donner une couleur différente aux liens par rapport au texte, aux liens visités par rapport aux non visités, différencier les icones activables ou non, etc. Le but est toujours de faciliter la tâche à l’utilisateur, et à rendre le site clair, sans aucun problème d’interprétation et sans aucun besoin de réflexion sur la forme.

Feedback immédiat : Il faut qu’à chaque action de l’utilisateur entraine une réponse de l’ordinateur. Le mieux est de faire un feedback dynamique, qui indique que l’ordinateur est en train de traiter l’action de l’utilisateur, mais il faut minimiser malgré tout ce temps de traitement (ne pas faire des pages trop lourdes par exemple). Si on ne peut pas minimiser le temps de traitement, il faut indiquer le temps que cela peut prendre (c’est valable aussi pour le temps de téléchargement d’items). Ainsi, on évite l’attente passive de l’utilisateur, et son ennui qui pourrait l’amener à quitter le site.

Lisibilité : Il faut faciliter la lecture, sans fatiguer l’utilisateur à nouveau, grâce aux éléments de luminance des caractères, contraste caractères/fond, dimension des lettres, espacement entre les mots, espacement entre les lignes, espacement entre les paragraphes, longueur des lignes, etc. Il faut noter que de toute façon, pour la lecture sur ordinateur, elle nécessite 25% de temps en plus que la lecture sur papier, il faut donc éviter de renvoyer une difficulté de lecture encore plus grande. On notera par exemple que l’italique est plus long à lire, TOUT COMME UN TEXTE EN MAJUSCULES, ou un texte d’une couleur trop proche du fond (tout en gardant en tête qu’il faut distinguer les liens dans le texte), pas de texte clignotant, les polices d’écritures anormales doivent être transformées en images pour la compatibilité, et il ne faut pas mettre trop de caractères par ligne (50 max)

- La charge de travail
Brièveté : au niveau perceptif et mnésique, il faut diminuer au maximum la quantité d’information. Pour cela, on essayera d’être concis (sur le nombre de mots, pour un lien par exemple, tout comme pour le nombre de liens d’un menu déroulant (pas plus que l’empan mnésique de 7)) et de donner accès à tous les objets en un minimum d’actions / de liens, il faut le moins de défilement possible, le moins de clics pour agrandir des images ou des textes, avoir toujours un lien vers la page d’accueil, et surtout faire que les informations importantes soient accessible en 2 ou 3 étapes maximum depuis la page d’accueil.
Densité informationnelle : Eliminer les liens superflus (8 maxi par page, 5 par menu déroulant), les informations superflues.

- Le contrôle explicite
Il faut prendre en compte les actions des utilisateurs, en gardant en tête l’idée du feedback comme quoi l’ordinateur doit réagir à l’action de l’utilisateur. Il faut également donner la possibilité à l’utilisateur de contrôler chaque étape (en rajoutant des boutons d’annulation, de confirmation, permettre d’allumer/éteindre un son avec un contrôleur, interrompre une animation, etc.)

- L’adaptabilité
Flexibilité : le site doit réagir en fonction du contexte, c’est à dire que chaque utilisateur a une stratégie de visite du site différente, et le site doit permettre plusieurs stratégies pour atteindre le but d’une visite. Il faut donc faire des pages différentes pour chaque information,
Prise en compte de l’expérience de l’utilisateur : pouvoir guider pas à pas les débutants et permettre aux plus confirmer d’aller plus vite (avec des champs de recherche, des raccourcis, etc.)

- La gestion des erreurs
Il faut prévoir de protéger le site des erreurs (éviter les erreurs 404, les liens morts, et quand il y en a, faire rediriger la page pour ne rien laisser en impasse), gérer le rapport d’erreur de sorte à le rendre compréhensible, sans critiquer l’utilisateur (ne pas renvoyer « erreur 404 » mais « la page semble ne pas exister sur nos serveur, merci de vérifier l’adresse url, etc. ») et permettre de corriger les erreurs (faire des programmes qui vérifient les formulaires en cours de remplissage, pour pouvoir renvoyer un feedback immédiat des erreurs, éviter de faire re-remplir le formulaire entier à chaque erreur).

- L’homogénéité/cohérence
Utiliser des feuilles de style CSS pour faire en sorte que toutes les pages du site soient construites sur le même modèle, afin de faciliter la compréhension du fait qu’on se trouve toujours sur le même site (couleur, disposition, icones similaires, etc.). Il faut aussi que les liens mènent bien à la page cible et non à une autre (valable aussi pour les recherches qui doivent être cohérentes avec l’entrée).

- La signifiance des codes
Il faut une adéquation entre le signifiant et le signifié, c’est à dire qu’une icône doit évoquer ce vers quoi elle pointe, et pas autre chose, cela aide d’ailleurs de la remettre sur la page cible. Il faut aussi bien réfléchir aux mots utilisés pour les liens, qu’ils soient précis, reflétant le contenu de la page cible, mais pas trop techniques, pour qu’ils parlent à l’utilisateur. Il faut aussi faire attention à avoir un URL facile.

- La compatibilité
Les utilisateurs sont très variés, et il faut penser à tout le monde, cela inclut les mal-voyants, les daltoniens, les étrangers qui ne parlent pas la langue, etc. Il est donc important de proposer des solutions pour tous les utilisateurs (page traduite, choix des couleurs, zoom sur des parties importantes, etc.)

On retrouve également des conseils sur les recherches. Il faut aider à trouver les mots clés, et cela peut se faire par des tests utilisateurs qui permettront d’adapter d’un côté les mots clés utilisés par le site. On peut également faire une recherche dynamique où les mots clés sont suggérés à l’utilisateur sur la base des recherches effectuées par les autres utilisateurs. Il faut également permettre de préciser les champs de recherche, car les utilisateurs savent souvent ce qu’ils recherchent et où ils peuvent le trouver. Préciser les champs de recherche permet de diminuer le temps d’attente passive, et à être plus concis dans les réponses (souvent, les utilisateurs limitent leurs recherches aux premiers liens proposés).

Pour évaluer l’ergonomie des sites web
Utiliser les tests utilisateurs (faire naviguer des utilisateurs et leur demander des actions précises en calculant le nombre de clics, le nombre d’erreurs, etc.). Les tests peuvent être très orientés ou libres, avec un pair (permet d’avoir plus de commentaires) ou avec seulement l’expérimentateur. On peut aussi regarder le comportement non verbal (grâce à un enregistrement vidéo) en plus des commentaires que l’on demande de faire.
Utiliser les questionnaires et entretiens pour déterminer la satisfaction des utilisateurs. La WAMMI a développé un questionnaire en 20 items qui permet d’évaluer l’attrait du site, le contrôle qu’il offre, l’efficacité, l’aide qu’il offre/son utilité et la facilité d’apprentissage.
Utiliser les guides (comme celui-ci) pour déterminer si les critères sont respectés. Des analyses automatiques peuvent être effectuées par des logiciels, qui ne sont néanmoins jamais complets. Les logiciels sont Bobby et Webmetrics Tool Suite. On peut utiliser également les log files qui donnent le temps passé et le nombre de pages visitées par chaque adresse IP.

Source : Bastien, J.M.C., Leulier, C., Scapin, D.L. (1998). L'ergonomie des sites web. In J.C. Le Moal, B. Hidoine (Eds.), Créer et maintenir un service web, Paris : ADBS, pp. 111-173.