Lisibilité des sites web

Table of contents

1. Couverture
2. Page de titre
3. Copyright
4. Table des matières
5. Préface
6. Avant-Propos
7. Pourquoi ce livre ?
8. À qui est destiné ce livre ?
9. Ce que le lecteur va apprendre
10. Comment lire ce livre ?
11. Remerciements
12. Première partie - Ce qu’il faut savoir sur la Lisibilité
    1. 1. La lisibilité : qu’est ce que c’est ?
       1. Définition du concept de lisibilité
          1. Côté texte : soigner la mise en forme et la rédaction
          2. Côté lecteur : favoriser la lecture et la compréhension
       2. Les ingrédients de la lisibilité
          1. Lisibilité et caractères typographiques
          2. Lisibilité et composition
          3. Lisibilité et rédaction
          4. Lisibilité et structuration visuelle
       3. La lisibilité sur le Web
       4. Quelques idées reçues...
          1. On peut tout lire, quel que soit le caractère utilisé
          2. Plus c’est écrit gros, plus c’est lisible
          3. Si je peux lire mon contenu, tout le monde peut le lire aussi
          4. Puisque les préférences de l’internaute vont modifier l’aspect du site web, autant ne pas faire d’effort de présentation
          5. La lisibilité des sites web, c’est beaucoup de contraintes et de temps passé pour pas grand chose
    2. 2. Le mécanisme de lecture : un peu de théorie
       1. La reconnaissance des objets
          1. Le mécanisme de la perception
          2. Les fonctions de l’acte perceptif
          3. Reconnaître un objet malgré la diversité des apparences
       2. La reconnaissance des lettres et le processus de lecture
          1. Caractéristiques du texte et de l’écriture
          2. Le processus de lecture
          3. L’identification des lettres et des mots
          4. L’analyse des mouvements oculaires
             1. Saccades et fixations
             2. L’empan, pour collecter l’information
             3. L’écrêtage visuel
          5. La lecture sur écran est-elle différente de la lecture sur papier ?
          6. La lecture sur écran est plus lente
          7. Un confort visuel moindre
          8. Adapter la présentation des informations
    3. 3. Mesures et facteurs de lisibilité
       1. Mesurer la lisibilité
          1. Les premières recherches
          2. Émile Javal et les précurseurs
          3. Détermination des premiers facteurs de lisibilité
          4. Lisibilité et vitesse de lecture
       2. Les constats établis scientifiquement
          1. Capitales ou bas de casse ?
          2. Caractères de labeur
          3. Linéales ou caractères à empattements ?
          4. Italique ou romain ?
          5. Gras ou maigre ?
       3. Les critères typographiques de lisibilité
          1. Les critères proposés par les typographes
             1. Les recommandations de Richaudeau
             2. Les choix d’Allan Halley
             3. Les nouvelles tendances : Unger, Crouwel, Licko...
          2. Les empattements, plus lisibles ou pas ?
          3. Prendre en compte les habitudes du lecteur ?
       4. La forme des caractères : quelle influence sur la lisibilité ?
          1. Le squelette interne des lettres
          2. Les éléments minimaux de reconnaissance
             1. Lire uniquement la partie supérieure des lettres ?
             2. Jouer sur les formes
       5. Lisibilité et composition typographique
       6. Les habitudes du lecteur
    4. 4. Écrire pour être lu
       1. Écrire pour être lu à l’écran
          1. L’internaute scanne les pages du regard
          2. Offrir un accès rapide à l’information
       2. Définir sa cible et connaître son public
       3. Quelques conseils pour bien rédiger
          1. Soigner l’écriture : un texte concis, clair, concret et correct
          2. Utiliser un vocabulaire adapté et juste
          3. Structurer son propos
             1. Hiérarchiser l’information
             2. Mettre en valeur la structure
       4. Mesurer l’intelligibilité d’un texte
       5. Étude de cas : audience et interactivité des sites de presse en ligne
          1. La parole aux lecteurs : commentaires et modération
          2. La contribution des internautes aux contenus : tous journalistes ?
          3. La hiérarchie selon les lecteurs : l’audience prend la main
          4. La fin de l’écoute collective
    5. 5. L’accessibilité
       1. L’accessibilité, qu’est ce que c’est ?
          1. L’accessibilité et le Web : au-delà du handicap
          2. Les standards d’accessibilité : WCAG et AccessiWeb
             1. Les recommandations du W3C : WCAG 1.0
             2. Les recommandations WCAG 2.0
             3. Les critères et labels AccessiWeb
          3. La législation française
       2. À qui profite l’accessibilité sur le Web ?
          1. Les déficients visuels
             1. Des troubles de la vision variés
             2. Les aides techniques pour les non-voyants et malvoyants
          2. Et les autres handicaps ?
             1. Handicaps moteurs
             2. Troubles auditifs
             3. Handicaps cognitifs
       3. Améliorer l’accessibilité
          1. L’apparence du texte : choix du caractère et composition
          2. Les couleurs
             1. Comment perçoit-on les couleurs ?
             2. Lisibilité des contrastes sur le Web
             3. Bien choisir ses couleurs pour le Web
          3. Permettre la traduction par une aide technique
