cours Web design, Master Arts et Création Numérique, UVHC, 2011

1. Ergonomie Web

2. « l 'ensemble des connaissances scientifiques
relatives à l 'Homme nécessaires pour
concevoir des outils, des machines et des
dispositifs qui puissent être utilisés avec le
maximum de confort, de sécurité et
d'efficacité »
Alain Wisner, fin des années 50
● C'est une démarche
● Notion de tâche primordiale
● Méthodes d'analyse et de conception
● Optimisation ergonomique

3. ● Paradigme n°1 : conception centrée sur les
interactions Homme/Machine
● Quelle est la tâche de l'utilisateur? accessibilité ?
● Comment améliorer l'utilité et l'utilisabilité d'un produit?
● Comment interpréter l'environnement cognitif (traitement de
l'information), pour améliorer :
performance, satisfaction, sécurité.
● Paradigme n°2 : conception centrée sur
l'expérience de l'utilisateur « user experience »
● Comment interpréter la dimension affective et les émotions
pour améliorer :
beauté perçue, qualité hédonique, bien-être, plaisir,
amusement, fun

4. Lien étroit entre le cognitif et l’ émotif
Les émotions affectent la façon dont nous
traitons l'information :
● notre jugement
● nos prises de décisions
● notre apprentissage
Elles modifient notre manière de nous confronter
à la réalité et de résoudre les problèmes.
Elles nous aident à évaluer les situations comme
bonnes ou mauvaises, sécuritaires ou dangereuses.

5. Qualité hédonique d'un produit
● Est-ce que l'utilisation d'un produit est source
de plaisir pour l'utilisateur?
● Buzz words très tendance
● Emotional design
● Perceived hedonic quality
● Pleasurable products
● Funology
● Concepts parallèles : amusement, fun, beau,
joie, enchantement, attrait, nouveauté

6. Attractive things work better
● Emotion & Design – Donald Norman (2002)
● Trois théières :
● Accent sur l'utilisabilié (plus exactement la non
utilisabilité)
● Accent sur l'esthètique
● Accent sur le fonctionnel

7. Carelman : Catalogue des objets
introuvables (1969) Peter Bo : Maru Teapot (2007)

8. The Ronnefeldt « tilting » teapot (2004)

9. Accessibilité
caractère de quelque chose qui est accessible
● Se dit d'un lieu, d'une situation, etc., auxquels on peut
accéder : Village difficilement accessible.
● Se dit de quelque chose (livre, œuvre, art) que l'on peut
comprendre ; intelligible, compréhensible.
● Se dit de quelque chose (produit, service, loisir, etc.) que
l'on peut s'offrir ; abordable : Le ski est maintenant
accessible à beaucoup de gens.
● Qui se laisse émouvoir, toucher ; sensible : Un homme
accessible à la pitié.
● Que l'on peut facilement aborder : Un président-directeur
général accessible.

10. WCAG 2.0 : Règles pour l' accessibilité des
contenus Web
● quatre principes fondamentaux : perceptible,
utilisable, compréhensible et robuste
● 12 règles : trame, objectifs de base
● critères de succès : tests de conformité des règles
(spécification de conception, achat, réglementation, accords
contractuels). Trois niveaux de conformité : A (le plus bas), AA
et AAA (le plus élevé).
● techniques suffisantes, recommandées
W3C : Web Content Accessibility Guidelines
accessiweb.org : Label_Accessibilite

11. Iso 9241 : Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être
utilisé avec efficacité, efficience et satisfaction
par des utilisateurs donnés (specified),
cherchant à atteindre des objectifs donnés,
dans un contexte d'utilisation donné. »
+ =

12. Iso 9241 : Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »
Conception Centrée Utilisateur
3 dimensions
Ce qu'il est Où il se trouve
Ce qu'il veut

13. ISO 13407 :
étapes du cycle de
conception centrée utilisateur
1: analyse
3: évaluation
2: conception
http://www.ergolab.net/articles/conception-centree-utilisateur.php

14. Iso 9241 : Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »
Objectif 1 : Efficacité
L'utilisateur doit réussir à faire ce qu'il veut
● Aisance d'utilisation
● Facilité d'apprentissage
●Critère primordial pour les interfaces grand public
●Séduire de nouveaux utilisateurs

