Webdesign des portails de Presse | Libération(3)

À force d’enquiquiner tous les jours mon ami Jonathan il a accepté enfin de rejoindre mes efforts pour vous faire partager mes analyses. Et voici en préambule à cet article ce qu’il nous confie au sujet de Libération:

Avant de commencer en profondeur, je vais nous infliger une digression. Le but est de vérifier que lorsque je parle de certains éléments, nous sachons que nous parlons de la même choses. Certains parlent de ‘référentiels’ dans ce cas, je compte simplement que nous soyons sur le même longueur d’onde. Web2.O est un des ces mots ‘chargés’ — chacun a sa propre définition. En ce qui concerne les portails de presse, nous l’utilisons [et j’inclus Peter], pour désigner les aspects sociaux et collaboratifs, le ‘user-generated’ content [contenu créé par les utilisateurs]. Cette désignation est donc ‘neutre’ vis-à-vis de la technologie employé pour arriver à cette fin.

AJAX, qu’on aime et/ou ait adopté cet acronym ou pas, désigne une technologie [qui prédate ce Web2.0 de quelques années] permettant de fluidifier l’interaction entre le visiteur, le browser, et le serveur.

Ensuite, et c’est l’étude du site de Libération.fr qui provoque cette remarque, il est bien de dire une évidence à propos de la présence sur le Web : si on commence un site sur le Web aujourd’hui, ex-nihilo, les concepteurs sont libres, à l’intérieur des contraintes qu’ils se sont donnés, d’inventer leur présentation, l’écrin graphique, l’architecture, etc. Mais — et c’est une évidence — quand un site est créé pour quelque chose qui existait préalablement [dans la vraie vie], ce site ne peut pas être neutre : il arrive avec un univers [et des attentes] qu’il s’agit de traduire en termes du Web. De plus, dans le cas des portails de presse, la référence ‘papier’ [ainsi que l’image graphique qu’un journal ou magazine véhicule] est tellement forte que l’on ne peut pas faire abstraction de cet univers. Or, une des remarques de Peter concernant Libération.fr questionnait l’adéquation entre le support papier et le site.

Je propose que – malgré les problèmes existants sur ces pages, et c’est le but de cet exercice, de les démontrer, et proposer des solutions – cette ‘différence’ n’en est pas une. Et, c’est un point de divergence mineur de nos analyses… Pour moi, le site Libération.fr est la continuation de l’aventure multimédia de ce journal, commencé avec le 3615 Libé. Et il est difficile, voir désobligeant, pour cette équipe qui tentaient déjà l’aventure de faire tenir un journal dans les 40 cols et 25 lignes des pages vidéotex, de faire abstraction de cette histoire. Fort de cet expérience, Libé a été ensuite un des premiers journaux en France pour prolonger cet aventure sur le Web. Ceci explique aussi l’identité du site : où le journal papier s’appelle “Libération”, le site s’appelle “Libération.fr”. Et il ne s’agit pas, comme pour la plupart des supports, de seulement traduire le papier en pixels, mais de continuer l’aventure [pour le meilleur ou pour le pire, et on peut ou ne pas aimer] ayant *aussi* une légitimité historique ailleurs que sur le papier. D’ailleurs, pour revenir au Web2.0, chez Libération.fr cet aspect des choses n’est pas un tic de modernité comme il pourrait paraître chez certains, mais un retour en force d’un aspect collaboratif qui a toujours été présent dans ce journal, et qui fait que, pour une grande partie de son public, leur rapport à ce journal est beaucoup plus affectif qu’avec des autres organes de presse.

Quand Peter parle de regretter les maquettes de Claude Maggiori, je ne peux qu’être d’accord. C’est d’ailleurs avec le dernière changement de maquette que j’ai arrêté de l’acheter, car dans sa dernière mouture, la forme [et le style] a pris le pas sur le contenu, et c’est pour ça que je ne retrouvais plus ‘mon canard’. [Je ne veux pas dire que la dernière maquette n’est pas bonne, simplement qu’elle n’est pas bonne *pour moi*. J’encourage tout le monde à l’acheter, et de soutenir la presse quot, que ce soit avec Libé, Le Monde, Le Figaro, Le Parisien… — j’arrête l’énumération : vous avez compris…].

