Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
LE WEB ET
LES TROUBLES COGNITIFS
FLUPA • Paris • 9 novembre 2017
World Usability Day
Damien Senger
UX designer • accessibility advocate
hiwelo.co • @iamhiwelo
Raccoon Studio Fairphone
LE WEB ET
LES TROUBLES COGNITIFS
Les troubles cognitifs
en bref.
Un domaine trop vaste 

pour être traité en intégralité
Les troubles cognitifs regroupe 

les soucis liés aux aires suivants :
attention • fonctions exécutives •
connaissances • ...
En résumé, c’est un domaine vaste.



déclin cognitif lié à l’âge • aphasie •
handicap mental • troubles de l’attention •
...
Tellement vaste, 

que vous ne pouvez pas assurer

l’accessibilité parfaite de tou•te•s
L’idée sous-jacente :

le design inclusif.
Le design inclusif est

une grille de lecture et d’analyse

pour mieux comprendre les
besoins de nos utilisateur•rice•s.
Permet de comprendre que
l’accessibilité est utile à tou•te•s :


un trouble à l’utilisation peut être

permanent • tempor...
Adapter son design 

aux handicaps et troubles permanents,

c’est agir pour tou•te•s.
Le design inclusif peut 

être articulé autour de 5 pôles.
Un pôle autour de la vision.
Cécité
Infection
oculaire
Distraction

visuelle
Icônes Microsoft
Un pôle autour du toucher.
Amputation
Immobilisation

temporaire
Activité

parallèle
Icônes Microsoft
Un pôle autour de l’ouïe.
Surdité
Infection
auriculaire
Environnement

bruyant
Icônes Microsoft
Un pôle autour de la parole.
Non verbaux
Extinction

de voix
Accent ou

non natif
Icônes Microsoft
Un pôle autour de la compréhension.
Troubles 

envahissants

du développement
Maîtrise partielle

de la langue
Contexte

s...
La question des troubles cognitifs

est présente dans ces 5 pôles.
Par exemple, pour certain•e•s autistes :

visuel sensibilités lumineuses

toucher dyspraxie 

ouïe sensibilités auditives
...
Et donc, que peut faire

le web dans tout ça ?
Pour nous aider,

le W3C s’est emparé de la question :

Cognitive Accessibility Focus Group
“There is a huge number of cognitive
disabilities and variations of them. 

If we attempt an analysis of all the
possibili...
Je vous l’ai dis, il n’y a pas de panacée :

ce sujet est trop vaste pour cela.
Dès lors,

je vais me focaliser sur 3 éléments :

autisme • tda/h • troubles dys*
Le W3C a effectué des tests
utilisateurs autour de 

10 aires cognitives
Autisme TDAH Dyslexie
Mémoire
Mémoire épisodique

parfois affectée
Mémoire de travail

parfois affectée
Mémoire immédiate
...
En pratique,
ça donne quoi ?
Objectif principal :
s’assurer de la compréhension 

des contenus par tou·te·s
Utiliser un langage clair

et structuré
Évitez les figures de style

et autres idiotismes
Utilisez des images et visuels

pour aider à la compréhension
Essayez de conserver

des grilles consistantes
Le souligné, l’italique 

et l’écriture en capitales sont des
freins à la compréhension.
Mettez en place des systèmes

d’aide à la complétion
Automatisez autant que possible

pour ne demander que l’essentiel
Évitez les tâches répétitives

ou demandant un effort de
mémorisation
Prévoyez des zones d’interactions

permettant l’erreur et l’imprécision
Apprenez à divertir

sans créer de distraction
Réservez les fortes animations aux moments d’attente
Murat Mutlu
Utilisez les animations lors des chargements ou tâches longues
Hanna Jung
Mais n’animez pas en permanence un objet à proximité de contenus
Drew Endly
Le genre de situation à éviter
Cette vidéo, pourquoi ?
Texte qui change sans prévenir & vidéo : le combo gagnant 👍
Un design créatif et animé qui fonctionne avec des troubles cognitifs
Et du côté de la 

recherche utilisateur ?
Testez, testez et testez encore.
Offrez l’interface 

la plus simple et utilisable possible
Une formulaire d’inscription presque parfait
Automatisez dès que possible.

Simplifiez la vie de vos utilisateurs.
S’il vous plait, battez-vous contre cette peste moderne.
Retirer les contraintes technologiques
des mains de l’utilisateur, 

c’est aussi le travail du designer.
Testez, testez et testez encore…

avec des personnes concernées
En guerilla testing:
les tests en situation de stress
En guerilla testing:

