Archives par mot-clé : design

Comment je prépare le tableau de bord des sujets les plus traités par les sites d’actu

Cap­ture d’écran d’un script Python

C’est sans doute le pro­jet le plus ambi­tieux et le plus com­plexe que j’aie mené à bien depuis que j’ai lan­cé Dans mon labo il y a bien­tôt quatre ans. Il m’a fal­lu pas mal d’après-midi plu­vieux et de jours fériés bla­fards pour ter­mi­ner le tableau de bord qui liste les sujets les plus pré­sents dans les sites d’actualité fran­çais.

Il est deve­nu pos­sible grâce aux pro­grès que j’ai réa­li­sés en Python, un lan­gage de pro­gram­ma­tion pri­sé des data­jour­na­listes. De mon côté, j’ai dû sérieu­se­ment m’y mettre cou­rant 2017, notam­ment pour affi­cher en direct les résul­tats des élec­tions légis­la­tives au sein de la carte inter­ac­tive que j’ai pré­pa­rée pour Contexte.

Pour explo­rer les flux XML mis à dis­po­si­tion par le minis­tère de l’Intérieur le soir des scru­tins, j’ai trou­vé en Python, avec sa syn­taxe acces­sible et ses mul­ti­plies librai­ries dis­po­nibles, un par­te­naire idéal. (Mais il est aus­si pos­sible de faire ça très bien avec d’autres solu­tions, comme R.)

Et ces connais­sances m’ont ouvert de nou­veaux hori­zons, notam­ment ceux de la recon­nais­sance auto­ma­ti­sée d’entités nom­mées. Un domaine qui, m’a-t-on expli­qué, a beau­coup pro­gres­sé grâce au patient tra­vail de des­crip­tion et de clas­se­ment réa­li­sé par les contri­bu­teurs de Wiki­pe­dia.

J’ai d’abord tra­vaillé, tou­jours pour Contexte, sur les thé­ma­tiques les plus pré­sentes dans le dis­cours des dépu­tés pour enri­chir le trom­bi­no­scope de l’Assemblée natio­nale que le site pro­pose à ses abon­nés. C’est alors que m’est venue l’idée de pro­po­ser une démarche com­pa­rable, mais avec les médias en ligne.

1. Scraper les flux RSS des sites d‘actu avec Python

J’ai lis­té, dans une Google Sheet, les sites que je sou­hai­tais étu­dier, en ren­sei­gnant pour cha­cun l’adresse de son flux RSS prin­ci­pal.

Mon script de scra­ping (dis­po pou les curieux) com­mence par récu­pé­rer cette liste, et va cher­cher dans chaque flux le titre et la des­crip­tion (le cha­pô ou le début du texte) de chaque article. Il récu­père aus­si sa date de publi­ca­tion, et enre­gistre le tout dans un fichier Json dédié à chaque site (voir par exemple celui du Monde).

Tous les flux RSS n’étant pas construits de la même façon, il a fal­lu prendre en compte les dif­fé­rents cas de figure : ain­si, le résu­mé de l’article se trouve dans un élé­ment qui peut être nom­mé « des­crip­tion », « sum­ma­ry », « content»…

2. Créer un corpus de textes et le faire analyser par TextRazor

La suite de ce script va conca­té­ner ensemble les titres et résu­més de chaque article publiés dans une période don­née (depuis sept jours, cette semaine ou ce mois) pour en faire un seul et même texte.

Ce cor­pus va ensuite être envoyé à Tex­tRa­zor, via la librai­rie Python que met à dis­po­si­tion ce ser­vice d’analyse séman­tique. Ce der­nier est gra­tuit jusqu’à 500 requêtes par jour, un quo­ta lar­ge­ment suf­fi­sant pour ce pro­jet.

Par­mi les ser­vices équi­va­lents, Tex­tRa­zor a un autre avan­tage : non seule­ment son outil d’extraction des enti­tés nom­mées ren­voie la liste des thé­ma­tiques détec­tées au sein du cor­pus sou­mis, mais il four­nit aus­si pour cha­cune un score de rele­vance (« per­ti­nence », que j’ai fina­le­ment tra­duit en « pré­sence » dans mon tableau de bord).

