Ergonomie site web

Vous avez certainement une idée personnelle de ce que recouvre l'ergonomie. Chacun en appréhende ses aspects qualitatifs par l'expérience, et l'on s'en forge une opinion comme d'une question de bon sens. Dans le détail pourtant c'est un sujet complexe qui mêle bon nombre de facteurs, la subjectivité, ainsi que des contraintes bien souvent contradictoires.

Lors de la phase de conseil et de conception, Ultra-fluide prend en compte, aux côtés des autres contraintes, les bonnes pratiques dictées par les spécialistes de l'ergonomie en matière d'interface web. Ces principes à retenir touchent aussi bien l'organisation des contenus, que la navigation, la mise en page et le design. En voici un rapide tour d'horizon.

Définition

L'ergonomie est une discipline d'étude visant à découvrir et à qualifier un ensemble de principes et de méthodes pour rendre une interface (généralement homme-machine) pratique et agréable.
Partant de cette définition nous pouvons avancer que :

les principes et méthodes sont susceptibles d'évoluer avec de nouveaux résultats d'études.
l'ergonomie n'est pas une science exacte puisqu'elle poursuit des objectifs subjectifs.
les principes et méthodes auront d'autant plus de valeur qu'on en cherche l'application "en moyenne" (la statistique permettant de rejoindre une certaine rigueur par l'élimination de subjectivités individuelles).
en dépit des difficultés, la discipline bénéficie d'une approche scientifique qui conduit avec certitude à des résultats mesurables bien supérieurs à ceux que l'on obtiendrait par la conception aléatoire d'une interface.

Mise en page

classement des zones de l'écran

Les études ont prouvé que l'oeil et l'attention de l'internaute ne se portaient pas de façon équivalente sur les différentes zones de l'écran, ce qui revient à ordonner ces zones en fonction de leur capacité à attirer et à marquer le visiteur : le centre en premier lieu, puis le haut gauche, le haut droit et enfin les cotés bas. Schématiquement :

proportions

Pour une page devant présenter un contenu dense, la surface dévolue à ce contenu ne doit pas dépasser 70%, 20% seront réservés au système de navigation et le reste affecté au design et à la respiration.

alignements

L'oeil parcourt l'écran de droite à gauche et de haut en bas en suivant globalement la diagonale haut gauche, bas droite. Il est donc recommandé d'utiliser cette diagonale si possible pour disposer dans l'ordre logique un enchaînement clef à présenter au visiteur.

Le parcours de l'oeil est également facilité par des alignements verticaux ou horizontaux. Cependant il n'est pas capable de parcourir des lignes trop étendues. Ainsi il n'est pas conseillé de présenter des textes sur la totalité de la largeur de l'écran. Si l'on souhaite vraiment utiliser cette largeur il est toujours possible de proposer le contenu en colonnes.
Certains alignements peuvent également être renforcés graphiquement (ligne ou autres conventions) pour faciliter le travail de l'oeil sur des distances importantes.

Présentation

simplicité

Il n'est jamais possible de plaire à tout le monde, mais en matière de design et de présentation mieux vaut rester simple et sobre, afin que le site soit acceptable par le plus grand nombre. Cela ne signifie pas qu'un site web ne puisse pas être créatif, au contraire. Cependant mieux vaut limiter le nombre de couleurs utilisées, les variations de "styles graphiques", et ne par surcharger les pages visuellement.

animations

