# 12 règles d'ergonomie web par Amélie Boucher

Notes de lectures quasi-brutes issues de la conférence d'Amélie Boucher lors de Paris Web qui était fort intéressante. Je suis impatient de pouvoir lire son livre qui semble aller beaucoup plus loin. En attendant de faire un bilan plus complet sur ces journées. Ou pas.

## Architecture

Connaissance des visiteurs pour architecturer le site, c'est essentiel pour connaître leurs habitudes et pouvoir ranger les éléments par thématique. L'architecture de l'information constitue les fondations du site sans lesquelles un site ne pourra être utilisable de façon ergonomique.

## Organisation visuelle

Vérifier en floutant la page que l'on a de gros blocs identifiables, il s'agit de limiter la surcharge visuelle au maximum car l'animation complique l'intégration mentale. Essayer au maximum de placer les animations hors du texte principal de façon à limiter les distractions. Se renseigner sur les lois de la Gestalt.

## Cohérence

Capitaliser l'apprentissage interne en gardant des repères tout au long de la navigation sur le site, les barres de navigation sont un repère important pour le visiteur : ne pas déplacer/modifier au cours de la visite.

Nomenclature (charte) à respecter pour ne pas perdre le visiteur concernant les termes métiers. Ne pas supprimer les parties importantes (les plus utilisées ?) des pages et uniformiser les formats de présentation (comme les liens). Le comportement du site doit toujours être le même !

Attention : certaines choses différentes doivent être présentées différemment, l'ergonomie ne doit pas brider la créativité. Il faut maintenir cette hétérogénéité au niveau du design. Le métier d'ergonome est avant tout de faire des concessions, toujours.

## Conventions

Capitaliser sur l'apprentissage externe en misant sur les conventions acquises.

L'ergonomie ne permet pas de se démarquer, il faut passer par le design, le contenu, l'expérience utilisateur générale. Ne pas oublier que l'on préfère ce que l'on connaît, tout simplement.

## Information

Informer l'internaute c'est de la politesse ! L'information ponctuelle et contextuelle est très importante et doit être associée à la notion de feedback : l'ordinateur doit acquiescer. Mais attention : avec qualité ! Il doit être visible à tout moment par l'internaute.

## Compréhension

Choix des mots et symboles : 75% du travail d'ergonomie, c'est ce qui va faire cliquer l'internaute ou pas !

Utiliser les mots : les icônes ne suffisent pas, bien choisir ces mots. Par exemple expliquer ce qu'est un fil RSS. Notre avis est toujours biaisé, demander à de vrais visiteurs grâce aux tests.

## Assistance

On doit guider l'internaute :

- explicitement : mots (à défaut d'autre chose) ;
- implicitement : organisation visuelle, format et comportement des objets.

Notion d'affordances = possibilités d'action suggérées par un objet. Sur le web, cela se résume à la question suivante : est-ce que je peux interagir avec ?

Attention aux contre-affordances : ne pas simuler un lien, sinon c'est une impasse qui amène à une déception. La déception est GRAVE en ergonomie.

## Gestion des erreurs

Postulat : l'internaute va se tromper.

3 manières de gérer :

- avant l'erreur : protéger ;
- après l'erreur : repérage et compréhension de l'erreur ;
- au-delà de l'erreur : faciliter la correction.

Attention à la surprotection : exemple de Remenber The Milk qui donne une erreur lorsque le champ est vide lors de l'inscription, il y a aussi le problème de la distraction lors de la frappe (petite parenthèse au passage, je préfère la boulangerie d'Amélie, ceux qui étaient là comprendront ;-)).

Le rechargement de la page est un indicateur suffisant de validation.

## Rapidité

L'internaute ne dois pas perdre son temps : faciliter les clics et les interactions.

La loi de Fitts : une cible est d'autant plus rapide à atteindre qu'elle est proche et grande, ne pas recourir à la mémoire (libellés au hover par exemple). Ne pas demander à l'utilisateur de faire les choses plusieurs fois (champs de formulaire qui se vident lors d'erreurs). Penser à mettre des raccourcis pour aller plus vite lorsque l'utilisateur est un habitué.

## Liberté

Donner l'impression à l'internaute qu'il a le pouvoir : on ne doit pas lui imposer des choses et donc respecter les contrôles utilisateurs de base.

Attention aux actions au survol (à ce sujet l'atelier de l'après-midi sur l'accessibilité était très intéressant, je n'avais jamais eu l'occasion d'entendre ce que donnait un rendu sous synthèse vocale mais ça fait réfléchir...) L'internaute est un acteur ! Ne pas le rendre passif ou lui imposer des pubs comme s'il était devant la télévision.

