Le portail du Point relifté par les étudiants d’e-artsup | Les maquettes

une école de la création numérique et innovante…

…qui ne s’attaquerait pas à l’un des exercices les plus nobles et fondamentaux de notre système d’information ne remplirait pas vraiment sa mission. C’est en tous cas, le préambule que j’ai posé après la réunion de brief que nous avons eu avec la Rédaction du Point. C’est de même, pas tout à fait la première fois que j’entraîne mes étudiants à se confronter au design de presse puisqu’en 2005-2006 j’avais déjà abordé la question de leur faire refaire la maquette du Monde (version papier).

Mais pour quelle raison est-ce si difficile?

La presse n’est pas un produit comme un autre. Sa mission, malgré un modèle économique qui l’oblige, comme tout entreprise, à présenter des comptes de résultats positifs chaque année, sa mission donc est d’informer, d’enquêter (d’investiguer), interviewer, rendre compte des crises, de leurs causes et des acteurs de l’information politique, sociale, économique et culturelle sans oublier bien entendu le sport. Tâche noble, si elle en fut. Des générations de journalistes se sont battus pour la liberté d’expression et je ne reprendrai pas ici les débats initiés pas Edwy Plenel en marge des états généraux de la Presse, parce que, ni le lieu ni le moment, mais l’affaire de cette liberté n’est jamais tout à fait acquise. On le sait. Toutefois, parmi les causes de la désaffection du public pour la presse Quot. j’en retiendrai une: La perte d’identité et de la culture de l’information. Le manque de respect des lecteurs donc.

Oh ce n’est pas ici, sur le portail du Monde Interactif que, ceci soit le plus évident. Plutôt même le contraire. Le Monde Interactif est l’un des fleurons de nos journaux en ligne pour avoir compris la nécessaire transversalité d’une information qui va du papier vers le papier en passant par le monde des écrans. Ou l’inverse d’ailleurs. Mais transversalité veut dire continuité.

La presse écrite imprimée a inventé des codes de mise en page et de rythme de lecture. Rompant avec le Livre, elle a découvert la nécessité de mettre en page les articles, et en premier la Une de sorte que l’on favorise en permanence la hiérarchisation de l’information (allant parfois même, jusqu’à exagérer) et la lecture la plus confortable donc la plus rapide. On a donc inventé pour cela des colonnes, et, forcément, des grilles de mises en page.

Vous trouverez dans les articles de design et typo un certain nombre de sujets qui traitent de la lisibilité, des gris typo , de l’interlignage, des contrastes et du noir au blanc et notamment cette évidence physiologique concernant la fatigue rétinienne lorsque obligé de fixer trop longtemps une ligne de texte trop longue. 30 à 55 signes par ligne correspondrait au meilleur confort de lecture. Au delà, nos yeux décrochent de la ligne, sauf, sauf si l’on joue avec l’interlignage en augmentant les blancs entre les lignes. Mais le journal Papier ne pouvait se permettre de tels gaspillages et dès lors on assistait chaque fois à la recherche du meilleur compromis (forme des caractères, chasse, et approches, ainsi et surtout, la hauteur d’œil des polices, qui devaient être les plus grands possibles) pour la lisibilité et l’économie d’espace. Toute contraintes qu’Internet n’a pas besoin de reproduire (il y en a d’autres).

Et pourtant… Je vous parlais des codes, nous aurions pu aussi bien parler de l’ADN de la presse traditionnelle, celle-ci est connue et reconnue par les lecteurs du monde entier. J’ai donc invité bien entendu nos étudiants d’e-artsup, d’aller y voir de plus près (benchmark). Journaux américains en ligne, Anglais, Allemands Espagnols aussi. NewYork Times et Guardian, El País etc. Mais également de se reporter à une étude que j’avais mis en ligne spécialement pour eux ici.

Le brief décrypté par les étudiants…

Tout d’abord je voudrais ici remercier Gabriel Jorby Directeur Artistique du site Le Point.fr, ainsi qu’Emmanuel Cacheux, directeur technique et Philippe Mathon, Rédac. Chef du site, sans qui ce travail n’aurait jamais pu être initié. Merci également à Sophie Magna, directrice Marketing qui nous a si efficacement indiqué les attentes marketing du relifting.

«Le Point en ligne est selon nous la continuité du magazine papier, créé il y a une trentaine d’années par Claude Imbert, l’homme au col de chemise blanc. Revue plus que magazine d’ailleurs, Le Point s’est toujours efforcé de se situer au dessus des champs de bataille en adoptant la posture de journalistes qui enquêtent et réfléchissent et décryptent les infos pour des lecteurs curieux des non-dits de l’actualité.

