Usability / Ergonomie
Nicolas GOYER / Smals
11/09/2013
Smals
• Sites web
Portail de la sécurité sociale
Restructurations.be
AuTravail.be
Et bien d’autres encore
• Dév...
11/09/2013
3
Table of Contents
1 Définitions
2 Théorie
3 Questions
11/09/2013
4
L’ergonomie rend les applications et les sites
web plus faciles et plus simples à utiliser.
Définition de l’e...
11/09/2013
5
Définition de l’ergonomie
L’ergonomie c’est adapter un produit à ses
utilisateurs
11/09/2013
6
Définition de l’ergonomie
L’ergonomie c’est rendre tout produit comme
une paire de lunette : un produit de ha...
11/09/2013
Ergonomie et ergonomie
7
11/09/2013
Ergonomie et ergonomie
8
11/09/2013
9
Les composants de l’ergonomie
Efficacité
Efficience Satisfaction
11/09/2013
Branche de l’ergonomie plus ciblée sur les
handicapes cognitifs, sensoriels et moteurs
Définition de l’accessib...
11/09/2013
Définition de l’accessibilité
L’accessibilité s’intéresse également au
condition d’accès a un site ou une
appli...
11/09/2013
Définition de l’accessibilité
« Mettre le web et ses services à la disposition de tous
les individus, quels que...
11/09/2013
Le contexte
13
11/09/2013
Adopter le point de vu de l’utilisateur
Interface
Logique
Données
14
11/09/2013
Adopter le point de vu de l’utilisateur
Interface
Magie
15
11/09/2013
L’ergonomie dans un projet
Architecture de l’information / du site
Zoning – Design – Layout
Maquettage
Implémen...
11/09/2013
L’ergonomie : discipline transversale
11/09/2013
18
Table of Contents
1 Définitions
2 Théorie
3 Questions
11/09/2013
Heuristiques de Jakob Nielsen
1. Visibilité de l’état du système
2. Correspondance entre le système et le monde...
11/09/2013
20
Autres heuristiques
• Heuristique de Bastin & Scapin
• Critères ergonomiques de Jean-François Nogier
• Critè...
11/09/2013
21
1. Visibilité de l’état du système
First name
Birth date
Last name
John
Smith
10 / 03 / 2008
OK
First name
B...
11/09/2013
22
2. Correspondance entre le système et le monde réel
11/09/2013
23
3. Contrôle et liberté de l’utilisateur
11/09/2013
24
4. Cohérence et respect des standards
11/09/2013
25
5. Prévention des erreurs
10 march
10 march 2008
10/03/2008 ?
(dd/mm/yyyy)
11/09/2013
26
6. Reconnaissance plutôt que rappel
11/09/2013
27
7. Flexibilité et efficience d’utilisation
Ctrl S+
Novice Expert
11/09/2013
28
8. Design esthétique et minimaliste
11/09/2013
29
9. Correction des erreurs
Last name
(dd/mm/yyyy)Birth date
City
Error in the form
First name
(dd/mm/yyyy)Bir...
11/09/2013
30
10. Aide et documentation
Le système devrait fournir des aides et de la
documentation. Toutes les informatio...
11/09/2013
31
Règles d’accessibilité
1. Perceptible
2. Utilisable
3. Compréhensible
4. Robuste
11/09/2013
32
1. Perceptible
Proposer des équivalents textuels
11/09/2013
33
1. Perceptible
11/09/2013
34
Rendre toutes les fonctionnalités accessibles au clavier.
2. Utilisable
11/09/2013
35
2. Utilisable
Laisser à l'utilisateur suffisamment de temps pour lire
et utiliser le contenu.
11/09/2013
36
2. Utilisable
Fournir à l'utilisateur des éléments d'orientation pour
naviguer, trouver le contenu et se sit...
11/09/2013
37
3. Compréhensible
1st page left side menu 2nd page right side menu 3rd page left or right side menu
Faire en...
11/09/2013
38
4. Robuste
Optimiser la compatibilité avec les différents navigateur
actuels et futurs.
11/09/2013
39
Table of Contents
1 Définitions
2 Théorie
3 Questions
11/09/2013
Questions ?
Remarques ?
11/09/2013
Coordonnées
• Nicolas.GOYER@smals.be
• Nicolas_GOYER@usability.fr
• Twitter @usability_fr
• Slideshare usabilit...
Prochain SlideShare
Chargement dans…5
×

Présentation de l'ergonomie au Café Numérique

801 vues

Publié le

