SlideShare une entreprise Scribd logo
Ergonomie et Accessibilité sont dans un
 bâteau : comment ramer dans la même
              direction ?


     Gautier Barrère / Laurent Denis


               Atelier FLUPA
                                          1
Qui sommes-nous ?
• Gautier Barrère
   – Ergonome - Web
   – Chef de projet – Coordination Présence Internet
   – Membre du groupe de normalisation X35E « Ergonomie des
     logiciels » (AFNOR)
   – Membre du « France – Luxembourg UPA chapter » (www.flupa.eu)
• Laurent Denis
   –   Expert accessibilité
   –   Responsable formation et grands comptes Temesis
   –   Co-auteur RGAA
   –   Openweb



                                                                    2
Objectifs de l’atelier
• Ce sont vos objectifs : petit tour de table ?




                                                  3
Objectifs de l’atelier
• Comprendre :
   – la frontière entre « Accessibilité » et « Ergonomie »
   – toutes les belles choses qu’il nous reste avec ensemble


• Interagir :
   – Mises en situation



• Présenter :
   – Un exemple démarche qualité « ergonomie et accessibilité »
Atelier = Vive l’interaction
• Nos slides sont moches et peu travaillés ?
   – C’est fait exprès !


• L’important pour nous c’est d’apprendre ensemble
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »




                               6
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »




                               7
Accessibilité ? Point de vue d’un l’ergonome
Ergonomie ? Point de vue d’un expert accessibilité
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre synthèse « après »




                               10
Prenons le point de vue de l’expert accessibilité
Quelques exemples autour d’un cas précis
• Personne déficiente visuelle qui souhaite publier un blog
Produire….   des contenus…   Accessibles



ATAG            WCAG            UAAG

 CMS,          Contenus       Navigateurs,
éditeurs                          Aides
                               techniques
Prenons d’abord le back end
• Cette personne déficiente visuelle va d’abord être
  concernée par le back end

• Comment faire que le back-end soit accessible ?
• Comment produire un contenu accessible ?
Quelques exemples
Un back-end accessible ?

                           Editeur Dotclear
Un back-end qui peut produire de l’accessibilité ?


                            Editeur wysiwyg Edit-on Pro
Supporter les fonctionnalités d’accessibilité
                  Titres, listes…




                                    Alternatives textuelles
L’ergonome intervient également…
L’ergonome intervient également…
Inciter à utiliser les fonctionnalités d’accessibilité
Apporter une aide contextuelle
Accessible ? Ergonomique ?
Prenons ensuite le frond end
• Cette personne déficiente visuelle va ensuite être
  concernée par le frond end

• Comment faire pour que le site (partie publique) soit
  accessible ?
Prenons ensuite le frond end
• Un contenu :
   –   Perceptible,
   –   Compréhensible,
   –   Utilisable,
   –   Robuste.
Quelques exemples
Sur base de vos connaissances des guidelines
d’ergonomie et d’accessibilité… on parle de quoi ?
Définir un système de navigation cohérent
Proposer un breadcrumb
Proposer une recherche
Proposer des accès rapides
Exploiter la couleur
Proposer un contenu scannable
Attention : sans les yeux !
…mise en forme du contenu
…mise en forme du contenu
Go




Eviter les fenêtres…
         Up !
                       Up !
                                 Up !

      Popup !      Pop…

 Up !                     Up !     Up !
Prévenez-moi avant de me changer de contexte…
Plan de l’atelier
1. Nos définitions « avant »
2. Projet web
3. Notre approche « après »




                               39
« Guidelines ergo » vs « Guidelines accessibilité »



Guidage
Charge de travail
Contrôle explicite                                               ATAG
Adaptabilité
Gestion des erreurs                                           WCAG 2.0
Homogénéité / Cohérence
Signifiance des codes et dénominations
Compatibilité

                   Cela n’est pas la même chose néanmoins :
                   - il y a des correspondances
                   - c’est complémentaire
Accessibilité                                                                               Ergonomie appliquée

                               Perception non visuelle
                                                 Perception visuelle          Ecarts
Perceptible                                                                                            Visual perception
                       Perception visuelle      Contrastes                    Positionnements
                       dégradée                              Lisibilité         Formes

                   Limite de temps                             Mécanismes                Stratégie
Utilisable       Indépendance du                               d’orientation et aides    d’accès               Behavior
                 périphérique d’entrée                           Gestion des erreurs
                  Photosensibilité       Constance et                     Zones topiques
                                         prévisibilité des actions
