Lisibilité & Design : Construisons ensemble des expériences numériques inclusives

Slide 1

LISIBILITÉ & DESIGN: CONSTRUISONS ENSEMBLE DES EXPÉRIENCES NUMÉRIQUES INCLUSIVES DevFest • Nantes • October 18, 2018

Slide 2

Disclaimer: Ce support de présentation a été conçu en anglais. Certaines slides souffrent d’une absence de traduction. Pardon my English! 😅

Slide 3

Damien Senger Product designer • accessibility advocate raccoon.studio • @iamhiwelo Raccoon Studio Castor EDC

Slide 4

Amsterdam, NL Rotterdam, NL

Slide 5

Good to know: Le support de cette conférence est disponible sur Notist. https://noti.st/hiwelo/O6J03N et si vous appréciez ce talk, n’hésitez pas à m’inviter dans vos meetup ou conférences pour parler design inclusif, accessibilité ou représentation (queer ") dans le web.

Slide 6

LISIBILITÉ & DESIGN: CONSTRUISONS ENSEMBLE DES EXPÉRIENCES NUMÉRIQUES INCLUSIVES

Slide 7

Améliorer la lisibilité, Pourquoi ?

Slide 8

Lire est une action complexe. DevFest 2018 • Nantes • @iamhiwelo

Slide 9

Améliorer la lisibilité est bénéfique pour tou•te•s DevFest 2018 • Nantes • @iamhiwelo

Slide 10

Les troubles de la lecture, en bref : DevFest 2018 • Nantes • @iamhiwelo

Slide 11

Troubles de la vision Cécité, Daltonisme Infection oculaire Distraction visuelle permanent temporaire situationnel Icônes Microsoft DevFest 2018 • Nantes • @iamhiwelo

Slide 12

Troubles cognitifs Dyslexie Hyperlexie (Autisme / TDAH) Aisance linguistique Contexte stressant permanent temporaire situationnel Icônes Microsoft DevFest 2018 • Nantes • @iamhiwelo

Slide 13

Les principaux types de troubles de la lecture Compréhension du langage Déficit phonologique Vitesse et précision de traitement DevFest 2018 • Nantes • @iamhiwelo

Slide 14

Comment lisons-nous?

Slide 15

Notre capacité à lire dépend énormément du contexte dans lequel nous nous trouvons. DevFest 2018 • Nantes • @iamhiwelo

Slide 16

Notre capacité à lire est aussi influencée par la manière dont nos yeux fonctionnent. DevFest 2018 • Nantes • @iamhiwelo

Slide 17

L’œil humain est presqu’une sphère. Les muscles oculaires entourent cette sphère provoquant des mouvements circulaires. DevFest 2018 • Nantes • @iamhiwelo

Slide 18

1/3 sec Reading is not linear, we are reading by saccades. DevFest 2018 • Nantes • @iamhiwelo

Slide 19

And between each saccades, we have something called fixation. DevFest 2018 • Nantes • @iamhiwelo

Slide 20

Identification des détails During a fixation, everything except the focus is blurry. Identification des formes DevFest 2018 • Nantes • @iamhiwelo

Slide 21

And every few fixations, we need a small break DevFest 2018 • Nantes • @iamhiwelo

Slide 22

Saccades, fixations, pauses… il n’y a rien de linéaire dans la manière dont nous lisons DevFest 2018 • Nantes • @iamhiwelo

Slide 23

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. DevFest 2018 • Nantes • @iamhiwelo

Slide 24

La plupart du temps, nous utilisons la forme des mots pour les identifier DevFest 2018 • Nantes • @iamhiwelo

Slide 25

Traduction: Nous ne lisons pas en mode “mot à mot” DevFest 2018 • Nantes • @iamhiwelo

Slide 26

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. DevFest 2018 • Nantes • @iamhiwelo

Slide 27

You can probably read this easily despite the misspellings. DevFest 2018 • Nantes • @iamhiwelo

Slide 28

La forme des mots est définie par les traits caractéristiques des lettres DevFest 2018 • Nantes • @iamhiwelo

Slide 29

Ces traits caractéristiques nous permettent de détecter plus rapidement les mots communs. DevFest 2018 • Nantes • @iamhiwelo

Slide 30

Readability READABILITY DevFest 2018 • Nantes • @iamhiwelo

Slide 31

problem porbelm pbleorm DevFest 2018 • Nantes • @iamhiwelo

Slide 32

La forme d’un mot ou d’un objet est l’une des première chose que nous analysons. DevFest 2018 • Nantes • @iamhiwelo

Slide 33

Lisibilité: notions de base.

Slide 34

credits: Mijksenaar

Slide 35

Les 4C de la lisibilité DevFest 2018 • Nantes • @iamhiwelo

Slide 36

Continuité : information répétée jusqu’à l’objectif final

Slide 37

Conspicuité : information instantanément compréhensible

Slide 38

Cohérence : vocabulaire et styles persistants

Slide 39

Clarté : le message va droit au but

Slide 40

Lisibilité & contenu web.

Slide 41

D’abord, Open Dyslexia n’est pas vraiment une solution. DevFest 2018 • Nantes • @iamhiwelo

Slide 42

L’information la plus importante doit être dans les deux premiers paragraphes. DevFest 2018 • Nantes • @iamhiwelo

Slide 43

Utiliser des hiérarchies de titres (pour permettre aux utilisateurs de rapidement scanner le contenu, quelque soit le matériel utilisé (visuel, screen readers, web rotors, etc.)) DevFest 2018 • Nantes • @iamhiwelo

Slide 44

Débuter les titres avec les mots porteur du sens. DevFest 2018 • Nantes • @iamhiwelo

Slide 45

Grouper les petits contenus similaires avec un système visuel commun DevFest 2018 • Nantes • @iamhiwelo

Slide 46

Mettre en valeur les éléments importants avec des systèmes de graisses et/ou de couleurs DevFest 2018 • Nantes • @iamhiwelo

Slide 47

Évitez les contenus trop génériques, soyez spécifique (surtout pour les liens). DevFest 2018 • Nantes • @iamhiwelo

Slide 48

Soyez sémantique et visuels. (par exemple, une liste doit apparaître comme une liste…) DevFest 2018 • Nantes • @iamhiwelo

Slide 49

Garder un layout constant peut motiver les utilisateurs à lire plus lorsqu’ils recherchent une information. DevFest 2018 • Nantes • @iamhiwelo

Slide 50

Garder un layout constant est nécessaire pour aider les personnes dys*, les troubles de l’attention et les personnes autistes. DevFest 2018 • Nantes • @iamhiwelo