Ergonomie web

L’ergonomie web est un mot magique et effrayant. Plutôt que de règles on parlera ici de recommandations. Trop de pression sur l’ergonomie crée des sites mornes, trop peu de pression sur cette notion par contre produit souvent des sites obscurs.

1/4 | Suivant

L’ergonomie est une notion qui concerne l’environnement de travail. Y sont analysés psychologie, physiologie et médecine. C’est donc un domaine très vaste, le web est une petite partie qui concerne les interfaces et l’usage de l’oeil et de la main.

Le développement exponentiel du web a fait naitre nombre de sociétés qui proposent des services de test de sites et d’optimisation. Les sites commerciaux génèrent aujourd’hui un trafic énorme et des revenus conséquents qui justifient une attention poussée àl’expérience utilisateur. Dans les services proposés, on trouve des batteries de tests qui vont du temps de chargement de la page àla circulation du regard sur l’écran lors de séquences d’achat.

L’ergonomie àl’échelle du graphiste indépendant

Sans avoir ces moyens, on peut aborder plusieurs questions qui sont àla charge des graphistes, et touchent aussi au graphisme papier. Le livre est un médium qui a une histoire plus longue et donc un usage bien balisé (sens de lecture, hiérarchie de l’information, taille minimale des caractères et largeurs de colonnes, ...). Le web possède de nombreux paramètres plus contraignants, dont par exemple la multiplicité des supports (portables, vieux écrans, nouveaux supports comme l’iPad, etc.) mais aussi des contraintes comme l’accès àl’information pour les mal-voyants ou les aveugles, par exemple.

Il est a noter enfin que l’ergonomie, même dans ses aspects les plus élémentaires (clarté et structuration), entre souvent en conflit avec les stratégies commerciales des promoteurs de sites web : il y a d’un côté ce que désire voir et faire le visiteur du site, et ce que ses promoteurs entendent lui faire voir et faire. Entre les deux, un abime fait de pages surchargées de publicités, conseils et suggestions d’un côté, de textes en petits caractères et en ton sur ton de l’autre.

De manière générale, on distinguera l’information que le visiteur cherche et celle que l’on veut lui fournir. Si on peut attendre, chercher en passant de page en page, lire en petits caractères des informations qui nous intéressent, on est peu disposé àdonner de l’énergie pour une information qui ne nous intéresse pas, et qui nous est proposée ou imposée. C’est pour cette raison que l’on peut parfois trouver une disproportion énorme entre le contenu "réel" d’un site et les propositions commerciales qui y sont ajoutées sauvagement.
Les sociétés d’audit axent notamment leur communication sur le fait qu’elle vont augmenter le taux de transformation, c’est àdire le nombre de visiteur qui vont devenir client. L’idée que le visiteur d’un site est nécessairement un client guide donc "l’optimisation", dans le but non pas de vous délivrer une information, mais en tentant de capturer l’attention vers le "tunnel d’achat", autre terme de marketing web.


Sur ce site, le bouton le plus gros est un lien vers une publicité qui n’a aucun rapport avec le contenu demandé.

On pourrait croire que la raison de cette désorganisation de l’espace d’une page web est qu’on a affaire àun site aux limites de la légalité (des sous-titres pour des fichiers vidéo probablement téléchargés) mais en fait sur un site comme Slate, on peut constater que les contenus non sollicités occupent la majeure partie de l’espace de la page. Parler d’ergonomie web et d’expérience utilisateur n’est pas le bon axe pour parler de la structure de cette page.

Public du site

Une des premières réflexions àavoir lorsqu’on aborde la construction d’un site est la question de son public visé. Chaque site vise un ou plusieurs utilisateurs. Outre son age et le type d’ordinateur, de navigateur et de taille d’écran, il est alors important de se poser la question des attentes de l’utilisateur : que cherche-t-il prioritairement, et comment faciliter cette recherche ?
Quelles sont ses habitudes, comportements acquis en surfant sur d’autres sites. Enfin, quel est son niveau de connaissances ?

En fonction des réponses àces questions, différentes stratégies peuvent être utilisées. Par exemple la redondance de l’information, qui n’est pas très élégante, et en contradiction par exemple avec la notion de sobriété, mais est parfois recommandée si on tente de mettre àdisposition des contenus pour un utilisateur inexpérimenté.

Une partie de ces connaissances peut être constituée intuitivement, mais d’autres requièrent des statistiques et d’autres enfin, ne peuvent être obtenues qu’avec des tests en situation réelle avec un échantillonnage du public cible.

Quelques critères d’ergonomie

La lisibilité
 La hiérarchie de l’information doit être relayée par les attributs du texte : taille, graisse, couleur des éléments sont déterminants pour pouvoir diriger l’oeil vers les contenus principaux
 la taille et l’interlignage du texte doit permettre une lecture agréable des contenus principaux. La lecture sur écran est souvent considérée comme moins rapide que sur papier (un écart qui tend àse réduire avec les écrans plats, moins agressifs pour les yeux, et la résolution en constante augmentation, auxquels s’ajoute le fait que l’ordinateur est "entré dans les moeurs").
 la structuration de l’information par titre, sous-titres, paragraphes etc. doit se marquer visuellement. Cette notion vaut évidemment pour la mise en page de texte sur support papier.

La sobriété
Utiliser peu de couleurs, peu de fontes différentes, peu de visuels décoratifs, permet une meilleure structuration des contenus, une lecture plus agréable.

