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