Design de l'inclusivité

A presentation at Star d'UX .Paris in June 2018 in Paris, France by Damien Senger

Slide 1

Slide 1

THINKING BEYOND ACCESSIBILITY: AN INTRO TO INCLUSIVE DESIGN UX Meetup • Paris • June 19, 2018

Slide 2

Slide 2

Damien Senger User-centered designer Twitter: @iamhiwelo Raccoon Studio raccoon.studio

Slide 3

Slide 3

LE DESIGN INCLUSIF : UN TRAVAIL DE TOUS LES INSTANTS

Slide 4

Slide 4

Le design inclusif , 
 qu’est-ce que c’est ?

Slide 5

Slide 5

Le design inclusif 
 ne se substitue pas


 à l’accessibilité.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 6

Slide 6

Troubles de la vision Troubles moteurs Troubles cognitifs Troubles de l’ouïe Accessibilité

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 7

Slide 7

Troubles de la vision Troubles moteurs Troubles cognitifs Troubles de l’ouïe Accessibilité Identité de genre Culture et croyance Langages parlés Éducation Âge Connectivité Localisation Design inclusif

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 8

Slide 8

Ohana means family. 
 Family means nobody gets left behind. Lilo & Stitch

“ ”

Slide 9

Slide 9

#PrideMonth

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 10

Slide 10

L’apparition du design inclusif 
 est aussi lié à l’évolution du concept de handicap.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 11

Slide 11

1980 
 In the context of health experience, a disability is any restriction or lack of ability

(resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being. 
 
 — World Health Organization

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 12

Slide 12

1980 
 In the context of health experience, a disability is any restriction or lack of ability

(resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being. 
 
 — World Health Organization 2018 
 Disability is not just a health problem. It is a complex phenomenon , reflecting the interaction between features of a person’s body and features of the society in which he or she lives. 
 
 
 — World Health Organization

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 13

Slide 13

Le design inclusif, 
 pourquoi ?

Slide 14

Slide 14

Design for the future

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 15

Slide 15

Parce qu’en tant qu’humains, 
 on a une tendance à la “ reproduction sociale ”.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 16

Slide 16

! Bonjour !

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 17

Slide 17

! Moi, c’est Damien.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 18

Slide 18

! "

$ Je suis français, je réside aux Pays-Bas et je travaille 
 en Anglais au quotidien. Le multilingue ne me fait pas peur.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 19

Slide 19

! "

$ % Multiculturalisme, absence de frontières, etc. : J’évolue dans un cadre unique offert par l’Union Européenne

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 20

Slide 20

! & "

$ % Je travaille sur des appareils performants et sans problème de connectivité

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 21

Slide 21

! & "

$ ' % La culture Queer fait partie de mon identité

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 22

Slide 22

! & "

$ ' ( % Je suis designer à Amsterdam. Sans être riche, je fais partie d’une classe privilégiée.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 23

Slide 23

! & "

$ ' ( % Et donc ça, c’est mon environnement.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 24

Slide 24

& "

$ ' ( % ) * ✍ ! Mais je suis aussi influencé par des facteurs plus intimes comme…

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 25

Slide 25

& "

$ ' ( % * ✍ ) ! Ma construction cognitive

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 26

Slide 26

& "

$ ' ( % ✍ ! * ) Ma culture personnelle

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 27

Slide 27

& "

$ ' ( % ! ✍ * ) Mais aussi, je suis droitier.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 28

Slide 28

Identifier ses biais 
 pour essayer d’être plus inclusif • ve.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 29

Slide 29

Le design inclusif, comment ?

Slide 30

Slide 30

Un constat : 
 nos capacités évoluent dans le temps et en fonction du contexte

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 31

Slide 31

En comprenant que l’accessibilité et ses lignes directrices sont toujours nécessaire

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 32

Slide 32

Le design inclusif est 
 une grille de lecture et d’analyse 
 pour mieux comprendre les besoins de nos utilisateur • rice • s.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 33

Slide 33

Créer un design accessible 
 est toujours le point de départ .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 34

Slide 34

Le design inclusif, 
 en pratique .

Slide 35

Slide 35

Pendant la phase de recherche 1.

Slide 36

Slide 36

Il est temps de donner 
 une nouvelle vie à vos personas .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 37

Slide 37

Les situations d’ exclusion


 peuvent être situationnelle 
 et temporaire .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 38

Slide 38

1980 
 In the context of health experience, a disability is any restriction or lack of ability

(resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being. 
 
 — World Health Organization 2018 
 Disability is not just a health problem. It is a complex phenomenon , reflecting the interaction between features of a person’s body and features of the society in which he or she lives. 
 
 
 — World Health Organization

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 39

Slide 39

2018 
 Disability is not just a health problem. It is a complex phenomenon , reflecting the interaction between features of a person’s body and features of the society in which he or she lives. 
 
 
 — World Health Organization

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 40

Slide 40

Le design inclusif peut 
 être articulé autour de 5 pôles .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 41

Slide 41

Un pôle autour de la compréhension . Autisme, 
 Troubles cognitifs Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 42

Slide 42

Un pôle autour de la compréhension . Maîtrise partielle 
 de la langue Autisme, 
 Troubles cognitifs Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 43

Slide 43

Un pôle autour de la compréhension . Maîtrise partielle 
 de la langue Autisme, 
 Troubles cognitifs Contexte 
 stressant Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 44

Slide 44

Permanent Situationnel Temporaire Un pôle autour de la compréhension . Maîtrise partielle 
 de la langue Autisme, 
 Troubles cognitifs Contexte 
 stressant Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 45

Slide 45

Un pôle autour de la vision . Cécité Infection oculaire Distraction 
 visuelle Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 46

Slide 46

Un pôle autour du toucher . Amputation Immobilisation 
 temporaire Activité 
 parallèle Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 47

Slide 47

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 48

Slide 48

Un pôle autour de la parole . Non verbaux Extinction 
 de voix Accent ou 
 non natif Icônes Microsoft

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 49

Slide 49

Dans vos journey mapping, 
 mettez vos personas en situation .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 50

Slide 50

Par exemple, avec un vol en avion , (

. / 0 Achat via app Paiement Trajet vers 
 aéroport Quel est 
 mon vol ? Où dois-je 
 embarquer ?

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 51

Slide 51

Par exemple, avec un vol en avion / 0 1 2 3 4 Je cherche 
 mon siège Décollage Atterrissage Langue 
 inconnue Où est 
 mon train ?

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 52

Slide 52

Personne gauchère, au calme dans son canapé. Par exemple, avec un vol en avion , (

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 53

Slide 53

Erreur de connexion durant le paiement [stress] Par exemple, avec un vol en avion , (

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 54

Slide 54

Au volant, faible connexion, quel est mon terminal ? Par exemple, avec un vol en avion , (

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 55

Slide 55

Plongez-vous dans 
 l’univers de votre audience.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 56

Slide 56

Recrutez des personnes concernées et sous-représentées

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 57

Slide 57

La diversité des profils assure 
 la limitation des cas limites .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 58

Slide 58

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 59

Slide 59

Pendant la phase de design 2.

Slide 60

Slide 60

Testez vos designs dans les situations décrites précédemment.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 61

Slide 61

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 62

Slide 62

Compréhensible indépendamment de la langue

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 63

Slide 63

Information hiérarchisée visuellement

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 64

Slide 64

Taille du texte adaptée au contexte direct

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 65

Slide 65

Consistance icônes / contenu pour faciliter la compréhension

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 66

Slide 66

On aurait aussi pu parler 
 de la copie qui va droit au but


 avec consistance .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 67

Slide 67

D’ailleurs…

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 68

Slide 68

Éviter l’exclusion, 
 cela passe aussi par la copie .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 69

Slide 69

Les 4C de la lisibilité

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 70

Slide 70

Continuité : répétition de l’information jusqu’à la fin

Slide 71

Slide 71

Conspicuité : l’iconographie pour assurer la compréhension

Slide 72

Slide 72

Consistence : une idée = un mot, du début à la fin

Slide 73

Slide 73

Clarté : le message doit aller droit au but et être simple

Slide 74

Slide 74

Considérez l’opposé


 de votre assomption

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 75

Slide 75

Retirer la complexité 
 de vos plateformes

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 76

Slide 76

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 77

Slide 77

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 78

Slide 78

Pensez à représenter 
 la diversité de vos utilisateur • rice • s

dans vos designs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 79

Slide 79

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 80

Slide 80

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 81

Slide 81

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 82

Slide 82

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 83

Slide 83

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 84

Slide 84

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 85

Slide 85

Pendant les tests utilisateur • rice • s 3.

Slide 86

Slide 86

Assurez 
 la diversité des utilisateur • rice • s

lors de vos tests.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 87

Slide 87

En guerilla testing, 
 l’exemple Starbucks est 
 souvent problématique .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 88

Slide 88

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 89

Slide 89

Votre café préféré est 
 le lieu parfait

pour


 recruter vos semblables .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 90

Slide 90

Sortez des sentiers battus 
 pour vos recrutements d’utilisateurs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 91

Slide 91

Recrutez vos utilisateurs 
 en amont de vos tests.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 92

Slide 92

Identifiez les lieux de votre ville 
 drainant du monde, et les populations présentes .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 93

Slide 93

Lieux touristiques, 
 bureaux de poste avec attente, 
 entrée de salle de concert, etc.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 94

Slide 94

Profitez de la diversité de publics 
 de ces lieux Lieux touristiques, 
 bureaux de poste avec attente, 
 entrée de salle de concert, etc.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 95

Slide 95

En général dans vos projets 4.

Slide 96

Slide 96

Il n’y a pas de recette miracle : Testez, testez et testez encore.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 97

Slide 97

La technique des petits pas 
 plutôt que la révolution.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 98

Slide 98

Devenez un • e ambassadeur • rice : Infusez ces idées dans 
 tous vos projets à venir.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 99

Slide 99

Le design inclusif, 
 par l’exemple .

Slide 100

Slide 100

Les posters accessibilité du gouvernement britannique

Slide 101

Slide 101

Closed caption [cc]

Slide 102

Slide 102

Closed caption [cc] Maîtrise partielle 
 de la langue Surdité Écrans sans son 
 (aéroports, etc.)

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 103

Slide 103

Les rampes d’accès aux immeubles

Slide 104

Slide 104

Les rampes d’accès aux immeubles

Slide 105

Slide 105

Les baleines de trottoirs

Slide 106

Slide 106

Les baleines de trottoirs

Slide 107

Slide 107

Des exemples de sites web 
 aux designs inclusifs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 108

Slide 108

Sauf le contraste du vert, un design accessible et inclusif

Slide 109

Slide 109

Des animations et illustrations inclusives sur ce site web

Slide 110

Slide 110

Un exemple extrême mais 
 inclusif (par accident ?)

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 111

Slide 111

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Slide 112

Slide 112

Merci beaucoup !
$ 
 Bedankt!
"

@iamhiwelo