Lecteurs sans doute privilégiés, CSP+ et ++ il nous apparaissait nécessaire de retrouver dans le journal en ligne cet ADN fondamental qui traduit l’histoire d’un magazine, d’une presse. Le Point c’est sérieux, et les codes de mises en page actuels, ne nous semblaient pas traduire les fondations de la rédaction. Rédaction qui de plus est, est sincèrement soucieuse de respecter son lectorat. Nous l’avons constaté plusieurs fois au cours de nos réunions préliminaires. Alors sans doute, faute de temps, et d’investissement majeur, l’actuel portail du Point, qui par ailleurs voit son audience augmenter d’année en année, traduit assez mal la passion journalistique que nous avons découvert chez nos interlocuteurs. Un portail en deux colonnes avec un déroulé obligeant les lecteurs à scroller plus qu’il ne faudrait.

Des polices aux dimensions monumentales qui occupent un espace vertical qui augmente encore la nécessité du scrolling et du coup, un manque cruel d’hiérarchisation de l’info qui donne plus l’impression d’un «canon à dépêches AFP» que d’un journal au sérieux si patent. Voilà. Retrouver les principes qui ont fait le succès du magazine, permettre aux lecteurs de l’édition papier à se sentir chez eux en lisant leur quotidien en ligne. De sorte, qu’en essayant de ne pas perdre de lectorat, on récupère celui, original du mag.

Bien sûr on peut nous rétorquer que le portail risque alors de tuer le magazine papier. C’est sans compter la différence essentielle entre les deux. Le mag papier, hebdomadaire, qui prend le temps de construire une pagination et raconte l’histoire des actus en prenant la posture historique qui est le sien, le journal en ligne, au rythme quotidien qui publie les infos, rend compte des dernières nouvelles du monde et n’a pas toujours le temps de prendre le recul nécessaire au décryptage des actualités. Les deux publications ne se marchent pas l’un sur l’autre. Tout au plus, elles risquent de temps à autre de se chevaucher, mais le lectorat traditionnel du magazine, aime lire, aime feuilleter le papier. Nous avons donc pensé qu’il était parfaitement inutile de prendre des précautions qui limiterait la qualité graphique du journal en ligne.»

/////////////////////////////////////////////////////////////////

Communiqué de Presse et Brief de la Rédaction (résumé)

Lepoint.fr a confié en octobre dernier aux étudiants d’e-artsup, école de la création numérique et multimédia, la réflexion d’une nouvelle interface pour son site d’information.

Et c’est le lundi 26 janvier, après 3 mois de travaux, que le jury composé conjointement de la direction du site lepoint.fr et des enseignants d’e-artsup découvrira les projets des étudiants. Après délibération du jury, 4 des projets présentés seront mis en ligne sur le site lepoint.fr.

C’est sous la tutelle de peter gabor, directeur de l’école et expert en typographie — il a entre autres conçu les caractères du journal Libération en 1994, utilisé sous la formule de Jean Bayle — qu’e-artsup a mis à l’honneur de son programme d’enseignement de ses étudiants de 4e année cette réflexion graphique sur un acteur majeur de l’information en ligne.

La version actuelle du site lepoint.fr a été lancée il y a tout juste un an, en janvier 2008 et affiche une courbe croissante d’audience depuis son lancement. Les étudiants ont donc eu pour mission d’offrir une nouvelle jeunesse au site de l’hebdomadaire, en exploitant l’ensemble de techniques du web social, tout en conservant l’identité de la marque Le Point.

/////////////////////////////////////////////////////////////////

Portail actuel du Point en ligne: la Homepage

/////////////////////////////////////////////////////////////////

Portail actuel du Point en ligne: page d’article

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////

Maquettes d’étudiants:

/////////////////////////////////////////////////////////////////

Antuori | Chataoo | Maggi | Prieur : Homepage

La home se décompose en une grille sur cinq colonnes, titres et appels de lecture de quelques lignes insufflent un rythme «éditorial». Mise en valeur des chiffres du nombre de commentaires pour chaque article. Le Header reprend le rouge de la charte et rappelle le magazine papier. Images bien calées et icono sélectionnée de sorte à éviter les «images inutiles». Respect des espaces publicitaires imposés par le modèle économique du journal en ligne.

/////////////////////////////////////////////////////////////////

Antuori | Chataoo | Maggi | Prieur : Article

