1. Ergonomie Web – interfaces tactiles
Ergonomie Web :
Optimiser l'ergonomie de ses
applications et sites mobiles
Ergonomie Web ­ Emmanuelle POULAIN 1

2. Sommaire
 L'Ergonomie web : généalogie définition et enjeux
................................................................ Page 4.
 Les fondements de l'ergonomie : comportement
cognitif, affordance, ...............................Page 11.
 Les interfaces tactiles : gestuelle et ergonomie
................................................................ Page 23.
 Les règles et critères ergonomique............ Page 34.
 L'audit Ergonomique des applications web, mise en
pratique................................................... Page 51
Ergonomie Web ­ Emmanuelle POULAIN 2

3. Sommaire (suite)
 Conception des interfaces web : comprendre
l'internaute, les personnas, l'utilisabilité,
responsive et web mobile,...................... Page 55
 La cohérence : navigation et contenu, méthode du
tri de cartes..............................................Page 69
 Pour aller plus loin : l'utilité des tests utilisateurs
................................................................ Page 76
 Les outils et références.............................. Page 81
Ergonomie Web ­ Emmanuelle POULAIN 3

4. DÉFINITION ET ENJEUX DE L'ERGONOMIE
WEB
Ergonomie Web ­ Emmanuelle POULAIN 4

5. Ergonomie : Définitions
”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 – 1950
Ergonomie Web ­ Emmanuelle POULAIN 5

6. Ergonomie : définitions
 L'ergonomie est l'utilisation de connaissances
scientifiques relatives à l'homme (psychologie,
physiologie, médecine) dans le but d'améliorer son
environnement de travail.
Ergonomie Web ­ Emmanuelle POULAIN 6

7. Ergonomie : Définitions
L'ergonomie se caractérise généralement selon deux
composantes :
 L'efficacité, consistant à adopter des solutions
appropriées d'utilisation d'un produit, au­delà du
bon sens du concepteur ;
 L'utilisabilité, marquant l'adéquation aux
capacités de l'utilisateur :
 CONFORT D'UTILISATION
 SECURITÉ
Ergonomie Web ­ Emmanuelle POULAIN 7

8. Généalogie
 L'ergonomie web arrive après la lignée de
disciplines tentant d'appliquer les principes de
bases de l'ergonomie sur différents types d'outils
Interfaces Ergonomie Ergonomie
Ergonomie Homme
Générale Informatique Web
Machine
Ergonomie Web ­ Emmanuelle POULAIN 8

9. Un site web ergonomique : utile,
utilisable
 On qualifie un site web ”Ergonomique” lorsqu'il
satisfait les critères d'utilité et d'utilisabilité.
UTILITÉ : Répondre à un besoin
Les internautes viennent pour faire quelque chose
UTILISABILITÉ : faciliter la satisfaction du besoin
On doit les aider à atteindre leurs objectifs
Ergonomie Web ­ Emmanuelle POULAIN 9

10. LES FONDEMENTS DE L'ERGONOMIE :
Comprendre l'internaute, l'affordance,
comportement cognitif,...
Ergonomie Web ­ Emmanuelle POULAIN 11

11. Les fondements de l'ergonomie :
comportement cognitif
 Les théories de psychologie distinguent trois types
de mémoires :

La mémoire sensorielle : stimulis

La mémoire à court terme, capable de
stocker un nombre restreint de mnèmes , c'est­à­
dire des motifs visuels ou sonores telle qu'un mot,
etc.) pendant plusieurs minutes.

La mémoire à long terme, capable de
stocker un nombre infini d'informations de manière
permanente.
Ergonomie Web ­ Emmanuelle POULAIN 12

13. Ergonomie : théorie de l'action
 Il en découle les éléments suivants :
 qu'une liste d'items doit de préférence comporter
moins de 7 éléments ;
 que l'usage de couleurs et d'une signalétique liant les
éléments d'une interface aident l'utilisateur à se
l'approprier ;
 que des messages courts facilitent leur mémorisation
 que l'état de l'interface doit représenter fidèlement
l'état du système. Cela signifie notamment que des
messages d'alertes appropriés doivent être mis en
oeuvre.
Ergonomie Web ­ Emmanuelle POULAIN 14

14. Comportement cognitif : théories de
Gestalt
 Théorie de Gestalt : la manière dont notre cerveau
analyse le monde environnant comme un
ensemble de formes
 Lois des théories de la Gestalt :
 Loi de proximité : proche = une seule entité.
 Loi de similarité : identique = même groupe.
Ergonomie Web ­ Emmanuelle POULAIN 15

15. Comprendre l'internaute : théories
de Gestalt
Ergonomie Web ­ Emmanuelle POULAIN 16

16. Comprendre l'internaute : théories
de Gestalt
Ergonomie Web ­ Emmanuelle POULAIN 17

