Day: 15/3/2012

La lisibilité sur écran : comment l’améliorer ?

15/3/2012 Évolution des médias, PRESSE, WEB

Sur Internet, 95% du contenu est du texte. Partant de ce constat, on comprend vite que, dans la création de sites Web, il est essentiel d’accorder une grande attention à la lisibilité du texte, c’est-à-dire à sa capacité à être compris par le lecteur.

La lisibilité dépend de plusieurs facteurs complémentaires : le choix de la ou des polices de caractères, la mise en forme des textes, la structuration des contenus dans la page et du site dans son ensemble, la rédaction. Sur un support imprimé, le respect de règles pour chacun de ces facteurs peut garantir une bonne lisibilité. Sur le Web, des obstacles se rajoutent : l’aspect du texte se modifie en fonction du système d’exploitation, du navigateur et de la résolution de l’écran du lecteur, ainsi que des polices disponibles sur son poste. De plus, non seulement le support informatique transforme le texte, mais la lecture elle-même change. Alors que la lecture sur papier procède par séquence, du haut au bas de la page, sur l’écran, on effectue un scan de la page à la recherche de points de repère. L’œil passe rapidement d’un contenu à l’autre, d’une page à l’autre, en fonction de l’information recherchée.  La capacité à lire des textes longs diminue et l’on privilégie des textes courts.

Autant de changements affaiblissent la lisibilité d’un texte sur écran par rapport à celle d’un texte imprimé. Même s’il a été démontré qu’avec le progrès technologique, l’écart de vitesse se réduit, la lecture sur le Web demeure plus pénible et fatigante.

Que faire?

Ces obstacles imposent une révision des critères de la lisibilité. C’est pourquoi, lors de la conception de sites web, il essentiel de maîtriser correctement l’art de se servir des caractères pour conférer à l’information une forme écrite, en d’autres mots : la typographie. Son but est de rendre un document intelligible et lisible, tout en soignant l’esthétique de la page dans son ensemble, et son efficacité influence directement la rapidité d’acquisition du lecteur. « Le design n’est pas inhérent à l’aspect. Il est inhérent au fonctionnement », avait d’ailleurs affirmé Steve Jobs, le fondateur d’Apple.

De quoi faut-il donc tenir compte pour qu’un texte soit agréable à lire? Comment l’organiser dans un page pour qu’il donne envie au lecteur de le suivre, en évitant tant que possible la fatigue visuelle? Voici les bonnes pratiques et les conseils techniques à suivre.

D’abord : le choix des polices

Une étape primordiale de la conception graphique d’un site est le choix des polices. En théorie on peut utiliser n’importe quel caractère, mais il faut veiller à ce qu’il soit disponible sur le poste de l’internaute et qu’il soit lisible à l’écran.

Les polices se divisent en « serif » ou « sans serif ». Dans une police avec empattements (serif), on distingue des petites pattes qui prolongent la fin des traits d’un caractère, qui sont censées guider l’œil dans la lecture. Une police sans serif présente des caractères tracés uniquement par des lignes et des barres basiques.

On a longtemps considéré que seules les polices sans serif permettaient la lecture sur écran. En effet, sur un vieil écran avec une résolution médiocre de 600 x 400 pixels, lire une police avec serif était presque impossible. Les caractères étaient mal définis et les empattements pixélisées. On a donc longtemps privilégié des polices sans serif (Verdana, Arial, Helvetica, Tahoma, etc.) ou avec serif optimisées pour les écrans (Georgia). Aujourd’hui, le problème des empattements n’existe presque plus, parce que les écrans ont des résolutions plus performantes.

