Cours pour des DUT 2e année en information numérique. Quelques bases d'ergonomie des interfaces web.

1. Clément Dussarps
Avril 2017
Ergonomie web

2. 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 diminuer
les efforts inutiles. »*
*Christian Egéa, interview dans : Blond, M.-V.,
Marcelin, O., Zerbib M. (2011) Lisibilité des
sites web. Eyrolles.

3. Ergonomie : pourquoi ?
• Trop d’informations = au secours !

4. Ergonomie : pourquoi ?
• De l’ordinateur aux supports mobiles… différentes lectures.

5. Ergonomie : pourquoi ?
• L’écran : un mauvais support pour la lecture ? ~4 fois plus difficile que sur papier !)
Oui, c’est en taille réelle…!

6. Ergonomie : pourquoi ?
• 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 »)

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

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

9. Exemples de bonnes pratiques
• 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
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

10. Exemples de bonnes pratiques
• 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
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

11. Exemples de bonnes pratiques
• 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

12. Exemples de bonnes pratiques
• 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 :

13. Exemples de bonnes pratiques
• 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

14. Exemples de bonnes pratiques
• 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

15. Exemples de bonnes pratiques
• 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)

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

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

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

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

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

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

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

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

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

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

26. Ergonomie : les idées reçues
• 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 !

27. Ergonomie : les idées reçues
• 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 !

28. Ergonomie : les idées reçues
• 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.

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

30. Ensemble : analyses à chaud

31. Ensemble : analyses à chaud

32. Ensemble : analyses à chaud

33. Ensemble : analyses à chaud

34. Ensemble : analyses à chaud

35. Ensemble : analyses à chaud

36. Ensemble : analyses à chaud

37. Ensemble : analyses à chaud

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

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

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