Download - 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 ?
• L’écran : un mauvais support pour la lecture ? ~4 fois plus difficile que sur papier !)
Oui, c’est en taille réelle…!
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 »)
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
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
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
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
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 :
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
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
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)
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
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
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
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
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
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
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
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
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 !
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 !
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.
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
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)