LE WEB ET
LES TROUBLES COGNITIFS

FLUPA • Paris •
9 novembre 2017

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

•

langage

•

lecture

•

mémoire

•

perception

•

raisonnement

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 verbal e

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

•

temporaire

•

situationnel

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 
 stressant Icônes Microsoft

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 
 parole déficit dans les interactions sociales 
 compréhension compréhension de normes sociales

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 possibilities, the job will be too big,

and nothing will be achieved.

Cognitive a11y task force “ ”

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 
 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

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 contenu
s 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 cognit
ifs

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