Ergonomie web

Clément DussarpsAvril 2017

Ergonomie web

L’ergonomie ?

• Ergonomie :• (Grec) ergon + nomos = Travail + Loi• Un ensemble de connaissances scientifiques et de

méthodologies• Aide pour concevoir des outils / dispositifs / services adaptés à

l’homme• But = que ces outils / dispositifs / services soient utilisés avec

« le maximum de confort, de sécurité et d’efficacité par le plus grand nombre » (Société d’Ergonomie de Langue française)

• Optimiser les conditions physiques et psychologiques du travail « faciliter l’accomplissement des tâches et diminuerles efforts inutiles. »*

*Christian Egéa, interview dans : Blond, M.-V., Marcelin, O., Zerbib M. (2011) Lisibilité des sites web. Eyrolles.

Ergonomie : pourquoi ?

• Trop d’informations = au secours !


• De l’ordinateur aux supports mobiles… différentes lectures.


• L’écran : un mauvais support pour la lecture ? ~4 fois plus difficile que sur papier !)

Oui, c’est en taille réelle…!


• Satisfaction de l’utilisateur

• Pour que l’utilisateur se repère sur le site web

• Pour que le message soit bien compris

• Pour que l’utilisateur ne parte pas dès son arrivée (« rebond »)…• …et qu’il revienne (expérience « positive »)

Ergonomie : comment ?

• Du bon sens et de l’empathie (se mettre à la place de l’usager « ignare »).

• (Mais pas seulement… il y a des règles qui ne relèvent pas directement du bon sens.)

• Exemple de bons sens :• Ne pas imposer un « scrolling » vertical sans raison

importante…• … et faire en sorte qu’il soit clair qu’il y a de l’information

plus bas

• Autre exemple :• Avoir un site web complexe avec environ 50 pages…• … et aucun point de repère de navigation (fil d’ariane, plan,

etc.)

Exemples de bonnes pratiques

• Identité du site : qui produit l’information, quelles sont ses missions (si le logo ne le dit pas clairement)…

• Récence du contenu un site web non mis à jour est « mort » et les informations indiquées ont moins de valeur… sauf cas particuliers (dossier sur un sujet ancien, avec rares possibilités de mises à jour).

• Pas trop de longs textes (l’écran n’est PAS fait pour lire). Une ligne de texte devrait être constituée de 65 à 95 caractères environ.

• Un menu = 4 à 7 éléments (pour le menu principal), en haut ou à gauche. JAMAIS à droite, JAMAIS en footer, sauf s’il s’agit d’un rappel.

Inspiré de : https://www.slideshare.net/adviso/27-conseils-pratiques-en-ergonomie-web-presentation?qid=b1e158d3-311c-439a-a1e1-dbdece40b09a&v=&b=&from_search=2


• Les textes du menu doivent être clairs et courts (2 mots maximum)

• Tout lien doit être clair (l’usager doit savoir où il va arriver / ce qui va se passer)

• Facultatif mais appréciable : modifier l’apparence d’un lien au passage de la souris = on devine de suite que c’est un lien

• Si un lien pointe vers un site web extérieur, l’indiquer autant que possible



• Proposer un fil d’ariane pour savoir où l’on est.

• Proposer un plan du site web, un moteur de recherche…

• Sur un site web avec du texte susceptible d’être imprimé = prévoir une CSS d’impression

• Surcharge d’informations : pas trop de scrolling vertical, pas trop d’informations sur un même écran



• Concernant les couleurs :• Attention au contraste écriture / fond (il doit être élevé)• Attention aux couleurs identiques pour des contenus = il doit y avoir

un lien logique• Le choix n’est couleur n’est pas souvent une affaire de goût…!• 3 à 6 couleurs maximum

• Outils utiles :• Contraste texte/fond :

• https://snook.ca/technical/colour_contrast/colour.html• https://www.paciellogroup.com/resources/contrastanalyser/

• Association de couleurs : http://paletton.com


• Concernant les couleurs : quelques exemples• Problème de lecture du blanc sur le fond clair, selon les zones

de la photo

• Mettre un filtre sur le fond pour créer un contraste plus régulier :


• Concernant la typographie :• Sobre, simple• Taille texte : entre 10 et 12 (aller jusqu’à 14 pour les seniors et

jeunes enfants). La taille peut être personnalisée (via le site web ou navigateur)

• Attention à l’anti-crénelage (lissage) = rend le texte un peu flou• Préférer les minuscules aux majuscules• Polices standards : Arial, Verdana, Open Sans, Georgia, Tahoma…• Plus un paragraphe est large, plus il faut d’interligne• Mettre en gras l’important• Raréfier l’italique et éviter le souligné• Avec ou sans empâtement (serif / sans-serif) ? Dépend de la

longueur du texte


• Concernant les images :• <img src="…" alt="ce que montre mon image" />• Attention au poids total• Penser à une navigation sans image…