17. Comprendre l'internaute : loi de Fitts
Application de la loi de Fitts :
Plus la distance est petite ou plus la cible est grande,
plus la cible (icône) est atteinte rapidement.
Ergonomie Web ­ Emmanuelle POULAIN 18

19. Comprendre l'internaute : loi de Fitts
Ergonomie Web ­ Emmanuelle POULAIN 20

20. Le CONCEPT D'AFFORDANCE
Optimiser l'affordance :
”vous pouvez me cliquer
!”
Les affordances sont les
possibilités d'action
suggérées par les
caractéristiques d'un
objet
Ergonomie Web ­ Emmanuelle POULAIN 21

21. LE CONCEPT D'AFFORDANCE
Ergonomie Web ­ Emmanuelle POULAIN 22

22. ERGONOMIE DES INTERFACES : LA
GESTUELLE TACTILE
Ergonomie Web ­ Emmanuelle POULAIN 23

23. Utilisabilité : prise en compte des
appareils
Différences entre les postes de télévision,
ordinateurs bureaux, pc portables, tablette,
smartphone, etc...
 Posture de l'utilisateur selon l'appareil,
 Méthode de saisie : télécommande, gestes, souris,
clavier, écran tactile, capteur, clavier
numérique, …
 Taille moyenne de l'écran : mur, bureau,
genoux, main ou plus petit encore...
Ergonomie Web ­ Emmanuelle POULAIN 24

24. Ergonomie Ecran tactile mobile
Ergonomie Web ­ Emmanuelle POULAIN 25

25. Ergonomie Ecran tactile
Ergonomie Web ­ Emmanuelle POULAIN 26

26. Ergonomie Ecran Tactile
Ergonomie Web ­ Emmanuelle POULAIN 27

27. L'interface tactile : la gestuelle
Ergonomie Web ­ Emmanuelle POULAIN 28

28. Gestuelle tactile : le simple touch
Ergonomie Web ­ Emmanuelle POULAIN 29

29. Gestuelle tactile : plusieurs doigts
Ergonomie Web ­ Emmanuelle POULAIN 30

30. Gestuelle tactile :
Ergonomie Web ­ Emmanuelle POULAIN 31

31. Gestuelle tactile
 Le ”single­point” : équivalent du pointeur de la
souris en tactile,
 Le ”multi­point” : plusieurs points séparés,
indépendants (plusieurs curseurs de souris).
Encore difficile à gérer par les applications.
 Le ”multi­touch single­point” : plusieurs points
reconnus formant une instruction (ex : ”pinch” a
deux doigts)
 Le ”multi­touch multi­point” : multi­touch pour
plusieurs fonctions.
Ergonomie Web ­ Emmanuelle POULAIN 32

32. Gestuelle tactile : multitouch
Ergonomie Web ­ Emmanuelle POULAIN 33

33. REGLES ET CRITÈRES ERGONOMIQUES
Ergonomie Web ­ Emmanuelle POULAIN 34

34. REGLES ET CRITERES
ERGONOMIQUES
Idées eronnées : qu'est qui a changé ?
 Les 3 clics,
 Le scroll,
 Les internautes lisent en F,
 L'ergonomie on verra à la fin,...
Ergonomie Web ­ Emmanuelle POULAIN 35

35. REGLES DE BASES POUR
OPTIMISER L'ERGONOMIE
1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide,
2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir,
3 – COHERENCE sur l'information 9 – RAPIDITE : trouver rapidement
l'information
4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à
l'internaute
5 – INFORMATION 11 – ACCESSIBILITÉ : facilité
6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE L'INTERNAUTE
symboles
Ergonomie Web ­ Emmanuelle POULAIN 36

36. REGLE 1 – L'ARCHITECTURE
Architecture de l'information : penser la meilleure
manière d'organiser le contenu.
Ergonomie Web ­ Emmanuelle POULAIN 37

37. REGLE 2 : Organisation visuelle
Ergonomie Web ­ Emmanuelle POULAIN 38

38. REGLE 3 : Cohérence
La cohérence exploite les apprentissages
inconscients – l'apprentissage interne :
 Repères, localisation (ex: menus),
 Appelations cohérentes,
 Formats de présentation,
 Intéractions cohérentes,...
Si le site se comporte de manière cohérente
(manipulations similaires sur les pages)
l'internaute prends confiance...
Ergonomie Web ­ Emmanuelle POULAIN 39

40. REGLE 5 : Information
L'ordinateur informe et prévient l'internaute
Ex : Feedback et Tagline
Ergonomie Web ­ Emmanuelle POULAIN 41

41. REGLE 6 : Compréhension
Bien choisir les mots et les symboles
 Utiliser le vocabulaire et les symboles à bon escient
Ergonomie Web ­ Emmanuelle POULAIN 42

