Ce texte est traduit d’un article écrit par Oliver Reichenstein

La plupart des sites internet sont encombrés de textes en petits caractères, tellement pénibles à lire. Pourquoi?

Ne nous dites pas que des pages remplies donnent une meilleure impression
Des sites encombrés donnent une impression déplaisante.

Ne nous dites pas que cela fonctionne mieux avec plein de liens
Remplir des pages n’a jamais contribué à faciliter l’utilisation d’un site. C’est la paresse qui vous incite à nous envahir de plein de trucs. Nous désirons que vous réfléchissiez et fassiez une présélection de ce qui est important. Nous ne voulons pas faire votre travail.

Ne nous dites pas d’ajuster les tailles des polices de caractère
Nous ne voulons pas changer la configuration de notre navigateur chaque fois que nous changeons de site!

Ne nous dites pas que c’est mal de faire défiler l’écran
Parce que dans ce cas tous les sites internet sont mauvais. Il n’y a rien de mal à faire défiler l’écran. Rien du tout. Comme il n’y a rien de mal à feuilleter un livre.

Ne nous dites pas que le texte n’a pas d’importance
95% de ce qui est communément référencé à propos de l’architecture d’un site, c’est de la typographie.

Ne nous dites pas de mettre des lunettes
Il faut arrêter de lécher son écran, et il faut plutôt s’appuyer sur le dossier de la chaise et continuer à lire dans une position détendue.

Il n’y a aucune raison pour encombrer l’écran par de l’information. C’est tout simplement une erreur collective.

1. Police de caractère standard pour des longs textes

La police que vous êtes en train de lire maintenant n’est pas grande. C’est la taille que les navigateurs internet utilisent par défaut. C’est la taille que les navigateurs devraient afficher.

Nous ne voulons pas cliquer sur des boutons plus grands ou plus petits et nous ne voulons pas “changer nos préférences”. Nous voulons juste lire directement en ouvrant le site. Nous voulons que ce soit vous qui vous adaptiez à nos options et pas le contraire.

Au départ c’est plus difficile de créer une bonne mise en page avec une grande taille de caractère mais cette difficulté vous aidera à élaborer un site plus clair et plus simple. Encombrer un site avec de l’information n’est pas compliqué, le rendre facile et simple à utiliser, ç’est plus compliqué. Au début vous serez choqué par la grandeur de la police par défaut. Mais après un jour, vous ne voudrez plus voir rien de plus petit que la police à 100% ou en 1 “em” pour le texte principal. Cela semble grand au début mais après l’avoir utilisé, vous comprendrez vite pourquoi tous les réalisateurs de navigateurs ont choisi cette taille pour être celle par défaut.

2. Espaces vides

“La largeur de la colonne doit être proportionnelle à la taille de la police. Des colonnes trop larges sont fatigantes pour les yeux et présentent un effet psychologique déplaisant. Des colonnes trop courtes peuvent aussi déranger car elles interrompent le flot de la lecture et distraient le lecteur en obligeant ses yeux à changer de ligne trop rapidement.”
Josef Brockmann, Grid Systems

Laisser respirer votre texte. L’utilisation d’espaces vides n’est pas un problème propre aux cracks de l’architecture informatique. Cela n’est pas non plus une question de goût. Proposer de l’espace autour du texte réduit le stress puisque cela facilite la concentration sur le fond du sujet. Il n’est pas nécessaire de remplir tout l’espace de la fenêtre. Le fait que les espaces vides donnent une impression agréable, ce n’est pas un effet secondaire, c’est juste la conséquence logique d’une mise en page fonctionnelle. Qui a dit que les sites devaient être encombrés de plein de machins?

Brockmann:Le problème lié à la largeur des colonnes ne relève pas uniquement de la mise en page ou du format, le problème de la lisibilité est tout aussi important.