15. Iso 9241 : Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »
Objectif 2 : Efficience
Il doit atteindre ses objectifs
● Le plus rapidement possible
● Avec le moins d'erreurs possibles
● Dimension critique pour les interfaces spécialisées,
applications métiers
● Conserver des clients existants

16. Iso 9241 : Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »o

17. Les méthodes
● Méthodes expertes
● ne font pas intervenir d'utilisateur
● pas spécialement expert en Ergonomie
● le cerveau du concepteur
● Méthodes participatives
● utilisateurs finaux des interfaces
● observer, questionner, analyser le comportement et
le discours des internautes

18. Les méthodes expertes
● Audit ergonomique,
Jacob Nielsen : 5 utilisateurs-expert : 80% des pb
● Réalisations de plans de site
● Réalisations de flux d'interaction
● Réalisations de zonings et maquettes

19. Les méthodes participatives
● Entretiens (Focus group)
recueil de données subjectives :
attitudes, opinions, satisfaction
→ conclusion sur le discours
● Questionnaires
● Test utilisateur (User testing)
recueil de données objectives :
→ conclusion sur le comportement
● Tri par cartes → architecture du site

20. Questionnaires
● NAU : Nielsen's Attribute of Usability
– 5 Q, échelle 7 points
● PUTQ : Purdue Usability Questionnaire
– 100 Q, 8 dimensions, échelle 7 points
Compatibilité Actions minimales
Cohérence Mémorisation
Flexibilité Limites perceptives
Facilité d'apprentissage Guidage
● WAMMI : Website Analysis and Measurement
Inventory
– 20 Q, 5 dimensions, échelle en 5 points

21. WAMMI
Website Analysis and Measurement Inventory
20 Affirmations, 5 dimensions, échelle en 5 points
● Attrait - Q : 1,6,16
● Contrôle - Q : 2, 7, 17, 19
● Efficacité - Q : 3, 8, 13
● Utilité - Q : 9, 11, 12, 14, 18
● Facilité d'apprentissage - Q : 4, 5, 10, 15, 20

22. Test utilisateur (User testing)
● Scénario : exécution de tâches représentatives des tâches
réelles
● Outils logiciels
● Mouchard électronique (monitoring) : enregistre tous
les événements dans des fichiers « log file ».
outils heatmap.pdf
● Video Log « the observer » : pilote un magnétoscope,
retour de contrôle écran couplé à une caméra qui filme le
visage et les expressions de l'utilisateur.
● Eye-Tracking : enregistre les mouvements des yeux.

23. Eye-tracking
● Zones de priorité d'un écran
● Différences individuelles Audit Lab

24. Trois types de lecture
selon le contexte d'utilisation, l'expertise de l'internaute
● Repérage (survol)
● Balayage (survol + synthèse)
● Lecture en profondeur (décortication, « mot à mot »)
J. Nielsen → grands principes pour l'écriture Web :
* concision : nous lisons 25 % plus lentement à l'écran.
* balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale »
79 % balaient les textes.
16% lisent mot à mot tout le contenu qui leur est présenté.
* morcellement des pages : les internautes n'utilisent pas systématiquement
l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement
des informations importantes en haut de la page.

25. Tri par cartes (card sorting)
● Architecture de l'information : Méthode privilégiée en
amont du cycle de conception
● Jeu : faire ranger des contenus afin de comprendre comment
les internautes opèrent des regroupements (modèles mentaux)
● 4 dimensions
● Liberté d'action : ouvert/fermé
● Support matériel : physique/informatisé
● Panel participants : cible/experts domaine
● Profondeur du tri : totalité du site/partiel

26. « Penser comme un utilisateur,
pas comme un expert »

28. Tri informatisé
Tri physique

29. Analyse des clusters
(regroupement)
Représentation graphique : dendogramme (arbre)

30. Limites du tri par cartes
● Conception théorique
● Processus bottom-up : on part des contenus pour
accèder aux représentations
● Processus top-down : les représentations guident la
recherche de contenu
● Contexte d'un site web : Architecture + choix
d'interface

31. Références
● Ergonomie Web, Amélie Boucher, Eyrolles 2009
http://www.ergonomie-sites-web.com/telechargements/index.php
●
Webergos : http://www-public.int-evry.fr/~milon/index.php
●
●
●
Vidéo conférence
● Tri par cartes – Etat de l'art