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

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

LE DESIGN INCLUSIF : UN TRAVAIL DE TOUS LES INSTANTS

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

Le design inclusif 
 ne se substitue pas


 à l’accessibilité.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

“ ”

#PrideMonth

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

Le design inclusif, 
 pourquoi ?

Design for the future

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! Bonjour !

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! Moi, c’est Damien.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! "

$ 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

! "

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

! & "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! & "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! & "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

! & "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

& "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

& "

$ ' ( % * ✍ ) ! Ma construction cognitive

UX Meetup Paris • June 19, 2018 • @iamhiwelo

& "

$ ' ( % ✍ ! * ) Ma culture personnelle

UX Meetup Paris • June 19, 2018 • @iamhiwelo

& "

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Le design inclusif, comment ?

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Le design inclusif, 
 en pratique .

Pendant la phase de recherche 1.

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Les situations d’ exclusion


 peuvent être situationnelle 
 et temporaire .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

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

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

Dans vos journey mapping, 
 mettez vos personas en situation .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

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

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

. / 0

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Plongez-vous dans 
 l’univers de votre audience.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Pendant la phase de design 2.

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Compréhensible indépendamment de la langue

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Information hiérarchisée visuellement

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Taille du texte adaptée au contexte direct

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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


 avec consistance .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

D’ailleurs…

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Les 4C de la lisibilité

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

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

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

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

Considérez l’opposé


 de votre assomption

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Retirer la complexité 
 de vos plateformes

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

dans vos designs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Pendant les tests utilisateur • rice • s 3.

Assurez 
 la diversité des utilisateur • rice • s

lors de vos tests.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

pour


 recruter vos semblables .

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Sortez des sentiers battus 
 pour vos recrutements d’utilisateurs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Recrutez vos utilisateurs 
 en amont de vos tests.

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

En général dans vos projets 4.

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Le design inclusif, 
 par l’exemple .

Les posters accessibilité du gouvernement britannique

Closed caption [cc]

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Les rampes d’accès aux immeubles

Les rampes d’accès aux immeubles

Les baleines de trottoirs

Les baleines de trottoirs

Des exemples de sites web 
 aux designs inclusifs

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Sauf le contraste du vert, un design accessible et inclusif

Des animations et illustrations inclusives sur ce site web

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

UX Meetup Paris • June 19, 2018 • @iamhiwelo

UX Meetup Paris • June 19, 2018 • @iamhiwelo

Merci beaucoup !
$ 
 Bedankt!
"

@iamhiwelo