Pour avoir la certitude d’utiliser une police installée par tous les navigateurs, il convient d’en choisir une « web-safe », comme Arial, Times New Roman, Verdana, Georgia, Lucida, Courier New, etc. Mais cela ne suffit pas. En effet, grâce à Css (ou feuille de style en cascade, un langage informatique qui définit la présentation des pages HTML), le développeur demande à l’ordinateur de sélectionner une suite de fontes (une famille) de la plus spécifique à la plus générique. Le navigateur va donc tenter d’afficher les pages avec la police souhaitée ; sinon, il essayera les autres de la famille, jusqu’à ce qu’une soit disponible.

Il est donc important de bien choisir la famille de polices. Voici quelques exemples[1] :

Polices à empattements (serif)

font-family: « Times New Roman », Times, « Liberation Serif », FreeSerif, serif;

font-family: Georgia, « DejaVu Serif », Norasi, serif;

Polices sans empattements (sans-serif)

font-family: Arial, Helvetica, « Liberation Sans », FreeSans, sans-serif;

font-family: « Trebuchet MS », Arial, Helvetica, sans-serif;

font-family: « Lucida Sans », « Lucida Grande », « Lucida Sans Unicode », « Luxi Sans », sans-serif;

font-family: Tahoma, Geneva, Kalimati, sans-serif;

font-family: Verdana, « DejaVu Sans », « Bitstream Vera Sans », Geneva, sans-serif;

font-family: Impact, « Arial Black », sans-serif;

Polices à chasse fixe (ou monospace, désignant la largeur fixe des caractères ; utilisées par les développeurs pour l’affichage de codes)

font-family: « Courier New », Courier, « Liberation Mono », monospace;

font-family: Monaco, « DejaVu Sans Mono », « Lucida Console », « Andale Mono », monospace;

D’après la même source, la composition d’une famille de polices doit, au-delà de proposer des fontes web-safe, rassembler des caractères proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, etc. Ainsi, placer Arial et Verdana dans une même collection est une erreur: Verdana est plus haute et beaucoup plus large. En revanche, on substitue facilement Arial à Trebuchet, bien que le style d’Arial soit sensiblement différent.

La contrainte de la disponibilité des caractères va néanmoins peser de moins en moins. Grâce à une nouvelle commande Css, le @font-face, le développeur peut désormais demander à l’ordinateur d’envoyer une police spécifique à tous les postes, et cela indépendamment du fait qu’elle soit disponible ou pas sur le système de l’internaute.

Le corps (ou taille) du texte devrait se situer entre 12 et 16 pixels (px), avec une exception pour les notes, dont la taille peut descendre à 10px. Une valeur de 16px peut paraître très grande, mais elle correspond à peu près à un corps de 11 points sur papier, qui garantit une bonne lisibilité. Il faut donc faire attention à ne pas diminuer systématiquement la taille, cela ayant pour conséquence une perte de lisibilité.

Quelle que soit la police choisie, pour garantir une bonne lisibilité il faut s’assurer qu’elle a une hauteur d’x confortable. La x indique la hauteur du tracé d’un caractère en minuscules, sans hampe ni jambage, tel qu’il est imprimé. Les polices sans serif et celles qui sont optimisées pour les écrans ont une hauteur suffisamment grande.

On peut définir la taille des caractères en valeur absolue. Mais il existe aussi une définition en taille relative, ou em. Celle-ci permet l’adaptation des caractères aux résolutions et aux paramètres de l’utilisateur, en évitant le risque que les lignes se chevauchent. Cela facilite l’accessibilité aux pages.

L’utilisation de polices distinctes pour différencier les contenus (titre, chapô, texte, intertitres, légendes, encadrés, liens, etc.) est très recommandée. La lecture sur écran, du fait qu’elle procède par scan, requiert des points de repère bien visibles : la mise en évidence des différents niveaux de lecture favorisera une bonne lisibilité. Par le contraste entre caractères, le lecteur trouvera plus facilement l’information recherchée.

Ensuite : la mise en page du texte

La mise en page du texte ne peut se passer d’un élément essentiel: le rythme vertical. Il s’agit de l’organisation de l’espace et de l’arrangement du texte dans la page. On parle de rythme parce qu’il confère harmonie et stabilité à la page. Cela améliore la lisibilité en facilitant le suivi du texte et apporte une certaine cohérence stylistique.

