ergonomie des interfaces web
DESCRIPTION
Sensibilisation aux questions d'ergonomie et d’expérience utilisateur. Cette présentation sert d'ouverture pour un séminaire de 2 jours auprès des futurs ingénieurs informatique du Cs2i de NeversTRANSCRIPT
![Page 1: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/1.jpg)
L’ergonomie des interfaces
Licences Bac +3, Cs2i de Nevers
![Page 2: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/2.jpg)
C’est qui ?
Renaud Biemans
UX Designer
Clermont-Ferrand
![Page 3: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/3.jpg)
L’ergonomie
![Page 4: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/4.jpg)
L’ergonomieC’est quoi ?
![Page 5: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/5.jpg)
Adapter l’outil à l’utilisateur
Et non l’inverse
Définition selon Steve KrugFaire en sorte que ça marche bien et qu’une personne moyenne sans compétences ou expérience puisse l'utiliser sans être frustrée
![Page 6: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/6.jpg)
Bienou
Pas bien ?
![Page 7: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/7.jpg)
![Page 8: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/8.jpg)
![Page 9: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/9.jpg)
![Page 10: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/10.jpg)
![Page 11: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/11.jpg)
![Page 12: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/12.jpg)
![Page 13: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/13.jpg)
![Page 14: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/14.jpg)
![Page 15: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/15.jpg)
![Page 16: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/16.jpg)
![Page 17: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/17.jpg)
![Page 18: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/18.jpg)
![Page 19: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/19.jpg)
L’ergonomiePourquoi ?
![Page 20: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/20.jpg)
Utilisateur heureux
![Page 21: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/21.jpg)
Utilisateur heureuxProduit fructueux
![Page 22: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/22.jpg)
Une mauvaise expérience utilisateur peut faire échouer n’importe quel projet
![Page 23: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/23.jpg)
Mais aussi en assurer le succès!Demandez vous quel navigateur vous utilisez et pourquoi ?
![Page 24: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/24.jpg)
Les besoins de l’être humainD’après Maslow
![Page 25: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/25.jpg)
Les besoins de l’utilisateur
![Page 26: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/26.jpg)
Fonctionnel
![Page 27: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/27.jpg)
Mémorable
![Page 28: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/28.jpg)
L’ergonomieC’est pour qui ?
![Page 29: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/29.jpg)
![Page 30: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/30.jpg)
Chef de projet
![Page 31: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/31.jpg)
Graphiste
![Page 32: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/32.jpg)
Développeur
![Page 33: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/33.jpg)
Mais qui se soucie de l’utilisateur ?
![Page 34: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/34.jpg)
Il faut que tout le monde s’en soucieÀ commencer par vous
![Page 35: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/35.jpg)
Vous avez déjà la responsabilité des 2 premières couches de la pyramide. Vous êtes donc en première ligne.
![Page 36: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/36.jpg)
![Page 37: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/37.jpg)
Les 5 règles de
l’ergonome
![Page 38: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/38.jpg)
Une réponse approximative au bon problèmevaudra toujours mieux qu’une bonne réponse à un problème approximatif.
John Tukey
![Page 39: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/39.jpg)
Règle 1
Se concentrer sur le besoin de l’utilisateur
![Page 40: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/40.jpg)
![Page 41: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/41.jpg)
![Page 42: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/42.jpg)
Les mises à jour : Un problème de développeur que l’on impose trop souvent à l’utilisateur
![Page 43: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/43.jpg)
Règle 2
Surtout du bon-sens
![Page 44: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/44.jpg)
![Page 45: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/45.jpg)
![Page 46: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/46.jpg)
![Page 47: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/47.jpg)
Règle 3
Simplifier, Simplifier, Simplifier
![Page 48: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/48.jpg)
Règle 3
Simplifier, Simplifier, Simplifier
![Page 49: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/49.jpg)
![Page 50: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/50.jpg)
![Page 51: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/51.jpg)
![Page 52: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/52.jpg)
![Page 53: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/53.jpg)
Règle 4
Soyez humain
![Page 54: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/54.jpg)
Interface homme-machine
![Page 56: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/56.jpg)
Les mauvais exemples
![Page 57: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/57.jpg)
Les bons exemples
![Page 58: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/58.jpg)
![Page 59: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/59.jpg)
![Page 60: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/60.jpg)
La plupart des ordinateurs ont un indicateur de veille purement fonctionnel
![Page 61: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/61.jpg)
Chez Apple on utilise une veilleuse qui imite le rythme de la respiration humaine
![Page 62: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/62.jpg)
Règle 5
Se remettre en question
![Page 63: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/63.jpg)
« C'est le propre de l'homme de se tromper seul l'insensé persiste dans son erreur. »
Cicéron
![Page 64: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/64.jpg)
![Page 65: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/65.jpg)
![Page 66: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/66.jpg)
![Page 67: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/67.jpg)
![Page 68: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/68.jpg)
Produire
TesterApprendre
![Page 69: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/69.jpg)
![Page 70: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/70.jpg)
Les règles de
l’utilisateur
![Page 71: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/71.jpg)
Les règles de
l’utilisateur
La
![Page 72: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/72.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 73: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/73.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 74: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/74.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 75: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/75.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 76: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/76.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 77: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/77.jpg)
JE NE VEUX PAS
RÉFLÉCHIR!
![Page 78: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/78.jpg)
LA règle de l’utilisateur
Je ne veux pas réfléchir• Tout doit être facile
• Je ne lis que ce qui m’intéresse
• Je clique en me fiant à mon instinct
• Si c’est trop compliqué je ne l’utilise pas
![Page 79: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/79.jpg)
Ce que vous concevezEn pensant que l’utilisateur lira tout
![Page 80: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/80.jpg)
Ce que l’utilisateur voitavant de décider votre site l’intéresse
![Page 81: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/81.jpg)
De quoi parle ce site ?
![Page 82: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/82.jpg)
![Page 83: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/83.jpg)
![Page 84: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/84.jpg)
![Page 85: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/85.jpg)
![Page 86: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/86.jpg)
![Page 87: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/87.jpg)
![Page 88: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/88.jpg)
![Page 89: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/89.jpg)
![Page 90: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/90.jpg)
Ce qui se passe dans la tête de
l’utilisateur ?
![Page 91: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/91.jpg)
Réserve de bonne volonté
Résistance à l’agacement
READY ?
![Page 92: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/92.jpg)
GO !
![Page 93: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/93.jpg)
![Page 94: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/94.jpg)
Où sont les souris ?!
![Page 95: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/95.jpg)
Ah les voilà
![Page 96: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/96.jpg)
C’est quoi tout ça ? Je veux juste une belle
souris
![Page 97: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/97.jpg)
Peut être en dessous ?
![Page 98: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/98.jpg)
C’est même pas des souris !!!
![Page 99: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/99.jpg)
GAME OVER!Continuer sur un autre site ? Oui Non
![Page 100: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/100.jpg)
GO !
![Page 101: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/101.jpg)
![Page 102: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/102.jpg)
Vous savez tout !
![Page 103: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/103.jpg)
Les 5 règles de l’ergonome
1. Se concentrer sur l’utilisateur2. Faire preuve de bon sens3. Simplifier4. Rester humain5. Se remettre en question
![Page 104: Ergonomie des interfaces web](https://reader031.vdocuments.fr/reader031/viewer/2022020714/555df80ed8b42a3f618b4ca9/html5/thumbnails/104.jpg)
La règle de l’utilisateur
1. Je ne veux pas réfléchirTout doit être facile
Je ne lis que ce qui m’intéresse
Je clique en me fiant à mon instinct
Si c’est trop compliqué je ne l’utilise pas