SlideShare a Scribd company logo
1 of 23
Déjeuner Numérique
La conception pour tous -
Inclusion numérique
Design System
Akemi Tazaki
Qui suis-je?
❖ Conceptrice d’expérience utilisateur des
produits et services numériques
❖ Passionné depuis 18 ans dans la création
des services numériques sur trois
continents
©Business Insider©Wikipedia
https://en.wikipedia.org/wiki/Bill_Verplank
Jargons UX UI IxD UCD
❖ UI Interface Utilisateur (anglais User
Interface)
❖ IxD Design d’Interaction (anglais
Interaction Design)
❖ UX Expérience Utilisateur (anglais User
Experience)
❖ UCD Conception Centré sur Utilisateur
(anglais User-Centered Design) La
méthode de travail
http://www.bug-administratif.com/jargon/jargon.html
http://www.bug-administratif.com/jargon/jargon.html
http://comment-faire.modernisation.gouv.fr/tool/creer-des-personas/
Ashleigh
24 ans
4 principes d’accessibilité numériques
1. Perceptible
2. Utilisable
3. Compréhensible
4. Robuste
Les outils d’édition sont des logiciels et des services que les « auteurs » (développeurs web, concepteurs,
rédacteurs…) utilisent pour produire du contenu web. Par exemple : des éditeurs HTML, des gestionnaires de contenu
(CMS), et des sites web qui permettent aux utilisateurs d’ajouter du contenu, tels que des blogues et des sites de
réseau social. Les documents ATAG expliquent comment :
Les outils d’édition sont des logiciels et des services que les « auteurs
» (développeurs web, concepteurs, rédacteurs…) utilisent pour
produire du contenu web. Par exemple : des éditeurs HTML, des
gestionnaires de contenu (CMS), et des sites web qui permettent aux
utilisateurs d’ajouter du contenu, tels que des blogues et des sites de
réseau social. Les documents ATAG expliquent comment :
< 80 caractères
> 80 caractères
Page d’atterrissage Page Sport Page Divertissement
Ashleigh Ron
Les canaux d’interaction avec les personnes
Paypal:
Je suis Agent Virtuel Paypal. Pour
commencer, laissez-moi vous poser
simplement une question.
Comme je suis toujours en apprentissage,
si je n’arrive pas vous assister je vous
dirigerai vers les autres ressources pour
vous assister
Client:
Je me suis fait arnaquer
Paypal:
Génial!
Les 5 biais cognitifs
❖ Biais des donnés non représentatifs
❖ Biais par association des mots
❖ Biais résultant de l’automatisation
❖ Biais par une interaction abusive
envers un assistant virtuel
❖ Biais de confirmation
Inclusive Design

More Related Content

Similar to Inclusive Design

Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0iafactory
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Immacon
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Benoit Drouillat
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Technology
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #DesignVirginie Boullé
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHMAnne-Marie Pinna-Dery
 
Star d'UX bordeaux #2 - la tribU(X)ne libre
Star d'UX bordeaux #2 - la tribU(X)ne libreStar d'UX bordeaux #2 - la tribU(X)ne libre
Star d'UX bordeaux #2 - la tribU(X)ne libreUX Republic Bordeaux
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...designers interactifs
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsErgonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsLaurence Vagner
 
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)Use Age
 
Stage User Interface Designer
Stage User Interface DesignerStage User Interface Designer
Stage User Interface DesignerNovius
 
Flupa UX Days 2018 | Anthony Adam
Flupa UX Days 2018 | Anthony AdamFlupa UX Days 2018 | Anthony Adam
Flupa UX Days 2018 | Anthony AdamFlupa
 
Star d'ux bordeaux #2 la trib-ux-ne libre
Star d'ux bordeaux #2   la trib-ux-ne libreStar d'ux bordeaux #2   la trib-ux-ne libre
Star d'ux bordeaux #2 la trib-ux-ne libreAnne PEDRO
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif
 
