v e r t i g o… blog

Cet article à été écrit pour le blog Design et Typo de Peter Gabor. ce blog est le blog indispensable à toute personne aimant les arts graphiques et les arts appliqués.

Je viens de le mettre à jour en fin d’article puisque Libération vient de revoir sa copie sur le sujet :-)

NEXT de Libération.fr une lisibilité bien malmenée par un contraste trop violent et une mise en page étrange.

Dans la foulée d’une nouvelle formule censée re-dynamiser les ventes du célèbre quotidien co-fondé par Serge July et dont Laurent Joffrin a repris les reines depuis peu, Libération se cherche de nouveaux territoires d’expression et de communication sur le web. Next en est une illustration depuis le mois de juin dernier, avec les différents Blogs de journalistes et autres “sous” sites.

Je n’aborderais pas le sujet du contenu de Next Libération mais du contenant. Laissant ce premier à la libre appréciation de chacun.

Ce site n’étant pas signé, je suppose que c’est l’équipe de développement web de Libération qui a oeuvré en créant une charte graphique empreinte de minimalisme et de simplicité. L’association des images avec des titres ayant des masse équivalentes est très dynamique et moderne. La typographie utilisée n’est pas sans nous évoquer le travail de Neville Brody pour le magazine Actuel (Cf le billet de Peter sur Actuel).

Au premier coup d’oeil général on remarque l’inversion du code couleur du site “maître” Libération.fr, le blanc/noir/rouge (en ordre décroissant) devient le noir/blanc/rouge. Code couleur d’une redoutable efficacité est très courant et très utilisé. Donc un fond noir, des textes blancs et des petites touches de rouge par-ci par-là. L’article “Leader” est dans une autre couleur pour mettre l’accent dessus et capter directement le regard du lecteur.

La lecture sur fond foncé, sujet abordé par Peter précédemment, est sujette à quelques règles élémentaires. La lecture sur écran est très fatigante pour l’oeil. Cette fatigue à pour origine plusieurs facteurs. Le principal est la gestion du contraste. Un fond noir avec une écriture en blanc est un des pires cas de figure pour l’oeil, il provoque une vibration “éblouissante” qui zèbre la vue et rend “aveuglant” ce site. La taille, la graisse, l’interlignage et l’interletrage sont aussi des facteurs de fatigue visuelles lorsqu’ils sont mal réglés. Donc la lisibilité n’est pas optimisée et nuit donc gravement à la lecture de ce site.

Pour casser ce contraste il serait pourtant simple et même élégant de travailler sur des gris. Un fond gris sombre et un texte en gris très clair seraient beaucoup plus digeste. L’oeil et le cerveau identifient comme noir et blanc les parties les plus sombres et les plus claires d’une surface (subjectivité de l’interprétation mentale) même si elle ne sont pas en Noir 100% ou en blanc pur. Pour dire la même chose en plus simple, en utilisant un gris très foncé on ment à l’oeil et au cerveau, qui décrypte l’information, car instinctivement (quasi réflexe) il analyse cette teinte comme la plus foncé et elle devient le référent du Noir, et même processus pour le gris très clair qu’il interprétera comme le blanc.

L’avantage est qu’en plus d’adoucir le contraste et de rendre digeste la lecture, les photographies sont valorisées car ses dernières contiennent du “vrai” Noir et du “vrai” Blanc et sembleront donc plus lumineux, plus nerveux et plus attirants.

Autre facteur de la pénibilité de la lecture sur le site de Next Libération est la gestion des caractères typographiques. Les textes courants sont souvent en Bold avec un interlignage resserré et in interlignage idem. La règle fondamentale veut qu’on ne lise pas le caractère typographique mais l’espace autour. Il serait bon que cette règle soit appliquée, même sur le web grâce aux miraculeuses CSS qui nous permettent des réglages de plus en plus fins sur la typographie. Dans le cas qui nous préoccupe il serait bon d’augmenter l’interlignage, de mettre un pixel d’interletrage et surtout de n’utiliser le Bold qu’avec parcimonie quand c’est nécessaire pour indiquer un mot clé par exemple. Je viens de refaire un tour sur le site et je m’aperçois que le Bold est plus ou moins gommé et le site est déjà beaucoup plus digeste… Et lisible, tant mieux.


Coté en page du site, je suis surpris. je me demande si il n’a pas été construit comme un Blog. L’étrange gestion de la verticalité me pousse vers ce choix d’outil. Un rapide tour dans le code me le confirme. Je pense personnellement que c’est une erreur dans le sens ou ce n’est pas le bon outil qui a été utilisé pour créer le site. Car c’est un site et non un Blog. Le principal défaut est cette colonne centrale sans fin et sans intérêt qui se retrouve orpheline après un ou deux clics dans l’ascenseur de la page. On perd les repères de navigation, le menu et ect…


Autre maladresse dans la mise en page est que comme la typo est fatigante à lire sur son fond noir, l’idée de l’agrandir peut sembler naturelle. Bien mal vous en prendra, car même si le résultat (cf photos jointes) peut être graphique sur la home page, il n’en reste pas moins illisible ;-)

Donc, pour dire les choses comme elle sont, une copie à revoir complètement en terme de lisibilité et de mise en page.

Petite parenthèse sur le “contre journal” autre “sous” blog/site contributif de Libération.fr au nom très évocateur et très motivant. Un contre journal c’est un peu comme un contre-festival, ce dont des dissidents qui le montent. Dans le cas de Libé, il existe déjà un contre-Libé qui est rue89.com. Ce contre journal a pour devise “Les informations ou les débats chassés de l’actualité”. Comprendre “ce que Libé ne vous dit pas, nous vous le disons… Une bien étrange démarche car c’est une confession d’auto-censure qui est la maladie première des journalistes de l’hexagone. Fin de la Parenthèse.

AJOUT DU 06 JANVIER 2008

Allez savoir si ce petit article à contribué à faire évoluer le site NEXT vers une optimisation de la lecture (pourquoi pas ?) toujours est-il que le site vient d’être refait et franchement il est beaucoup mieux maintenant. Plus clair, plus lisible, plus simple.

Le lecteur peut choisir la couleur de fond. Blanc ou noir. Mon choix est fait… Ce sera blanc. Le noir restant toujours illisible et fatiguant pour les yeux.
On note aussi une meilleure hiérarchie de l’information. L’apparition de Filets qui structurent avantageusement la page d’accueil et facilitent le repérage visuel.
Bravo Libé de savoir faire évoluer vers le mieux et donc d’avoir encore la capacité à l’autocritique !
Chapeau bas. Continuez vous pouvez encore optimiser ce site.