Webdesign, plus c’est gros, mieux ça passe (2)
30 août 2006 14 commentairesJonathan Follet y explique que la lecture à l’écran est difficile, bien plus difficile que la lecture sur papier. OK. Ca on le sait tous, mon ophtalmo compris. Plus intéressant, il (Follet, pas mon ophtalmo) décrit les évolutions de la lecture et de l’écriture en ligne :
- on scanne plus qu’on ne lit,
- textes en ligne plus courts que leur équivalent papier,
- généralisation des intertitres pour couper et structurer les textes.
Il arrive à ce constat sans appel : le taux de rétention de la lecture à l’écran est inférieur de 30% à celui de la lecture sur papier.
All too often, as digital designers, we are so focused on getting the information onto the screen that we lose sight of the person on the other side of that screen with whom we’re communicating. (…) We must pay attention to legibility.
Jonhatan est assez sympa pour nous proposer quelques pistes pour remédier à ça.
Augmenter la taille du texte
C’est évident, mais ça ne coûte rien de le répéter. Sur le web, je vois bien plus de textes en 10px gris clair sur gris foncé que de grosses polices avec des couleurs bien contrastées. Forcément, c’est moins joli, moins sophistiqué, moins design… et moins lisible. Allez, je vais prêcher un peu pour ma paroisse et passer un peu de brosse à reluire sur… bha sur moi pour commencer : chez CNET, sur businessmobile.fr par exemple, on s’est efforcé d’augmenter le corps du texte des articles (le contenu qui intéresse au premier chef l’utilisateur) d’au moins 0.1em par rapport aux contenus contextuels. Même topo sur news.fr et news.com.
Bien choisir sa police
Verdana ou Georgia, d’après Follet, avec leur large corps et leur x-height hauteur d’oeil importante (je sais plus comment on dit le x-height dans la langue de Molière – je cherche et je reviens faire un update – promis juré merci thierry) facilitent la lecture à l’écran. Et il est vrai, que les web designers ne s’encombrent jamais vraiment avec la typo. Les seuls designers ou graphistes que je connaisse qui la considèrent vraiment comme un élément essentiel de design, viennent en général du print.
En bref et en caricaturant à peine
Il faut revenir à un principe de base du design énoncé dans un précédent billet : Plus c’est gros mieux ça passe
.
Si vous avez d’autres trucs et astuces… n’hésitez pas à m’en faire part !
@ barba :et encore c’est mieux que l’écoute, mais c’est bien de le rappeler, clair et concis, c’est dommage, ya encore des blogueurs et blogueuses qui postent un peu trop long 😉
Effectivement, mais tu réponds par la forme à une question qui finalement touche le fond… Je suis d’accord sur le fait que la lisibilité « visible » est importante (cruciale ?). Mais le danger est de se concentrer dessus en oubliant le principal : ce qui est dit et comment.
En fait, n’est-ce pas tout simplement une limite « humaine » de capacité d’attention/concentration à l’écran. Le format numérique est idéal pour des papiers courts types brèves / news. Pour ce qui est de l’analyse impliquant des papiers de fond, on décroche rapidement et revenons au papier.
L’exemple type est avec les livres blancs, ces études parfois longues comme un jour sans pain. Le média internet est idéal pour les rechercher, trouver, faire de la veille etc. Mais quand il s’agit de se plonger dedans, mieux vaut faire chauffer l’imprimante.
D’où l’importance aussi pour les producteurs de contenu de garder constamment à l’esprit de faire court et concis (tout le contraire de ce que je fais maintenant, je sais 🙂 ).
Phénomène marrant, je pense que l’on va bientôt se rendre compte que c’est la même chose sur les vidéos en ligne. On peut regarder la TV 4 heures d’affilées. Mais une vidéo de 700×400 sur internet, au bout de 3 minutes, ça devient fatigant…
@ Jean-Philippe : Tout à fait d’accord, la forme et le fond sont intimement liés et le medium influe terriblement le message (« the medium is the message » comme dirait l’autre). On peut corriger certaines choses, apporter un peu plus de confort, mais le média internet sera toujours plus adapté au screening, le papier toujours plus adapté à une lecture en profondeur, la télé toujours plus adaptée au moulage sur canapé.
Concernant la vidéo, sdujet ô combien intéressant et d’actualité, je te rejoins sur ce point : une vidéo de plus de 10mn au format timbre poste est inregardable sur internet. Pourtant ce n’est pas ce que semblent penser les grands acteurs du web : Yahoo a lancé sa chaîne vidéo, de même que CNET, YouTube cartonne, google Vidéo et Daily Motion aussi…
Pourtant dans une vidéo, impossible de déposer un commentaire, de faire un lien, de la marquer en favori, de faire un trackback ou un pingback… La vidéo est un format fermé qui va à l’encontre de ce qu’est le web.
Vive les microformats tiens !
@PPG : un excellent article sur l’art d’écrire pour les blogs, et le blog du même auteur (Jean-Marc Hardy) qui met en application tous ces bons conseils : http://blog.60questions.net/
Bordel, si tu arretais d’utiliser cette foutu couleur de type verte fuo ça irait beaucoup mieux. On se croirait sur Myspace ici
Dis-donc, c’est quoi ton problème avec les sites verts ? 😉
@Emmanuel : Le vert fluo, c’est mon côté Djeun’s, mon côté skybeurk quoi ! Mais bon, c’est vrai que parler des bons usages de la police et agresser ses visiteurs au stabilo fluo, c’est pas très fair-play. Alors, voilà : plus de vert fluo pour les liens ; ce blog a pris 10 ans d’un coup !
« C’est plus c’que c’était »… ©
Le problème du webdesign ce n’est pas de trouver la bonne couleur c’est d’être lisible. Maintenant c’est lisible… Mais je n’ai jamais dit que j’aimais le vert pour autant…
Sinon bravo pour ce billet très intéressant. Toutefois tu te rappelles peut être de l’étude Eyetrack il y a un an qui arrivait à la conclusion exactement inverse: l’attention du lecteur est plus soutenue quand le corps du texte est plus petit. bref small is beautiful !
Pas simple de décider…
Le bon compromis à mon avis: les titres plus gros, le corps de texte -2 et des interlignes plus serrées.
Pour ceux qui son intéressés par l’étude eyetrack, vu sur redaction.be (encore lui!) :
http://www.redaction.be/exemples/eyetrackingstudy_janv_05.htm
bonjour,
juste une petite précision, tardive, pour indiquer que l’utilisation de la georgia, dont je suis un fervant défenseur, n’est pas des plus aisée.
Une simple comparaison dans un navigateur sous PC et sous MAC vous fera comprendre le sens de mon propos. En dessous de 15px point de salut. Ceci s’explique en partie par l’absence d’anti-aliasing sur les PC… et par « la rondeur », la « gourmandise » de cette typo fort attachante.
Aïe aië aïe ! L’anti aliasing sur PC… Ou plutôt l’absence d’anti aliasing… Il m’arrive de travailler sous mac, et d’oublier de regarder le résultat sur PC. Grave erreur.
Pour les polices, dans un souci de compatibilté, je reste malheureusement basique : Arial, Helvetica, Times, Georgia, Trebuchet, Verdana ou Courier. Mais avec quelques astuce et les CSS, il y a moyen de faire pas mal de choses : http://www.digital-web.com/articles/css_typography/
x-height = hauteur d’oeil