13. Deuxième partie - La typographie et le Web
    1. 6. Histoire Des caractères conçus pour l’ècran
       1. Une histoire accélérée de la typographie
          1. Chronologie : du XVe au XXe siècle
          2. La typographie à l’ère numérique
       2. Aux origines de la typographie pour écran, les fontes bitmap
       3. Les caractères dédiés à la lecture sur écran, première génération
       4. Les ClearType Fonts, seconde génération de caractères pour écran
       5. Anatomie comparée des caractères dédiés à l’écran
       6. Les formats de caractères
          1. PostScript
          2. TrueType
          3. OpenType
    2. 7. Les caractères et le Web
       1. Anticrénelage et sub-pixel rendering
          1. L’anticrénelage ou antialiasing
          2. Le sub-pixel rendering ou affichage sous-pixellaire
       2. Les systèmes d’affichage sous Windows et Mac OS
          1. Microsoft et ClearType
          2. Apple et ATSUI (Apple Type Services for Unicode Imaging)
          3. L’affichage dans les navigateurs
       3. Les caractères web-safe
          1. Quels sont les caractères web-safe ?
             1. Les caractères « Core Fonts for the Web »
             2. La suite ClearType
          2. Les caractères les plus répandus : synthèse multi-plates-formes (Windows, Mac, Linux)
          3. Quels caractères spécifier pour Linux ?
       4. Le codage des caractères
          1. Les premières normes d’encodage de caractères
             1. De l’ASCII aux normes adaptées à chaque langue
             2. Des problèmes de compatibilité
          2. La norme Unicode
          3. Choisir un jeu de caractères
       5. Préconisations pour la conception
    3. 8. Choisir un Caractère
       1. La classification des caractères
          1. Pourquoi classifier les caractères ?
          2. La classification Vox-ATypI
             1. Les humanes
             2. Les garaldes
             3. Les réales
             4. Les didones
             5. Les mécanes
             6. Les linéales ou sans sérif
             7. Les incises
             8. Les scriptes, les manuaires et les fractures
             9. Et maintenant ?
          3. Quelles fonctions un caractère doit-il remplir ?
             1. Le caractère doit être disponible
             2. Le caractère doit être lisible
             3. Le caractère doit être cohérent avec le sens du discours et donner une identité
             4. La composition des caractères doit correspondre aux niveaux de lecture
             5. Le caractère doit pouvoir fonctionner avec les autres caractères employés
             6. Le caractère doit contenir tous les signes nécessaires au message
          4. Quel caractère pour quelle fonction ?
             1. Des caractères pour affirmer une identité
             2. Des caractères pour hiérarchiser
             3. Des caractères pour des contenus lisibles