• De même, penser à la lecture de site pour les personnes mal ou non voyantes


• Le feedback immédiat• Savoir si on fait bien ou mal ou quelles sont les limites

immédiatement• Exemple : Twitter avec le nombre de caractère, import d’un

document dans Gmail (temps restant), niveau de sécurité du mot de passe, etc.

• Eviter tout de même les excès (sous peine d’être décourageant si les attentes sont trop élevées ou de noyer l’usager sous la masse d’information)

Lois de Gestalt : focus sur similarité & proximité• Similarité : éléments similaires (forme, couleur, taille…) auront

une fonction identique• Proximité : les éléments proches fonctionnent ensemble, les

éléments éloignés non






















Loi de Fitts appliquée aux interfaces

• Plus c’est loin et plus c’est petit, plus on aura de difficulté à l’atteindre et cliquer dessus.

• Mathématisable : http://www.guillaumegronier.com/ihm/resources/Supports-Cours/LoiDeFitts.pdf

Taille suffisante (pas nécessairement énorme…), en fonction du public. La taille peut concerner le bouton mais aussi la zone de clic.

Regrouper ce qui fonctionne ensemble, éviter les « marginaux » Plus un bouton est susceptible d’être utilisé, plus il doit être

accessible Sur mobile : penser à la portée des doigts (ex. pour un droitier

sur un téléphone tenu verticalement, éviter les boutons à gauche / en haut à gauche…)

Ergonomie : les idées reçues

• On lit les pages en Z…• On lit les pages en F…• On lit les pages en C…

Cela dépend du contenu, de la forme de la page !

• La mise en page guide la lecture…• … et donc la bonne réception du message


• La règle des 3 clics :• Pas une mauvaise idée, mais…• … limite la notion d’accessibilité au nombre de clics• Or, le temps mis pour identifier où est l’information, par ex.,

est au moins autant voire plus important !

• S’il est nécessaire d’utiliser + de 3 clics, ce n’est pas forcément négatif, du moment que l’utilisateur ne se lasse pas et qu’il sait où il se trouve et comment passer à la suite….

• … toutefois, limiter le nombre de clics nécessaire pour accéder à une information est une bonne idée en soi !


• L’opposition ergonomie / esthétique :• Un site peut être ergonomique mais « moche »…• … mais un site peut aussi allier les deux.• De plus, l’esthétique peut aider à l’ergonomie !


• On ne scrolle jamais !• Ah bon ? Moi si. Et toi ? Oui toi aussi ?• Sur Facebook, c’est même le principe de base…• Et avant Facebook ? Une étude de ClickTale (2006) :

• 120 000 pages vues, dont 91 % « scrollables »• 76 % des pages ont été « scrollées »• 22 % jusqu’en bas

Boucher, A. (2007). Ergonomie Web : pour des sites web efficaces. Eyrolles.

Quelques liens utiles

• Quality Street : de bons conseils, avec exemples de bonnes et mauvaises pratiques• http://www.qualitystreet.fr/2010/08/04/design-dinterface-et-

critere-ergonomique-1-lincitation/

• Studiovitamine : voir notamment la partie sur les polices• http://ergonomie-web.studiovitamine.com/mise-en-forme-du-

texte,359,fr.html

Ensemble : analyses à chaud








Travail pour le 05 mai 2017 à 16h00

• A l’aide de ce cours et des liens suivants :• https://www.slideshare.net/adviso/27-conseils-pratiques-

en-ergonomie-web-presentation?qid=b1e158d3-311c-439a-a1e1-dbdece40b09a&v=&b=&from_search=2

• https://www.slideshare.net/vaynce/points-cls-ergonomie-web-6180245?qid=6e3a7ca8-c5f7-4584-994f-d84143fbdc1d&v=&b=&from_search=3

• (Vous pouvez bien sûr faire d’autres recherches.)

1. Individuellement : choisir le site web d’une personne de la promotion

2. Individuellement : Procéder à un audit ergonomique avec 10 critères (ni plus, ni moins).

Critères d’évaluation

• Votre site web sera noté sur 5 :• Ergonomie (polices, couleurs, interactions, navigation…) (2 point)• Absence de liens morts (1 point)• Prise de risques (thèmes, extension, etc.), originalité (1 point)• Esthétique, logo, etc. (1 point)

• Analyse ergonomique sur 15 :• (Fournir des captures écran = on doit pouvoir identifier vos remarques à

l’aide d’une ou plusieurs captures)• 1 point par critère (10 points au total). Argumentation indispensable !

(Indiquez en quoi tel élément est ergonomique ou non). Au moins 5 éléments améliorables.

• Pour chaque élément améliorable = préciser une solution possible (5 points)

Travail pour le 05 mai 2017 à 16h00

• Pour le 05 mai 2017 à 16h00, m’envoyer :• L’adresse en ligne de votre site web réalisé dans le cadre du

cours• Votre audit ergonomique (~2 pages + les captures d’écran)

Ergonomie web

Education