Compréhensible                                                                    Structure
                                                                                  sémantique             Brain/Cognitive
                                     Niveau de langage
                               Abréviations      Signifiance

Robuste                   Conformité
                                                                              Effort                 Emotion/Declarative
                          technique
                                       Interface                          Satisfaction
                                       spécifique


                               Source : Eric Gateau
Ergonomie   Accessibilité
Notre approche « après »
• « Ergonomie » et « Accessibilité » : c’est pour le bien de
  l’utilisateur n’est-ce pas ?

• A votre avis, est-ce que ce que l’on vous a présenté est
  suffisant pour assurer un niveau de qualité optimal pour
  l’utilisateur ?




                                                               43
Notre approche « après »
• On ne vous a présenté que des guidelines concernant le
  produit fini…
La qualité pour l’utilisateur
• N’est pas qu’une question d’application de guidelines
  « orientés produits »

• Faire un produit de qualité pour l’utilisateur… c’est faire
  un produit adapté à :
La qualité pour l’utilisateur
• C’est surtout une question :
   – de démarche orientée utilisateur.
   – de guidelines orientés processus,


• « Certification du produit » versus « Certification du
  processus »
Certification du processus ?
• ReNo – Référentiel de Normalisation

• Focus sur l’utilisateur avec deux composantes clé :
   • ergonomie
   • accessibilité
Méthodologie QUAPITAL - HERMES
             Analyse                                         Réalisation
             Exemples de livrables :                         Exemple de livrable :
             - Rapport d’analyse                             - Rapport de réalisation
             - Cahier des charges de
             conception




                                                                                                   Bilan du
                                                                                                   projet

                                                                                        Mise en ligne
                                   Concept global
                                   Exemple de livrable
Scope et objectifs                 - Rapport de conception
 Exemples de livrables :
- Proposition de projet
- Manuel de projet
- Plan de projet                       Application des guidelines « orientés produits » ?
                                       Ok, ça on sait faire…                                                  48
Analyse des besoins utilisateurs                                   Réalisation du site
    2 Analyse des profils utilisateurs, analyse de                    Aspects techniques :
      la tâche, définition des objectifs de qualité                          7 Développements techniques

                                                                      Aspects graphiques :
                                                                             5 Design du layout global

                                                                             6 Maquettes graphiques détaillées




                                                                  7
                                                                             8
                 1                2         3         4       5         6

                                                                                                         Bilan du
                                                                                                         projet

Idée de projet                                                                           Mise en ligne
                                      Définition du concept
1 Proposition de projet
                                      3 Architecture de l’information

                                      4 Storyboarding – Maquettes fonctionnelles « Basse fidélité »


       Application des guidelines « orientés processus » !
                                                                                                                    49
Certification du processus ?
On a les livrables de base, que faire…

Définir :
1. Livrables intermédiaires,
2. Activités pour produire ces livrables,
3. Techniques (avec les utilisateurs) pour réaliser ces
   activités.

Et des métriques clairs (seuils) pour évaluer leur pertinence
Conclusion
• On limite souvent l’accessibilité à l’application des
  WCAG 2.0

• Tests utilisateurs en accessibilité ?




                                                          52

Contenu connexe

En vedette

Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Claire Bizingre
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
Renaud Biemans
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
Olivier Rovellotti
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
MC Casal
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
Genève Lab
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred Colantonio
J'ai besoin de com
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
Laurent Mottet
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
Rodolphe Finamore
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
IdnetInfo
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications webmadsgraphics
 
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Raphael De Robiano
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Relax In The Air
 
Les principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesignLes principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesign
UX REPUBLIC
 
Lean UX
Lean UX Lean UX
Lean UX
UX REPUBLIC
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
SilicomVallee
 
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'actionL'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
Fred Colantonio
 

En vedette (17)

Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred Colantonio
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications web
 
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Ergonomie d'un site
 
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
 
Les principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesignLes principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesign
 
Lean UX
Lean UX Lean UX
Lean UX
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
 
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'actionL'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
L'ergonomie d'un site web : pensez utilisateurs et facilitez-leur l'action
 

Similaire à Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?

AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !Agile Toulouse
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
ElodieDescharmes
 
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganiséeE2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
XP Day CH
 
Valtech - Mobile, Agile : Faire beau, vite et bien
Valtech - Mobile, Agile : Faire beau, vite et bienValtech - Mobile, Agile : Faire beau, vite et bien
Valtech - Mobile, Agile : Faire beau, vite et bien
Valtech
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
Cap'Com
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011Flupa
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodes
msk10
 
Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012
jessica_papiot
 
WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicswebxdn
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
Microsoft Technet France
 
Ingénierie agile : N’oubliez pas vos développeurs
Ingénierie agile : N’oubliez pas vos développeursIngénierie agile : N’oubliez pas vos développeurs
Ingénierie agile : N’oubliez pas vos développeursXavier NOPRE
 
Agile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agileAgile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agile
Yannick Ameur
 
Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]guest9879ad
 
Cas APHP - solution de mobilité avec Windows 8
Cas APHP - solution de mobilité avec Windows 8Cas APHP - solution de mobilité avec Windows 8
Cas APHP - solution de mobilité avec Windows 8
Microsoft Décideurs IT
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
Benjamin Hoguet
 
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Flupa
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
Jean Claude GROSJEAN
 
Bonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GEDBonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GED
Nuxeo
 
L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !reporter4change
 

Similaire à Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ? (20)

AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
 
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganiséeE2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
 
Valtech - Mobile, Agile : Faire beau, vite et bien
Valtech - Mobile, Agile : Faire beau, vite et bienValtech - Mobile, Agile : Faire beau, vite et bien
Valtech - Mobile, Agile : Faire beau, vite et bien
 
#3 etapes projet
#3 etapes projet#3 etapes projet
#3 etapes projet
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodes
 
Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012
 
WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clics
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Ingénierie agile : N’oubliez pas vos développeurs
Ingénierie agile : N’oubliez pas vos développeursIngénierie agile : N’oubliez pas vos développeurs
Ingénierie agile : N’oubliez pas vos développeurs
 
Agile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agileAgile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agile
 
Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]
 
Cas APHP - solution de mobilité avec Windows 8
Cas APHP - solution de mobilité avec Windows 8Cas APHP - solution de mobilité avec Windows 8
Cas APHP - solution de mobilité avec Windows 8
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
 
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
 
Bonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GEDBonnes pratiques pour un projet de GED
Bonnes pratiques pour un projet de GED
 
L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !
 

Plus de Flupa

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
Flupa
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
Flupa
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
Flupa
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
Flupa
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
Flupa
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
Flupa
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
Flupa
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
Flupa
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
Flupa
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
Flupa
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
Flupa
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
Flupa
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
Flupa
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
Flupa
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
Flupa
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
Flupa
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
Flupa
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
Flupa
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa
 