Ain­si, s’il détecte les mots « GPA », « ges­ta­tion pour autrui » ou « mère por­teuse » dans un texte, Tex­tra­zor réunit ses expres­sions dans une seule thé­ma­tique (en géné­ral le titre de la notice Wiki­pe­dia dédiée). Et donne à cette der­nière une note, de 0 à 1, selon que l’entité lui semble plus ou moins per­ti­nente dans le texte four­ni.

C’est à la fois la force et la fai­blesse de ma méthode : ce sco­ring me per­met de géné­rer les mul­tiples clas­se­ments, mais je n’ai pas « la main » sur son éla­bo­ra­tion.

Mal­gré quelques mau­vaises sur­prises, l’observation des résul­tats obte­nus m’a toute fois ras­su­ré : Le Pari­sien est en géné­ral le média où le thème « Paris » est le plus pré­sent ; on retrouve sou­vent « Jean-Luc Mélen­chon » bien clas­sé dans les résul­tats de Poli­tis ; Sput­nik et RT France sont bien pla­cés au clas­se­ment pour le thème « Vla­di­mir Pou­tine ».

4. Héberger les scripts sur un serveur chez PythonAnywhere

Cette par­tie-là du chan­tier serait une pro­me­nade de san­té pour un déve­lop­peur back-end même débu­tant. A un jour­na­liste bidouilleur comme moi, elle a pris pas mal de temps et d’énergie.

Une fois le script Python décrit ci-des­sus mis au point, je ne pou­vais pas l’exécuter moi-même plu­sieurs fois par jour sur mon ordi­na­teur afin de dis­po­ser de don­nées tou­jours fraîches pour ali­men­ter un éven­tuel tableau de bord.

Sur les conseils d’amis déve­lop­peurs, j’ai regar­dé plu­sieurs offres d’hébergement comme Ama­zon Web Ser­vices ou Google Cloud Plat­form, mais la lon­gueur des pro­cé­dures d’installation et des tuto­riels pro­po­sés m’a vite refroi­di. Je me suis rabat­tus sur Python Anyw­here. un ser­vice peu oné­reux et qui s’est révé­lé mieux adap­té à un noob comme moi.

Même avec cette solu­tion, je suis pas­sé par mal, de guides d’utilisation, de pages d’aide et de ques­tions Stack Over­flow avant d’arriver mes fins : faire tour­ner mon script de scra­ping plu­sieurs fois par jour.

4. Créer le tableau de bord en front à partir d’un fichier Json optimisé

Une fois toutes ces listes de thé­ma­tiques récu­pé­rées et enre­gis­trées dans le fichier Json de chaque média, un autre script Python, lui aus­si héber­gé sur Pytho­nA­nyw­here, va pré­pa­rer un fichier Json com­mun et de taille réduite.

Ce der­nier sera récu­pé­ré, au moment où le tableau de bord publié Dans mon labo se charge, par votre navi­ga­teur.  Au final, c’est donc Chrome, Fire­fox ou Edge qui va construire l’infographie à l’intérieur de la page.

Je ne détaille­rais pas sur ce tra­vail de déve­lop­pe­ment front-end, clas­sique com­bi­nai­son de HTML, de CSS et de Javas­cript, mais si vous avez des ques­tions sur cette par­tie, je serai ravi d’y répondre !

A ce stade, la prin­ci­pale dif­fi­cul­té pour moi a été de s’assurer que le char­ge­ment des don­nées puis la construc­tion de l’infographie se fasse dans un délai rai­son­nable : lors des pre­mières étapes, le tout pre­nait par­fois une bonne dizaine de secondes, ce qui es rédhi­bi­toire.

Pour chaque média, j’ai choi­si de ne pas inté­grer une thé­ma­tique si son score était infé­rieur à un cer­tain seuil (en ce moment, 0,4/1), et de n’afficher une thé­ma­tique dans la liste prin­ci­pale que si elle était pré­sente dans au moins quatre médias.

Il m’a fal­lu pas mal d’allers-retours entre scripts Python sur le ser­veur et code Javas­cript dans le navi­ga­teur pour réduire ce délai et obte­nir une expé­rience suf­fi­sam­ment fluide, mais il  reste sans doute pas mal d’optimisation pos­sible.

5. Préparer la suite avec des analyses hebdomadaires et mensuelles

