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

A presentation at DevFest Nantes 2018 in October 2018 in Nantes, France by Damien Senger

Slide 1

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

Slide 4

Amsterdam, NL Rotterdam, NL

Slide 5

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

Slide 6

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

Slide 7

Slide 7

Améliorer la lisibilité, Pourquoi ?

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

Comment lisons-nous?

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

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

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

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

Readability READABILITY DevFest 2018 • Nantes • @iamhiwelo

Slide 31

Slide 31

problem porbelm pbleorm DevFest 2018 • Nantes • @iamhiwelo

Slide 32

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

Slide 33

Lisibilité: notions de base.

Slide 34

Slide 34

credits: Mijksenaar

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

Conspicuité : information instantanément compréhensible

Slide 38

Slide 38

Cohérence : vocabulaire et styles persistants

Slide 39

Slide 39

Clarté : le message va droit au but

Slide 40

Slide 40

Lisibilité & contenu web.

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

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

Slide 44

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

Slide 45

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

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

Slide 51

Slide 51

Et enfin… DevFest 2018 • Nantes • @iamhiwelo

Slide 52

Slide 52

✂ DevFest 2018 • Nantes • @iamhiwelo

Slide 53

Slide 53

Diminuez vos contenus. DevFest 2018 • Nantes • @iamhiwelo

Slide 54

Slide 54

Et quand vous avez fini… Retirez encore la moitié ! DevFest 2018 • Nantes • @iamhiwelo

Slide 55

Slide 55

Let’s take a generic text

Slide 56

Slide 56

Start by adding more hierarchy

Slide 57

Slide 57

And remember, we always need more whitespace!

Slide 58

Slide 58

Quelques bons exemples.

Slide 59

Slide 59

Sauf le contraste (😅), ce site est vraiment lisible et offre des animations légères.

Slide 60

Slide 60

Smashing Mag utilise un layout répété facilitant la lecture et des hiérarchies visuelles

Slide 61

Slide 61

Merci beaucoup ! $ Thank you! % Tack! & Bedankt! ' @iamhiwelo

Slide 62

Slide 62

Damien Senger Product designer & accessibility advocate raccoon lover raccoon.studio • noti.st/hiwelo • twitter.com/iamhiwelo @iamhiwelo