Présentation des bases de l'ergonomie lors d'un Café Numérique.

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
801
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Présentation de l'ergonomie au Café Numérique

  1. 1. Usability / Ergonomie Nicolas GOYER / Smals
  2. 2. 11/09/2013 Smals • Sites web Portail de la sécurité sociale Restructurations.be AuTravail.be Et bien d’autres encore • Développement d’applications eGov • 1600 collaborateurs en 2010 Parmi le top 10 des entreprises IT en Belgique
  3. 3. 11/09/2013 3 Table of Contents 1 Définitions 2 Théorie 3 Questions
  4. 4. 11/09/2013 4 L’ergonomie rend les applications et les sites web plus faciles et plus simples à utiliser. Définition de l’ergonomie
  5. 5. 11/09/2013 5 Définition de l’ergonomie L’ergonomie c’est adapter un produit à ses utilisateurs
  6. 6. 11/09/2013 6 Définition de l’ergonomie L’ergonomie c’est rendre tout produit comme une paire de lunette : un produit de haute technologie qui s’efface devant l’usage que l’on en fait.
  7. 7. 11/09/2013 Ergonomie et ergonomie 7
  8. 8. 11/09/2013 Ergonomie et ergonomie 8
  9. 9. 11/09/2013 9 Les composants de l’ergonomie Efficacité Efficience Satisfaction
  10. 10. 11/09/2013 Branche de l’ergonomie plus ciblée sur les handicapes cognitifs, sensoriels et moteurs Définition de l’accessibilité
  11. 11. 11/09/2013 Définition de l’accessibilité L’accessibilité s’intéresse également au condition d’accès a un site ou une application web.
  12. 12. 11/09/2013 Définition de l’accessibilité « Mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » - Tim Berners Lee
  13. 13. 11/09/2013 Le contexte 13
  14. 14. 11/09/2013 Adopter le point de vu de l’utilisateur Interface Logique Données 14
  15. 15. 11/09/2013 Adopter le point de vu de l’utilisateur Interface Magie 15
  16. 16. 11/09/2013 L’ergonomie dans un projet Architecture de l’information / du site Zoning – Design – Layout Maquettage Implémentation Définition des fonctionnalités Etc.
  17. 17. 11/09/2013 L’ergonomie : discipline transversale
  18. 18. 11/09/2013 18 Table of Contents 1 Définitions 2 Théorie 3 Questions
  19. 19. 11/09/2013 Heuristiques de Jakob Nielsen 1. Visibilité de l’état du système 2. Correspondance entre le système et le monde réel 3. Contrôle et liberté de l’utilisateur 4. Cohérence et respect des standards 5. Prévention des erreurs 6. Reconnaissance plutôt que rappel 7. Flexibilité et efficience d’utilisation 8. Design esthétique et minimaliste 9. Correction des erreurs 10. Aide et documentation
  20. 20. 11/09/2013 20 Autres heuristiques • Heuristique de Bastin & Scapin • Critères ergonomiques de Jean-François Nogier • Critères ergonomiques d’Amélie Boucher
  21. 21. 11/09/2013 21 1. Visibilité de l’état du système First name Birth date Last name John Smith 10 / 03 / 2008 OK First name Birth date Last name OK First name Birth date Last name John Smith 10 / 03 / 2008 OK Form sent successfully
  22. 22. 11/09/2013 22 2. Correspondance entre le système et le monde réel
  23. 23. 11/09/2013 23 3. Contrôle et liberté de l’utilisateur
  24. 24. 11/09/2013 24 4. Cohérence et respect des standards
  25. 25. 11/09/2013 25 5. Prévention des erreurs 10 march 10 march 2008 10/03/2008 ? (dd/mm/yyyy)
  26. 26. 11/09/2013 26 6. Reconnaissance plutôt que rappel
  27. 27. 11/09/2013 27 7. Flexibilité et efficience d’utilisation Ctrl S+ Novice Expert
  28. 28. 11/09/2013 28 8. Design esthétique et minimaliste
  29. 29. 11/09/2013 29 9. Correction des erreurs Last name (dd/mm/yyyy)Birth date City Error in the form First name (dd/mm/yyyy)Birth date Last name Bad date format Smith Brussels 10 march John Smith 10 march First name John City Brussels
  30. 30. 11/09/2013 30 10. Aide et documentation Le système devrait fournir des aides et de la documentation. Toutes les informations devraient être facile à chercher et être concentrées sur la tâche (par exemple, tutoriels, spécifications, agents intelligents, etc.).
  31. 31. 11/09/2013 31 Règles d’accessibilité 1. Perceptible 2. Utilisable 3. Compréhensible 4. Robuste
  32. 32. 11/09/2013 32 1. Perceptible Proposer des équivalents textuels
  33. 33. 11/09/2013 33 1. Perceptible
  34. 34. 11/09/2013 34 Rendre toutes les fonctionnalités accessibles au clavier. 2. Utilisable
  35. 35. 11/09/2013 35 2. Utilisable Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu.
  36. 36. 11/09/2013 36 2. Utilisable Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site.
  37. 37. 11/09/2013 37 3. Compréhensible 1st page left side menu 2nd page right side menu 3rd page left or right side menu Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.
  38. 38. 11/09/2013 38 4. Robuste Optimiser la compatibilité avec les différents navigateur actuels et futurs.
  39. 39. 11/09/2013 39 Table of Contents 1 Définitions 2 Théorie 3 Questions
  40. 40. 11/09/2013 Questions ? Remarques ?
  41. 41. 11/09/2013 Coordonnées • Nicolas.GOYER@smals.be • Nicolas_GOYER@usability.fr • Twitter @usability_fr • Slideshare usability_fr • Linkedin http://www.linkedin.com/in/nickko

×