Cours d'ergonomie des interfaces web pour la filière IMR à l'Enssat (Lannion). Année 2012-2013.

1. Elodie Descharmes (ingénieur Orange Labs)
Filière IMR, deuxième année
2012-2013
Ergonomie
Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement
basé que le livre suivant :
Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles

2. Audit ergonomique

3. 3
@elodescharmes
Audit ergonomique
 Vous avez un site web et vous voulez évaluer sa qualité ergonomique
 Synonymes : « audit ergonomique » =
« Evaluation experte/ergonomique »
« Inspection experte/ergonomique »
 Non, ce n’est pas réservé aux experts : il s’agit simplement d’observer une interface à la
lumière des objectifs de l’ergonomie
– Le designer peut avoir des préoccupation centrées sur l’accessibilité (contrastes couleurs etc.)
– Le développeur peut avoir des préoccupation centrées sur l’optimisation technique
 tous ces aspects contribuent à l’ergonomie globale d’un site

4. 4
@elodescharmes
Une pratique multiforme
 Deux formes :
– Audit ergonomique informel
– Audit ergonomique formel

5. 5
@elodescharmes
Audit ergonomique informel
 Qui ?  tous les contributeurs du projet
 Quand ?  au jour le jour
 Comment ?  Ce sont simplement les principes qui vont guider les choix tout au long du
projet. Vous devez être capable de juger de la qualité ergonomique de votre site au jour le jour
et d’agir dessus en conséquence.

6. 6
@elodescharmes
Audit ergonomique formel
 Qui ?  en général l’ergonome si il y en a un
 Quand  à intervalles réguliers, occurrences décidées en amont en fonction des dates clé du
projet
 Comment ?  Passe ergonomique approfondie sur l’ensemble ou une partie du site

7. 7
@elodescharmes
Audit ergonomique formel
 Les moments-clés de la vie d’un site pour conduire un audit formel
– Lorsque l’on engage le processus de refonte d’un site
– Après l’intervention de chaque cellule métier afin de valider les réalisation et avant que les
responsables suivants ne prennent le relais (exemple : validation du design avant intégration
technique)
– Quelque temps après la mise en ligne

8. 8
@elodescharmes
Support et périmètre
 Que peut-on auditer ?
– Bien sûr : site web ,application en ligne
– Mais aussi : story-board, maquette conceptuelle, propositions graphiques…
– Voir même : cahier des charges, spécifications fonctionnelles…
 En fait il est recommandé de commencer l’évaluation le plus tôt possible !
 La problématique dépend du support évalué
– Cahier des charges : …utilité (référence aux persona)…
– Maquette graphique : …lisibilité, accessibilité visuelle (du point de vue mise en forme)…
– Site fonctionnel : …accessibilité visuelle (du point de vue implémentation technique), principes
d’interaction, réponses du système, …

9. 9
@elodescharmes
Normes, conventions, critères, checklists
 Concrètement, comment fait-on ?
 Des normes génériques (souvent sous la forme de checklist) existent
– A utiliser, mais à contextualiser surtout !
– Exemple : si on trouve dans une checklist « la barre de navigation principale contient un bouton
accueil »
– On risque de croire qu’avoir coché tous les éléments de la liste est suffisant (mais aucune
checklist ne pourrait être exhaustive)
– On risque de ne pas remettre en cause l’utilité du bouton « accueil », et c’est finalement ce
qui est le plus important
– Cependant une checklist adaptée dans un contexte donné (entreprise avec charte graphique par
exemple) peut être très utile
 A retenir : une checklist ne protège pas contre les erreurs

10. 10
@elodescharmes
Normes, conventions, critères, checklists
 Chaque spécialiste construit sa grille en fonction du contexte projet et de ses persona
 Une base solide : les références qui font consensus
Références Contenu et origine
Heuristiques de Nielsen 10 heuristiques créées en 1994 et revisitées en
2005 pour juger de l’utilisabilité
Cf. Annexe au cours
Critères ergonomiques de Bastien et Scapin 18 critères en 8 dimensions, créés en 1993
Cf. Annexe au cours
Heuristiques d’Instone Adaptation des heuristiques de Nielsen au cas
particulier des sites web
Bruce Tognazzini 16 grands principes du design d’interaction,
proposés en 2003
Et bien sûr les 12 règles présentées dans ce cours !

11. 11
@elodescharmes
Les persona pondèrent les règles génériques
 Adapter !
– Les caractéristiques et besoins de vos internautes influencent énormément les règles génériques
– Rappel : la règle qui prédomine sur toutes les autres doit rester « Satisfaire votre internaute »
 On n’analyse pas un site dans l’absolu, on l’analyse pour savoir si il correspond au besoin des
