Archives par mot-clé : design

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

Capture d’écran d’un script Python

C’est sans doute le projet le plus ambitieux et le plus complexe que j’aie mené à bien depuis que j’ai lancé Dans mon labo il y a bientôt quatre ans. Il m’a fallu pas mal d’après-midi pluvieux et de jours fériés blafards pour terminer le tableau de bord qui liste les sujets les plus présents dans les sites d’actualité français.

Il est devenu possible grâce aux progrès que j’ai réalisés en Python, un langage de programmation prisé des datajournalistes. De mon côté, j’ai dû sérieusement m’y mettre courant 2017, notamment pour afficher en direct les résultats des élections législatives au sein de la carte interactive que j’ai préparée pour Contexte.

Pour explorer les flux XML mis à disposition par le ministère de l’Intérieur le soir des scrutins, j’ai trouvé en Python, avec sa syntaxe accessible et ses multiplies librairies disponibles, un partenaire idéal. (Mais il est aussi possible de faire ça très bien avec d’autres solutions, comme R.)

Et ces connaissances m’ont ouvert de nouveaux horizons, notamment ceux de la reconnaissance automatisée d’entités nommées. Un domaine qui, m’a-t-on expliqué, a beaucoup progressé grâce au patient travail de description et de classement réalisé par les contributeurs de Wikipedia.

J’ai d’abord travaillé, toujours pour Contexte, sur les thématiques les plus présentes dans le discours des députés pour enrichir le trombinoscope de l’Assemblée nationale que le site propose à ses abonnés. C’est alors que m’est venue l’idée de proposer une démarche comparable, mais avec les médias en ligne.

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

J’ai listé, dans une Google Sheet, les sites que je souhaitais étudier, en renseignant pour chacun l’adresse de son flux RSS principal.

Mon script de scraping (dispo pour les curieux) commence par récupérer cette liste, et va chercher dans chaque flux le titre et la description (le chapô ou le début du texte) de chaque article. Il récupère aussi sa date de publication, et enregistre le tout dans un fichier Json dédié à chaque site.

Tous les flux RSS n’étant pas construits de la même façon, il a fallu prendre en compte les différents cas de figure : ainsi, le résumé de l’article se trouve dans un élément qui peut être nommé « description », « summary », « content »…

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

La suite de ce script va concaténer ensemble les titres et résumés de chaque article publiés dans une période donnée pour en faire un seul et même texte.

Ce corpus va ensuite être envoyé à TextRazor, via la librairie Python que met à disposition ce service d’analyse sémantique. Ce dernier est gratuit jusqu’à 500 requêtes par jour, un quota largement suffisant pour ce projet.

Parmi les services équivalents, TextRazor a un autre avantage : non seulement son outil d’extraction des entités nommées renvoie la liste des thématiques détectées au sein du corpus soumis, mais il fournit aussi pour chacune un score de relevance (« pertinence », que j’ai finalement traduit en « présence » dans mon tableau de bord).

Ainsi, s’il détecte les mots « GPA », « gestation pour autrui » ou « mère porteuse » dans un texte, Textrazor réunit ses expressions dans une seule thématique (en général le titre de la notice Wikipedia dédiée). Et donne à cette dernière une note, de 0 à 1, selon que l’entité lui semble plus ou moins pertinente dans le texte fourni.

C’est à la fois la force et la faiblesse de ma méthode : ce scoring me permet de générer les multiples classements, mais je n’ai pas « la main » sur son élaboration.

Malgré quelques mauvaises surprises, l’observation des résultats obtenus m’a toute fois rassuré : Le Parisien est en général le média où le thème « Paris » est le plus présent ; on retrouve souvent « Jean-Luc Mélenchon » bien classé dans les résultats de Politis ; Sputnik et RT France sont bien placés au classement pour le thème « Vladimir Poutine ».

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

Cette partie-là du chantier serait une promenade de santé pour un développeur back-end même débutant. A un journaliste bidouilleur comme moi, elle a pris pas mal de temps et d’énergie.

Une fois le script Python décrit ci-dessus terminé, je ne pouvais pas l’exécuter moi-même plusieurs fois par jour sur mon ordinateur afin de disposer de données toujours fraîches pour alimenter un éventuel tableau de bord.