## Accessibilité

Physique (surtout visuelle) et technologique.

## Satisfaction de votre internaute

Utilité : micro-fonctionnalités sur mesure qui démarquent le site de façon positive. Il faut attribuer une grande importance à l'esthétique et à l'expérience utilisateur globale : un site plus facile à utiliser s'il est beau.

Ne pas oublier l'importance de la qualité du service résultant de la puissance et de la fiabilité technique : il faut que ça marche ! (excellente transition avec la conférence suivante de la devteam).

## Au-delà des règles

Il faut bien sûr pondérer ces règles en fonction du type d'utilisateur et de la problématique. C'est un guide mental et non une check-list !!! Enfin il faut savoir qu'il est possible de transgresser les règles en cas de besoin mais il faut en être conscient.

Cette conférence s'est terminée par quelques exemples en live de revues ergonomiques de sites. Malheureusement mon site préféré n'a pas pu être audité à ce moment là... mais bon il manquait sûrement une bonne journée pour pouvoir relever toutes les énormités ergonomiques ;-). Au final, la meilleure conférence de cette édition de mon point de vue.

### Articles peut-être en rapport

- ★ iPheeds.org, une version iPhone pour votre blog
- Critique du livre Ergonomie Web
- Critique du livre Donne moi ce que je veux !

### Commentaires

Oncle Tom le 18/11/2007 :

Effectivement ce livre a l'air d'être une vraie mine d'or. J'espère que le Père Noël l'apportera dans sa hotte.
Merci pour ce rapide retour sur lecture ;-)

David, biologeek le 18/11/2007 :

@Oncle Tom : il ne s'agit pas (encore) de la critique mais des notes prises pendant l'atelier consacré à l'ergonomie et animé par l'auteur du livre.

giz404 le 19/11/2007 :

Une fois de plus, la majorité des points relève du bon sens, mais c'est toujours bien d'avoir un reminder sous la main.

Sunny le 19/11/2007 :

Pour moi la conférence d'Amélie était la meilleure de la journée. Pour avoir feuilleté le livre, ces règles s'y trouvent aux côtés de moultes autres perles. J'ai hâte qu'Audrey le finisse pour que je m'y plonge également.

Oncle Tom le 19/11/2007 :

Il se trouve que j'avais déjà lu une critique positive sur son livre et à la vue de ton appréciation, il n'y a pas de raison que son livre soit inintéressant ;-)
Je te conseille aussi fortement la lecture de "L'écrit Web", un concentré de bonnes pratiques digeste et qui devrait t'intéresser. Je suis prêt à te rembourser le bouquin s'il ne te plait pas ;-)

Samuel Martin le 25/11/2007 :

www.rememberthemilk.com/s... est t'il un exemple ou un contre exemple pour la gestion des erreurs, personnellement je le trouve très correct, je ne perçois pas la validation à droite des champs comme une distraction, au contraire, avant validation on est quasi certain que la soumission passera.
Note : Je me rappelle avoir jeté un coup d'œil sur le code source d'ergolab.net il y a 2 ans, aujourd'hui encore, je friçonne (<tr><td>...)

David, biologeek le 26/11/2007 :