Portfolio Emilie Monette - Mars 2023
Portfolio Emilie Monette - Mars 2023 Portfolio Emilie Monette - Mars 2023
Portfolio Emilie Monette - Mars 2023 Émilie Monette
 
L’UX DESIGN AU SERVICE DE L’ETHIQUE & DE VOTRE TRANSFORMATION
L’UX DESIGN AU SERVICE  DE L’ETHIQUE &  DE VOTRE TRANSFORMATIONL’UX DESIGN AU SERVICE  DE L’ETHIQUE &  DE VOTRE TRANSFORMATION
L’UX DESIGN AU SERVICE DE L’ETHIQUE & DE VOTRE TRANSFORMATIONNadège Bide
 
Faire d'UX sur son site web - Cap'Com 2015
Faire d'UX sur son site web - Cap'Com 2015Faire d'UX sur son site web - Cap'Com 2015
Faire d'UX sur son site web - Cap'Com 2015Caroline Bedaux
 

Similar to Inclusive Design (20)

Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Star d'UX bordeaux #2 - la tribU(X)ne libre
Star d'UX bordeaux #2 - la tribU(X)ne libreStar d'UX bordeaux #2 - la tribU(X)ne libre
Star d'UX bordeaux #2 - la tribU(X)ne libre
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsErgonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
 
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
 
Stage User Interface Designer
Stage User Interface DesignerStage User Interface Designer
Stage User Interface Designer
 
Flupa UX Days 2018 | Anthony Adam
Flupa UX Days 2018 | Anthony AdamFlupa UX Days 2018 | Anthony Adam
Flupa UX Days 2018 | Anthony Adam
 
Star d'ux bordeaux #2 la trib-ux-ne libre
Star d'ux bordeaux #2   la trib-ux-ne libreStar d'ux bordeaux #2   la trib-ux-ne libre
Star d'ux bordeaux #2 la trib-ux-ne libre
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliers
 
Portfolio Emilie Monette - Mars 2023
Portfolio Emilie Monette - Mars 2023 Portfolio Emilie Monette - Mars 2023
Portfolio Emilie Monette - Mars 2023
 
What is ux ?
What is ux ?What is ux ?
What is ux ?
 
L’UX DESIGN AU SERVICE DE L’ETHIQUE & DE VOTRE TRANSFORMATION
L’UX DESIGN AU SERVICE  DE L’ETHIQUE &  DE VOTRE TRANSFORMATIONL’UX DESIGN AU SERVICE  DE L’ETHIQUE &  DE VOTRE TRANSFORMATION
L’UX DESIGN AU SERVICE DE L’ETHIQUE & DE VOTRE TRANSFORMATION
 
Faire d'UX sur son site web - Cap'Com 2015
Faire d'UX sur son site web - Cap'Com 2015Faire d'UX sur son site web - Cap'Com 2015
Faire d'UX sur son site web - Cap'Com 2015
 