Plus de Flupa (20)

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
 

Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même direction ?

  • 1. Ergonomie et Accessibilité sont dans un bâteau : comment ramer dans la même direction ? Gautier Barrère / Laurent Denis Atelier FLUPA 1
  • 2. Qui sommes-nous ? • Gautier Barrère – Ergonome - Web – Chef de projet – Coordination Présence Internet – Membre du groupe de normalisation X35E « Ergonomie des logiciels » (AFNOR) – Membre du « France – Luxembourg UPA chapter » (www.flupa.eu) • Laurent Denis – Expert accessibilité – Responsable formation et grands comptes Temesis – Co-auteur RGAA – Openweb 2
  • 3. Objectifs de l’atelier • Ce sont vos objectifs : petit tour de table ? 3
  • 4. Objectifs de l’atelier • Comprendre : – la frontière entre « Accessibilité » et « Ergonomie » – toutes les belles choses qu’il nous reste avec ensemble • Interagir : – Mises en situation • Présenter : – Un exemple démarche qualité « ergonomie et accessibilité »
  • 5. Atelier = Vive l’interaction • Nos slides sont moches et peu travaillés ? – C’est fait exprès ! • L’important pour nous c’est d’apprendre ensemble
  • 6. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 6
  • 7. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 7
  • 8. Accessibilité ? Point de vue d’un l’ergonome
  • 9. Ergonomie ? Point de vue d’un expert accessibilité
  • 10. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre synthèse « après » 10
  • 11. Prenons le point de vue de l’expert accessibilité
  • 12. Quelques exemples autour d’un cas précis • Personne déficiente visuelle qui souhaite publier un blog
  • 13. Produire…. des contenus… Accessibles ATAG WCAG UAAG CMS, Contenus Navigateurs, éditeurs Aides techniques
  • 14. Prenons d’abord le back end • Cette personne déficiente visuelle va d’abord être concernée par le back end • Comment faire que le back-end soit accessible ? • Comment produire un contenu accessible ?
  • 16. Un back-end accessible ? Editeur Dotclear
  • 17. Un back-end qui peut produire de l’accessibilité ? Editeur wysiwyg Edit-on Pro
  • 18. Supporter les fonctionnalités d’accessibilité Titres, listes… Alternatives textuelles
  • 21. Inciter à utiliser les fonctionnalités d’accessibilité
  • 22. Apporter une aide contextuelle
  • 24. Prenons ensuite le frond end • Cette personne déficiente visuelle va ensuite être concernée par le frond end • Comment faire pour que le site (partie publique) soit accessible ?
  • 25. Prenons ensuite le frond end • Un contenu : – Perceptible, – Compréhensible, – Utilisable, – Robuste.
  • 27. Sur base de vos connaissances des guidelines d’ergonomie et d’accessibilité… on parle de quoi ?
  • 28. Définir un système de navigation cohérent
  • 33. Proposer un contenu scannable
  • 34. Attention : sans les yeux !
  • 35. …mise en forme du contenu
  • 36. …mise en forme du contenu
  • 37. Go Eviter les fenêtres… Up ! Up ! Up ! Popup ! Pop… Up ! Up ! Up !
  • 38. Prévenez-moi avant de me changer de contexte…
  • 39. Plan de l’atelier 1. Nos définitions « avant » 2. Projet web 3. Notre approche « après » 39
  • 40. « Guidelines ergo » vs « Guidelines accessibilité » Guidage Charge de travail Contrôle explicite ATAG Adaptabilité Gestion des erreurs WCAG 2.0 Homogénéité / Cohérence Signifiance des codes et dénominations Compatibilité Cela n’est pas la même chose néanmoins : - il y a des correspondances - c’est complémentaire
  • 41. Accessibilité Ergonomie appliquée Perception non visuelle Perception visuelle Ecarts Perceptible Visual perception Perception visuelle Contrastes Positionnements dégradée Lisibilité Formes Limite de temps Mécanismes Stratégie Utilisable Indépendance du d’orientation et aides d’accès Behavior périphérique d’entrée Gestion des erreurs Photosensibilité Constance et Zones topiques prévisibilité des actions Compréhensible Structure sémantique Brain/Cognitive Niveau de langage Abréviations Signifiance Robuste Conformité Effort Emotion/Declarative technique Interface Satisfaction spécifique Source : Eric Gateau
  • 42. Ergonomie Accessibilité
  • 43. Notre approche « après » • « Ergonomie » et « Accessibilité » : c’est pour le bien de l’utilisateur n’est-ce pas ? • A votre avis, est-ce que ce que l’on vous a présenté est suffisant pour assurer un niveau de qualité optimal pour l’utilisateur ? 43
  • 44. Notre approche « après » • On ne vous a présenté que des guidelines concernant le produit fini…
  • 45. La qualité pour l’utilisateur • N’est pas qu’une question d’application de guidelines « orientés produits » • Faire un produit de qualité pour l’utilisateur… c’est faire un produit adapté à :
  • 46. La qualité pour l’utilisateur • C’est surtout une question : – de démarche orientée utilisateur. – de guidelines orientés processus, • « Certification du produit » versus « Certification du processus »
  • 47. Certification du processus ? • ReNo – Référentiel de Normalisation • Focus sur l’utilisateur avec deux composantes clé : • ergonomie • accessibilité
  • 48. Méthodologie QUAPITAL - HERMES Analyse Réalisation Exemples de livrables : Exemple de livrable : - Rapport d’analyse - Rapport de réalisation - Cahier des charges de conception Bilan du projet Mise en ligne Concept global Exemple de livrable Scope et objectifs - Rapport de conception Exemples de livrables : - Proposition de projet - Manuel de projet - Plan de projet Application des guidelines « orientés produits » ? Ok, ça on sait faire… 48
  • 49. Analyse des besoins utilisateurs Réalisation du site 2 Analyse des profils utilisateurs, analyse de Aspects techniques : la tâche, définition des objectifs de qualité 7 Développements techniques Aspects graphiques : 5 Design du layout global 6 Maquettes graphiques détaillées 7 8 1 2 3 4 5 6 Bilan du projet Idée de projet Mise en ligne Définition du concept 1 Proposition de projet 3 Architecture de l’information 4 Storyboarding – Maquettes fonctionnelles « Basse fidélité » Application des guidelines « orientés processus » ! 49
  • 50.
  • 51. Certification du processus ? On a les livrables de base, que faire… Définir : 1. Livrables intermédiaires, 2. Activités pour produire ces livrables, 3. Techniques (avec les utilisateurs) pour réaliser ces activités. Et des métriques clairs (seuils) pour évaluer leur pertinence
  • 52. Conclusion • On limite souvent l’accessibilité à l’application des WCAG 2.0 • Tests utilisateurs en accessibilité ? 52