Café numérique utilisabilité et accessibilité
-
Upload
cafe-numerique -
Category
Design
-
view
205 -
download
1
description
Transcript of Café numérique utilisabilité et accessibilité
![Page 1: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/1.jpg)
Usability / Ergonomie
Nicolas GOYER / Smals
![Page 2: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/2.jpg)
13/04/2023
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
![Page 3: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/3.jpg)
13/04/2023
3
Table of Contents
1 Définitions
2 Théorie
3 Questions
![Page 4: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/4.jpg)
13/04/2023
4
L’ergonomie rend les applications et les sites web plus faciles et plus simples à utiliser.
Définition de l’ergonomie
![Page 5: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/5.jpg)
13/04/2023
5
Définition de l’ergonomie
L’ergonomie c’est adapter un produit à ses utilisateurs
![Page 6: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/6.jpg)
13/04/2023
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.
![Page 7: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/7.jpg)
13/04/2023
Ergonomie et ergonomie
7
![Page 8: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/8.jpg)
13/04/2023
Ergonomie et ergonomie
8
![Page 9: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/9.jpg)
13/04/2023
9
Les composants de l’ergonomie
Efficacité
Efficience Satisfaction
![Page 10: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/10.jpg)
13/04/2023
Branche de l’ergonomie plus ciblée sur les handicapes cognitifs, sensoriels et moteurs
Définition de l’accessibilité
![Page 11: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/11.jpg)
13/04/2023
Définition de l’accessibilité
L’accessibilité s’intéresse également au condition d’accès a un site ou une application web.
![Page 12: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/12.jpg)
13/04/2023
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
![Page 13: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/13.jpg)
13/04/2023
Le contexte
13
![Page 14: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/14.jpg)
13/04/2023
Adopter le point de vu de l’utilisateur
Interface
Logique
Données
14
![Page 15: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/15.jpg)
13/04/2023
Adopter le point de vu de l’utilisateur
Interface
Magie
15
![Page 16: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/16.jpg)
13/04/2023
L’ergonomie dans un projet
Architecture de l’information / du site
Zoning – Design – Layout
Maquettage
Implémentation
Définition des fonctionnalités
Etc.
![Page 17: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/17.jpg)
13/04/2023
L’ergonomie : discipline transversale
Chef de projet
Graphistes
Analystes
Intégrateurs Etc.
![Page 18: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/18.jpg)
13/04/2023
18
Table of Contents
1 Définitions
2 Théorie
3 Questions
![Page 19: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/19.jpg)
13/04/2023
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
![Page 20: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/20.jpg)
13/04/2023
20
Autres heuristiques
• Heuristique de Bastin & Scapin
• Critères ergonomiques de Jean-François Nogier
• Critères ergonomiques d’Amélie Boucher
![Page 21: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/21.jpg)
13/04/2023
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
![Page 22: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/22.jpg)
13/04/2023
22
2. Correspondance entre le système et le monde réel
![Page 23: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/23.jpg)
13/04/2023
23
3. Contrôle et liberté de l’utilisateur
![Page 24: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/24.jpg)
13/04/2023
24
4. Cohérence et respect des standards
![Page 25: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/25.jpg)
13/04/2023
25
5. Prévention des erreurs
10 march10 march 200810/03/2008 ?
(dd/mm/yyyy)
![Page 26: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/26.jpg)
13/04/2023
26
6. Reconnaissance plutôt que rappel
![Page 27: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/27.jpg)
13/04/2023
27
7. Flexibilité et efficience d’utilisation
Ctrl
S+
Novice Expert
![Page 28: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/28.jpg)
13/04/2023
28
8. Design esthétique et minimaliste
![Page 29: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/29.jpg)
13/04/2023
29
9. Correction des erreurs
Last name
(dd/mm/yyyy)Birth date
City
Error in the formFirst name
(dd/mm/yyyy)Birth date
Last name
Bad date format
Smith
Brussels
10 march
John
Smith
10 march
First name John
City Brussels
![Page 30: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/30.jpg)
13/04/2023
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.).
![Page 31: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/31.jpg)
13/04/2023
31
Règles d’accessibilité
1. Perceptible2. Utilisable3. Compréhensible4. Robuste
![Page 32: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/32.jpg)
13/04/2023
32
1. Perceptible
Proposer des équivalents textuels
![Page 33: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/33.jpg)
13/04/2023
33
1. Perceptible
![Page 34: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/34.jpg)
13/04/2023
34
Rendre toutes les fonctionnalités accessibles au clavier.
2. Utilisable
![Page 35: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/35.jpg)
13/04/2023
35
2. Utilisable
Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu.
![Page 36: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/36.jpg)
13/04/2023
36
2. Utilisable
Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site.
![Page 37: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/37.jpg)
13/04/2023
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.
![Page 38: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/38.jpg)
13/04/2023
38
4. Robuste
Optimiser la compatibilité avec les différents navigateur actuels et futurs.
![Page 39: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/39.jpg)
13/04/2023
39
Table of Contents
1 Définitions
2 Théorie
3 Questions
![Page 40: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/40.jpg)
13/04/2023
Questions ?
Remarques ?
![Page 41: Café numérique utilisabilité et accessibilité](https://reader037.fdocuments.in/reader037/viewer/2022102701/558cb954d8b42af25c8b46a6/html5/thumbnails/41.jpg)
13/04/2023
Coordonnées
• [email protected]• [email protected]
• Twitter @usability_fr• Slideshare usability_fr
• Linkedin - http://www.linkedin.com/in/nickko