Slides de Nicolas Goyer pour le café numérique café numérique utilisabilité et accessibilité. Nicolas nous initie aux concepts d'utilisabilité.

1. Usability / Ergonomie
Nicolas GOYER / Smals

2. 13/11/2011
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. 13/11/2011
Table of Contents
1 Définitions
2 Théorie
3 Questions
3

4. 13/11/2011
Définition de l’ergonomie
L’ergonomie rend les applications et les sites
web plus faciles et plus simples à utiliser.
4

5. 13/11/2011
Définition de l’ergonomie
L’ergonomie c’est adapter un produit à ses
utilisateurs
5

6. 13/11/2011
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.
6

7. 13/11/2011
Ergonomie et ergonomie
7

8. 13/11/2011
Ergonomie et ergonomie
8

9. 13/11/2011
Les composants de l’ergonomie
Efficacité
Efficience Satisfaction
9

10. 13/11/2011
Définition de l’accessibilité
Branche de l’ergonomie plus ciblée sur les
handicapes cognitifs, sensoriels et moteurs

11. 13/11/2011
Définition de l’accessibilité
L’accessibilité s’intéresse également au
condition d’accès a un site ou une
application web.

12. 13/11/2011
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/2011
Le contexte
13

14. 13/11/2011
Adopter le point de vu de l’utilisateur
Interface
Logique
Données
14

15. 13/11/2011
Adopter le point de vu de l’utilisateur
Interface
Magie
15

16. 13/11/2011
L’ergonomie dans un projet
Définition des fonctionnalités
Architecture de l’information / du site
Zoning – Design – Layout
Maquettage
Implémentation
Etc.

17. 13/11/2011
L’ergonomie : discipline transversale

18. 13/11/2011
Table of Contents
1 Définitions
2 Théorie
3 Questions
18

19. 13/11/2011
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. 13/11/2011
Autres heuristiques
• Heuristique de Bastin & Scapin
• Critères ergonomiques de Jean-François Nogier
• Critères ergonomiques d’Amélie Boucher
20

21. 13/11/2011
1. Visibilité de l’état du système
First name John First name John
Last name Smith Last name Smith
Birth date 10 / 03 / 2008 Birth date 10 / 03 / 2008
OK OK
First name
Last name
Form sent successfully
Birth date
OK
21

22. 13/11/2011
2. Correspondance entre le système et le monde réel
22

23. 13/11/2011
3. Contrôle et liberté de l’utilisateur
23

24. 13/11/2011
4. Cohérence et respect des standards
24

25. 13/11/2011
5. Prévention des erreurs
(dd/mm/yyyy)
10 march
10 march 2008
10/03/2008 ?
25

26. 13/11/2011
6. Reconnaissance plutôt que rappel
26

27. 13/11/2011
7. Flexibilité et efficience d’utilisation
Novice Expert
Ctrl + S
27

28. 13/11/2011
8. Design esthétique et minimaliste
28

29. 13/11/2011
9. Correction des erreurs
Error in the form
First name John
First name John Last name Smith
Last name Smith City Brussels
Birth date 10 march (dd/mm/yyyy)
City Brussels
Birth date 10 march (dd/mm/yyyy) Bad date format
29

30. 13/11/2011
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.).
30

31. 13/11/2011
Règles d’accessibilité
1. Perceptible
2. Utilisable
3. Compréhensible
4. Robuste
31

32. 13/11/2011
1. Perceptible
Proposer des équivalents textuels
32

33. 13/11/2011
1. Perceptible
33

34. 13/11/2011
2. Utilisable
Rendre toutes les fonctionnalités accessibles au clavier.
34

35. 13/11/2011
2. Utilisable
Laisser à l'utilisateur suffisamment de temps pour lire
et utiliser le contenu.
35

36. 13/11/2011
2. Utilisable
Fournir à l'utilisateur des éléments d'orientation pour
naviguer, trouver le contenu et se situer dans le site.
36

37. 13/11/2011
3. Compréhensible
Faire en sorte que les pages apparaissent et fonctionnent de
manière prévisible.
1st page left side menu 2nd page right side menu 3rd page left or right side menu
37

38. 13/11/2011
4. Robuste
Optimiser la compatibilité avec les différents navigateur
actuels et futurs.
38

39. 13/11/2011
Table of Contents
1 Définitions
2 Théorie
3 Questions
39

40. 13/11/2011
Questions ?
Remarques ?

41. 13/11/2011
Coordonnées
• Nicolas.GOYER@smals.be
• Nicolas_GOYER@usability.fr
• Twitter @usability_fr
• Slideshare usability_fr
• Linkedin
http://www.linkedin.com/in/nickko