Quitte à utiliser JavaScript pour vérifier un formulaire, je préfère un bouton de check avant d'avoir à valider qui m'assure que tout va bien se passer ensuite. Après il ne faut pas oublier l'effet "Wow!" qui peut être important d'un point de vue marketing (ou référencement, il n'y a qu'à voir le nombre de fois qu'il a été lié !).
L'ergonomie doit aussi prendre en compte le niveau des utilisateurs, l'utilisateur 2.0 étant assez avancé on néglige bien souvent certaines règles de base car on sait qu'il va s'en sortir... au détriment de l'adoption par des personnes moins habituées à ce genre d'interactions. Du coup la courbe d'adoption des services est plus plate que ce qu'elle pourrait être, le département marketing s'est tiré une balle dans le pied sans même le savoir :-).

Mindfulness le 28/11/2007 :

En ce qui me concerne, j'ai lu avec intérêt l'articlee du même auteur "ergonomie et flash", et je m'en suis inspiré pour créer à la demande d'un client un site 100% flash (www.pleineconscience.fr) dans lequel par exemple :
la navigation précédent / suivant à l'aide des flèches du navigateur est possible, alors que c'est souvent un gros problème sur des sites flash (essayez vous verrez)
L'actualisation d'une rubrique ne relance pas la totalité du site (et c'est agaçant) , mais la rubrique elle même.
Les clics droits peuvent aider à la navigation et (cerise sur le gateau) le référencement du site est identique à celui d'une version HTML.
Les solutions existent, mais bien souvent, on ne pense pas à explorer de nouvelles voies pour le bien du client et des utilisateurs finaux.
L'intérêt du travail d'amélie est de nous éclairer dans cette voie.
Manuel PETITJEAN

David, biologeek le 04/12/2007 :

@Oncle Tom :
> Je te conseille aussi fortement la lecture de "L'écrit Web", un concentré de bonnes pratiques digeste et qui devrait t'intéresser. Je suis prêt à te rembourser le bouquin s'il ne te plait pas ;-)
Je l'ai acheté et lu sur tes conseils et j'ai trouvé ça assez léger. Enfin les conseils sont pleins de bon sens mais je crois que je n'étais pas la cible adaptée. La partie sur les blogs est intéressante et bien écrite ce qui donne au final encore plus l'impression de rester sur sa faim. C'est dommage.

Mathias, étudiant en SRC à Mulhouse le 09/12/2007 :

Les 12 règles d’ergonomie d’Amélie Boucher

Il y a tout juste un mois parraissait le livre “Ergonomie Web, Pour des sites Web efficaces” d’Amélie Boucher. L’occasion pour moi de citer ses 12 règles pour optimiser l’ergonomie d’un site Web : Architectur...

Nicolas Hoizey le 08/10/2008 :

Tiens, je retombe sur ce billet après quelque temps, et j'en profite pour te signaler que mettre l'identité d'un "commenteur" après le commentaire ne me semble pas très intuitif, ni donc ergonomique... ;-)

David, biologeek le 08/10/2008 :

On m'a déjà fait la remarque en effet, je pensais que ça ne gênerait pas tant que les commentaires ne dépassent pas un écran mais ça n'est visiblement pas le cas.

Je les mettrais bien en haut mais dans la marge du coup, je vais creuser ça. Merci.

Samuel Martin le 09/10/2008 :

Même remarque et même situtation que Mathias.

David, biologeek le 09/10/2008 :

Mathias ou Nicolas ? ou humour ? :-)

Nicolas Hoizey le 09/10/2008 :

Dans la marge au même niveau que le haut du texte du commentaire, ce serait pas mal, un peu comme un label de champ de formulaire devrait être aligné en haut du champ...

étudiant blogueur le 25/11/2008 :

Je n'arrive jusqu'à présent à distinguer accessibilité et ergonomie
merci de m'éclaircir

Benoît Emile le 26/11/2008 :

Super article, merci
D'accord avec #11

David, biologeek le 27/11/2008 :

@étudiant blogueur : l'accessibilité s'adresse aux personnes ayant des capacités réduites sur le web (handicapés, seniors, etc), l'ergonomie s'adresse davantage à l'étude des interactions possibles entre l'homme et la machine.

Après la limite est assez floue en effet, car l'ergonomie peut influer sur l'accessibilité et l'accessibilité empiète parfois sur les problématiques de l'ergonomie...

L'article de wikipedia sur l'accessibilité du web est assez complet :
http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_Web

Nicolas GOYER le 10/02/2009 :

J'apporte un complément de réponse un peu tardif.

L'accessibilité est une partie de l'ergonomie.

L'ergonomie consiste à adapter un produit à ses utilisateurs. Cela inclus la prise en compte des handicapes des utilisateurs.

L'ergonomie comprend diverses disciplines dont l'accessibilité au même titre que la terminologie, ou l'architecture de l'information ou la conception d'interface.

De même qu'il y a des experts de la terminologie, il y a des experts de l'accessibilité mais il existe aussi des "généralistes", des personnes ayant une vision d'ensemble. C'est pourquoi on considère parfois l'accessibilité comme une discipline à part.

Matthieu le 27/04/2011 :

Très intéressant, les conférences d'Amélie Boucher sont assez prenantes.
Pour ceux qui n'ont pas la chance de pouvoir y assister les livres sur l'Ergonomie 2.0 sont également très pertinents.

Sylvain le 15/06/2011 :

Amélie Boucher sait de quoi elle parle et elle l'a une fois de plus prouvé lors du dernier SMX Paris ;)

Nelly osCommerce le 12/08/2011 :

Tous ces règles son toujours actuelle..je commençait les chercher avec des exemples..mais j'ai trouvé très peu, peut être vous pouvez me conseiller quelque chose?