Sur les conseils d’amis développeurs, j’ai regardé plusieurs offres d’hébergement comme Amazon Web Services ou Google Cloud Platform, mais la longueur des procédures d’installation et des tutoriels proposés m’a vite refroidi. Je me suis rabattu sur Python Anywhere. un service peu onéreux et qui s’est révélé mieux adapté à un noob comme moi.

Même avec cette solution, je suis passé par mal, de guides d’utilisation, de pages d’aide et de questions Stack Overflow avant d’arriver mes fins : faire tourner mon script de scraping plusieurs 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ématiques récupérées et enregistrées dans le fichier Json de chaque média, un autre script Python, lui aussi hébergé sur PythonAnywhere, va préparer un fichier Json commun et de taille réduite.

Ce dernier sera récupéré, au moment où le tableau de bord publié Dans mon labo se charge, par votre navigateur.  Au final, c’est donc Chrome, Firefox ou Edge qui va construire l’infographie à l’intérieur de la page.

Je ne détaillerais pas sur ce travail de développement front-end, classique combinaison de HTML, de CSS et de Javascript, mais si vous avez des questions sur cette partie, je serai ravi d’y répondre !

A ce stade, la principale difficulté pour moi a été de s’assurer que le chargement des données puis la construction de l’infographie se fasse dans un délai raisonnable : lors des premières étapes, le tout prenait parfois une bonne dizaine de secondes, ce qui es rédhibitoire.

Pour chaque média, j’ai choisi de ne pas intégrer une thématique si son score était inférieur à un certain seuil (en ce moment, 0,4/1), et de n’afficher une thématique dans la liste principale que si elle était présente dans au moins quatre médias.

Il m’a fallu pas mal d’allers-retours entre scripts Python sur le serveur et code Javascript dans le navigateur pour réduire ce délai et obtenir une expérience suffisamment fluide, mais il  reste sans doute pas mal d’optimisation possible.

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

Comme beaucoup l’ont fait remarquer dès la publication du tableau de bord, les résultats seront intéressants à observer dans le temps, au-delà de la photographie actuelle (les sept derniers jours). Mon script réalise déjà des analyses hebdomadaires et mensuelles, qui ne sont pas affichées mais que j’espère utiliser quand j’aurais davantage de recul. (Edit le 5 octobre : des graphiques s’affichent désormais pour chaque thématique, j’y reviens dans un thread sur Twitter)

Voilà ! Je suis en tout cas curieux de savoir vos remarques, critiques ou propositions d’amélioration dans les commentaires de ce post ou bien, pour les timides, dans un message privé.

Mis à jour le 2/2 à 10h15. Précision sur les seuils (point 4) et point 5 ajouté.

280 heures de design pour refaire le bouton Like de Facebook

Les conférences TED font partie de mes plaisirs coupables, même si la mécanique trop bien rodée des interventions, le côté prédicateur et souvent angélique des conférenciers peuvent agacer.

Mais des choses intéressantes s’y disent parfois, notamment sur les pratiques des géants du Web, comme avec ce talk de de Margaret Gould Stewart, directrice du design de Facebook, que j’ai vu passer en août sur YouTube.

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

Facebook’s « like » and « share » buttons are seen 22 billion times a day, making them some of the most-viewed design elements ever created. Margaret Gould Stewart, Facebook’s director of product design, outlines three rules for design at such a massive scale-one so big that the tiniest of tweaks can cause global outrage, but also so large that the subtlest of improvements can positively impact the lives of many.

Pour les gens pressés, j’ai passé le filtre anti-bullshit et relevé points-clés et quelques chiffres éclairants.

22 milliards d’affichage par jour pour le bouton Like

  • L'ancien et le nouveau bouton LIke
    L’ancien et le nouveau bouton LIke

    Créer les petits éléments d’interface d’un site ou d’une application ne constitue pas la partie la plus séduisante du travail de designer, mais quand il s’agit d’un service utilisé quotidiennement par des centaines de millions d’utilisateurs, chaque détail compte.

  • Le bouton Like actuel s’affiche « 22 milliards de fois par jour sur plus de 7,5 millions de sites web », explique  Gould Stewart [ce qui permet au passage à Facebook de recueillir des informations sur ses utilisateurs…  et les autres, comme le rappelait déjà Erwan Cario en 2010 dans Libération, ndlr].
  • Ce micro-bouton a nécessité « 280 heures de travail sur plusieurs mois »,  pour ajuster sa largeur et sa hauteur, le traduire et vérifier qu’il s’affiche correctement sur les navigateurs les plus anciens (« attention aux jolis dégradés et aux bordures », prévient-elle).