14. Troisième partie - La mise en écran, la structuration des contenus et la diffusion sur le web
    1. 9. L’espace de L’écran et du Web
       1. L’espace de l’écran
          1. Types d’écrans et contraintes
             1. Une surface des pages web verticale ou horizontale
             2. Des contenus aux formes multiples
          2. Histoire d’écrans et de technologies
             1. L’essor du numérique
             2. La multiplication des supports de consultation
             3. La révolution du Web mobile
             4. La molette de la souris est indispensable à la navigation web
          3. La définition des écrans informatiques
             1. Des définitions d’écrans de plus en plus élevées
             2. Optimiser la surface des sites web pour le plus grand nombre d’utilisateurs
          4. La surface ajustable des pages web
             1. Un design liquide
             2. Une optimisation de la surface et des contenus web
          5. Pop-up, infobulles et plein écran
             1. Les fenêtres pop-up
             2. Les infobulles
             3. Le mode plein écran
          6. L’espace publicitaire des sites web
             1. Une surface publicitaire aléatoire
             2. Quelle surface publicitaire attribuer pour le Web ?
       2. La surface des pages web dans les navigateurs
          1. Une meilleure optimisation de la surface horizontale des pages web
          2. Organiser l’espace des pages web dans les navigateurs
             1. Adapter l’espace aux différents contenus
             2. Tenir compte de l’interface des différents types de navigateurs
             3. Découper la surface des pages web selon la ligne de flottaison (fold)
          3. De l’utilité du défilement et de ses limites
             1. Conception verticale ou horizontale ?
             2. Les sites web d’information : une conception verticale proche des blogs
             3. Repenser l’ergonomie des sites web d’information
             4. Gérer la hauteur des pages web
          4. La surface tridimensionnelle des pages web
       3. Lecture numérique et compréhension : des repères sont nécessaires
          1. Fixer des repères spatiaux sur les pages web
             1. Le défilement vertical gêne-t-il la lecture des contenus web ?
             2. Multipage ou multicolonnage ?
          2. Guider l’internaute dans l’architecture des sites web
             1. Tenir compte des comportements de lecture
             2. Cartographier la structure des sites web : l’usage des breadcrumbs et du plan du site
          3. Optimiser l’espace de l’écran
    2. 10. Structurer les Contenus Web
       1. La circulation du regard sur les pages web
          1. L’étude Eyetrack III, 2003-2004
             1. Le regard est porté en haut et à gauche des pages web, mais pas seulement
             2. Les textes sont lus avant l’iconographie
             3. La taille des images doit être optimisée
             4. Les textes en petits corps sont privilégiés
             5. Les courts paragraphes sont privilégiés
             6. Le défilement vertical est presque toujours appliqué par l’internaute
             7. Les barres de menus sont indispensables à la structuration des contenus
          2. Les recherches d’eye tracking effectuées par le cabinet d’étude Miratech
             1. L’eye tracking appliqué au moteur de recherche Google, 2008-2009
             2. Trois paramètres font varier le regard de l’internaute sur la page web
          3. Fixer des repères visuels
             1. Modération sur la pratique de l’eye tracking
       2. Structurer l’information
          1. Les méthodes agiles, une stratégie efficace d’organisation du travail
             1. Créer une ontologie
             2. Les stories
             3. Du croquis au Web
          2. Les étapes préparatoires à la mise en écran
             1. Le plan de site
             2. La phase de zoning (découpage en zones)
             3. Les wireframes
          3. Contenir la circulation du regard
             1. Laisser circuler le regard sur la surface des pages web
             2. Des repères de fixation sont nécessaires à la structuration
       3. Mettre le contenu « en écran »
          1. L’usage des grilles pour le Web
             1. L’histoire des grilles modulaires dans l’imprimé
             2. L’usage des grilles typographiques aujourd’hui
             3. Étendre l’utilisation des grilles au Web
             4. Le quadrillage de Karl Gerstner
             5. Un principe de grille idéal pour le Web
             6. Une conception web ouverte
          2. Couleurs et hiérarchie visuelle
             1. Les contrastes colorés sont à privilégier
             2. Certaines couleurs sont codifiées
             3. Privilégier l’emploi de nuances de gris
          3. Capitaliser sur les conventions web
             1. Les principales conventions web
             2. Utiliser des conventions de présentation
       4. La structuration des informations : un métier
          1. Les contenus web sont partagés entres les internautes
          2. Information et design : de nouvelles approches à trouver
          3. L’essor commercial du Web doit pousser à mieux structurer les contenus
             1. Des sites web de e-commerce aux contenus attractifs
             2. Relancer la lecture sur le Web
             3. Fixer des points d’entrée et de sortie
          4. Parcours et espace des pages web : l’exemple des sites web de presse en ligne
             1. Une lecture des contenus web fragmentée
             2. Augmenter la fluidité de consultation des sites web avec l’hypertextualité
          5. Qui peut le moins, peut le plus ?
    3. 11. La Composition des textes sur le web
       1. La composition des textes
          1. Choisir le corps et l’interlignage de base
             1. Le gris typographique joue un rôle essentiel dans la lisibilité de la composition
             2. Privilégier un ordre pour la composition typographique
             3. Quelques éléments de repères indispensables au choix du corps
             4. Le couple corps et interlignage
             5. Choisir des interlignages compatibles entre eux
             6. Déterminer le corps du texte courant et des légendes en premier
             7. Composer ensuite les chapeaux, les intertitres puis les titres, en dernier
          2. La justification
          3. Les différents types de composition
             1. La composition en drapeau
             2. La composition justifiée
             3. La composition centrée
          4. L’interlettrage
          5. La composition des textes en colonnes
             1. Design rigide ou élastique ?
             2. Le multicolonnage
       2. L’enrichissement typographique
          1. Le couple texte et titrage
          2. Capitales et bas de casse
          3. Alinéas et alignement vertical
             1. Alinéas : renfoncements ou espaces pour bien distinguer les paragraphes
             2. Limiter les effets de styles
             3. Ajuster l’alignement vertical pour les listes de titres
          4. Les blancs
       3. Quelques règles typographiques essentielles
          1. Guillemets et apostrophes
             1. L’usage des guillemets français et anglais
             2. L’apostrophe
          2. Les tirets
          3. Les capitales accentuées
    4. 12. La diffusion sur le web
       1. Les CSS, principal outil pour la gestion typographique sur le Web
          1. Fonction et avantage des CSS
             1. Dissocier la structure de la présentation
             2. Un fonctionnement en cascade
          2. Évolution des CSS : des premières CSS aux futures CSS 3
          3. Les attentes de CSS 3 en matière de gestion du texte
             1. Le module Fonts : chasse, hauteur d’œil et téléchargement de polices
             2. Le module Text : justification et césures
             3. Le module Multi-Column Layout : gestion multicolonne
       2. Composition du texte : valeurs absolues et valeurs relatives
          1. Valeur absolue : définir la taille en pixels
          2. Valeurs relatives : composer en em
          3. En conclusion
       3. Alternatives possibles pour le choix d’un caractère
          1. La liste de substitution font-family
          2. Le texte-image
             1. Insertion d’images
             2. Remplacement dynamique du texte par des images
       4. Le contrôle du gris typographique : gérer les césures
          1. Le tiret sécable
          2. Quelques scripts pour automatiser les césures
15. Conclusion
16. Bibliographie
17. Index