les tests en environnement chargé
Les bonnes pratiques,
en bref.
Rendez vos interfaces simples 

et compréhensibles par tou•te•s
1.
Mettez en place des repères
temporels pour assister la navigation
2.
Essayez d’estimer et d’annoncer
l’effort nécessaire pour une tâche
3.
N’affichez pas de notification
n’importe quand dans votre interface
4.
Travaillez vos textes et contenus :
hiérarchie, structure et vocabulaire
5.
Automatisez tout ce qui peut l’être
6.
Testez, testez et testez
7.
Quelques ressources
pratiques.
Les posters accessibilité du gouvernement britannique
Le Working Draft du groupe de travail W3C sur les troubles cognitifs
W3C WAI : Stories of Web users
Merci beaucoup ! "

Dank u wel! #
@iamhiwelo
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD Paris 2017_Damien Senger
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD Paris 2017_Damien Senger
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD Paris 2017_Damien Senger
Prochain SlideShare
Chargement dans…5
×

Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD Paris 2017_Damien Senger

529 vues

Publié le

Quand on parle d'accessibilité Web, on pense généralement lecteurs d’écran, problématiques motrices et contraste des couleurs. Seulement, l’accessibilité ne s’arrête pas là et pendant longtemps la question des troubles cognitifs a été laissé à la marge.

Autisme, troubles de l’attention, troubles dys*, troubles évolutifs, … : il existe aujourd’hui un grand nombre de personnes invisibles pour lesquelles la navigation web peut parfois devenir un combat.

À travers un focus sur les troubles du développement, voyons ensemble comment améliorer l’expérience numérique de tou·te·s avec nos applications et sites web.