Ces photos Facebook qui nous rendent « tristes »

  • Lorsque Facebook a donné la possibilité à ses utilisateurs de signaler une photo qui, selon eux, contrevenait aux « standards de la communauté », ses équipes se sont retrouvées submergées par des rapports inappropriés. Des photos gênantes pour la personne qui figure dessus, mais qui restent « dans les clous » : rien ne vous interdit de publier une photo de votre collègue de travail éméchée au pot de fin d’année (sauf bien sûr si elle est torse nu), mais c’est un autre problème.
  • Facebook a d’abord ajouté la possibilité d’envoyer un message à l”  »ami » concerné pour lui demander le retrait.  Echec : 20% seulement des personnes concernées l’ont utilisé.
  • C’est finalement un changement dans le formulaire de signalement lui-même qui a permis d’améliorer la situation. Désormais, quand il veut faire retirer une photo, l’utilisateur peut choisir l’option « Je n’aime pas cette photo de moi », puis préciser pourquoi, par exemple en sélectionnant « Elle me rend triste. » Le taux d’utilisation a grimpé à 60%, et les auteurs des contenus concernés ont mieux compris la réaction de leurs « amis » mécontents.
Le formulaire actuel de signalement de photos sur Facebook

Le data ne fait pas tout

  • Gould Stewart déteste qu’on dise que le travail de design sur un site comme Facebook n’est guidé que par la compilation de statistiques d’utilisation (approche « data driven »). « Les données peuvent vous aider à rendre un bon design encore meilleur », mais n’ont jamais remplacé l’intuition.

Faire avec la résistance au changement

  • « Je passe pratiquement autant de temps à faire le design du message qui avertit d’un changement qu’à faire celui du changement lui-même », plaisante Gould Stewart. Les gens peuvent s’habituer à un mauvais design, et même devenir très bons dans son utilisation, rappelle-t-elle. La frustration est encore plus grande quand la page est modifiée.
  • Avant de travailler chez Facebook, Gould Stewart s’est occupé du changement de notation des vidéos YouTube : d’une échelle de cinq étoiles, le site est passé à deux pouces, l’un vers le bas, l’autre vers le haut.  Pour une raison simple (que j’ai aussi pu constater à Rue89, lorsque les commentaires étaient notées de 1 à 5 boules rouges) : les utilisateurs ne se servaient que de la note la plus basse et de la note la plus haute, pas des étoiles intermédiaires. Ça n’a pas empêché la colère des « noteurs », obligeant YouTube à s’expliquer dans la presse spécialisée.
Google, YouTube et Facebook sur des téléphones ancienne génération
Google, YouTube et Facebook sur des téléphones ancienne génération

Penser aux nouveaux usages et aux pays pauvres

  • Penser le design d’un site pour les téléphones ancienne génération, c’est moins glamour que de lancer une nouvelle application chic pour trouver le nouveau café branché, explique en substance Gould Stewart. Mais ce sont ces interfaces qu’utilisent et utiliseront des millions d’utilisateurs dans les pays pauvres.
  • Pour prendre ces nouvelles contraintes en compte, « nous sortons de notre bulle et nous rencontrons les gens pour qui nous réalisons ces designs, nous testons nos produits 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 plupart des sites d’infos sont encore bien loin d’avoir une approche aussi soigneuse quand ils pensent leur interface et plus globalement leur expérience utilisateur, faute de moyens suffisants et d’expertise en interne. Ça donne des pages surchargées de publicités, des systèmes de commentaires dépassés ou des versions 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 objectifs comme le temps passé sur la page ou la fidélité des internautes sont de mieux en mieux pris en compte – sur ce sujet, voir les explications du populaire service de statistiques en temps Charbeat.