Slide 1

Slide 1 text

LE WEB ET LES 
 TROUBLES DE L’ATTENTION Paris Web • Ateliers • 1er octobre 2016

Slide 2

Slide 2 text

Damien Senger designer et développeur web @iamhiwelo
 hiwelo.co Raccoon Studio creative web studio @WeAreRaccoon
 raccoon.studio

Slide 3

Slide 3 text

Les troubles de l’attention : 
 c’est quoi ?

Slide 4

Slide 4 text

ADHD / ADD : Trouble déficitaire de l’attention 
 avec ou sans hyperactivité

Slide 5

Slide 5 text

3 fois plus d’hommes touchés
 que de femmes

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Il n’existe pas réellement
 de traitement.

Slide 11

Slide 11 text

Oui, il existe des adultes avec
 des troubles de l’attention

Slide 12

Slide 12 text

Le TDA/H est souvent associé à 
 un ou des comorbidités

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Une problématique souvent proche du spectre autistique

Slide 16

Slide 16 text

Les Intérêts Restreints des TSA
 et les troubles de l’attention

Slide 17

Slide 17 text

Il existe aussi une tendance à
 surfocaliser ou hyperfocaliser

Slide 18

Slide 18 text

La concentration demande beaucoup d’efforts :
 grande tendance à la fatigue « sociale »

Slide 19

Slide 19 text

Parfois les milieux hostiles
 forcent la concentration

Slide 20

Slide 20 text

Souvent, il y a une faible
 estime de soi associée à ce trouble

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Le Web et
 les troubles de l’attention

Slide 23

Slide 23 text

L’ennemi principal :
 éviter la création de pensées parasites

Slide 24

Slide 24 text

Le Web en lui-même est
 l’ennemi des troubles de l’attention

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Chaque image, mot ou information :
 une nouvelle porte de sortie

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Il est nécessaire de limiter 
 les distractions visuelles

Slide 30

Slide 30 text

Il est important de pouvoir
 éviter les notifications

Slide 31

Slide 31 text

Contextualisez systématiquement
 l’information

Slide 32

Slide 32 text

Évitez le bruit visuel

Slide 33

Slide 33 text

Des astuces au quotidien

Slide 34

Slide 34 text

Je navigue fullscreen

Slide 35

Slide 35 text

Je segmente ma navigation
 en plusieurs fenêtres

Slide 36

Slide 36 text

Je ferme (le) Slack…

Slide 37

Slide 37 text

Je me mets en mode 
 « ne pas déranger »

Slide 38

Slide 38 text

J’utilise les adblockers
 pour supprimer l’inutile

Slide 39

Slide 39 text

L’accessibilité à la rescousse

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Besoin de performance d’affichage de l’information principale

Slide 43

Slide 43 text

Limiter le recours aux animations

Slide 44

Slide 44 text

Travailler son contenu : il doit être clair et concis

Slide 45

Slide 45 text

Soyez précis 
 et éviter les sous-entendus

Slide 46

Slide 46 text

Rendez votre texte lisible : 
 préférez les formes aérées (listes) 
 aux gros blocs de texte

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Ayez des maquettes simples
 et avec des layouts cohérents

Slide 49

Slide 49 text

Quelques liens pratiques

Slide 50

Slide 50 text

Les poster accessibilité gov.uk
 (spectre autistique proche de ce sujet)

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

W3C WAI :
 Stories of Web Users (inc. ADHD users)

Slide 53

Slide 53 text

Merci pour votre attention :) @iamhiwelo