Publié dans : Design
  • Soyez le premier à commenter

Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD Paris 2017_Damien Senger

  1. 1. LE WEB ET LES TROUBLES COGNITIFS FLUPA • Paris • 9 novembre 2017 World Usability Day
  2. 2. Damien Senger UX designer • accessibility advocate hiwelo.co • @iamhiwelo Raccoon Studio Fairphone
  3. 3. LE WEB ET LES TROUBLES COGNITIFS
  4. 4. Les troubles cognitifs en bref.
  5. 5. Un domaine trop vaste 
 pour être traité en intégralité
  6. 6. Les troubles cognitifs regroupe 
 les soucis liés aux aires suivants : attention • fonctions exécutives • connaissances • langage • lecture • mémoire • perception • raisonnement
  7. 7. En résumé, c’est un domaine vaste.
 
 déclin cognitif lié à l’âge • aphasie • handicap mental • troubles de l’attention • autismes • troubles dys* • troubles de la communication verbale
  8. 8. Tellement vaste, 
 que vous ne pouvez pas assurer
 l’accessibilité parfaite de tou•te•s
  9. 9. L’idée sous-jacente :
 le design inclusif.
  10. 10. Le design inclusif est
 une grille de lecture et d’analyse
 pour mieux comprendre les besoins de nos utilisateur•rice•s.
  11. 11. Permet de comprendre que l’accessibilité est utile à tou•te•s : 
 un trouble à l’utilisation peut être
 permanent • temporaire • situationnel
  12. 12. Adapter son design 
 aux handicaps et troubles permanents,
 c’est agir pour tou•te•s.
  13. 13. Le design inclusif peut 
 être articulé autour de 5 pôles.
  14. 14. Un pôle autour de la vision. Cécité Infection oculaire Distraction
 visuelle Icônes Microsoft
  15. 15. Un pôle autour du toucher. Amputation Immobilisation
 temporaire Activité
 parallèle Icônes Microsoft
  16. 16. Un pôle autour de l’ouïe. Surdité Infection auriculaire Environnement
 bruyant Icônes Microsoft
  17. 17. Un pôle autour de la parole. Non verbaux Extinction
 de voix Accent ou
 non natif Icônes Microsoft
  18. 18. Un pôle autour de la compréhension. Troubles 
 envahissants
 du développement Maîtrise partielle
 de la langue Contexte
 stressant Icônes Microsoft
  19. 19. La question des troubles cognitifs
 est présente dans ces 5 pôles.
  20. 20. Par exemple, pour certain•e•s autistes :
 visuel sensibilités lumineuses
 toucher dyspraxie 
 ouïe sensibilités auditives
 parole déficit dans les interactions sociales
 compréhension compréhension de normes sociales
  21. 21. Et donc, que peut faire
 le web dans tout ça ?
  22. 22. Pour nous aider,
 le W3C s’est emparé de la question :
 Cognitive Accessibility Focus Group
  23. 23. “There is a huge number of cognitive disabilities and variations of them. 
 If we attempt an analysis of all the possibilities, the job will be too big, and nothing will be achieved. Cognitive a11y task force
  24. 24. Je vous l’ai dis, il n’y a pas de panacée :
 ce sujet est trop vaste pour cela.
  25. 25. Dès lors,
 je vais me focaliser sur 3 éléments :
 autisme • tda/h • troubles dys*
  26. 26. Le W3C a effectué des tests utilisateurs autour de 
 10 aires cognitives
  27. 27. Autisme TDAH Dyslexie Mémoire Mémoire épisodique
 parfois affectée Mémoire de travail
 parfois affectée Mémoire immédiate
 parfois affectée Exécution Affecté Parfois affecté Organisation affectée Raisonnement Difficulté de sérialisation
 (séquences d’événements p.e.) Gestion du temps
 généralement affecté / Attention Difficultés avec 
 l’attention soutenue Affecté Attention sélective 
 parfois affectée Langage Affecté / Audition et morphosyntaxe
 parfois affectée Compréhension du figuré Affecté / / Lecture Parfois affecté / Affecté Autres perceptions Souvent très affecté Vitesse de traitements donnés visuelles diminuées Vision, audition et moteur
 parfois affectés Connaissances Affecté / / Comportement Affecté / Certaines normes sociales
 parfois affectées
  28. 28. En pratique, ça donne quoi ?
  29. 29. Objectif principal : s’assurer de la compréhension 
 des contenus par tou·te·s
  30. 30. Utiliser un langage clair
 et structuré
  31. 31. Évitez les figures de style
 et autres idiotismes
  32. 32. Utilisez des images et visuels
 pour aider à la compréhension
  33. 33. Essayez de conserver
 des grilles consistantes
  34. 34. Le souligné, l’italique 
 et l’écriture en capitales sont des freins à la compréhension.
  35. 35. Mettez en place des systèmes
 d’aide à la complétion
  36. 36. Automatisez autant que possible
 pour ne demander que l’essentiel
  37. 37. Évitez les tâches répétitives
 ou demandant un effort de mémorisation
  38. 38. Prévoyez des zones d’interactions
 permettant l’erreur et l’imprécision
  39. 39. Apprenez à divertir
 sans créer de distraction
  40. 40. Réservez les fortes animations aux moments d’attente Murat Mutlu
  41. 41. Utilisez les animations lors des chargements ou tâches longues Hanna Jung
  42. 42. Mais n’animez pas en permanence un objet à proximité de contenus Drew Endly
  43. 43. Le genre de situation à éviter
  44. 44. Cette vidéo, pourquoi ?
  45. 45. Texte qui change sans prévenir & vidéo : le combo gagnant 👍
  46. 46. Un design créatif et animé qui fonctionne avec des troubles cognitifs
  47. 47. Et du côté de la 
 recherche utilisateur ?
  48. 48. Testez, testez et testez encore.
  49. 49. Offrez l’interface 
 la plus simple et utilisable possible
  50. 50. Une formulaire d’inscription presque parfait
  51. 51. Automatisez dès que possible.
 Simplifiez la vie de vos utilisateurs.
  52. 52. S’il vous plait, battez-vous contre cette peste moderne.
  53. 53. Retirer les contraintes technologiques des mains de l’utilisateur, 
 c’est aussi le travail du designer.
  54. 54. Testez, testez et testez encore…
 avec des personnes concernées
  55. 55. En guerilla testing: les tests en situation de stress
  56. 56. En guerilla testing:
 les tests en environnement chargé
  57. 57. Les bonnes pratiques, en bref.
  58. 58. Rendez vos interfaces simples 
 et compréhensibles par tou•te•s 1.
  59. 59. Mettez en place des repères temporels pour assister la navigation 2.
  60. 60. Essayez d’estimer et d’annoncer l’effort nécessaire pour une tâche 3.
  61. 61. N’affichez pas de notification n’importe quand dans votre interface 4.
  62. 62. Travaillez vos textes et contenus : hiérarchie, structure et vocabulaire 5.
  63. 63. Automatisez tout ce qui peut l’être 6.
  64. 64. Testez, testez et testez 7.
  65. 65. Quelques ressources pratiques.
  66. 66. Les posters accessibilité du gouvernement britannique
  67. 67. Le Working Draft du groupe de travail W3C sur les troubles cognitifs
  68. 68. W3C WAI : Stories of Web users
  69. 69. Merci beaucoup ! "
 Dank u wel! # @iamhiwelo

×