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.

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.)

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.


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

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", 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 profuit 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 visteur de patienter face à une page blanche.
- Les images doivent se charger rapidement, ce qui signifie qu’elles doivent être compressées et utilisée à leur taille 1/1. 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.

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. 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).
- L’information doit pouvoir être accessible si le site "perd" sa feuille de style (CSS).

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.