Inclusive Design

  • 1. Déjeuner Numérique La conception pour tous - Inclusion numérique Design System Akemi Tazaki
  • 2. Qui suis-je? ❖ Conceptrice d’expérience utilisateur des produits et services numériques ❖ Passionné depuis 18 ans dans la création des services numériques sur trois continents
  • 4. Jargons UX UI IxD UCD ❖ UI Interface Utilisateur (anglais User Interface) ❖ IxD Design d’Interaction (anglais Interaction Design) ❖ UX Expérience Utilisateur (anglais User Experience) ❖ UCD Conception Centré sur Utilisateur (anglais User-Centered Design) La méthode de travail http://www.bug-administratif.com/jargon/jargon.html
  • 6.
  • 7.
  • 10. 4 principes d’accessibilité numériques 1. Perceptible 2. Utilisable 3. Compréhensible 4. Robuste
  • 11.
  • 12.
  • 13. Les outils d’édition sont des logiciels et des services que les « auteurs » (développeurs web, concepteurs, rédacteurs…) utilisent pour produire du contenu web. Par exemple : des éditeurs HTML, des gestionnaires de contenu (CMS), et des sites web qui permettent aux utilisateurs d’ajouter du contenu, tels que des blogues et des sites de réseau social. Les documents ATAG expliquent comment : Les outils d’édition sont des logiciels et des services que les « auteurs » (développeurs web, concepteurs, rédacteurs…) utilisent pour produire du contenu web. Par exemple : des éditeurs HTML, des gestionnaires de contenu (CMS), et des sites web qui permettent aux utilisateurs d’ajouter du contenu, tels que des blogues et des sites de réseau social. Les documents ATAG expliquent comment : < 80 caractères > 80 caractères
  • 14.
  • 15. Page d’atterrissage Page Sport Page Divertissement
  • 16.
  • 17.
  • 19. Les canaux d’interaction avec les personnes
  • 20.
  • 21. Paypal: Je suis Agent Virtuel Paypal. Pour commencer, laissez-moi vous poser simplement une question. Comme je suis toujours en apprentissage, si je n’arrive pas vous assister je vous dirigerai vers les autres ressources pour vous assister Client: Je me suis fait arnaquer Paypal: Génial!
  • 22. Les 5 biais cognitifs ❖ Biais des donnés non représentatifs ❖ Biais par association des mots ❖ Biais résultant de l’automatisation ❖ Biais par une interaction abusive envers un assistant virtuel ❖ Biais de confirmation