persona

12. 12
@elodescharmes
Les persona pondèrent les règles génériques
 Exemple de l’expert
– L’interface doit lui permettre d’accomplir ses objectifs rapidement
– Règle 9. Rapidité > Règle 2. Organisation visuelle
– On accepte que la charge informationnelle des pages soit importante pour privilégier le
critère d’efficience (par exemple dans la conception d’un formulaire)

13. 13
@elodescharmes
Les persona pondèrent les règles génériques
 Exemple du senior
– Règle 11. Accessibilité ++
– Difficultés de lecture des polices de petite taille
– Difficulté de perception des couleurs
– Equipement informatique différent des taux de pénétration de la population générale
– Règle 7. Assistance ++
– Difficultés avec les listes déroulantes
– Difficultés à repérer les espaces de navigation
– Difficultés à repérer les éléments cliquables
– Tendance à ne pas cliquer sur les accroches sous forme d’images
– Règle 5. Information ++
– Difficultés à se repérer dans l’organisation d’un site web
– Règle 2. Organisation visuelle ++
– Tendance à lire l’intégralité des pages web

14. 14
@elodescharmes
Spécificités technologiques
 Les technologies utilisées influencent les typologies d’interactions proposées à l’utilisateur. Il y
a donc quelques points de vigilance à garder en tête.
 Exemple : AJAX (Asynchronous Javascript And XML) et Javascript
– La modification partielle des pages
– Le plié/déplié d’informations
– Le drag&drop

15. 15
@elodescharmes
La modification partielle des pages
 Attention au feedback : l’utilisateur doit voir qu’il se passe quelque-chose
– Proximité visuelle
L’objet modifié doit être proche du déclencheur
– Format visuel
Surligner un élément juste après sa modification ou son apparition par exemple
– Représentation du caractère dynamique
Latence simulée

16. 16
@elodescharmes
Le plié/déplié d’informations
 Liens intra-pages
– Indiquer qu’une action est possible
– Indiquer que le lien intra-page est différent d’un lien hypertexte classique
– Fournir ou non un moyen de revenir à la page initiale

17. 17
@elodescharmes
Le drag&drop
 Il faut se poser au cas par cas la question de l’utilité réelle de la technique
– Trop souvent utilisé comme un gadget dans les sites web
 Sur le web, on distingue aujourd'hui 2 grandes types d'objectifs pour lesquels est utilisé le drag & drop
