Le Web et les troubles de l'attention

Support de mon atelier pratique sur les troubles de l'attention dans la navigation web.

Quand on parle d'accessibilité des interfaces, on pense généralement aux handicaps physiques et aux moyens de leur faciliter la navigation web. Seulement, il existe toute une catégorie de personnes qui peuvent très bien naviguer sur Internet et pour lesquels pourtant, la navigation est un combat quotidien : les personnes avec des troubles cognitifs.

Les troubles cognitifs c'est un univers vaste, tellement vaste que je ne pense pas qu'il soit possible d'en faire le tour en 45 minutes.

Mon envie, c'est de vous faire découvrir ma petite planète dans cette univers : les troubles de l'attention. Très haute distractibilité, inattentions, importance donnée au détail sur l'ensemble, comportements impulsifs : voici les quelques obstacles quotidiens que je dois combattre tous les jours, y compris dans ma navigation web.

Les liens dans cette présentation :
- Stories of Web Users : https://www.w3.org/WAI/intro/people-use-web/stories#classroomstudent
- Poster d'accessibilité gov.uk : https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
- Travail du W3C sur les handicaps cognitifs : https://www.w3.org/TR/coga-user-research/

Transcript

1. LE WEB ET LES 

   TROUBLES DE L’ATTENTION
   Paris Web • Ateliers • 1er octobre 2016
   

   View Slide

2. Damien Senger
   designer et développeur web
   @iamhiwelo

   hiwelo.co
   Raccoon Studio
   creative web studio
   @WeAreRaccoon

   raccoon.studio
   

   View Slide

3. Les troubles de l’attention : 

   c’est quoi ?
   

   View Slide

4. ADHD / ADD :
   Trouble déficitaire de l’attention 

   avec ou sans hyperactivité
   

   View Slide

5. 3 fois plus d’hommes touchés

   que de femmes
   

   View Slide

6. Les symptômes sont plus divers que
   la simple altération attentionnelle
   

   View Slide

7. Symptômes 

   (d’après le DSM-IV…)
   • Ina ention et distraction ;
   • Tendance à ne pas obéir aux consignes ;
   • Difficultés à organiser ses travaux et son
   temps ;
   • Difficulté d’appréhension des tâches
   demandant un effo mental ;
   • Pe e fréquente d’objets ;
   • Difficulté dans les discussions.
   

   View Slide

8. L’inattention,

   c’est quoi ?
   • Être désorganisé ;
   • Pe e de l’a ention ;
   • Difficultés pour prêter a ention aux détails, multiplie
   les erreurs d’ina ention ;
   • Débit de parole souvent rapide ;
   • Difficultés à suivre un sujet unique ;
   • Difficultés à suivre les règles sociales ;
   • Capacité à oublier les activité quotidiennes (repas,
   rendez-vous, etc.)
   • Distractibilité élevée aux bruits et événements ex
   

   View Slide

9. Les symptômes doivent être
   observés pendant au moins 6 mois.
   

   View Slide

10. Il n’existe pas réellement

    de traitement.
    

    View Slide

11. Oui, il existe des adultes avec

    des troubles de l’attention
    

    View Slide

12. Le TDA/H est souvent associé à 

    un ou des comorbidités
    

    View Slide

13. Comorbidités
    fréquentes
    • Trouble oppositionnel (30 à 50%) ;
    • Trouble des conduites (25 %) ;
    • Troubles anxieux (25%) ;
    • Troubles de la motricité ;
    • Troubles du sommeil ;
    • Dysrégulation émotionnelle ;
    • Troubles de l’élocution et de l’apprentissage.
    

    View Slide

14. Il semble y avoir un lien fort entre
    THQI et troubles attentionnels
    

    View Slide

15. Une problématique souvent
    proche du spectre autistique
    

    View Slide

16. Les Intérêts Restreints des TSA

    et les troubles de l’attention
    

    View Slide

17. Il existe aussi une tendance à

    surfocaliser ou hyperfocaliser
    

    View Slide

18. La concentration demande beaucoup d’efforts :

    grande tendance à la fatigue « sociale »
    

    View Slide

19. Parfois les milieux hostiles

    forcent la concentration
    

    View Slide

20. Souvent, il y a une faible

    estime de soi associée à ce trouble
    

    View Slide

21. Il existe des difficultés de
    compréhension des sous-entendus
    

    View Slide

22. Le Web et

    les troubles de l’attention
    

    View Slide

23. L’ennemi principal :

    éviter la création de pensées parasites
    

    View Slide

24. Le Web en lui-même est

    l’ennemi des troubles de l’attention
    

    View Slide

25. Le lien hypertexte est le meilleur
    moyen de te perdre sur Internet
    

    View Slide

26. Très rapidement :
    perte de l’objectif de navigation
    

    View Slide

27. Chaque image, mot ou information :

    une nouvelle porte de sortie
    

    View Slide

28. Chaque animation ou modification de
    page peut provoquer une fuite d’attention
    

    View Slide

29. Il est nécessaire de limiter 

    les distractions visuelles
    

    View Slide

30. Il est important de pouvoir

    éviter les notifications
    

    View Slide

31. Contextualisez systématiquement

    l’information
    

    View Slide

32. Évitez le bruit visuel
    

    View Slide

33. Des astuces au quotidien
    

    View Slide

34. Je navigue fullscreen
    

    View Slide

35. Je segmente ma navigation

    en plusieurs fenêtres
    

    View Slide

36. Je ferme (le) Slack…
    

    View Slide

37. Je me mets en mode 

    « ne pas déranger »
    

    View Slide

38. J’utilise les adblockers

    pour supprimer l’inutile
    

    View Slide

39. L’accessibilité à la rescousse
    

    View Slide

40. Sauf adblockers, il n’y a pas usage de
    système d’assistance à la navigation
    

    View Slide

41. On trouve par contre un usage important de
    supports externes pour aider la navigation
    

    View Slide

42. Besoin de performance d’affichage
    de l’information principale
    

    View Slide

43. Limiter le recours aux animations
    

    View Slide

44. Travailler son contenu :
    il doit être clair et concis
    

    View Slide

45. Soyez précis 

    et éviter les sous-entendus
    

    View Slide

46. Rendez votre texte lisible : 

    préférez les formes aérées (listes) 

    aux gros blocs de texte
    

    View Slide

47. Utilisez des images pertinentes :
    le remplissage est une source de fuite d’idée
    

    View Slide

48. Ayez des maquettes simples

    et avec des layouts cohérents
    

    View Slide

49. Quelques liens pratiques
    

    View Slide

50. Les poster accessibilité gov.uk

    (spectre autistique proche de ce sujet)
    

    View Slide

51. Le Working Draft du groupe de
    travail W3C sur les troubles cognitifs
    

    View Slide

52. W3C WAI :

    Stories of Web Users (inc. ADHD users)
    

    View Slide

53. Merci pour votre attention :)
    @iamhiwelo
    

    View Slide