42. REGLE 7 : Assistance
Aider et diriger l'internaute
 Rendre visible ce que l'internaute n'attends pas,
 Utiliser les affordances,
Ergonomie Web ­ Emmanuelle POULAIN 43

44. REGLE 9 : RAPIDITÉ
Utiliser la loi de FITTS
Prendre en compte le besoin de l'internaute d'un point
de vue fonctionnel
EFFICIENCE : faire gagner du temps aux
expérimentés
Ergonomie Web ­ Emmanuelle POULAIN 46

45. REGLE 10 : Liberté de l'internaute
LAISSER LE CHOIX
Ergonomie Web ­ Emmanuelle POULAIN 47

46. REGLE 11 : Accessibilité
Un site facile d'accès pour tous :
Visuel et facile
 Accessibilité physique : aggrandissement des
polices, son,...
 Accessibilité technologique ou compatibilité :
penser à la mise à jour...
Ergonomie Web ­ Emmanuelle POULAIN 48

47. REGLE 12 : SATISFACTION
pour conclure
Critère d'utilité,
Critère d'esthétique,
Critère de qualité,
Puissance et fiabilité technique
=
Ergonomie Web ­ Emmanuelle POULAIN 49

48. REGLES DE BASES POUR
OPTIMISER L'ERGONOMIE
1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide,
2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir,
3 – COHERENCE sur l'information 9 – RAPIDITE : trouver rapidement
l'information
4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à
l'internaute
5 – INFORMATION 11 – ACCESSIBILITÉ : facilité
6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE L'INTERNAUTE
symboles
Ergonomie Web ­ Emmanuelle POULAIN 50

49. AUDIT D'APPLICATION WEB :
Utilité, utilisabilité, cohérence, lisibilité, …
Mise en pratique.
Ergonomie Web ­ Emmanuelle POULAIN 51

50. L'AUDIT ERGONOMIQUE
1.Utilité : test utilisateurs
2.Repérer les défauts interpages
3.Repérer les défauts intratpages
Repères : les règles d'ergonomie comme guide de
travail
Ergonomie Web ­ Emmanuelle POULAIN 52

51. AUDIT : répartition des règles
Première passe Seconde passe
Traduction de l'utilité générale Contenu des autres pages dans
du site l'ordre d'importance
Architecture de l'information,
navigation, structuration du
dialogue, enchaînements,
interactions
Pages incontournables
Thèmes incontournables
Ergonomie Web ­ Emmanuelle POULAIN 53

52. AUDIT : les outils
 Règles Ergonomiques,
 Logiciels et outils techniques,
 Prendre des notes,
 Faire des captures d'écran
 Tester la compatibilité technique
 Evaluer l'accessibilité visuelle
 Evaluer la forme générale,
 Puis hierarchiser ses observations...
Ergonomie Web ­ Emmanuelle POULAIN 54

53. LA CONCEPTION WEB :
Concevoir pour l'être humain,
Les Personas
Ergonomie Web ­ Emmanuelle POULAIN 55

54. Concevoir pour l'être humain
 L'être humain recherche l'émotion,
 L'être humain a besoin d'humaniser.
 Le cerveau doit interprêter le visuel ”beau” : ex le
nombre d'or.
 Méthode d'engagement par l'émotion : ”surprise”,
”humour”, ”personnalité”,...
Pas de formules, juste des principes de psychologie
adapté aux personnes ”ciblées”.
Ergonomie Web ­ Emmanuelle POULAIN 56

55. Définir l'internaute : les personas
Une personne donnée dans un contexte précis.
 Des Personnes,
 Des Objectifs,
 Des Contextes d'utilisation
Ergonomie Web ­ Emmanuelle POULAIN 57

56. Définir l'internaute : les personas
Ergonomie Web ­ Emmanuelle POULAIN 58

57. Définir l'internaute : les personas
Persona primaire : type de visiteur le plus fréquent
Personas secondaires : second niveau de profil
utilisateurs
Personas tertiaires : profils annexes
Ante­personas : profil à ne pas satisfaire
Tous les personas ont droit à la parole, sous
réserve de ne pas contredire le besoin du
”persona primaire”
Ergonomie Web ­ Emmanuelle POULAIN 59

58. Définir l'internaute : les Personas
 INFORMATION SOCIODEMOGRAPHIQUES;
 RELATION A LA MARQUE, AUX
CONCURRENTS,
 HABITUDES, ENVIES,
 OBJECTIFS, MISSIONS SUR LE SITE
Ergonomie Web ­ Emmanuelle POULAIN 60

59. CONCEPTION WEB : Contenu,
Analyse concurrentielle
 Analyse concurrentielle : voir ce qui ce fait pour
s'ouvrir à de nouvelles présentations
 Objectifs :
 S'inspirer des bonnes idées,
 Repérer les conventions de présentations et de
