Lisibilité des sites Web, Marie-Valentine Blond

Allez, on attaque une série de lectures estivales !
Lorsque j’avais publié la bibliographie 20 meilleurs outils pour la rédaction web, l’ouvrage Lisibilité des sites Web avait également été suggéré, en ce qui concerne la typographie, notamment.
Effectivement, c’est un outil intéressant pour un rédacteur ou un producteur de contenus afin de mieux appréhender ce que regroupe la lisibilité d’un site web. Il lui permettra d’acquérir des connaissances indispensables, pour un travail efficace avec des designers et ergonomes.
J’ai également apprécié de me replonger dans les sciences cognitives, dans l’histoire de l’écriture et de la typographie.

Consultez mes notes de lecture

Première partie – Ce qu’il faut savoir sur la lisibilité

• Concept de lisibilité : Caractère de ce qui est lisible.

Sébastien Bailly distingue aussi

• Legible : faculté d’un texte à être lisible, dans le sens de déchiffrable,
• Readable, capacité à être comprise, son intelligibilité.

Comment comprendre le mécanisme, le processus de lecture : j’aime bien cet exemple qui montre que l’ordre des lettres peut ne pas interférer sur la compréhension.
« Sleon une édtue de l’Uvinertisé de Cmabrigde, l’odrre des ltteers dnas un mtos n’a pas d’ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soit à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlblème. C’est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot. »

• Côté texte, il s’agit de soigner la mise en forme et la rédaction.
• Côté cible, il s’agit de favoriser la lecture et la compréhension par la structure et la rédaction (champ sémantique). Il me semble qu’on en parle suffisamment dans ce blog !
• Lisibilité sur le web, il s’agit de faciliter l’accès à l’information.

Mesures et facteurs de lisibilité – constats établis scientifiquement

• Capitales ou bas de casse : un texte composé en capitales est lu moins vite qu’un texte composé en bas de casse
• Italique ou romain : un texte écrit en italiques n’est pas lu moins vite qu’un texte romain s’il est relativement court. Dans le cas d’un texte long, la vitesse de lecture est ralentie. On évitera d’utiliser l’italique sur écran.

Écrire pour être lu

Il est nécessaire de définir sa cible et connaître son public.
Privilégier

• voix active,
• phrases courtes,
• ponctuation fréquente,
• construction de phrases variées,
• vocabulaire simple,
• bonne hiérarchisation du texte.

Éviter

• tournure passive,
• abstraction continue dans le propos,
• abus d’adjectifs, de noms, de mots inutiles à la compréhension du propos. Je rajouterai également de détails inintéressants et qui polluent la compréhension,
• vocabulaire technique et/ou non expliqué,
• titres trop longs.

Une notion d’accessibilité

« Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique et leurs aptitudes physiques et mentales. » Tim Berners-Lee

Deuxième partie – La typographie et le Web

La première génération de caractères type dédiés à l’écran est : Lucida, Georgia, Verdana et la seconde génération de caractères (ClearType Fonts) Constantia, Cambria, Corbel, Candara, Calibri, Consolas.

Les caractères et le web

Comment choisir sa police de caractères ?
Les critères sont sa lisibilité et sa disponibilité sur le poste de l’internaute. Il s’agit des caractères web safe, qui sont installés sur une très grande partie d’ordinateurs connectés.
De la même manière qu’un ton éditorial donne une identité à un site, on parlera de la justesse du ton graphique par rapport à une cible, de cohérence de choix typographiques avec le message et de la reconnaissance de l’identité du site web. On choisira des caractères pour affirmer son identité, pour hiérarchiser (niveaux de lecture) et pour des contenus lisibles.

Troisième partie  – Structurer les contenus web

Quelques rappels sur la circulation du regard, avec les études d’eye-tracking (oculométrie) qui consiste à enregistrer le mouvement des yeux sur écran.
Trois facteurs orientent le regard porté sur les pages web : le design, le contenu et l’objectif de l’internaute. Il est important de fixer des repères visuels.

Sur ce sujet, ne pas hésiter à aller regarder ce qui est fait en ligne, car l’avènement du mobile et de la tablette (responsive design) entraîne de récentes évolutions.
Voici quelques chiffres issus de Miratech

• Un regard ne permet de voir que 7% d’un écran d’iPad
• Lors du déplacement de l’oeil, entre deux regards, aucune image n’est vue
• 8 secondes : c’est le temps moyen passé par un internaute sur une page.
• Un regard permet de lire 15 lettres d’un coup dans un texte.

Je vous renvoie à leurs publications pour approfondir le sujet et notamment la notion de design émotionnel
Quelques règles de typo

• Bien distinguer

– « guillemets français »
– « guillemets anglais »

• Toujours écrire des capitales accentuées
• code alphanumérique des principales capitales accentuées

À lire pour tout ceux qui débutent en rédaction de contenus afin d’avoir une approche globale de la publication Web. Bonne lecture !