Continuant sur le dernier article de Peter, je propose même que quand on compare l’architecture des pages de Libération.fr avec celles du site de l’Express que Peter a analysé récemment, on constate tout de suite, et en faisant abstraction des problèmes [mineurs ou graves] de mise en page, que la structure du site de Libération.fr est beaucoup plus forte [charpentée, rigoureuse, et logique] que celle de l’Express. Globalement, si je devais désigner le problème essentiel de Libération.fr, ce n’est pas les tics graphiques, qui ne sont qu’irritants. Non, le problème fondamental est que, à l’intérieur d’un architecture qui a tout pour réussir, il y a un net manque de soin dans les détails. Comme si, au fur et à mesure que l’équipe habitait cette nouvelle maison, et l’adapte à ces goûts et ses habitudes, ils barbouillent les murs de posters, de stickers et qu’en sais-je encore, au lieu de comprendre les espaces mises à leur disposition par l’architecte. Et, à force de barbouillages, le lieu devient inhabitable. Non pas à cause d’un problème fondamentale, mais parce que des couches et surcouches de rajouts, de graffiti, et de ziguiguis sans sens.

Pour terminer ces premier traces sur les pas de Peter, je vais signaler ce qui est pour moi, le problème majeur de ce site, et d’où découle pas mal d’autres : il s’agit de l’emploi du Trébuchet comme police ‘de base’. Non seulement cette police est typé ‘blogs’ et ‘Web2.0’ dans les pires excès, mais il est horriblement mal dessiné, avec des approches disgracieuses, et ce combiné avec des interlignes trop serrées qu’utilise Libération.fr, crée des blocs et des lézards qui ne facilite ni la lecture, ni l’appréhension du contenu. Comme s’il fallait sur-signifier son appartenance à la galaxie Web2.0, là où — précisément et historiquement — Libération.fr n’en pas besoin. (Jonathan Munn )

Aujourd’hui je vous propose d’entrer un peu plus en détail et avec une autre méthodologie dans l’analyse du site de Libération.

Tout d’abord, l’architecture de l’information:

Ci-après vous trouvez la home page de Libé. Comme la plupart des portails Libération proposeune entrée avec un scrolling obligatoir, le codex moderne du web. Impossible de faire autrement. Pour des tas de raisons. Par exemple techniques et informationnelles. S’il est possible de réaliser une page 800 x 640, elle sera trop petite pour bon nombres de lecteurs qui disposent d’écrans plus larges. Et inversement si vous construisez une page statique pour être vue sur un écran large, cela reviendra à faire scroller de toute façon les lecteurs qui se connectent sur leurs portables 15-16 pouces dans un hall de gare équipé en WiFi ou pourquoi pas au Palais Tokyo ou bien au Point Éphemère. Bref puisque le scrolling est de toute manière incontournable autant l’inclure dans l’architecture de la page en hauteur, et comme un journal que vous dépliez dans le métro, là vous descendez l’ascenceur pour voir défiler toutes les entrées d’infos du journal.

Cliquez sur l’animation pour la voir au format réel. Ce déroulé du Portail Libé est intéressant. Il montre s’il en était besoin la continuité des fondamentaux de la presse kiosque avec la presse on-line. Habitués que sommes nous d’acheter des journaux pliés en deux, nous attendons d’être confortablement installés pour pourvoir déplier notre journal. Oui sauf que plus de cinquante pour cent des lecteurs emportent leur journal dans les transports en commun, et dans les trains, métro et bus, on continue de lire le journal plié. Ce faisant c’est la même chose sur un écran. Dès lors qu’on scroll vers le bas on perd des éléments visuels de l’identité (logos, blocs-marques, oreilles du journal).

Cliquez sur l’animation pour la voir au format réel. Ici cette animation et celle, en dessous l’on voit comment Libération nous fait entrer dans les articles. C’est simple. Après avoir survolé les rubriques grisés de la home page, je choisis une sous-rubrique (actualités/monde; actualités/terre; actualités/société; actualités/élysée 2007 etc.). Puis nous accédons à 3-4 ou 4 articles principaux avec un court résumé qui correspond bien aux chapôs traditionnels de la presse papier. Apparaît dans le même temps dans la colonne du milieu la liste des autres articles de la rubrique (société ou monde par exemple), avec un petit plus, les articles du même auteur. C’est beaucoup plus que malin. On s’intérroge souvent sur la pertinence ou la légitimité d’un contributeur ou intervenant de la société civile. Ainsi on peut situer les racines de cet auteur avec bcp plus de précision.

