Conception site de presse exemple

Spécificités de la mission Libération

Nous avons souhaité vous présenter la mission en architecture de l’information réalisée pour libération dans le cadre de la refonte du site de presse en ligne, afin d’en illustrer l'approche en matière de conception et pour démontrer l’intérêt des interfaces magnétiques dans la construction d’un support complexe.

La mission a été réalisée en 2008.
Visualisez le projet UX Liberation...

A propos de Libération

Libération, célèbre journal quotidien de presse écrite généraliste, dispose d’un des supports de presse en ligne les plus consultés en france.

En 2007, le modèle digital de libération.fr s'essouffle et doit faire face à la montée en puissance et en gamme des dispositifs concurrentiels (le figaro et 20 minutes notamment modernisent radicalement leur stratégie digitale).

Le site, en matière d'interface, de design et d'ergonomie apparait vieillissant, et la refonte s'impose, dans un contexte relativement moribond pour le journal (plan social, déficit...) ; pour redynamiser libération et surmonter les crises économiques et identitaires du modèle, le journal joue son va-tout en lançant une nouvelle version papier...

La refonte prenait donc corps dans ce contexte, et le diagnostic interne du modèle digital faisait mention des éléments suivants :

• lancement d’une nouvelle maquette papier, nouvelle dynamique
• site vieillissant, plateforme en fin de cycle
• intégration d’un studio multimédia autour de journalistes spécialisés
• concurrence forte, nécessité de démarcation
• un site qui ne fait pas circuler : parcours, complexité, désorganisation
• mais qui génère de la durée dans la consultation : débats, réactions

Au niveau de l'environnement externe, il s'agissait de bien prendre en compte les modalités de consultation émergentes et caractéristiques de cette période pour les saisir et les traduire en potentialité de développement : 2.0, interfaces riches, explosion de la consultation de vidéos...

Ces nouveaux modes de consommation du media associés à l'évolution des comportements internautes entre zapping et participation obligeaient libération a opérer une franche rupture dans son modèle digital.

Une des spécificités française du marché de la presse en ligne résidait dans le fait que les sites de presse étaient plus consultés que les sites d'autres médias traditionnels pour la dimension informative... à la différence des usa (cnn) ou du royaume-unis (bbc, sky).

Fin 2007, les sites de presse en ligne représentaient 50 % du marché, en matière d'audience des sites d'information en france, alors que les sites de chaine de télévision plafonnaient à 10 %.

Pour autant, cette position favorable était (est toujours) remise en question par l'émergence et la croissance forte des agrégateurs d'information sur ce marché.

Enjeux et problémétique de la refonte de Libé

Libération.fr se devait de jouer à fond sa spécificité : le site où les internautes viennent débattre.
Cette approche communautaire, point fort du dispositif interactif, distingue libération.fr des autres sites médias : c'est chez libération que les internautes échangent le plus, que les réactions aux articles sont les plus nombreuses, les forums les plus vivants.

Il s'agissait donc de s'appuyer sur ces spécificités pour continuer à faire de Libération.fr le site de l’actualité où l'on discute de l’actualité...

La logique de la refonte visait donc à s'appuyer sur un site éditorial de qualité pour favoriser des échanges de qualité...

...Le traitement de l'actualité

Les solutions de conception à imaginer devaient embarquer les problématiques liées au traitement de l'actualité par un pool rédactionnel.

La gestion et le traitement réactif voire immédiat de l'actualité était au cœur des enjeux de la refonte, puisque le modèle d'un site de presse en ligne repose encore largement sur ce critère pour drainer massivement l'audience : il s'agissait donc de mettre en place une interface adaptée, flexible, et modulaire, permettant de gérer efficacement la problématique de la réactivité ; d'un point de vue contributeur cela devait se traduire par des zones d'expression percutantes et variables, et pour l'utilisateur par un balayage rapide et visuel du flux d'informations chaudes.

Le traitement du fil d'actualité devait par ailleurs privilégier la modélisation des datas pour une optimisation du référencement dans les moteurs de recherches et surtout les agrégateurs de news.

Aux problématiques de réactivité et du traitement de l'information live, avec les incidences impliquées en matière d'interface, il s'agissait également pour libération de multiplier le traitement des informations à chaud par une approche décalée et différenciante par rapport à la concurrence : reportage minute, interviews (type 3 questions à...), galerie photo, audio et vidéo...

...L'expertise libération

En plus de l’alerte, l’internaute devait savoir ce que pense libération d’un fait important et la différence avec les "pure player" pouvait se faire notamment autour de ce point : libération possède une expertise autour de sa rédaction de spécialistes qui comptent un panel de correspondants en france et à l'étranger.