Assurez-vous aussi que la largeur de la ligne (la largeur du texte dans la colonne, appelé aussi “mesure”) ne soit pas trop grande, et que vous ajoutiez de l’espace à gauche et à droite de façon à ce que l’oeil puisse circuler librement. Nous ne voulons ni ajuster la taille de la police ni celle de la fenêtre. Quand nous ouvrons un site, la seule chose que nous voulions faire c’est de lire immédiatement. Des largeurs de colonnes qui se succèdent en étages, c’est gai, des lignes de textes qui continuent à jamais sur tout l’écran, ça ne l’est pas.

Le bon Nielsen - le mauvais Nielsen. Le roi de la facilité d’utilisation d’un site a récemment ajouté des espaces vides et a limité la largeur de ses colonnes à son article principal (colonne de gauche). L’ancienne mise en page à l’échelle 100% (colonne de droite). Encore un peu plus d’espace entre les lignes et ce sera parfait.

La règle de base c’est 10 à 15 mots par lignes. Pour des mises en page fluides, avec une police à 100%, une largeur à 50% de la largeur de la fenêtre c’est un bon indice de référence pour la plupart des résolutions d’écran.

3. Hauteur de ligne agréable à l’oeil

Voici ce que les spécialistes de la lecture disent :

Les lignes dont la hauteur est trop étroite freinent la vitesse de lecture parce que les lignes inférieure et supérieure sont captées en même temps par les yeux. L’oeil ne peut se concentrer sur des lignes trop rapprochées et (…) le lecteur dépense de l’énergie là où il ne faut pas et se fatigue plus vite. Ceci reste vrai pour des interlignes trop espacés.

La hauteur de ligne par défaut en HTML est trop petite. Si vous l’augmentez, le texte se lit plus aisément. 140% et une bonne norme.

4. Un contraste clair

Ce point ne devrait même pas être abordé. Mais si vous pensez toujours que vous pouvez vous en sortir avec une des combinaisons suivantes :

• un texte gris pâle sur un fond d’un gris encore plus pâle
• un texte argenté sur un fond blanc comme neige
• un texte gris sur un fond jaune
• un texte jaune sur un fond rouge
• un texte vert sur un fond rouge, etc.

…alors vous n’êtes pas un concepteur de site internet mais juste quelqu’un qui se prétend concepteur. Si vous insistez à vous faire appeler concepteur de site internet, vous devez savoir que personne ne le saura jamais car personne ne pourra lire ce que vous voulez dire. Arrêtez ces idioties et faites-nous voir ce que vous avez tapé. Note: pour la mise en page d’un écran un trop grand contraste (noir et blanc) ce n’est pas l’idéal non plus car le texte commence à trembler. La norme c’est #333 sur #fff.

5. Pas de texte dans les images
Nous voulons être capables de chercher du texte, de le copier, de le sauvegarder, de jouer avec le curseur et de marquer le texte au fur et à mesure que nous lisons. Du texte dans les images, ça fait joli mais joli n’a rien à voir avec le Net. Le Net c’est de la communication, de l’information, et l’ information doit rester lisible et utilisable; elle doit pouvoir être citée, agrandie et envoyée.
Si vous ne pouvez pas créer un site web qui soit agréable sans avoir du texte dans les images, alors j’ai bien peur que vous ne deviez recommencer tout à zéro.

Répandez la bonne parole

Si vous voulez que plus de sites soient lisibles, alors transmettez cette information. Etablissez un lien vers cette page, ainsi les gens sauront tout sur les règles du 100% facile à lire (FàL). Si vous le faites, je serais heureux de vous inclure dans ma liste ci-dessous au sommet de la liste si vous créez un lien et plus bas dans la liste s’il n’y a pas de lien.

Comment répandre le FàL

Envoyer un mail à : oliver@informationarchitects.jp avec un lien vers votre page et deux lignes à propos de votre site.

Si votre page est comme il faut, je vous inclurais dans ma liste, que j’apprécie votre architecture ou non. Ne m’envoyez aucun courrier pornographique, ni indésirable, ni politique. Les sites professionnels concurrents (sur les marques, la facilité d’utilisation, la mise en page …) sont plus que bienvenus.

L’original en anglais de ce texte peut se lire à : http://www.informationarchitects.jp/100E2R/