Design de l'inclusivité

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

Pendant la phase de design 2.

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

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

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

dans vos designs

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

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

Merci beaucoup !
$   Bedankt!
"

@iamhiwelo