A cet effet, il apparaissait crucial pour le modèle en ligne de s'appuyer et bénéficier de l'apport de la rédaction papier : le traitement des news se devait d'être très vite enrichi du savoir-faire de libération, par la mise en perspectives d’archives sur un sujet donné, ou encore par un éclairage court (article, analyse, interview) fourni par un rédacteur papier à l’équipe Web.

Le site de presse en ligne souhaitait également s'appuyer sur un apport externe autour de la mise en place d'un réseau de contributeurs experts rattachés (affiliés) à libération.fr : à la différence des concurrents qui avaient choisi d’ouvrir leurs blogs à tous leurs lecteurs dans une seule logique d’audience (20 minutes) ou à leurs abonnés (le monde), libération préférait misait et répondre par la labellisation.

Partant du principe que les « blogueurs vedettes » pouvaient générer d'importants flux de trafic, Libération.fr souhaitait développer une politique d'invitation à des experts choisis (journalistes, experts, témoins du quotidien), lesquels se voyaient confier une tribune visible sur le site, au travers d'un carnet de bord (logique de blogs, éditorialisés).

Libération pouvait s'appuyer sur le carnet d'adresses de ses journalistes pour constituer ce réseau de bloggeurs et de fait, se démarquer fortement de la concurrence.

Pour autant, Libération ne souhaitait pas voir les internautes délaissés, et privilégiait davantage la proposition de blogs très thématisés à ses lecteurs pour leur permettre de participer à la fabrique de l'information : un appel en ce sens se devait d'être matérialisé au sein de l'interface.

...Le magazine

Dans une logique plus « posée » mais très identitaire, les magazines se devaient de donner envie aux internautes de rester dans l'univers libération au travers d'une actualité plus froide (culturelle, mode, high-tech) ou encore par l'approfondissement des événements via une approche plus décalée (chroniques...).
Là encore, le dispositif interactif pouvait s'appuyer sur la rédaction de la version papier autour des magazines NEXT ou ECRANS ; un projet de "radio-télé" devait permettre d'aller dans ce sens au travers d'une approche multimédia.

Pour favoriser les échanges de qualité, libération miser sur une implication très forte de l'internaute au dispositif.

...La dimension participative

Les équipes de libération.fr étaient très attachées à ce concept et le brief insistait notamment sur le fait que « l'internaute doit se sentir partout chez lui, depuis n’importe quelle page du site de (y compris les "sous-site"), l’internaute doit pouvoir participer au débat en postant des réactions (modérées à priori) sur tous les articles, sons, vidéos… ».

Il s'agissait donc de trouver des solutions de conception et des traductions appropriées sous forme d'interface à ces volontés ; une procédure d’inscription permettant une modération à posteriori notamment testée sur un des magazines de libération : ecrans.fr était à l'étude pour renforcer le côté club, ce qui n'allait pas nécessairement dans la logique de l'ouverture à tous...

...La logique des réseaux sociaux

Libération souhaitait également développer très fortement la dimension 2.0, au travers du concept "mon libé"... à la manière des réseaux sociaux, il s'agissait de permettre aux internautes de créer leurs espaces personnels (type facebook, myspace), en affichant leur profil de frondeur (nombre de réactions et commentaires), en partageant leurs bookmarks, en ajoutant des médias sur un modèle de type reporter, en échangeant autour d'affinités culturelles, pour au final générer un climat favorable aux échanges et à la communication entre les membres autour de la dimension critique, une des valeurs identitaires du journal.

Il s'agissait donc de trouver des modalités d'interface et de fonctionnement permettant de tisser des liens entre les libénautes pour ainsi fédérer une communauté de lecteur.

...Les forums et la customisation

Les forums, marque de fabrique de libération.fr, sur lesquels libération s'était positionné dès les débuts de son activité digitale, se devaient d'être "réinventés"...

Il s'agissait de garder ces lieux de discussion thématiques, autour de sujets et de débats initiés par la rédaction de libération, tout en insufflant une logique de personnalisation et des moyens de rétroactions pour l'utilisateur, comme la possibilité de hiérarchiser les messages, les types de forums, les réactions, par le biais de vote et de plébiscites...

Cette intervention des internautes sur le contenu du site devaient être prolongées par des pages personnalisables, à la manière d'un "netvibes", au sein desquels les internautes inscrits, pourraient bénéficier de modalités d'interactions leur permettant de customiser libération autour de leurs centres d'intérêts propres : choix des rubriques et des flux d'informations apparaissant sur leur page d'accueil... un des intérêts de cette démarche consistait notamment à combiner les déclinaisons régionales de libération avec la version nationale...

