5 règles simples pour améliorer l’affichage de vos textes

Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les *11 erreurs à faire pour être recalés à un concours de webdesign…* Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : *Lisibilité, ce qui va sans dire, va mieux en le disant*. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace 😉

La plupart des sites web sont remplis de textes trop petits pour être lus correctement. Pourquoi ? Il n’y a aucune raison particulière, juste une stupide erreur collective qui a commencée lorsque la résolution des écrans était vraiment faibles. Donc :

Ne nous demandez pas de spécifier nous-même la taille de la police.

Nous ne voulons pas modifier les préférences de notre navigateur chaque fois que nous visitons un site web.

Ne nous dites pas que les pages encombrées sont plus agréables à lire.

Les sites web remplis jusqu’à la gueule ne sont pas beaux, ils puent. Remplir les pages à tout prix n’a jamais aidé l’ergonomie. C’est la paresse qui pousse ces concepteurs à nous bombarder d’informations inutiles. Nous voulons que vous réfléchissiez pour sélectionner ce qui peut nous intéresser. Nous ne voulons pas faire le boulot à votre place.

Ne nous dites pas que faire défiler une page *saimal*.

Parce qu’alors tous les sites web sont nuls. Ils n’y a rien à reprocher aux longues pages. Rien du tout. De même qu’il n’y a rien de mal à tourner les pages d’un livre.

Ne nous dites pas que le texte n’est pas important.

95% de ce qui importe dans le webdesign est typographie.

Ne nous demandez pas de porter des lunettes.

Plutôt que d’avoir les yeux sur l’écran, nous préférons continuer la lecture confortablement assis dans une position relax.

Cinq règles simples à appliquer pour améliorer l’harmonie visuelle de vos pages web

1. Corps standards pour les longs textes.

   Le corps du texte que vous êtes en train de lire n’est pas gros. Il s’agit de la taille par défaut définie par votre navigateur. C’est ce que nous voulons pour vous.

   Nous ne voulons pas cliquer sur des boutons pour avoir un texte plus ou moins grand. Nous ne voulons pas changer nos préférences. Nous voulons juste poursuivre notre lecture. Nous voulons que vous vous adaptiez à nos réglages, pas que vous soyez à côté de la plaque.

   C’est vrai qu’il n’est pas facile de créer un bon design avec les tailles par défaut ; mais cette difficulté vous guidera pour proposer un site plus clair et plus simple. Faire compliqué n’est pas si difficile, faire simple demande un peu plus de rigueur. Si la taille par défaut surprend au début, très vite vous ne voudrez plus voir de tailles inférieures à 100% ou 1em pour le texte principal : les concepteurs des navigateurs n’ont pas choisis cette taille par hasard !

2. Des blancs tournants.

   Laissez respirer votre texte. Utiliser l’espace pour structurer un design n’est pas une option, c’est une question de goût. Aérer le texte réduit le niveau de stress comme il permet de se concentrer sur le fond. Inutile de forcer la dose. Cet espace blanc qui agrémente votre design n’est pas un effet de bord, c’est une conséquence logique d’un design fonctionnel. Qui a dit que les sites web devaient être chargés à bloc ?

   La largeur d’une colonne n’est pas seulement une question de design ou de format. La largeur d’une colonne devrait être proportionnelle à la taille de la police. Une largeur trop importante fatigue les yeux, tandis que les colonnes trop étroites perturbent le lecteur en obligeant le regard à des allers-retours trop rapides. » (Josef Brockmann, Grids Systems)

   Assurez-vous que la longueur des lignes n’est pas trop importante et que vous avez suffisamment de place de chaque côté pour la gymnastique des yeux pendant la lecture. Rappelez-vous que nous ne voulons pas ajuster la taille des caractères ou la résolution de l’écran : nous désirons seulement prendre connaissance du contenu. A cet égard, les colonnes extensibles sont une bonne chose ; les lignes qui n’en finissent plus, c’est le mal.

   La règle est simple : pas plus de 10 à 15 mots par ligne. S’il s’agit d’un design liquide – et si le corps est à 100% – une taille de colonne à 50% devrait le faire pour la plupart des résolutions utilisées.

3. L’interlignage : ami ou ennemi ?

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

   Un interlignage trop faible ralenti la lecture parce que le haut et le bas de la ligne est balayé en même temps par le regard qui ne peut focaliser sur deux éléments en même temps. C’est une perte d’énergie inutile. C’est d’ailleurs la même chose pour les textes dont l’interlignage est trop important.

   L’interlignage par défaut des navigateurs est trop faible. En augmentant la hauteur de ligne de 140%, les textes deviennent tout de suite plus lisibles.

4. Contraste des couleurs.

   Ce qui va sans dire, va mieux en le disant, mais si vous pensiez avoir tout bon avec ce qui suit :

   • texte gris clair sur un fond encore plus clair,
   • texte argenté sur un fond blanc comme neige,
   • texte gris sur fond jaune,
   • texte jaune sur fond rouge,
   • texte vert sur fond rouge,
   • etc.

   …alors vous n’êtes pas un *webdesigner*, vous en avez juste l’air. Si vous persistez dans cette voie, vous devez savoir que jamais personne ne sera capable de lire ce que vous avez à dire. Arrêtez le massacre et regardez plutôt ce que vous faites : à l’écran, un contraste trop important (texte noir sur fond blanc) n’est pas l’idéal, car le texte commence à scintiller. L’idéal est à chercher du côté des valeurs suivantes : texte #333 sur fond #fff.

5. Pas d’images à la place du texte.

   Nous voulons effectuer des recherches sur la page que nous lisons, copier du texte, jouer avec le curseur et sélectionner du texte. Remplacer du texte par des images peut sembler attrayant, mais le web n’est pas fait pour ça. Il s’agit avant tout de communication, d’information ; et l’information a besoin d’être lisible, utilisable, améliorée, citée et envoyée. Point barre.

   Si vous n’êtes pas capable de faire en sorte que votre site web soit cool sans transformer les textes en images, j’ai bien peur que vous soyez parti pour recommencer depuis le début.

Dites-le haut et fort.

Si vous voulez des sites web plus lisibles, faites comme moi, faites un lien vers cette page pour que tout le monde sache de quoi il retourne. Si vous faites cet effort, je serais heureux de vous mettre en haut de la liste, sinon, vous vous retrouverez tout en bas avec un rel="nofollow" ^__^

Comment participer ?

Envoyez un email à oliver[at]informationarchitects.jp avec le lien menant à votre billet, plus quelques lignes à propos de votre site.

Si votre page est OK, vous apparaitrez sur cette page, que le design de votre page me plaise ou non. Sauf bien sûr, s’il s’agit de porno, de spam ou de politique.

PS : Si vous avez de la place dans un billet n’hésitez pas à faire passer le message (OK, les chaines sur internet, saimal). Si un élément de cette « craduction » vous semble perfectible, n’hésitez pas à me faire parvenir vos impressions afin que j’améliore ce texte qui pourra ainsi gagner ses galons de « traduction » ^__^