A presentation at Star d'UX .Paris in in Paris, France by Damien Senger
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
. / 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
. / 0
UX Meetup Paris • June 19, 2018 • @iamhiwelo
. / 0
UX Meetup Paris • June 19, 2018 • @iamhiwelo
. / 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
Même le ou la plus spécialisé·e des développeurs ne pourra pas rendre accessible une interface qui n’a pas été désignée pour être inclusive. En tant que designer, notre devoir est de rendre la vie plus facile, projet après projet, pour toutes les personnes amenées à utiliser nos solutions. Chaque projet où nous faisons l’impasse sur ces questions ne peut pas être un réel succès et rends la vie des développeurs plus compliquée. L’accessibilité et l’inclusivité n’est pas option présente à la fin d’un devis, ces questionnements doivent être présents à chaque étape de nos projets. Que ce soit pour concevoir une interface web ou un service de la vie quotidienne, il est temps de repenser notre manière de concevoir. Découvrons ensemble les méthodologies et les frameworks qui peuvent nous aider au quotidien à concevoir des expériences et services destinés à tou·te·s indépendamment de nos capacités et vécus personnels.
The following resources were mentioned during the presentation or are useful additional information.
Article made by the company hosting the meeting describing some key points from the talk, with a link to the video.
Here’s what was said about this presentation on social media.
for free. You
can too.