Au final, les ambitions de libération étaient très fortes, et les enjeux de la refonte visaient à réorienter le site vers une logique de laboratoire technologique et d'expérimentations...

Simplification...

Les chantiers que nous avons privilégié en rapport aux problématiques de libération :

• restructuration organisation des contenus, désengorgement de la home
• valorisation de l’offre commerciale d’abonnement à l’édition électronique
• intégration de la publicité, format, modularité
• gestion de la galaxie de sites rattachés à libé : next, libémag, écrans
• dimension multimédia : vidéo, podcast, diaporama
• espace participatif et dimension débat : réaction, chat, forum, blog
• profondeur des articles
• circulation et parcours au sein du site
• design épurée, sobriété
• innovation approche différenciante par rapport à la concurrence

Notre démarche en matière de modélisation de l'interface s'articulait autour des points suivants :

• modularité, flexibilité
• structuration, organisation
• simplicité d’utilisation, clarté, efficacité (objectif / page)
• favoriser la circulation, création de parcours – rebond (pages vues)
• interface riche
• écriture interactive concise et adaptée a la lecture en balayage
• site zapping

Segmentation du journal en ligne

Bien évidemment, pour un site de presse en ligne, la différence se fait naturellement par la ligne éditoriale autour du traitement de l'information et de la production de contenu... les solutions de conception et d'interface devaient donc traduire la culture de libération et soutenir les spécificités du modèle.

Le premier chantier préalable au travail de conception a consisté à réaliser un audit éditorial de l’ensemble du dispositif, afin d’identifier toutes les typologies de contenu ainsi que leur densité : en collaboration avec libération, ce travail a débouché sur un tableau de priorisation des flux de contenus.

Sur cette base, nous avons pu travailler sur un nouveau système de navigation, visant, d’une part, à simplifier les accès aux principales thématiques éditoriales et ainsi faciliter l’utilisation tout en allégeant la maquette, et d’autre part, à traduire le positionnement souhaité par l’enseigne.

La nouvelle segmentation consistait à orienter la ventilation des contenus autour des postures / des rôles dans lesquels l’internaute pouvait être amené à consulter le site libération :

• simple lecteur : s’informer sur un sujet à chaud, consulter les archives
• spectateur-auditeur : consommer des information au format audiovisuel
• acteur : émettre son avis et participer aux débats…

Les principes de navigation et de positionnement visaient à exhorter l’internaute à participer, en s’adressant directement à lui au travers de libellés cours et incitatifs ; dans un premier temps, les éléments suivants furent retenus pour composer 3 grands espaces :

• lire et réagir
• voire et écouter
• débattre et participer

L’arborescence éditoriale fut réorganisée en fonction de cette nouvelle segmentation et traduite par un système de navigation permettant d’agréger l’offre de contenu de façon simple, en limitant les niveaux de profondeur dans l’arborescence.

Après plusieurs ajustements, le remaniement final des entrées fut acté :

• lire et réagir devenait : la une
• voire et écouter devenait : labo
• débattre et participer devenait : débats

Principes de conception

Nous avons alors pu travailler sur les principes d’interface qui se devaient d’offrir un maximum de flexibilité et de modularité au pool de rédaction et aux contributeurs de libération.

Il s’agissait également de construire une interface permettant de gérer efficacement le nouvelle orientation du média en tant que site support de campagnes publicitaires en ligne : l’interface devait intégrer des espaces optimisés pour la mise en avant de publicité, et être adaptable afin de les substituer par des contenus en l’absence de publicité…

Le site fut organisé autour d’un système construit sur une grille de 6 colonnes, qui offrait la possibilité de gérer tous les formats publicitaires, horizontaux, verticaux, carrés…

• les 3 premières colonnes furent dédiées au fil d’actualité
• 2 colonnes furent dédiées aux flux d’objets relatifs au fil d’actu
• la dernière colonne fut dédiée à l’auto-promo, les partenariats…

La mise en place de la grille modulaire fut un élément central dans le travail de conception, puisque c’est sur cette base que furent construits et modélisés tous les conteneurs et modules constitutifs du site, dans une logique modulaire.

Au-delà des enjeux de modularité, il s’agissait également de traduire les enjeux de lisibilité par une hiérarchisation des blocs d’informations et des contenus mieux maîtrisée, au travers d’un travail de design d’information spécifique.

La conception détaillée au travers des wireframes haute-fidélité permit aux équipes de s’entendre sur le fonctionnement global du support.