Usabilité
 L’homogéneité de la structure : la mise en page comporte des éléments récurrents, placés aux mêmes endroits. De plus, un langage graphique commun (couleur des liens, idéogrammes).
 Usage des conventions : les éléments de navigations gagnent a être précis, courts et clairs, et évoquer sémantiquement les contenus.
 Repérage : le visiteur doit pouvoir identifier par des signes clairs l’endroit où il se trouve dans le site. Ceci est particulièrement important si le site comporte une navigation transversale (la possibilité de passer d’une section àune autre).
 Facilité de navigation : le retour àla page principale et aux principales sections doit être constamment possible grâce au menu, et au fil d’Ariane par exemple.
 Il existe la fameuse "règles des trois clics", un mythe de l’ergonomie web, qui voudrait que toute information doit se trouver àtrois clics maximum de la homepage d’un site. Cette règle est une légende urbaine. Il faut en retenir qu’il est important de réduire le nombre d’étapes avant l’accès àun contenu "réel" (qui ne soit pas juste une liste de contenus, par exemple).
De nouveau, tout dépend si votre contenu est "désiré" par votre public : je n’ai pas de problème àcliquer une fois de plus pour avoir une information technique précise sur un produit que je veux acheter, alors que je supporte mal de ne pas en voir tout de suite une image.

Rapidité
Cette notion est plus technnique, elle influe sur le choix d’un hébergeur ou sur le type de CMS employé par exemple.
 Le temps de chargement doit être optimisé. Ceci pour éviter au visiteur de patienter face àune page blanche ou partiellement chargée.
 Les images doivent se charger rapidement, ce qui signifie qu’elles doivent être compressées et utilisées àleur taille 1/1. Charger de grandes images affichées en petit est une erreur classique.
Le chargement en javascript de contenus est une réponse contemporaine àla rapidité du chargement : on affiche l’information de base, puis on fait apparaitre bloc par bloc des informations secondaires. L’effet est purement psychologique. Ainsi, la barre de téléchargement a été inventée pour éviter que l’utilisateur perde patience et ne quitte le site ou l’application.

Interactivité
Le passage d’un contenu àun autre doit être facile. C’est la base du web (l’hypertexte) mais on trouve parfois des sites comportant juste quelques pages interminables àfaire défiler, ou au contraire des sites "surdécoupés" avec des pages innombrables contenant peu de choses. Un découpage adéquat de l’information, sa répartition via un menu clair, donne une vision claire du site pour le visiteur.

Adaptabilité
Caractérise la possibilité pour le visiteur de personnaliser le site. Autrefois, il était parfois impossible pour le visiteur de changer la taille des polices via le navigateur. C’est aujourd’hui systématiquement possible (sauf si le site est une application flash par exemple). Aujourd’hui, de nombreux sites permettent une personnalisation de l’affichage via les cookies. Le web 2.0 adore tout ce qui donne au visiteur l’impression de personnaliser le site a ses besoins.

Adaptivité
L’adaptivité consiste àpersonnaliser le site automatiquement au visiteur, sans son intervention. La langue, la page d’où provient éventuellement le visiteur, sont des informations utiles en ce sens.

Accessibilité
L’accessibilité est une section très importante de l’ergonomie, puisqu’elle est obligatoire dans certains cas, notamment dans les commandes publiques. Il s’agit de conformer le site àcertains usages, comme typiquement des malvoyants.
 Le code doit suivre les recommandations du W3C, c’est àdire être balisé correctement et être au maximum sémantiquement correct.
 Le code doit indiquer les normes qu’il suit, de telle manière àpouvoir être interprété facilement par des différents logiciels.
 Les images doivent pouvoir être remplacées par un code alternatif sans nuire àla compréhension du site. L’attribut "alt" du tag img a été ajouté en ce sens.

<img src="uneimage.jpg" alt="Un homme triste devant une assiette vide un matin de Noël">

Ce point peut faire rire dans le cas de site de graphiste ou lorsqu’il concerne des contenus visuels, mais bon.
 Les couleurs de fond et de forme doivent offrir un contraste suffisant ou le site offrir la possibilité de visualiser les contenus avec des couleurs alternatives adaptées (aux daltoniens par exemple). Parfois le site offre la possibilité de changer la taille de typographie, mais le navigateur offre de manière plus uniforme cette possibilité.
 L’information doit pouvoir rester lisible si le site "perd" sa feuille de style (CSS). Un code html correctement formé et sémantique est généralement suffisant pour remplir cette condition.

Référencement
Le fait que les contenus soient indexables est devenu une notion d’ergonomie étendue. Les moteurs de recherche pèsent beaucoup dans la consultation, et changent les habitudes des visiteurs. La fameuse "règle des trois clics" par exemple, est souvent contournée par le fait que les utilisateurs trouvent des contenus par moteur de recherche et non pas en suivant les liens d’un site. Mais cela renforce les autres aspects de l’ergonomie : la structure du site doit être d’autant plus claire que l’on arrive sur votre site non pas par la page d’entrée mais par n’importe quelle page de celui-ci.

Forum

  • Plus : Ergonomie web par sebastien , 15 septembre 2011

    Pour de multiples conseils concernant l’utilisabilité et l’ergonomie web, je vous conseille de lire le blog de Testapic qui fourmille de bonnes pratiques, de recommandations et de conseils.