Il faut être très prudent dans l'usage des animations. Une animation capte toujours l'attention (qu'elle soit perçue comme agréable ou non). Plusieurs animations sur une même page donneront souvent l'impression vague de se "contredire", et conduiront à une impression d'agitation qui donne envie d'aller se reposer ailleurs.

Il est également déconseillé de proposer une animation importante à côté d'un contenu textuel développé. En revanche rien ne s'oppose à une animation, pour la respiration ou la détente dans la visite d'un site, voire dans un but pédagogique lorsqu'elle ne nécessite pas d'autre contenu pour véhiculer le message.

typographie

La sobriété intervient également en la matière. Les effets utilisés, constitués à partir des caractéristiques de bases (souligné, italique, couleurs, tailles, polices, retraits, alignements, puces...) doivent être limités. Une surabondance signifie soit que l'on n'a pas réussi à établir des conventions claires sur le sens de chaque effet, soit qu'il y a trop de notions à présenter à l'internaute. Dans les deux cas celui-ci sera perdu et risque de se faire envahir par un sentiment de confusion, c'est à dire une absence de repère en terre inconnue.
Il est conseillé également de créer les effets par des combinaisons de plusieurs caractéristiques de base. Par exemple un titre avec souligné, gras, police de grande taille et couleur, ou encore un paragraphe important avec un encadré et un fond légèrement coloré.
Ce qu'il vaut mieux éviter : le titre en gras, et le sous titre en italique par exemple avec une police et une couleur identiques.

Contenus

légèreté

Une page d'écran ne constitue pas un très grand espace, en particulier lorsque l'on a retiré les surfaces dévolues à la navigation, le design, la respiration...Par ailleurs, les internautes ne sont pas en moyenne (mais cela peut cependant largement dépendre de la cible) prêts à lire ou percevoir de grandes quantités d'informations.
Il est donc important de concevoir ses contenus en s'imposant un effort de synthèse. Il faut également faire la chasse régulière à l'inutile. Un exemple courant, concerne la présentation des liens. Supposons que nous souhaitions introduire une page relative aux nouvelles technologies, il est préférable de proposer : [tout savoir sur les NTIC] plutôt que : [si vous souhaitez avoir des informations complémentaires sur les NTIC, cliquez ici].

structuration

Un autre point essentiel consiste en un effort de structuration. Il ne faut pas hésiter à éclater un contenu sur plusieurs pages, et au sein d'une page à le diviser en sous ensemble, titres, cadres et autres éléments d'organisation. Cette structuration divise le contenu en petits espaces qui évitent le découragement du visiteur, et lui offre l'opportunité d'une lecture rapide de niveau titre ou bloc.

redondance

La redondance consiste à répéter avec des variations certains éléments d'un site dans le but de le rendre ouvert, intuitif et parlant au plus grand nombre.

Ce principe peut apparaître contradictoire avec l'effort de synthèse et de structuration préconisé. Il n'en est rien. Il est fondamental d'offrir des axes d'accès et d'analyse variés de ce contenu pour accueillir le plus large public.
Supposons que vous vendiez un produit sur votre site web, vous allez chercher à gagner la confiance de vos visiteurs concernant ce produit. Cependant, il n'y a pas une méthode pour éveiller l'intérêt, mais autant que de tournures d'esprit. Alors dans ce contexte, pourquoi ne pas offrir différentes présentations du même produit chacune mettant en relief un raisonnement particulier. Ce produit est bon :

de par son riche éventail fonctionnel
du fait d'un retour sur investissement particulièrement avantageux
car il a déjà gagné la confiance de tels grands noms
compte tenu de la robustesse et du perfectionnement de sa conception technique ...

Ainsi vous aurez pu sensibiliser un utilisateur pragmatique, un financier, un indécis, un technicien ...

Ce principe de redondance vaut non seulement pour le contenu, mais aussi pour la présentation et le système de navigation.
Rien n'empêche pour ce qui concerne la présentation d'un site web, de proposer aux internautes un choix de "skins" permettant de varier les couleurs, le graphisme ou même la disposition de certains éléments.
La redondance des liens de navigation est une nécessité plus évidente encore. Un seul exemple : certains internautes utiliseront un lien rapide pour suivre une idée et acceptent le changement soudain de contexte, alors que d'autres préfèreront suivre la logique plus lente mais plus structurante d'un menu permanent.

Régularité

C'est une règle qu'il convient d'appliquer strictement dans tous les domaines : navigation, design, typographie, mise en page. Il s'agit de respecter de façon rigoureuse un ensemble de conventions établies qui définissent la personnalité du site, et qui signent les repères essentiels donnés aux internautes.

C'est grâce à cette régularité que l'internaute devient rapidement familier dans l'utilisation d'un site web. Cette régularité est d'autant plus importante que les conventions choisies (pour la navigation, la mise en page ...) sont éloignées des standards courants.

Poids des pages

Le poids des pages a un impact ergonomique au niveau du temps de chargement. Il est important d'adapter les pages web à la cible (internaute haut débit ou bas débit).

Il faut savoir que la perception temps réel correspond à un chargement nettement inférieur à la seconde. Un chargement de 1 à 2 secondes est très bien toléré, alors qu'une page chargée en plus de 10 secondes conduit à un abandon fréquent de la navigation. En réalité l'abandon n'est pas tant lié à la durée de l'attente qu'à l'incertitude qui entoure cette attente.

Lorsque les contenus à présenter restent lourds malgré les efforts d'optimisation, il est nécessaire de recourir à différentes techniques qui limitent l'incertitude du visiteur :

ordonner les objets dans la page afin de transmettre les plus lourds en dernier et présenter un chargement progressif
ordonner les objets dans la page pour transmettre l'essentiel en premier
prévenir l'internaute du poids de la page. La tolérance de l'internaute informé est bonne puisqu'il peut évaluer son temps de chargement. Ainsi l'incertitude disparaît, et l'attente devient le corollaire d'un acte volontaire
accompagner les objets lourds de leur description textuelle