page d’article, pictos interactives de socialisation et commentaires sous un filet séparateur.

/////////////////////////////////////////////////////////////////

Doveil | Lienard | Ly | Specque : Homepage

Une home organisé en quatre colonnes, charte graphique du magazine papier, éditorial du Rédac. chef pour donner le point de vue du journal, Titres, textes en appel de lecture, rappels des articles et navigation claire et simple sous le logo du journal en ligne. Espace publicitaire intégré sous le Header… Le journal en ligne est très interactif et pourtant il rappelle furieusement le magazine papier. Respect du brief particulièrement réussi.

/////////////////////////////////////////////////////////////////

Doveil | Lienard | Ly | Specque : Article

L’article sur deux colonnes, audacieux et sans doute pas simple à gérer (ni à développer), la page est élégante, rythmée et l’interactivité présente à chaque endroit stratégique.

/////////////////////////////////////////////////////////////////

Lamarche | Manuel | Devaulx | Owczarz : Homepage

Une des maquettes les plus abouties, il faut aller visiter la page en cliquant sur le lien, pour y découvrir sous le Header un prompteur des plus agréable qui donne un aperçu des actus remises à jour au rythme des nouvelles. Quatre colonnes pas tout à fait égales, codes couleurs de navigation et une photo principale qui donne le ton de l’actu du jour (ou de l’heure). Élégance et lisibilité (malgré les css pas très bien réglés dans cette version bêta), c’est une maquette légère, qui confère sérieux et aspect très éditorial au nouveau journal en ligne.

/////////////////////////////////////////////////////////////////

Lamarche | Manuel | Devaulx | Owczarz : Article

Idem pour la page article de la maquette, deux colonnes sous la photo, pictos de socialisation, un espace commentaire et rappel du prompteur de nouvelles juste au dessus du Footer. Normal puisque 60% des visiteurs d’une page arrivent directement par les moteurs de recherche. Mise en page très élégante, je ne le répéterai sans doute pas assez :-).

/////////////////////////////////////////////////////////////////

Lescaudron | Carsenti | Williamson : Homepage

Voilà une maquette qui a bénéficié de plus d’investissement technologique de la part des étudiants, que de soin apporté à la mise en page, et surtout à la hiérarchisation des articles. Cependant des solutions originales ont été introduites, dont notamment le fil de dépêche qui reste visible tout en scrollant vers le bas. Il est à remarquer, et c’est une constante dans toutes les maquettes, qu’on a réduit le nombre de scrolling au minimum. Ci-dessous trois versions des articles et commentaires.

/////////////////////////////////////////////////////////////////

Lescaudron | Carsenti | Williamson :
Article version javascript

Lorsqu’on arrive directement sur le portail, les étudiants proposent une lecture «javascript» en focusant sur l’article cliqué. Techniquement, c’est envisageable. Pas sûr que les lecteurs apprécient. Toutefois, dans la version ci-dessous, la même page arrive directement tel quel. Normal puisque c’est celle qui recueillera les 60% de lecteurs que j’évoquais ci-dessus.

/////////////////////////////////////////////////////////////////

Lescaudron | Carsenti | Williamson : Article

Page article direct. C’est donc celle que les lecteurs découvrent par les fil RSS ou les liens dans les moteurs.

/////////////////////////////////////////////////////////////////

Lescaudron | Carsenti | Williamson : Comments.

Page des commentaires. Élégant mais il faut faire défiler horizontalement les pages… une flèche à droite de l’espace blanc. Rien de moins sûr que les lecteurs aient la patience de cliquer ainsi sur les boutons. Mais pourquoi pas. La question? que se passe-t-il lorsqu’un article recueillera quelque 250 commentaires. Beaucoup trop de pages.

/////////////////////////////////////////////////////////////////

Ibalot | Scheffer | Thomas | Bolborea : Homepage

Page de la Home, organisé en trois colonnes, une assez belle lisibilité due notamment à la gestion des espaces verticaux. Photographies vignettes, pas besoin de grandes photos pour les lecteurs du Point, ils ne confondent pas BD et journal quotidien. Titres et appels de lecture, espaces publicitaires respectés (brief client). Footer assez agréable et un Header qui reprend toujours l’ADN du magazine papier. Remarquable travail malgré quelques détails laissés dans l’ombre.

/////////////////////////////////////////////////////////////////

Ibalot | Scheffer | Thomas | Bolborea : Article