Comme beau­coup l’ont fait remar­quer dès la publi­ca­tion du tableau de bord, les résul­tats seront inté­res­sants à obser­ver dans le temps, au-delà de la pho­to­gra­phie actuelle (les sept der­niers jours). Mon script réa­lise déjà des ana­lyses heb­do­ma­daires et men­suelles, qui ne sont pas affi­chées mais que j’espère uti­li­ser quand j’aurais davan­tage de recul.

Voi­là ! Je suis en tout cas curieux de savoir vos remarques, cri­tiques ou pro­po­si­tions d’amélioration dans les com­men­taires de ce post ou bien, pour les timides, dans un mes­sage pri­vé.

Mis à jour le 2/2 à 10h15. Pré­ci­sion sur les seuils (point 4) et point 5 ajou­té.

280 heures de design pour refaire le bouton Like de Facebook

Les confé­rences TED font par­tie de mes plai­sirs cou­pables, même si la méca­nique trop bien rodée des inter­ven­tions, le côté pré­di­ca­teur et sou­vent angé­lique des confé­ren­ciers peuvent aga­cer.

Mais des choses inté­res­santes s’y disent par­fois, notam­ment sur les pra­tiques des géants du Web, comme avec ce talk de de Mar­ga­ret Gould Ste­wart, direc­trice du desi­gn de Face­book, que j’ai vu pas­ser en août sur You­Tube.

Margaret Gould Stewart : How giant websites design for you (and a billion others, too)

Facebook’s « like » and « share » but­tons are seen 22 bil­lion times a day, making them some of the most-vie­wed desi­gn ele­ments ever crea­ted. Mar­ga­ret Gould Ste­wart, Facebook’s direc­tor of pro­duct desi­gn, out­lines three rules for desi­gn at such a mas­sive scale-one so big that the tiniest of tweaks can cause glo­bal outrage, but also so large that the subt­lest of impro­ve­ments can posi­ti­ve­ly impact the lives of many.

Pour les gens pres­sés, j’ai pas­sé le filtre anti-bull­shit et rele­vé points-clés et quelques chiffres éclai­rants.

22 milliards d’affichage par jour pour le bouton Like

  • L'ancien et le nouveau bouton LIke
    L’ancien et le nou­veau bou­ton LIke

    Créer les petits élé­ments d’interface d’un site ou d’une appli­ca­tion ne consti­tue pas la par­tie la plus sédui­sante du tra­vail de desi­gner, mais quand il s’agit d’un ser­vice uti­li­sé quo­ti­dien­ne­ment par des cen­taines de mil­lions d’utilisateurs, chaque détail compte.

  • Le bou­ton Like actuel s’affiche « 22 mil­liards de fois par jour sur plus de 7,5 mil­lions de sites web », explique  Gould Ste­wart [ce qui per­met au pas­sage à Face­book de recueillir des infor­ma­tions sur ses uti­li­sa­teurs…  et les autres, comme le rap­pe­lait déjà Erwan Cario en 2010 dans Libé­ra­tion, ndlr].
  • Ce micro-bou­ton a néces­si­té « 280 heures de tra­vail sur plu­sieurs mois »,  pour ajus­ter sa lar­geur et sa hau­teur, le tra­duire et véri­fier qu’il s’affiche cor­rec­te­ment sur les navi­ga­teurs les plus anciens (« atten­tion aux jolis dégra­dés et aux bor­dures », pré­vient-elle).

Ces photos Facebook qui nous rendent « tristes »

  • Lorsque Face­book a don­né la pos­si­bi­li­té à ses uti­li­sa­teurs de signa­ler une pho­to qui, selon eux, contre­ve­nait aux « stan­dards de la com­mu­nau­té », ses équipes se sont retrou­vées sub­mer­gées par des rap­ports inap­pro­priés. Des pho­tos gênantes pour la per­sonne qui figure des­sus, mais qui res­tent « dans les clous » : rien ne vous inter­dit de publier une pho­to de votre col­lègue de tra­vail émé­chée au pot de fin d’année (sauf bien sûr si elle est torse nu), mais c’est un autre pro­blème.
  • Face­book a d’abord ajou­té la pos­si­bi­li­té d’envoyer un mes­sage à l” »ami » concer­né pour lui deman­der le retrait.  Echec : 20% seule­ment des per­sonnes concer­nées l’ont uti­li­sé.
  • C’est fina­le­ment un chan­ge­ment dans le for­mu­laire de signa­le­ment lui-même qui a per­mis d’améliorer la situa­tion. Désor­mais, quand il veut faire reti­rer une pho­to, l’utilisateur peut choi­sir l’option « Je n’aime pas cette pho­to de moi », puis pré­ci­ser pour­quoi, par exemple en sélec­tion­nant « Elle me rend triste. » Le taux d’utilisation a grim­pé à 60%, et les auteurs des conte­nus concer­nés ont mieux com­pris la réac­tion de leurs « amis » mécon­tents.