Concrètement, le texte doit s’aligner dans une grille de référence qui met en étroite relation la hauteur de ligne et celle du corps du texte : la hauteur de ligne de n’importe quel élément devra être un multiple de la hauteur de base pour que le rythme soit respecté. Les marges entre les paragraphes doivent eux aussi s’adapter à ce rythme.

L’interlignage, la distance qui sépare les lignes de base de deux lignes de texte, est un élément capital du rythme vertical. Pour qu’un paragraphe soit lisible, il faut que le texte respire, que l’on distingue bien les lignes. La hauteur de ligne va influer sur « l’aération » du texte. Le graphiste Peter Gabor explique justement que « serrée, la composition se densifie ; lâche, elle se clarifie et devient aérienne ». On peut considérer qu’un bon interlignage est compris entre 140% et 150% par rapport au corps de la fonte utilisée. Le texte peut être ultérieurement aéré en plaçant des espaces blancs sur chacun de ses côtés.

Il faut aussi éviter les lignes trop longues. Une justification de 65 signes par ligne semble correcte. Si la justification est trop importante, le lecteur aura du mal à repérer la ligne suivante à chaque saut de ligne. De fastidieux « couloirs » de blanc pourraient également se former dans le paragraphe. Pour trouver le bon compromis, il existe une méthode simple, celle du typographe Robert Bringhurst, qui consiste à multiplier la taille de la fonte par 30. Par exemple, si corps de texte est en 14px, la justification sera de 420px.

Le contraste des couleurs joue aussi un rôle important. Il faudra éviter les contrastes trop nets, comme du texte noir sur un fond blanc, qui brouille légèrement la vue. Des contrastes moins forts favoriseront une bonne lisibilité, à condition que les couleurs choisis ne se ressemblent pas trop.

Adaptation aux différents contextes de lecture

La problématique de la lisibilité se complique sensiblement par la multiplication des supports. L’interface d’un site (son organisation visuelle) doit en effet pouvoir s’adapter aux différents terminaux : ordinateurs de bureau, ordinateurs portables, iPad et autres tablettes, iPhone et autres smartphones.

Pour faire en sorte que le contenu soit lisible sur tous les supports, il est donc nécessaire de créer des feuilles Css pour chacun d’entre eux. La définition de feuilles Css pour les sites mobiles doit tenir compte de deux problèmes : une résolution moins importante et une connexion souvent moins rapide que sur PC. Un contenu simplifié et optimisé est donc indispensable, ainsi que des pages légères en chargement. La navigation tactile requiert d’avantage de simplicité dans la construction de la page : il faut éviter des colonnes multiples de contenus et afficher les contenus empilés dans une seule colonne facile à parcourir. Des gros caractères, larges et lisibles, sont à privilégier : même si l’écran est petit, les polices ne doivent pas l’être pour garantir une bonne lisibilité. Les fichiers Flash player sont à oublier pour des nombreux smartphones, et surtout pour l’iPhone, qui ne l’affiche pas du tout.

Cela dit, rien n’empêche un smartphone, par exemple, d’afficher le contenu défini par une feuille de style pensée pour un site Web mais, dans ce cas, l’affichage du contenu ne sera pas adapté aux dimensions de l’écran, pénalisant ainsi la lisibilité.

 

Francesca Motta pour Rampazzo & Associés

La rénovation de la presse passe par la « NEWSROOM »

15/3/2012 PRESSE

À l’heure de l’information numérique, disponible partout, en tout temps, la presse doit se réinventer. Comment ? Coup de projecteur sur la newsroom, nouveau modèle de gestion de l’information choisi par le quotidien suisse Aargauer Zeitung au moment où il lançait sa nouvelle formule conçue par Rampazzo & Associés.