Néanmoins, les équipes de rédaction de libération éprouvaient le besoin de matérialiser de façon moins statique les contours de l’interface et les règles de fonctionnement, au travers desquels même les spécifications fonctionnelles ou encore l’animation des wireframes montraient leurs limites pour le travail collaboratif.

Interface magnétique et travail collaboratif

Afin d’impliquer les équipes de rédaction dans le processus de conception, sur la base du travail de segmentation, de grille modulaire et de conception détaillée de quelques gabarits témoins, il nous fallait trouver de nouvelles modalités de travail et d’échange visant à offrir aux équipes de libération plus d’espace d’expression…

A cet effet, nous avons été amené à matérialiser tous les modules d’information et autres conteneurs par des éléments manipulables et interchangeables au sein d’une interface témoin…

Nous avons d’abord imprimé puis découper tous les éléments constitutifs de l’interface pour permettre de les manipuler et les positionner sur l’interface par le biais d’adhésif velcro… mais cette technique artisanale a vite montré ses limites, notamment pour son manque de fluidité…

Il apparaissait donc indispensable de trouver un support, une matière et une technique plus fluide pour favoriser les échanges : les magnétiques semblaient être la réponse adéquate à notre problématique ; chaque module de contenu fut imprimé puis coller sur support magnétique, de sorte que toutes les composantes fonctionnelles du site étaient manipulables comme un puzzle…

Modélisation de l'interface

En partant de l’inventaire des gabarits (ci-dessous) nécessaires au fonctionnement du site, nous avons défini la grille éditoriale et fonctionnelle de chaque template par le biais de l’interface magnétique.

Chaque gabarit fut ainsi recomposé sur le socle de la grille en 6 colonnes avec les équipes de libération en cours d’atelier de travail, et au final, nous recomposions les éléments actés au cours des workshop par des wireframe haute-fidélité… le tout de façon rapide, fluide et conviviale !

Tests d'eye tracking

L'eye-tracking...
Afin d’optimiser l’interface avant la mise en production, un test d’eye tracking fut réalisé par un cabinet spécialisé sur la base des premières maquettes et permis de corriger et d’ajuster certains éléments source d’incompréhension pour les internautes testeurs (notamment le fait que le traitement de la navigation s’apparentait trop à une bannière…).

Bilan de la mission réalisée pour Libération

D’un point de vue performance, le résultat fut une réussite : les premières analyses de performances ont révélées une augmentation de l’ordre de 30 % des indicateurs de fréquentation ce qui cadrait avec l’objectif visant à se hisser sur le podium des premiers sites d'information généraliste en france ; ces performances furent un excellent levier pour valoriser le nouveau modèle publicitaires et attirer de nouveaux annonceurs.

Point de vue utilisation, plus de 4000 posts quotidiens furent enregistrés suite à la refonte, marquant une nette augmentation de la participation et des contributions internautes ; là encore, l’objectif qui consistait à davantage intégrer l’internaute à la production de contenu était atteint…

Côté design, le site est aujourd’hui beaucoup plus aéré et lisible, et repose sur un socle flexible et modulaire permettant aux rédacteurs d’interchanger de façon fluide tous les modules et conteneurs d’information…

D’un point de vue méthodologique, la refonte du site de presse en ligne libération.fr fut un modèle en matière de méthodologie agile, puisque tout le cycle projet fut orienté vers la conception-production au travers d’éléments tangibles : l’apport des travaux d’architecture de l’information et la mise en place d’une méthode de travail collaboratif originale (interface magnétique) furent très favorablement approuvés par les équipes de libération.

Le recours aux interfaces magnétiques en travail collaboratif est devenue une composante importante de notre méthodologie projet : pour un coût relativement faible (production des magnétiques…), le travail sur interface magnétique permet d’importants gains de productivité en réunion, le retour sur investissement est donc immédiat pour les équipes de conception comme pour l’annonceur (mais ça prend tout de même un peu de temps "à fabriquer" !)...

Approfondir la conception

Techniques utilisées :

• Analyse d'arborescence
• Segmentation des contenus
• Arborescence de site web
• Design de navigation
• Conception de zoning
• Wireframing
• Conception web
• Animation de workshop

Etudes de cas à lire :

• Etude de cas Valeo
• Etude de cas Sécurité routière
• Etude de cas Orange

Travaux à visualiser :

• Wireframes
• Zoning
• Design de navigation
• Arborescence

Compétences métier évoquées dans ce projet :

• Design stratégique
• Architecture de l'information
• Design de l'interaction
• Design de l'information
• UI design conception d'interface
• UX design d'expérience utilisateur