A presentation at DevFest Nantes 2018 in in Nantes, France by Damien Senger
LISIBILITÉ & DESIGN: CONSTRUISONS ENSEMBLE DES EXPÉRIENCES NUMÉRIQUES INCLUSIVES DevFest • Nantes • October 18, 2018
Disclaimer: Ce support de présentation a été conçu en anglais. Certaines slides souffrent d’une absence de traduction. Pardon my English! 😅
Damien Senger Product designer • accessibility advocate raccoon.studio • @iamhiwelo Raccoon Studio Castor EDC
Amsterdam, NL Rotterdam, NL
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.
LISIBILITÉ & DESIGN: CONSTRUISONS ENSEMBLE DES EXPÉRIENCES NUMÉRIQUES INCLUSIVES
Améliorer la lisibilité, Pourquoi ?
Lire est une action complexe. DevFest 2018 • Nantes • @iamhiwelo
Améliorer la lisibilité est bénéfique pour tou•te•s DevFest 2018 • Nantes • @iamhiwelo
Les troubles de la lecture, en bref : DevFest 2018 • Nantes • @iamhiwelo
Troubles de la vision Cécité, Daltonisme Infection oculaire Distraction visuelle permanent temporaire situationnel Icônes Microsoft DevFest 2018 • Nantes • @iamhiwelo
Troubles cognitifs Dyslexie Hyperlexie (Autisme / TDAH) Aisance linguistique Contexte stressant permanent temporaire situationnel Icônes Microsoft DevFest 2018 • Nantes • @iamhiwelo
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
Comment lisons-nous?
Notre capacité à lire dépend énormément du contexte dans lequel nous nous trouvons. DevFest 2018 • Nantes • @iamhiwelo
Notre capacité à lire est aussi influencée par la manière dont nos yeux fonctionnent. DevFest 2018 • Nantes • @iamhiwelo
L’œil humain est presqu’une sphère. Les muscles oculaires entourent cette sphère provoquant des mouvements circulaires. DevFest 2018 • Nantes • @iamhiwelo
1/3 sec Reading is not linear, we are reading by saccades. DevFest 2018 • Nantes • @iamhiwelo
And between each saccades, we have something called fixation. DevFest 2018 • Nantes • @iamhiwelo
Identification des détails During a fixation, everything except the focus is blurry. Identification des formes DevFest 2018 • Nantes • @iamhiwelo
And every few fixations, we need a small break DevFest 2018 • Nantes • @iamhiwelo
Saccades, fixations, pauses… il n’y a rien de linéaire dans la manière dont nous lisons DevFest 2018 • Nantes • @iamhiwelo
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
La plupart du temps, nous utilisons la forme des mots pour les identifier DevFest 2018 • Nantes • @iamhiwelo
Traduction: Nous ne lisons pas en mode “mot à mot” DevFest 2018 • Nantes • @iamhiwelo
Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. DevFest 2018 • Nantes • @iamhiwelo
You can probably read this easily despite the misspellings. DevFest 2018 • Nantes • @iamhiwelo
La forme des mots est définie par les traits caractéristiques des lettres DevFest 2018 • Nantes • @iamhiwelo
Ces traits caractéristiques nous permettent de détecter plus rapidement les mots communs. DevFest 2018 • Nantes • @iamhiwelo
Readability READABILITY DevFest 2018 • Nantes • @iamhiwelo
problem porbelm pbleorm DevFest 2018 • Nantes • @iamhiwelo
La forme d’un mot ou d’un objet est l’une des première chose que nous analysons. DevFest 2018 • Nantes • @iamhiwelo
Lisibilité: notions de base.
credits: Mijksenaar
Les 4C de la lisibilité DevFest 2018 • Nantes • @iamhiwelo
Continuité : information répétée jusqu’à l’objectif final
Conspicuité : information instantanément compréhensible
Cohérence : vocabulaire et styles persistants
Clarté : le message va droit au but
Lisibilité & contenu web.
D’abord, Open Dyslexia n’est pas vraiment une solution. DevFest 2018 • Nantes • @iamhiwelo
L’information la plus importante doit être dans les deux premiers paragraphes. DevFest 2018 • Nantes • @iamhiwelo
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
Débuter les titres avec les mots porteur du sens. DevFest 2018 • Nantes • @iamhiwelo
Grouper les petits contenus similaires avec un système visuel commun DevFest 2018 • Nantes • @iamhiwelo
Mettre en valeur les éléments importants avec des systèmes de graisses et/ou de couleurs DevFest 2018 • Nantes • @iamhiwelo
Évitez les contenus trop génériques, soyez spécifique (surtout pour les liens). DevFest 2018 • Nantes • @iamhiwelo
Soyez sémantique et visuels. (par exemple, une liste doit apparaître comme une liste…) DevFest 2018 • Nantes • @iamhiwelo
Garder un layout constant peut motiver les utilisateurs à lire plus lorsqu’ils recherchent une information. DevFest 2018 • Nantes • @iamhiwelo
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
Et enfin… DevFest 2018 • Nantes • @iamhiwelo
✂ DevFest 2018 • Nantes • @iamhiwelo
Diminuez vos contenus. DevFest 2018 • Nantes • @iamhiwelo
Et quand vous avez fini… Retirez encore la moitié ! DevFest 2018 • Nantes • @iamhiwelo
Let’s take a generic text
Start by adding more hierarchy
And remember, we always need more whitespace!
Quelques bons exemples.
Sauf le contraste (😅), ce site est vraiment lisible et offre des animations légères.
Smashing Mag utilise un layout répété facilitant la lecture et des hiérarchies visuelles
Merci beaucoup ! $ Thank you! % Tack! & Bedankt! ' @iamhiwelo
Damien Senger Product designer & accessibility advocate raccoon lover raccoon.studio • noti.st/hiwelo • twitter.com/iamhiwelo @iamhiwelo
Dyslexie, dyscalculie, troubles de l'attention, autisme, troubles liés à l'âge etc. Il existe un nombre incalculable de réalités très différentes derrière les troubles de la lecture et de l'apprentissage. Donc quand lire est un challenge, naviguer sur un médium basé principalement sur le texte peut être douloureux et fatiguant.
Heureusement pour nos audiences, il existe un grand nombre de petites améliorations et idées que chaque designer, rédacteur et/ou développeur peut mettre en place dans les projets pour améliorer la vie de toutes et tous. Alors partons à la découverte des problématiques de lisibilité sur notre médium composé à plus de 95% de texte!
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.