Pour survivre à l’époque du numérique et retrouver son rôle moteur dans la société, la presse ne peut pas se contenter de mélanger les rédactions print et Web sans rien changer à ses méthodes de travail. Telle est la conviction de la direction de l’Aargauer Zeitung, le troisième quotidien de Suisse par sa diffusion. Consciente de la nécessité d’innover, elle s’est lancée y a dix-huit mois dans un projet novateur : la création d’une newsroom.

Ce vaste espace permet à la fois le rassemblement des rédactions en un lieu unique et la répartition de l’information dans les différents canaux de diffusion qui portent la marque du journal : dix éditions locales, un site Internet, une radio et une chaîne de télévision.

Werner De Schepper, rédacteur en chef adjoint de l’Aargauer Zeitung, tire un premier bilan : « Un an après la mise en place de la newsroom, les journalistes ont commencé à plus se parler et à coordonner davantage leurs efforts. » Ce succès est le fruit d’une nouvelle organisation du travail, qu’il définit comme « horizontale et fonctionnelle ». Concrètement, la production et la diffusion de l’information sont décidées par ceux qui dirigent au jour le jour les quatre rédactions. Un desk gère le contenu en ligne ; un autre s’occupe de la rédaction du cahier commun à toutes les éditions comprenant les pages internationales, nationales et sportives ; un troisième centralise la mise en page de toutes les éditions locale et un dernier s’occupe du magazine d’actualité de la chaîne télévisée.

L’importance de la formation
C’est une architecture dite « démocratique », en cela qu’elle donne la possibilité à tous les journalistes d’avoir une vision d’ensemble de ce qui est produit et de cordonner leur travail. Elle diffère de celle, très hiérarchisée, de la plupart des newsrooms, où le flux d’information et les ressources à disposition sont gérés par un seul chef qui décide de la diffusion des contenus dans les différents canaux.

Après la mise en place, l’étape suivante consiste à « former une conscience multimédia », explique M. De Schepper. Il s’agit d’un point fondamental pour changer les mentalités dans la production de l’information. Parce que les journalistes doivent maîtriser l’écriture pour le papier, pour le Web, ainsi que la production de vidéos pour le site Internet, l’entreprise a mis en place des formations pour apprendre aux équipes print et Web à travailler en multimédia : 60 des 170 journalistes ont déjà été initiés à la production de sujets vidéos, par le biais de journées théoriques et de beaucoup d’exercices sur le terrain, caméra en main.

« Tout le monde ne devient pas forcément multimédia, mais on découvre les talents des journalistes, ce qu’ils peuvent faire mieux. Le plus important est qu’ils acquièrent la conscience qu’aujourd’hui se dessine une nouvelle manière de travailler, sur tous le contenus et vers tous les canaux », explique Werner De Schepper.

Un média ancré dans le territoire
La newsroom n’est pas forcément synonyme de centralisation : « Alors que les rédactions des différents supports ont été centralisées, les rédactions locales, elles, ont été décentralisées pour être plus proche des gens », précise M. De Schepper. L’intérêt de cette mesure est d’accorder une place centrale au journalisme hyperlocal. Angler les informations dans le sens de la proximité, mettre en scène les habitants, leur donner la parole, c’est la clé pour se rapprocher du lectorat.

Selon Nata Rampazzo, directeur de la création de Rampazzo & Associés, qui a collaboré à la mise en place de la newsroom, « le journal redevient ainsi ce que la presse était il y a vingt ans : un élément de lien social, le moteur, le stimulateur, d’une région toute entière ». La qualité d’un média consiste à susciter davantage d’interactivité et de participation, à s’intégrer en profondeur dans son territoire, surtout quand il est culturellement hétéroclite comme la zone de diffusion de l’Aargauer Zeitung.