Alors j’aime beaucoup l’audace de cette page d’article par le rythme des colonnes et parce qu’une fois de plus les étudiants ont travaillé sur les codes d’élégance. On y retrouve le header, ADN du magazine qui resitue bien l’appartenance du journal en ligne au «canal historique» du magazine papier.

/////////////////////////////////////////////////////////////////

Conclusion:

/////////////////////////////////////////////////////////////////

Le travail initié par la Rédaction du Point a donné l’occasion aux étudiants d’e-artsup d’exercer leur sens de l’analyse et du design management sur un sujet délicat comme la presse en ligne. D’aucuns auraient préféré travailler sur le site d’un groupe de Rock, mais les contraintes eussent été moindres et c’était bien là, le but de ce workshop, habituer des futurs professionnels, à se poser les «bonnes» questions, à gérer leur temps de travail, à faire des croquis avant la réalisation, à travailler la typographie autant que la mise en page, l’interactivité utile et non superflue… et si tout cela fonctionne bien, ils pourront être fier d’avoir permis à une entreprise de presse de repenser son portail, à la fois vitrine et source d’équilibre économique pour des modèles qui se cherchent encore.

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////

«Utopie Graphique,
la Presse en Ligne de mire»

C’est en animant ce workshop, que j’ai réalisé l’intérêt d’initier un débat plus large sur l’état graphique de la presse en ligne:

Organisé par e-artsup avec quelques partenaires du secteur des Arts Graphiques, une table ronde, le 7 avril prochain dans une salle parisienne, réunissant quelques acteurs majeurs (journalistes, designers, Rédac. chefs, directeurs techniques) pour débattre des problèmes liés au design, aux technologies interactives, à l’évolution des lectorats, et donc des questions forcément liés aux modèles économiques qui s’interrogent. Parce que les États Généraux de la Presse n’ont abordé que les questions économiques, et d’autres, seulement les questions de liberté, je reste persuadé que la presse doit encore prouver qu’elle existe, qu’elle est sérieuse et professionnelle, et le design, en est un des premiers moteurs. La liberté de la presse est aussi à ce prix. Vous invite dès à présent à manifester votre intérêt pour ce débat, en m’envoyant un mail à peter.gabor{at}e-artsup.net

La salle de conférence nous permettra de réunir quelques 150 participants. Autant dire que les places seront limitées :-)

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////

débat: Design de la Presse en ligne, organisé par e-artsup | enregistrement sonore 

7 avril 2009: il faisait presque chaud ce jour aux alentours du Mac Mahon, au 5 de la même avenue. La salle était pleine quand le maître de cérémonie (David Abiker) sonna les trois coups du débat…

En réponse aux nombreux mails que j’ai reçu, voici en hors d’œuvre un premier compte rendu de la soirée avec photos et une remarquable prise de son réalisé par Jean-Charles Baudot (le son du jour ). Ne me reprochez pas que la bande-son dure 2h30, débordé je suis, et nous préparons en même temps une mise en ligne complète de la vidéo réalisée ce soir là. Celle-ci sera en revanche découpée en 5 séquences à peu près égales.

Voici donc l’enregistrement intégral du débat, que vous pourrez écouter sur votre iPod-iPhone ou bien dans la voiture, tranquillement.

Je voudrais également remercier tout particulièrement les intervenants: Ludovic Blecher de Libération , Arnaud Aubron de Rue89, Benoît Raphaël de lepost.fr (pour les Journalistes) et Isabelle Talès (journal le Monde), Étienne Mineur (directeur artistique, Incandescence ), Étienne Robial (directeur artistique, Canal Plus), Étienne Hervy (rédacteur en chef d’étapes ), Nata Rampazzo (directeur artistique, Rampazzo & Associés), Klavdij Sluban (photographe), Christian Dubuis Santini (directeur artistique, Agence Mercure) pour les Designers.

Un grand merci également à Adobe (Stéphanie Saïssay, Geneviève Hamelin, Isabelle Ronvaux, Olivier Saint Léger…) notre partenaire, qui nous a permis d’organiser ce débat sans oublier bien sûr étapes , notre partenaire média.

Encore merci également à David Abiker de France Info qui a animé ce débat avec une passion rare pour l’esthétique et la créativité et enfin à toute l’équipe d’e-artsup, les étudiants, qui ont assuré la gestion de la salle, et mes chères collaboratrices qui ont géré les réservations ainsi que la logistique de la soirée. Merci à tous et bravo… ce fut une très belle aventure.

http://www.typogabor.com/Son/debat_presse_en_ligne.mp3

§