cliquez sur l’animation pour la voir au format réel

L’animation ci-après, j’ai voulu illustrer ce dont nous avons débattu avec Jonathan tantôt. À savoir que l’architecture de l’information nous semble pas du tout remis en cause par cette étude. Ce n’est pas tant la structure même du site que j’ai voulu critiquer depuis le début de ces articles que l’homogénéité, et la pertinence typographique du portail. Jonathan explique cela très bien dans son rappel historique et l’hommage qu’il rend à l’équipe de Libération pour avoir ouvert la voie de l’interactivité déjà dans les années 80 avec le 3615 Libé. Et c’est un fait que le portail est construit avec une solide logique et un arborescence à tout épreuve (mis à part les pages spéciales «vos photos» mais nous y reviendrons). Alors pourquoi ce site semble-t-il si brouillon si cela ne tient pas à son architecture?

Et c’est le typographe qui répond: tout simplement parce qu’on a oublié de travailler la typo avec cohérence et pertinence. Voyons de plus près notre démarche:

L’Architexture de l’information

*

J’ai commencé à isoler pas à pas la texture de la page… ce qui m’a d’ailleurs valu d’inventer une expression, l’archi-texture ou l’architexture d’une page, et pour ce j’ai commencé à supprimer certains petits éléments inutiles. Les entrées avec des {>supérieurs à:} par exemple. Il y en a trop. Du coup on ne voit plus que les signifiants au détriment du signifié. J’ai effacé tout le rouge de la page, tenté de remettre des intertitres en rouge et même des débuts de rubriques en rouge. Mais toujours trop de rouge et pas assez de calme pour le plaisir et la tranquilité dont les yeux ont besoin pour se concentrer sur l’essentiel, l’info. J’ai aussi du coup réaligné les rubriques sur les intertitres, puis en désespoir de cause j’ai commencé à changer la typo des rubriques en utilisant le Georgia dessiné par Mattew Carter. Et là après avoir isolé le milieu de la page par des calques, j’ai comparé en activant et désactivant ces derniers. La réponse est là. Il faut maintenant que je déroule cette méthodologie sur l’ensemble de la home page. Je m’y attaque dès ce week-end. Jonathan nous a signalé en début d’article l’utilisation callamiteuse du Trébuchet ainsi qu’un doux mélange sans logique du Myriad et du Trébuchet. Allez savoir. Sans doute des couches successives de changement sans remise à plat de l’ensemble des feuilles de styles comme le souligne mon complice.

D’autant que certains intertitres sont des gifs et non du txt html. Ça doit pouvoir se régler dans une mise en page bien gérée par les css. Bref, analyser un portail de presse suppose effectivement de prendre un certain temps. Pourquoi je fais cela, pour quelle raison Jonathan et moi-même passons-nous des heures et des heures à discuter de typo, du passage de la culture papier à la culure web? Sans doute que j’y retrouve le plaisir que j’ai eu de partager des années durant une grande complicté avec Paul Gabor. Et combien de fois avons-nous refait le monde avec la conscience que la bonne typo pouvait contribuer à l’amélioration de la compréhension entre les hommes. Et comme vous l’avez compris, mes critiques, analyses, recherches ne visent pas à détruire gratuitement comme un critique de cinéma qui à force de voir deux films par jour n’arrive plus à prendre des plaisirs simples. Je suis loin d’être démotipové. Et continuerai dans les prochains jours à vous alimenter de ces réflexions. J’espère que dans les écoles et universités on comprendra mieux la nécessité de regarder de près ces étranges lettres, ces étranges mots : Police de caractère. Au fait. Savez-vous ce que signifie une police de caractère? Si vous cherchez bien dans mon blog, vous aurez la réponse. À plus ;-) et bon week-end.

ps: je vous donne quand même le lien de l’article, pour la déf. d’une police de caractère.