Editor's Notes

  1. Bonjour. Cela fait 3 ans et demi que je suis en France, je suis japonaise, parfois je fais des fautes en français, je ne maîtrise pas parfaitement votre bel langage de Molière. Mon métier est de rendre les services numériques agréables et utiles depuis 18 ans, j’ai fait cela sur plusieurs continents. Aux États-Unis, Canada, Japon, Allemagne, Italie. Je suis contente d’être en France et d’être ici aujourd’hui avec vous pour parler de ma passion. Je vais vous parler trois sujets importants dans la conception numérique Arrêter de parler d’un français moyen car cela n’existe pas. Utiliser les personae pour créer un service pour tous qui permet d’engager les citoyens avec le gouvernement. Construire le guide de la bonne pratique unique entre les différents services publiques. Le guide crée une relation simple de confiance entre les citoyens et l’état. Intégrer la diversité de profils dans les équipes pour éviter le biais cognitif de cadrage, c’est d’autant plus important à l’ère de l’intelligence artificielle. Mon métier est la conception d’expérience utilisateur, d’où cela vient comme métier?
  2. La conception d’expérience est dérivé de la discipline de la conception d’interaction. Alors c’est quoi la conception d’interaction? Le terme a été inventé dans les années 80 par Bill Mogridgge, designer industriel anglais et Bill Verplank, concepteur et chercheur à l’Université de Stanford aux États-Unis. C’est l’ergonomie moderne appliquée dans le monde mixte d’objet industriel et des écrans numériques. Comme ce premier ordinateur portatif que Bill a crée ici. C’est l’art de faciliter l’interaction entre les personnes à travers les produits et services. Par exemple la photo ou une personne coure devant un grand écran. C’est une conception faite pour un magasin de sport. La question du concepteur n’était pas comment je vais concevoir du meilleur étagère pour montrer les chaussures du sport? Mais la question était comment pourrait-on aider les acheteurs potentiels à déterminer la paire de chaussure qui colle à leur façon de courir? L’expérience utilisateur désigne les "Réponses et perceptions d'une personne qui résultent de l'utilisation ou la prévision d'utilisation d'un produit, service ou système ” L'expérience utilisateur inclut toutes les réactions physiques (comportements et les usages …) et psychologiques (émotions, croyances, préférences, …) qui se produisent avant, pendant et après l’utilisation.
  3. Dans le métier il y a souvent des débats dans la définition qu’on donne derrière les termes. C’est comme toutes disciplines, il y a des différentes écoles de pensée. UX UI IxD UCD etc. Design interface un terme plus en vogue au 20e siècle pour désigner l’ergonomie digitale Le design d’interaction est l’ergonomie incluant l’ensemble de produit industriel ayant une interface numérique Design d’expérience utilisateur désigne un corps de métier travaillant ensemble vers la création d’un service ou produit avec une approche centrée sur les utilisateurs. Designer d’expérience est aussi large que de dire « je suis cinéaste » Ce qui est important à retenir C’est une domaine pluri-disciplinaire qui partage une approche centrée sur les utilisateurs à travers les méthodes et techniques de conception qui permettent d’obtenir la satisfaction des personnes face au service.
  4. C’est pour cela que le travail de l’expérience utilisateur se symbolise comme un iceberg. Ce que vous voyez, donc la surface, est le résultat de tout un travail de la priorisation des fonctionnalités, la structuration des informations et la conception graphique. Tout cela est défini par un cadrage de l’intention de service envers les utilisateurs autrement dit la stratégie. Dans cet iceberg, UX designer travaille avec les autres métiers comme les développeurs techniques, les rédacteurs. Comme dans la création d’un cinéma, il faut plusieurs corps de métiers pour créer un portail web. Images: https://www.4mation.com.au/ux-designing-with-a-user-centred-approach/ https://www.piqsels.com/
  5. Comme il y a beaucoup des métiers différents qui y travaillent, l’approche demande des réunions de travail pour co-construire. Les ateliers de travail permettent de s’aligner la vision de l’équipe sur qui sont ces utilisateurs. Et puis, priorisés les fonctionnalités du portail selon les connaissances sur les utilisateurs. Pour qui nous créons ce portail web? C’est quoi les comportements et attitudes des utilisateurs, c’est quoi leur besoins. Qu’est ce qu’on peut faire pour soulager leurs frustrations? Quels sont les leviers permettant aux utilisateurs de mieux vivre? Le travail de priorisation se base sur les profils comportementaux des utilisateurs
  6. L’outil de persona permet justement de ne pas créer le service pour un français moyen. Un français moyen résultant de moyenne statistique n’existe pas. Quel résultat peut-on attendre d’un service qui est fait pour une personne moyenne qui en réalité n’existe pas? On crée des portrait des utilisateurs en interviewant et observant les utilisateurs par une étude contextuelle sur les comportements des utilisateurs La synthèse de l’étude se formalise en un outil qui s’appelle « persona » Le persona représente un archétype comportemental d’un profil utilisateur.
  7. Voice un exemple de persona. Il s’appelle Christophe, 24 ans célibataire jeune chimiste. La fiche décrit les comportements de Christophe face à l’usage de transport commun. Pour comprendre Christophe, il faut synthétiser son histoire personnelle, le comportement face au mode de recherche d’information sur comment il se déplace d’un point A à B, ses objectifs dans son usage de transport et sa perception du service existant. Les personae sont un outil essentiel de cadrage de la direction de produits et services. Sans cet outil, nous allons prendre des décisions pour soi-même et non pour les autres par notre biais cognitif. Un portail web à caractère publique a besoins des personae de tous les bords contrairement au secteur privé qui ne s’adresse qu’à une partie de population. Quels sont vos persona pour vos portails? Pour comment faire, vous trouverez une fiche explicative sur le site de la modernisation de gouvernement http://comment-faire.modernisation.gouv.fr/tool/creer-des-personas/
  8. Je vous présente un des personae créent par le gouvernement des royaumes unis Voici Ashleigh Un persona en situation d’handicap visuel. Due à sa maladie génétique, elle a perdu une partie de sa vision lorsqu’elle était petite. Elle a 24 ans et elle travaille 3 fois par semaine en tant que secrétaire dans un organisme caritatif. Du fait de sa situation, elle préfère utiliser le smartphone ou tablette plutôt que l’ordinateur portatif. Car les applications développées pour les smartphones s’adaptent en affichage plus lisible automatiquement. Mais malheureusement au bureau, sur son ordinateur tous les contenus qu’elle accède ne sont pas fait pour s’apprêter en affichage accessible. Depuis 2009, par le décret de l’union européenne les pays membres sont censés appliqués les règles d’accessibilité sur leur portail web. Pour renforcer, l’importance de ce sujet, les députés de l’union européenne ont approuvé l’acte européen sur l’accessibilité cette année. L’application de ces règles vont permettre d’améliorer la vie quotidienne des personnes en situation d’ handicap comme Ashleigh. Image Credits: https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles Pour comprendre Ashleigh: Molly explique comment elle utilise les produits numériques https://www.youtube.com/watch?v=TiP7aantnvE
  9. Les critères d’accessibilité sont définis selon les 4 principes. Principe 1 : Perceptible L'information et l'interface numérique doivent être proposés à l'utilisateur de façon à ce qu’il puisse les percevoir par tous ses sens. Principe 2 : Utilisable Les composants de l'interface utilisateur et de navigation doivent être utilisables, c’est-à-dire ergonomiquement adapté aux utilisateurs. Principe 3 : Compréhensible Les informations et l’utilisation de l'interface utilisateur doivent être compréhensibles. Principe 4 : Robuste Le contenu doit être suffisamment robuste pour être interprété de manière fiable par un grand nombre de navigateur de portail, y compris les technologies d’assistance comme le lecteur vocal pour les non-voyants ou le lecteur en braille. Je vais vous montrer aujourd’hui à titre illustratif un exemple d’accessibilité, car la liste est longue. Vous pouvez consultez cette liste sur le site de SI de état. Le RÉFÉRENTIEL GÉNÉRAL D'ACCESSIBILITÉ POUR LES ADMINISTRATIONS (RGAA) VERSION 3 2017 pour mieux guider cet effort d’inclusion. https://www.numerique.gouv.fr/publications/rgaa-accessibilite/ Références d’accessibilité: https://www.youtube.com/watch?v=20SHvU2PKsM https://www.modernisation.gouv.fr/home/accessibilite-numerique-la-france-rajeunit-son-referentiel-et-lenrichit-dun-label https://www.w3.org/WAI/standards-guidelines/fr Référentiel Général Accessibilité Pour Tous http://references.modernisation.gouv.fr/referentiel/ Web Content Accessibility Guide latest version https://www.w3.org/TR/WCAG21/ Checklist niveau WCAG 2.2 http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html
  10. En général, les concepteurs sans handicap utilise les couleurs pour communiquer les erreurs de champs de formulaire. Souvent c’est le rouge. Combien d’erreur est perçu par un daltonien à votre avis? La réponse est un seul Références https://www.youtube.com/watch?v=20SHvU2PKsM https://www.modernisation.gouv.fr/home/accessibilite-numerique-la-france-rajeunit-son-referentiel-et-lenrichit-dun-label https://www.w3.org/WAI/standards-guidelines/fr Référentiel Général Accessibilité Pour Tous http://references.modernisation.gouv.fr/referentiel/ Checklit niveau WCAG 2.2 http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html
  11. Le mode d’affichage accessible enlève les couleurs pour aller plus loin dans la lisibilité de l’écran, l’interface devient en noir et blanc inversé. Dans le mode d’affichage sans couleur, les personnes ne verront que le dernier champ comme erreur et non les 3 premiers champs. Certaines personnes anti-accessibilité disent que oh l’accessibilité est moche cela n’engage pas les utilisateurs. Alors que ce n’est pas vrai lorsque le portail est bien conçu par les professionnels. Références https://www.youtube.com/watch?v=20SHvU2PKsM https://www.modernisation.gouv.fr/home/accessibilite-numerique-la-france-rajeunit-son-referentiel-et-lenrichit-dun-label https://www.w3.org/WAI/standards-guidelines/fr Référentiel Général Accessibilité Pour Tous http://references.modernisation.gouv.fr/referentiel/ Checklit niveau WCAG 2.2 http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html
  12. Il n’y a pas que le contraste pour la lecture. La conception typographique compte beaucoup dans la lecture sans parler du style écrite qui doit être compréhensible. Par exemple l’espacement entre les lignes, la longueur de la phrase visible influence la facilité de lecture. Les bons concepteurs d’expérience utilisateur ont une base solide de la conception graphique pour créer les meilleures solutions visuelles pour de meilleure perceptibilité. Certaines mauvaises langues disent que les sites web conçus aux conformités d’accessibilité au plus haut niveau ne sont pas engageant car il manque de l’esthétique. Or ce n’est pas le cas. Références https://www.youtube.com/watch?v=20SHvU2PKsM https://www.modernisation.gouv.fr/home/accessibilite-numerique-la-france-rajeunit-son-referentiel-et-lenrichit-dun-label https://www.w3.org/WAI/standards-guidelines/fr Référentiel Général Accessibilité Pour Tous http://references.modernisation.gouv.fr/referentiel/ Checklit niveau WCAG 2.2 http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html
  13. Le portail de BBC fournis systématiquement le sous-titrage dans les vidéos et beaucoup de contenus sont en audio-description (https://www.bbc.co.uk/iplayer/categories/audio-described/featured). Et ce n’est pas « moche ». Pour que ce portail soit accessible, les règles de la conception doit s’appliquer à toutes les pages de portail. Une application des règles dans l’ensemble du site crée une cohérence de navigation. Cette cohérence crée une relation de confiance à l’usage du portail.
  14. On peut percevoir ici sur le portail de BBC que les styles se répètent. Cela permet aux utilisateurs de ne pas ré-apprendre la structure de la page et la façon de naviguer les contenus. Pour qu’un portail soit navigable et utilisable, il faut une cohérence de language visuelle et de structuration d’information dans toutes les pages du portail. L’outil qu’on se sert pour maintenir cette cohérence en conception s’appelle Le Design System
  15. Le Design System se compose d’un ensemble de guides de bonnes pratiques. Sur écran vous voyez la page d’accueil du design system du gouvernement de royaumes unis. Cet ensemble de guides permettent d’unifier et d’harmoniser l’expérience utilisateur Un guide du style graphique pour que cela soit perceptible Un guide de style éditoriale et rédactionnel pour que cela soit compréhensible Un guide de style ergonomique pour que cela soit utilisable Par exemple si l’utilisateur est dans un parcours d’enregistrement, ce parcours se présentent avec un style similaire représentant l’ensemble des étapes, puis indiqué l’étape que l’utilisateur est entrain de remplir.
  16. Le plus important c’est que ce guide est distribuée avec les codes de programmation pour que cela soit robuste. Ces codes intègres le guide du style visuel, et donc son usage permet de maintenir au moins la cohérence des composants d’interface numérique. Le bénéfice de cet approche est que vous n’avez pas besoins de réinventer les composants d’interface comme les formulaires et le gabarit d’une page de portail. Dans le cas où chaque service engage des développeurs différents, le design system devient un instrument crucial pour maintenir un niveau de qualité d’accessibilité et baisser la charge de développement. Vous économisez le coût de développement tout en permettant d’améliorer l’accessibilité. Mais par ailleurs, cet approche demande une gestion de gouvernance stricte et discipliné de développement. Il faut une équipe dédiée pour la définition et documentation de ces guides qui évoluent selon le rythme de la refonte des portails web. Tous les services participent à l’évolution et la création de ce guide mais il y aura une comité de designer d’expérience utilisateur et développeur qui jouent le rôle de prescripteur et d’approbateur. Cette comité doit vérifier la conformité à la bonne pratique du déploiement de design system défini en amont. Une nouvelle demande d’un nouveau composant avant d’être intégré dans les guides du design system, cette comité d’expert évalue la qualité de la conception. Cette comité a pour mission d’aider tous les services à harmoniser l’expérience utilisateur des portails de service publique. En ce moment, le design system le plus complet avec accessibilité est réalisé par les fournisseurs de système d’opération, Apple IOS, Google Android Material Design et Microsoft Windows. Les développeurs sur iOS doivent respecter ces guides. Certains maisons d’édition du logiciel se sont vus leur logiciel refusé sur Apple Store pour manque de qualité prescrit par Apple. Ce n’est pas pour rien que les personnes en situation d’handicap préfère les apps mobile développés pour iOS ou Android. Majoritairement, ces apps mobiles s’adaptent d’office pour les lecteurs d’accessibilités.
  17. La conformité d’accessibilité Web offre le minimum aux personae qui ont des problèmes de lectures et manipulation en offrant la navigation par le clavier. Mais qu’est-ce qu’on fait de l’accessibilité lorsqu’on ne connaît pas bien comment manipuler l’ordinateur ou le téléphone mobile portatif? Que doit-on faire pour une inclusion numérique plus large? Voyons Ron, l’autre persona Ron a 82 an, il est en situation d’ handicap avec les conditions multiples Il commence à perdre son ouïe, il s’est fait opéré de sa cataracte récemment. Son arthrose lui fait mal et il est difficile de se déplacer vers la mairie pour les procédures. Ses mains ne bougent pas très bien, il est réticent à utiliser son lecteur digital portatif. Il n’est pas très à l’aise sur cet outil qui n’est pas vraiment conçu pour lui, trop compliquée….Ses petits enfants habitent loin et depuis la mort de sa femme il est timide à les contacter. Ron, son handicap est l’usage du lecteur avant même d’accéder aux contenus. Image Credits: https://accessibility.blog.gov.uk/2019/02/11/using-persona-profiles-to-test-accessibility/ https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles
  18. Les personnes en situation d’handicap ont des conditions différentes les uns et les autres. Pawel 24 ans avec le syndrome d’asperger, une forme d’autisme, lui prendra beaucoup de temps à décoder chaque ligne et chaque mot de toute la page avant de cliquer. Il préfère l’app mobile qui est souvent plus court grace à une ligne éditoriale sélective. Saleem, 22 ans, malentendant, il utilise surtout video chat pour pouvoir communiquer avec les signes, il aime sa tablette. Il n’est pas sur de sa capacité rédactionnelle en anglais. Il est frustré que les sous-titrages ne décrit pas le type de musique ou la parole de la musique. Claudia, 54 ans, diabète avec du glucoma, grace à l’agrandisseur de l’affichage, elle arrive à lire. Elle préfère nettement parler au téléphone que de recevoir les communications écrites. Les formulaires en ligne ne sont pas adaptés pour être utilisé avec l’agrandisseur de l’affichage. Simone, 41 ans, dyslexique, ne sent pas certaine de son compétence en écrit et lecture. Elle préfère entendre le texte que de le lire. Pareil, les formulaires sont un défi pour elle. Christophe, 53 ans, il a la rheumatologie, cela lui fait mal à l’articulation, d’utiliser les souris. Utiliser la navigation par clavier est beaucoup plus simple pour lui. La commande vocale lui permet de moins souffrir. Donc en dehors des critères d’accessibilité numérique qui ont tendance à n’améliorer l’aspect visuel des contenus, il faut travailler à offrir le service par des canaux différents.
  19. Le web n’est pas la réponse à tout pour engager ces citoyens. Pas un français moyen. Pas un seul canal d’ interaction pour tout le monde. Pour chaque type de contenu, il faut évaluer avec les personae, les meilleures moyens de rentrer en contact avec eux. Le service numérique publique doit se faire avec un écosystème de canal adapté. Si nous adoptons réellement l’approche d’inclusion numérique, nous devrions offrir aussi une assistance de traduction au guichet virtuel pour que tous les citoyens se sentent en sécurité. Traduction en langage de signe ou de braille sont essentiels.
  20. La situation d’handicap peut arriver à tout le monde. Le problème de perception peut arriver parce que tout simplement vous êtes distrait en étant au volant. Il y a des moments de votre vie, vous casser vos mains. Vous entendez mal parce que vous êtes dans un lieu bruyant. Une situation d’handicap peut arriver à tout le monde, cette situation peut être temporaire ou contextuelle ou permanent. Lorsqu’on considère la réalité de notre vie, en fait la création d’un service numérique pour tous est pour tout le monde pas que les personnes en situation d’handicap permanent. Comme l’effort est grand, on parle de réponses automatisés par les moyens de Chatbot, l’assistant virtuel qui permet de décongestionner le guichet de la préfecture. Référence: Microsoft la conception pour tous (Inclusive Design Toolkit)
  21. Voilà un exemple d’assistant virtuel d’un service financier. La réponse « Génial! » quel ressenti cela engendre chez les clients ? Dans la conception pour tous, nous aurions aussi à prendre les cas de l’automatisation. Car un mauvais assistant virtuel va avoir un impact dans l’adoption de ce canal. Quels sont les mesures que vous allez prendre en compte pour créer la confiance des citoyens vis-à-vis de votre service numérique utilisant un assistant virtuel?
  22. Il faut éviter tous les spectres des biais cognitifs qui tendent vers une exclusion numérique par l’intelligence artificielle. Voici, les 5 biais de risques qu’il faut avoir en tête pour mieux appréhender le déploiement de l’automatisation par l’intelligence artificielle 1. le bias des données Les données utilisés ne sont pas représentatifs. L’exemple bien connu est dans le domaine de la reconnaissance visuelle où la machine confonde le gorille avec les personnes qui ont la peau foncé. 2. le biais par association Les données utilisées intègre les stéréotypes qui ne sont pas fait pour l’air moderne. Par exemple, le mot pilote est associé au portrait d’un homme souvent dans tous les données numériques, textes ou images. Donc par association, la logique d’interprétation de texte est qu’un pilote est un homme. Voulez-vous vraiment perpétuer cette discrimination par sexe ? 3. le biais par le mécanisme d’automatisation Par exemple, vous allez automatiser la retouche photographique des portrait de femmes dans les magazines. Cette retouche de photo rend la peau plus blanche et la taille plus fine. Vous créez une norme sociale par défaut où la peau plus blanche et la taille plus fine est la beauté féminine. Vous voyez quel genre de portrait vous idéalisez pour les jeunes filles? Le filtre de modération automatique des réseaux sociaux, si on instaure que tout corps nu est pornographique, nous pourrions jamais publier le tableau de courbet L’origine du monde. Est-ce que l’art est de nu est systématiquement pornographique? 4. le biais d’interaction Il y a des personnes qui abusent l’assistant virtuel en lui apprenant par exemple des propos racistes juste pour s’amuser. Par le jeux de pass-parole, on enseigne à l’intelligence artificielle que les propos offensifs ne sont pas offensifs mais normaux qui peuvent être répétés. Comment peut-on contre-carrer l’effet de mauvais apprentissage de la machine? 5. le biais de confirmation Le moteur de recommandations simpliste vous poussent les items les plus populaires ou les items similaires que vous avez aimé avant. Sur le site de shopping en ligne, cela avantage qu’un seul producteur comme les gens continuent à acheter que les items les plus populaires. Sur le portail de réseau social, cela crée un effet de renforcer son préjudice, par exemple en ne recevant que les informations embellissant la génocide dans un contexte historique loufoque.
  23. Comment éviter tous ces biais qui sont nuisibles pour la démocratie et la création du service numérique sans exclusion automatique? L’approche de conception inclusive vous offre un outil simple qui peut être appliqué dès demain. Concevoir avec les personnes en situation d’handicap. Intégrer des profils divers dans votre équipe, femmes, hommes, agées ou jeunes, des personnes des origines et d’ethnie différent. Tester votre conception avant, pendant après la création de service numérique continuellement pour comprendre vos utilisateurs, vos citoyens. Je voudrais que vous retenez trois points dans ce que je viens de présenter. Ces 3 points sont les 3 points que je répète depuis 18 ans dans ma mission pour créer de meilleures services numériques Arrêter de parler le français moyen car cela n’existe pas. Utiliser les personae pour créer un service numérique inclusif. Construire le guide de la bonne pratique unique entre les différents services publiques. Le guide crée une expérience harmonieuse et cohérente de service en service. Ce guide vous permettra de créer une relation simple de confiance avec les citoyens. Intégrer la diversité de profils dans les équipes pour éviter les biais cognitifs, c’est efficace et faisable sans installer une nouvelle technologie.