Le for­mu­laire actuel de signa­le­ment de pho­tos sur Face­book

Le data ne fait pas tout

  • Gould Ste­wart déteste qu’on dise que le tra­vail de desi­gn sur un site comme Face­book n’est gui­dé que par la com­pi­la­tion de sta­tis­tiques d’utilisation (approche « data dri­ven »). « Les don­nées peuvent vous aider à rendre un bon desi­gn encore meilleur », mais n’ont jamais rem­pla­cé l’intuition.

Faire avec la résistance au changement

  • « Je passe pra­ti­que­ment autant de temps à faire le desi­gn du mes­sage qui aver­tit d’un chan­ge­ment qu’à faire celui du chan­ge­ment lui-même », plai­sante Gould Ste­wart. Les gens peuvent s’habituer à un mau­vais desi­gn, et même deve­nir très bons dans son uti­li­sa­tion, rap­pelle-t-elle. La frus­tra­tion est encore plus grande quand la page est modi­fiée.
  • Avant de tra­vailler chez Face­book, Gould Ste­wart s’est occu­pé du chan­ge­ment de nota­tion des vidéos You­Tube : d’une échelle de cinq étoiles, le site est pas­sé à deux pouces, l’un vers le bas, l’autre vers le haut.  Pour une rai­son simple (que j’ai aus­si pu consta­ter à Rue89, lorsque les com­men­taires étaient notées de 1 à 5 boules rouges) : les uti­li­sa­teurs ne se ser­vaient que de la note la plus basse et de la note la plus haute, pas des étoiles inter­mé­diaires. Ça n’a pas empê­ché la colère des « noteurs », obli­geant You­Tube à s’expliquer dans la presse spé­cia­li­sée.
Google, YouTube et Facebook sur des téléphones ancienne génération
Google, You­Tube et Face­book sur des télé­phones ancienne géné­ra­tion

Penser aux nouveaux usages et aux pays pauvres

  • Pen­ser le desi­gn d’un site pour les télé­phones ancienne géné­ra­tion, c’est moins gla­mour que de lan­cer une nou­velle appli­ca­tion chic pour trou­ver le nou­veau café bran­ché, explique en sub­stance Gould Ste­wart. Mais ce sont ces inter­faces qu’utilisent et uti­li­se­ront des mil­lions d’utilisateurs dans les pays pauvres.
  • Pour prendre ces nou­velles contraintes en compte, « nous sor­tons de notre bulle et nous ren­con­trons les gens pour qui nous réa­li­sons ces desi­gns, nous tes­tons nos pro­duits dans d’autres langues que l’anglais, et nous nous effor­çons d’utiliser ce type de télé­phones de temps en temps », raconte-t-elle.

En France, la plu­part des sites d’infos sont encore bien loin d’avoir une approche aus­si soi­gneuse quand ils pensent leur inter­face et plus glo­ba­le­ment leur expé­rience uti­li­sa­teur, faute de moyens suf­fi­sants et d’expertise en interne. Ça donne des pages sur­char­gées de publi­ci­tés, des sys­tèmes de com­men­taires dépas­sés ou des ver­sions mobile mal fichues.

Mais les médias ont tout inté­rêt à s’y mettre, alors que la chasse au clic montre ses limites, et que des objec­tifs comme le temps pas­sé sur la page ou la fidé­li­té des inter­nautes sont de mieux en mieux pris en compte – sur ce sujet, voir les expli­ca­tions du popu­laire ser­vice de sta­tis­tiques en temps Char­beat.