Un paysage vivant pour traduire l’actualité dans l’univers du jeu vidéo
Au début de l’été 2013, la Cité des Sciences et de l’Industrie nous a proposé un scénario pour une application destinée à visualiser, en temps réel, l’actualité des jeux vidéo, et destiné à sa prochaine exposition d’envergure.
VISUALISER EN TEMPS RÉEL L’ACTUALITÉ
Le projet s’appelle «Actualités». Nous l’avons réalisé avec Antidot, une société Française spécialisée dans le traitement, l’enrichissement et la sémantisation des données.
Lorsque nous avons reçu ce brief, nous avons hésité à proposer à nos interlocuteurs : « pourquoi ne pas utiliser la NewsMap de Marumushi ? »
Pour nous la visualisation de Marumushi a toujours été une des meilleures jamais réalisées, le parfait exemple de ce à quoi sert la visualisation de données :
- Nous montrer des patterns cachés.
- Nous aider à gérer la sur-abondance d’information.
Dès lors, si la NewsMap est l’application parfaite. Pourquoi en faire une autre ? « Parce qu’il n’y a ni Twitter ni Facebook dans la Newsmap. »
La NewsMap a été publiée en 2004. Notre univers informationnel a bien changé depuis.
L’actualité des jeux vidéo est foisonnante, elle bouge en permanence. Elle est le fruit de multiples sources aux temporalités différentes. Elle n’est plus le fait de quelques blogs et médias en ligne, elle est devenue protéiforme et émane d’une multitude de signaux. Elle peut à tout moment déraper et changer de direction sous l’effet d’un buzz porté par l’incroyable vitalité du web social. Il s’avère désormais difficile de la résumer en deux dimensions.
Être capable de restituer cette dimension vivante représentait déjà une 1ère bonne raison de chercher de nouvelles réponses à cette problématique de la visualisation de l’actualité.
La 2e raison nous a été apportée par le contexte de l’exposition : nous devions intégrer cette visualisation dans un évènement entièrement dédié aux jeux vidéo. Cela signifie des douzaines de dispositifs interactifs dans le petit espace de la salle d’exposition : une contraction inédite de dispositifs tous plus aguicheurs les uns que les autres, invitant les visiteurs à jouer, manipuler, regarder, interagir, écouter, sans interruption.
Pour que notre visualisation de l’actualité ait une toute petite chance d’être appréciée dans tout ce brouhaha d’interactions ludiques, il nous fallait en faire quelque chose de calme et de reposant.
Nous nous sommes donc lancé dans ce pari, celui de :
- Faire une application qui pousse plus loin tout ce que nous trouvions réussi dans la NewsMap, les grands principes de base de notre métier :
refléter notre univers avec un surplus de sens ;
aider à gérer la surcharge d’information.
2. Tout en intégrant deux nouvelles intentions :
faire une application calme ;
faire une application vivante.
UNE INTERFACE CALME
L’application est projetée sur un grand écran. Les gens passent devant, mais ne peuvent pas interagir avec. Ce projet est donc un projet sans interaction «volontaire», et c’est justement une des choses qui nous a beaucoup plu : ce projet nous donnait l’occasion de nous réinventer, nous qui sommes spécialisés dans la visualisation «interactive» de données.
Nous avons saisi cette opportunité de nous plonger dans le concept «d’informatique ambiante», cette informatique diffuse et omniprésente. Elle incarne l’idée à peine futuriste d’un monde où tous les systèmes informatiques seraient aussi libres et naturels que l’air que nous respirons, où l’information serait partout, en tout, discrète et non-intrusive.
C’est exactement ce que nous voulions faire de ce projet « Actualités » :
- Un dispositif d’information qui se fonde harmonieusement dans le paysage de l’exposition,
- Qui reste discret, élégant et poli. Il ne vous saute pas à la figure lorsque vous arrivez,
- Il ne réclame pas d’être au centre de votre attention, il ne vous demande pas d’effort. Vous pouvez vous en imprégnez en passant devant, simplement.
En définitive, c’est un dispositif calme.
Notre environnement est surchargé d’information, nous ne pouvons pas prêter une attention fine à tous les signaux qui nous entourent. Les dispositifs ambiants peuvent nous permettre de supporter des informations à côté desquelles nous serions passés s’il avait fallu nous concentrer attentivement dessus.
Dans ce contexte, une application calme ce n’est pas seulement une application esthétique, qui bouge doucement, c’est une application qui nous aide à gérer la surcharge informationnelle, sans submerger notre attention. C’est ce que permet de faire Actualités, et c’est pour cela que nous avons pensé ce dispositif comme un dispositif à plusieurs niveaux d’engagement : il peut mobiliser soit le coeur, soit la périphérie de notre attention.
1ER NIVEAU — ESTHÉTIQUE
Ce premier niveau ne nous demande aucune concentration. L’application est esthétique et apaisante. Elle nous aide à canaliser le bruit. Elle nous laisse en tête quelque briques d’information que nous aurions engrangés par mégarde, sans y faire attention.
2EME NIVEAU — DESCRIPTIF
Ce second niveau nous demande juste l’effort de nous intéresser à l’application : comprendre ce que chaque élément symbolise et décrit.
- Il s’agit ici de comprendre que chaque planète est un sujet d’actualité, qu’elle se compose d’un noyau dur et d’un halo.
- Le noyau reflète tous les articles du sujet sur les sept derniers jours.
- Le halo représente l’écho qu’ont eu ces articles sur les réseaux sociaux, il montre à quel point le sujet a été partagé et discuté.
- À chaque nouvel article, à chaque nouveau post, ou à chaque nouveau tweet, une petite particule descend du haut de l’écran pour se mettre en orbite autour de son sujet d’actualité. Au bout de quelques heures, elle est absorbée par la planète et vient grossir le noyau ou le halo.
À ce stade, l’interface permet de comprendre quels sont les grands sujets d’actualité, et quelle est leur importance. L’interface pourrait ici être résumée avec un simple bar chart, mais elle remplace adéquatement une revue de presse, en plus sympathique.
3EME NIVEAU — ANALYTIQUE
Le troisième niveau est celui qui attise notre curiosité et peut nous faire rester plusieurs minutes devant l’application à décrypter comment chaque planète se compose et quelle a été la vie des clusters. Certains sujets buzzent très fort très rapidement, d’autres se maintiennent au même niveau de discussion tout au long de la semaine. Il devient ainsi possible de distinguer les décalages entre des sujets très viraux, les sujets qui génèrent beaucoup d’articles, les sujets de fond, qui s’étirent de jours en jours, et les épiphénomènes, ceux qui ont marqué la Twittosphère la veille, et ceux qui fourmillent de discussion aujourd’hui, etc.
C’est le niveau le plus intéressant. Il confère à l’application la dimension d’un média. Un média qui nous raconte au quotidien toutes les subtiles nuances de l’actualité du jeu vidéo. Un média qui se nourrit du monde du jeu vidéo pour la restituer avec un surplus de sens et d’analyse.
Pour atteindre cette dimension analytique, nous avons dû anticiper le comportement des planètes sur le temps long. Avant même que l’actualité n’arrive, nous avons dû prévoir comment allait évoluer les données au fil des jours.
Pour cela, nous avons créé un dispositif « vivant ».
Nous utilisons ici le terme «vivant» pas seulement au sens de «temps réel» — même si l’application est bien en temps réel mais aussi dans le sens de «en mouvement» voire même au sens de «autonome».
UNE INTERFACE VIVANTE
Il y a de très nombreuses façons de rendre les données plus faciles à comprendre, et de raconter une histoire avec.
L’une des plus utilisées est la spatialisation de l’information : restituer visuellement des grandeurs mathématiques, sans demander à notre cerveau de faire l’effort d’interpréter et de comparer par lui même de façon abstraite, les chiffres.
Par exemple dans l’application «Actualités», la taille des noyaux est proportionnelle au nombre d’articles qui le composent et le halo est lui aussi proportionnelle au nombre de partages sociaux.
Néanmoins, dans le projet «Actualités», nous voulions aller plus loin et entrer dans une dimension qui nous tient beaucoup à coeur : la transformation des données en matière. Il s’agit d’utiliser des métaphores visuelles capable de rendre tangible, palpable, touchable, apréhendable, quelque chose d’aussi intangible que les données, les actualités, les tendances, etc.
Cette démarche donne aux utilisateurs l’impression que les données sont concrètes, que ce ne sont pas des boites noires, ou des algorithmes insaisissables. De cette façon, les données prennent une forme, elles sont moins impressionnantes, moins effrayantes. Cela donne à l’utilisateur l’impression qu’il a «la main», qu’il est «en capacité» de faire ce qu’il veut avec ces données, il se sent plus en confiance.
C’est un ressort que nous utilisons souvent dans nos projets :
- Dans ce projet pour la ville de Rennes Métropole, nous avions créé une matière première faite de petites bulles, que l’utilisateur peut ensuite répartir, comme s’il jouait avec des billes.
- Dans notre précédent projet Metropolitain.io, nous avons utilisé les données pour donner du relief à une carte, créé de la matière qui s’entasse, compose des montagnes, s’allume, au gré des données.
COMMENT NOUS AVONS TRANSFORMÉ DES FLUX DE DONNÉES NON STRUCTURÉES, EN MATIÈRE UTILISABLE
Au début du projet, nous avons commencé par mettre en place le mécanisme de récupération des données avec notre partenaire Antidot, un acteur spécialisé dans les traitements des données.
Notre matière première était faite de flux d’articles issus d’une trentaine de sources :
- flux rss de blogs spécialisés
- sites d’info généralistes
- Google news, Yahoo news
- etc.
Ces données ont été traitées par notre partenaire Antidot, à partir de briques technologiques issues de sa R&D de façon à résoudre un des grands défis de ce projet : transformer les bribes d’actualités éparses en sujets hiérarchisés. Antidot apporte le même type de brique technologique que Google News : à partir d’un amas de données non structurées, Antidot leur donne une forme, raffine cette matière première, pour pouvoir mieux la travailler ensuite.
Pour cela, les données sont enrichies et sont reliées grâce à des technologies statistiques et sémantiques. Les flux de contenus passent à travers une succession de filtres qui permet de, petit à petit, leur donner une autre dimension, de les rendre utilisables.
L’exposition a duré 8 mois. Au milieu de cette péroide, ce mécanisme avait déjà ingéré et digéré plus de 20 000 articles et identifé environ 1 000 sujets d’actualité différents semaines après semaines.
Nous avons ensuite construit l’interface de visualisation à partir ces flux de données structurées mis à disposition via les API d’Antidot.
COMMENT NOUS AVONS TISSÉ DE LA MATIÈRE ORGANISÉE À PARTIR DE CES DONNÉES
Développeurs et designers ont travaillé main dans la main, de façon très itérative, tout au long du projet, sans aucune fragmentation. Ils ont fait des allers et retours constants entre les outils du développement et les outils du design, entre WebGL et Illustrator. Les développeurs, construisaient des formes en webGL. Les designers leur donnaient leur pertinence leur précision, leur esthétisme. Les développeurs reproduisaient ensuite ces variations dans le prototype et y ajoutaient des paramètres, puis itéraient à nouveau avec les designers, et ainsi de suite.
Le rendu du début du projet était très brut : une cage en grillage, avec des petites lueurs animées arrivant du fond de l’écran. Nous avions peur de recevoir des milliers d’articles en même temps, nous voulions d’abord maîtriser les problèmes de performance avant de passer sur des formes visuelles plus élaborées.
À ce moment du projet, nous avons testé un grand nombre de variables différentes, et de rendus physiques différents. Nous cherchions la bonne façon d’incarner la matérialité de ces données.
Finalement, ce processus est assez proche de la création de jeux vidéo : les développeurs testent les animations sur des squelettes simplifiés avant de leur donner de la chair, de modéliser les matières, les tissus, l’environnement, etc.
Le résultat aborde une approche très «low poly». Ce traitement est certes très à la mode en ce moment, mais nous l’avons choisi prioritairement parce qu’il répondait bien à nos problématiques de traitement de la matière. La façon dont se reflète la lumière sur les facettes, la simplification des formes, la mise en avant des surfaces lisses, l’accent mis sur l’occupation de l’espace plus que sur la texture, etc.
Ce choix du low poly est aussi un clin d’oeil au monde du jeu vidéo : dans les vieux jeux vidéo, lorsque les technologies n’étaient pas encore ce qu’elles sont aujourd’hui, les développeurs simplifiaient déjà les formes, non pas pour des raisons esthétiques, mais pour résoudre des problèmes de performance, pour que le jeu soit moins lourd et plus facile à animer.
Créer de la matière est une chose…
lui donner vie en est une autre.
COMMENT NOUS AVONS RENDU CETTE MATIÈRE VIVANTE
Dès le début du projet, nous avions des métaphores très organiques en tête : les algues, les arbres, les fleurs, les tiges, les ballons d’hélium, les planètes, les aurores boréales, etc.. Nous voyons une vie là dedans.
Cela nous a incité à créer l’animation, le mouvement dès le début du prototype. Nous avons réellement pensé l’animation comme l’état par défaut de l’application. À la différence de nos autres projets, ou l’animation accompagne et renforce une interaction. Ici l’animation est première, elle apporte du sens à la visualisation.
UNE INTERFACE AUTONOME
Nous avions choisi de travailler en 3D et nous avions choisi de travailler sur des métaphores très organiques : en conséquence nous avons dû nous confronter à une forte interdépendance des éléments les uns par rapport aux autres : les objets de l’application se partagent l’espace disponible à l’intérieur de l’écran, ils s’attirent ou se repoussent, selon des lois physiques qui simulent le réel, comme la gravité.
Néanmoins, il était impossible de prévoir toutes les configurations possible de cette matière vivante et mouvante : les données peuvent prendre tellement de configurations différentes… et nous n’avions aucune idée de comment allait vraiment se comporter les données sur le temps long.
- Qu’allait-il se passer si l’actualité s’emballe et qu’une grosse planète envahit l’écran ?
- Qu’allait-il se passer si les sujets étaient trop disproportionnés et qu’une planète attire toutes les autres à elle ?
Il nous a donc fallu imaginer un dispositif de visualisation qui «fonctionne tout seul», avec des mécanismes d’auto-préservation capable de prévenir toute perturbation de cet éco-système. Nous avons mis en place des règles de comportement destinées à éviter qu’un évènement brutal ou anormal ne viennent soudainement dérégler ce petit univers.
Par exemple :
- Nous utilisons des échelles non linéaires
- En cas de problème, l’application ne se fige jamais. Si elle ne reçoit plus de données, les planètes continuent à se déplacer tranquillement, elles conservent leur forme et leur taille, jusqu’à ce que la connexion aux données revienne
- Lorsqu’elle revient l’effet «rattrapage» est évité, les messages arrivés pendant la coupure ne sont pas renvoyés en même temps, ils sont espacés pour arriver naturellement
- En cas de grave problème avec le serveur, une version en local prend le relais et joue une séance de données simulées
Cette application est devenue comme un organisme vivant autonome, qui ingère des données, les digère, et les recycle pour alimenter tout un petit microcosme dynamique, capable de traduire, à chaque instant, le paysage de l’actualité des jeux vidéo, sans que nous ayons besoin d’intervenir.
Nous n’avons pas seulement rendu les données vivantes, nous leur avons donné une vitalité, comme si une énergie mystérieuse, impulsée par les données, donnait vie à ce dispositif de planètes connectées. Nous captons des signaux du monde du jeux vidéo, et nous les transformons en un paysage onirique de planètes et de petits vaisseaux.
Nous utilisons ainsi la visualisation de données comme un médiateur pour traduire le monde réel et nous le restituer avec un surplus de sens, en recréant un univers poétique autonome, qui finit par nous échapper. Toute la beauté du storytelling des données réside dans cette alchimie : transformer les données en matière, pour bâtir un univers esthétique, calme, ludique et enrichissant.
En définitive, ce projet nous a permis de réaliser qu’une partie de notre métier consiste, en réalité, à être des alchimistes des données.
VOIR LA VIDEO
Vous souhaitez en découvrir davantage ? Abonnez-vous ici sur Medium et recevez nos prochains articles au sujet de la visualisation de données.
Nous sommes aussi actifs sur Twitter, ou encore notre site internet.