À travers des blogs associés au site d’un titre, le lecteur pourra demain devenir lui-même un reporter, une sorte de correspondant de l’art de vivre local, souligne M. Rampazzo. A l’avenir, la majorité du contenu hyperlocal pourra même être bottom-up (du bas vers le haut), c’est-à-dire généré par l’utilisateur, pour lequel il faudra « inventer un mode de rémunération », prévient-il.

À chaque support son temps de lecture
Pour l’instant, l’Aargauer Zeitung se concentre sur l’amélioration de la collaboration entre print et Web, jusqu’alors très informelle. À partir du printemps 2012, elle sera encadrée plus strictement, dans un souci d’optimiser le flux d’informations. « On ne veut plus faire la même chose dans les quatre canaux, continue M. De Schepper, parce que ça n’a pas de sens d’engager quatre personnes pour traiter la même information ou surveiller le même flux d’informations. Il faut plutôt approfondir davantage les informations selon les besoins et le caractéristiques des différents médias. ».

Par cette multiplication des contenus, les canaux finiront-ils par se chevaucher ? « Pas du tout, parce que chaque média a ses temps de lecture, son langage et ses spécificités », répond M. Rampazzo. Alors que sur les supports numériques, la lecture s’effectue en temps réel, de façon immédiate, « le temps de lecture d’un journal impose en revanche un retour à la narration classique, qui met en avant des longs papiers capables de replacer les événements en perspective et de donner des clés de lecture », observe-t-il.

Il est donc faux de penser que le journal va disparaître, submergé par les autres supports. Au contraire, il va se réapproprier sa fonction originelle, celle d’être la source primaire de l’information, le support où l’on va chercher des repères. Dans ce contexte, « il est essentiel pour la presse de se doter d’une maquette qui permette la valorisation du contenu », souligne Nata Rampazzo. À travers une structure graphique élégante, sobre et ergonomique, le journal mettra en scène le meilleur de l’information, choisi parmi toute la production disponible quelle que soit son origine (écrite pour le papier, venant du Web ou rédigée par un lecteur). La nouvelle maquette de l’Aargauer Zeitung, lancée parallèlement à la newsroom, a précisément été réalisée dans cette perspective, rappelle Nata Rampazzo, qui était chargé de sa conception.

Print et Web sont indissociables et complémentaires. Pourtant, le message semble ne pas passer partout. En France, aujourd’hui, les quotidiens dont le tirage s’établit entre 70 000 et 100 000 exemplaires ne sont plus considérés comme des médias de masse. Mais ce critère est désormais caduc, « parce que les mass media sont en train d’évoluer sous l’impulsion du Web et, surtout, de l’interaction entre leurs différents supports », relève M. Rampazzo.

Il en résulte une nouvelle génération de médias, des médias globaux qui réorganisent leur travail pour produire du contenu adapté à chaque support. Ces médias gèrent aussi le contenu provenant du lectorat : commentaires des articles de la rédaction, posts sur des blogs, contributions sur Facebook, tweets, etc.

La presse doit se saisir du multimédia comme d’une opportunité et non le redouter comme une menace pour son avenir. L’Aargauer Zeitung le démontre : se donner le temps de former les journalistes, changer l’organisation du travail et les mentalités est capital pour faire évoluer la presse écrite en cross média. En même temps, le journal doit continuer à fournir de l’information de qualité et accorder davantage d’intérêt à l’actualité hyperlocale. Pour qu’il puisse retrouver sa place au cœur de la société et en redevenir le point de repère.

Francesca Motta pour Rampazzo & Associés

Nata Rampazzo, directeur de la création de Rampazzo & Associés, et Werner De Schepper, rédacteur en chef adjoint de l’Aargauer Zeitung, collaborent depuis 2008. Parmi leurs réalisations en commun, on compte la création de la nouvelle formule du magazine suisse L’Hebdo en 2008, la conception la nouvelle maquette de l’Aargauer Zeitung en 2009 et la mise en place de sa newsroom, à Aarau. Chez Rampazzo & Associés, Werner De Schepper est conseiller éditorial pour la presse régionale.