– Pour lancer une action sur un objet (ex. ajout au panier)
– Pour déplacer un objet (ex. passage d'un groupe à un autre, ordonnancement de listes, etc.)
 En général que le drag & drop est particulièrement adapté pour supporter ces actions de pur déplacement
d'un item. Le déplacement est par définition un type d'action pour lequel il semble logique de saisir l'objet
pour l'amener ailleurs (comme dans le monde réel).
 Sa pertinence est beaucoup plus discutable pour le déclenchement d’actions…

18. 18
@elodescharmes
Le drag&drop
 Exemple : ordonnancement de photos dans un album
www.facebook.com (10/03/2011)

19. 19
@elodescharmes
Le drag&drop
 L’exemple discutable de l’utilisation du drag&drop pour l’ajout à un panier
Décomposition de l'action effectuée en drag &
drop : clic sur l'objet, parcours de la distance
objet / récepteur, dépôt de l'objet sur le
récepteur.
Plus la distance objet / récepteur est longue, plus
l'action est longue à effectuer, voire compliquée
d'un point de vue moteur.
Avantage : l'interface est légère visuellement.
Décomposition de l'action effectuée via un
bouton : clic sur le bouton.
Inconvénient : l'interface est plus lourde
visuellement (il faut répéter le bouton autant de
fois qu'il y a d'objets).
Source : www.ergolab.net/articles/ergonomie-drag-drop.php

20. 20
@elodescharmes
Le drag&drop
 Conclusion : pourquoi pas, mais…
– Le drag & drop doit avoir une réelle utilité, augmenter l'efficience
– La possibilité de drag & drop doit être visible
– La destination doit être compréhensible et visible
– Le drag & drop doit être facile
– L'effet du drag & drop doit être visible

21. 21
@elodescharmes
Conduire une évaluation ergonomique
Question préliminaires
 Seul ou à plusieurs ?
– A plusieurs !
– « L’effet évaluateur » : plusieurs évaluateurs, utilisant la même méthode, repèrent des
problèmes d’ergonomie différents
– Recommandation : 3 à 5 personnes (pour un meilleur rapport qualité/coût –oui, l’audit
ergonomique a un coût…- )
– A défaut : évaluation croisée
– Plusieurs personnes pour balayer rapidement les problèmes que chacun perçoit
– Une seule personne pour réaliser un audit complet sur cette base
– Plusieurs personnes pour valider les résultats
– Sachant que… il est de toute façon impossible d’être exhaustif, d’où l’intérêt d’audits récurrents

22. 22
@elodescharmes
Question préliminaires
 Fil rouge : dans la peau de votre persona
– Vous n’évaluez pas le site pour vous, mais pour votre utilisateur cible
– Nécessite des capacités d’abstraction
– De soi
– De ses habitudes
– De ses réflexes
– De ses connaissances (sauf des connaissances ergonomiques…)
– Se concentrer sur la réalisation des tâches du persona
– Tester tous les cas de figure possibles, la gestion des erreurs, les capacités aux limites…
– A ce niveau : copies d’écran + notes brèves

23. 23
@elodescharmes
Question préliminaires
 Par où commencer ?
– Ce qu’il faut éviter : se retrouver devant la page d’accueil d’un site, assailli par un flot de défauts
plus ou moins importants et ne plus savoir où donner de la tête…
– Ne pas de disperser et rester rigoureux
– Aller du général au particulier
– … sans s’abstenir de noter les remarques au fur et à mesure

24. 24
@elodescharmes
Procéder en trois étapes
1. Evaluer si l’interface du site web traduit bien son utilité
– Comprend-on ce que propose le site ?
2. Repérer les défauts inter-pages
– Architecture de l’information, enchaînements, interactions…
– Réaliser les parcours supposés des persona pour les uses cases principaux
3. Repérer les défauts intra-pages
– Erreurs d’ergonomie
– Repasser par chacune des étapes des parcours utilisateurs de manière approfondie
NB : Attention à analyser systématiquement les pages clé du site

25. 25
@elodescharmes
Les outils
 Règles ergonomiques
– Premier guide de travail
 Prendre des notes
– Papier / crayon…
– uzReview : outil proposé par Mozilla permettant d’auditer une interface web sur la base
d’heuristiques (Jakob Nielsen, Keith Instone)
 Faire des captures d’écran
– Penser à faire une copie d’écran systématiquement, page par page, mission par mission
– Screengrab! : extension Firefox, permet de capturer la page en entier
– Jing : utilitaire de chez Techsmith, propose des fonctions d’annotation
– … et parfois qui ne reste que la touche ImprEcran…

26. 26
@elodescharmes
Les outils
 Tester la compatibilité technique
– Web Developper : extension Firefox, permet d’afficher la fenêtre à la taille désirée, l’équivalent
existe sous IE
– Browsercam : service payant, permet de tester l’apparence d’un site sur l’essentiel des navigateurs
du marché
– Netlimiter : permet de réduite le débit Internet à un seuil souhaité

27. 27
@elodescharmes
Les outils
 Evaluer l’accessibilité visuelle
– www.etre.com/tools/colourcheck/ : outil basé sur les recommandations W3C
– Brightness difference >= 125
– Colour Difference >= 500
– ColorZilla : extension Firefox permettant de récupérer les codes couleurs sur une page (outil
pipette)
– AccessColor : permet de fournir directement l’URL de votre page
– www.vischeck.com ; colorfilter.wickline.org : permettent de simuler le daltonisme ou autres
anomalies visuelles
– Fonction « désactiver les images » d’un navigateur : permet de voir si une information importante
n’est plus visible
– Lynx : navigateur en mode texte
– mozbraille.mozdev.org
– Synthèse vocale Jaws

28. 28
@elodescharmes
Les outils
 Evaluer la forme générale d’un site
– Repérer les formes générales
– Vérifier que l’on distingue bien les différentes zones de navigation, de contenu, d’action
– Astuce : utiliser le filtre « gaussian blur » / « flou gaussien » sous Photoshop par exemple

29. 29
@elodescharmes
Analyse
 Hiérarchiser vos observations
– Quel est l’impact du défaut observé ?
– Quelle est la fréquence du défaut observé ? (combien d’utilisateurs vont rencontrer le problème)
– Quelle est la persistance du défaut observé ? (contournement possible ?)
 Recommander des modifications qui pourraient corriger le problème

30. 30
@elodescharmes
Le livrable de l’audit
 Rapport
 Exemple de structure de livrable
– Faire un listing récapitulatif des observations (sous forme de tableau par ex)
– Référence (lien vers le détail dans la suite du document
– Description rapide
– Scores Gravité / Fréquence / Persistance
– Détailler les observations
– Référence
– Copie d’écran
– Mise en évidence de la zone concernée
– Commentaire
– Recommandation associée
– Rappel du scoring