fonctionnement,
 Repérer les conventions terminologiques
Ergonomie Web ­ Emmanuelle POULAIN 61

60. PENSER SON SITE :
Reprendre les règles
 Source 1 : les objectifs et comportements utilisateurs
 Source 2 : les représentations mentales
 Source 3 : regarder ailleurs
Ergonomie Web ­ Emmanuelle POULAIN 62

63. Zoning mobile
Ergonomie Web ­ Emmanuelle POULAIN 65

64. PROCESSUS DE CONCEPTION
Ergonomie Web ­ Emmanuelle POULAIN 66

65. RESPONSIVE WEB DESIGN
ADAPTABILITÉ : créer un site qui s'adaptera à toutes
les tailles et résolutions des écrans
INGREDIENTS
1 – Une grille de mise en page flexible,
2 – Des images et des médias flexibles,
3 – Les média queries, un module de la spécification
CSS3
Ergonomie Web ­ Emmanuelle POULAIN 67

66. S'ADAPTER AU CONTENU DU
MOBILE
 Privilégier le contenu aux liens
 Rebondir et explorer
 Retour en arrière
 Un ancrage solide
 Rester clair et organisé
 Organiser l'expérience mobile : langage du toucher
Ergonomie Web ­ Emmanuelle POULAIN 68

67. COHERENCE ET NAVIGATION :
Méthode du ”tri de cartes”
Ergonomie Web ­ Emmanuelle POULAIN 69

68. Méthodologie : TRI DE CARTES
OBJECTIF : structurer de manière optimale
l'organisation d'un site web pour ses utilisateurs
finaux
ARCHITECTURE DE L'INFORMATION
Pour mener un tri :
Avoir énuméré l'ensemble des contenus à
soumettre aux participants,
Ces mots permettront de naviguer à l'intérieur des
rubriques : architecture du site.
Ergonomie Web ­ Emmanuelle POULAIN 70

69. Tri de cartes
 1ère étape immersion
Ergonomie Web ­ Emmanuelle POULAIN 71

70. Tri de cartes
 2ème étape : validation et précision
Ergonomie Web ­ Emmanuelle POULAIN 72

71. Tri de cartes
 3ème étape : Groupement
Ergonomie Web ­ Emmanuelle POULAIN 73

72. Tri de cartes
 4ème étape : nommage
Ergonomie Web ­ Emmanuelle POULAIN 74

73. Tri de cartes : les limites
 Important pour le rubriquage mais ne teste pas la
navigation de l'utilisateur final. Différent.
 Différent du contexte du site web
Méthode utile et importante mais uniquement pour
obtenir la base et indice de l'architecture.
Pour la valider : test utilisateur
Ergonomie Web ­ Emmanuelle POULAIN 75

74. Pour aller plus loin :
L'utilité des tests utilisateurs
Ergonomie Web ­ Emmanuelle POULAIN 76

75. TESTS UTILISATEURS
Bien les choisirs : utiliser les personas.
●
●Plus ils jouent le jeu : mieux c'est... Bien choisir.
●Seuls les laboratoires auront le nombre de
testeurs suffisants...
PARAMETRES
Homogénéité de la cible,
Variabilité du plan de test,
Complexité de l'interface testée.
Ergonomie Web ­ Emmanuelle POULAIN 77

76. IMPACT DES TESTS
Ergonomie Web ­ Emmanuelle POULAIN 78

77. Méthodes Tests utilisateurs
 Prototype papier :
 Maquette en fonction de l'action du testeur,
 Avant réalisation de la charte : permet de valider
avant la finalisation des concepts
 Prototype semi­fonctionnel :
 A l'écran : simulation d'un site qui marche.
 Proche de la situation réelle
Ergonomie Web ­ Emmanuelle POULAIN 79

78. Tests Utilisateurs
Prototypage papier et semi­fonctionnel
=
Méthodes de conception et validation
Test sur site finalisé : En amont.
Ergonomie Web ­ Emmanuelle POULAIN 80

79. Les outils
 Spencil : maquettage,
 Colorzilla pour Firefox,
 Eenox.net,
 Clickdensity.com,
 Snook.ca, : colourcheck,
 Secure.supergonomie.com : tests utilisateurs,
...
Ergonomie Web ­ Emmanuelle POULAIN 81

80. Références et pour aller plus loin
 Blog Ergophile : analyse de l'ergonomie web et
mobile
 Ergonomie web (3ème édition Amélie Boucher),
 Mobile First (Luke Wroblewski),
 Responsive web design (Ethan Marcotte),
 Touch gesture référence guide (Craig Villamor,
Dan Willis, and Luke Wroblewski),
 Design Emotionnel web (Aaron Walter),
Ergonomie Web ­ Emmanuelle POULAIN 82