Une expérience 3D multi-supports pour sensibiliser le grand public à l’art génératif
En 2015, nous avons réalisé une application d’art génératif pour la Société Générale. Réalisé en collaboration avec l’agence Magic Garden, le projet a fait naître 24 000 créations originales. Il répond à un défi : utiliser des algorithmes comme matière première d’une opération de communication grand public.
UTILISER LES ALGORITHMES COMME MATIÈRE PREMIÈRE CRÉATIVE
L’art génératif est un courant de l’art numérique utilisant les algorithmes comme matière première créative. Ainsi, dans une oeuvre d’art générative, un programme informatique transforme des données et des signaux en motifs esthétiques. La particularité de ce programme est d’intégrer une part d’aléatoire : les signaux ne sont jamais traduits de la même façon. Là réside sa poésie : l’art génératif ajoute une part d’irrationnel et d’incontrôlable dans l’univers d’ordinaire froid et mathématique des données.
Voilà sans doute pourquoi ce courant artistique trouve aujourd’hui une résonance plus aigüe que jamais : dans notre environnement inondé de données, nous avons tous envie de croire à un monde où le hasard et l’incertitude ont toujours leur place.
L’opération Crea-Carte, réalisée en 2015 pour la Société Générale, nous a donné l’occasion de vérifier cette intuition, et de faire la preuve que le grand public peut accueillir avec enthousiasme cette esthétique générative.
Crea-Carte est un projet d’art génératif collaboratif : il invitait les visiteurs à faire un geste pour générer une forme esthétique en 3D. Cette création individuelle était ensuite ajoutée au flux de toutes les collaborations enregistrées depuis le début de l’opération.
Ce dispositif renferme un algorithme qui transforme les données décrivant le geste des participants en objets 3D harmonieux, et ajoute une part aléatoire dans le processus de génération.
Cette expérience de “création assistée par algorithme” a été pensée pour le concours 2015 de création de visuels de cartes bancaire de la Société Générale. Elle est le fruit de six mois de travail ayant impliqué toute l’équipe Dataveyes. Elle nous a permis de mettre au point de nouvelles technologies et d’établir des médiations efficaces entre un public non-expert et le monde des données.
Cette étude de cas décrit comment nous avons mobilisé l’esthétique des données au service d’une expérience interactive grand public.
LA MÉTHODE : COMMENT L’ART GÉNÉRATIF NOUS A PERMIS DE RÉPONDRE AUX EXIGENCES D’UNE OPÉRATION GRAND PUBLIC ?
A l’origine de ce projet se trouve l’intuition de l’agence Magic Garden, en charge d’organiser le concours de création de visuels de carte bancaire de la Société Générale : cette dernière a vu dans l’art génératif un concept créatif porteur, capable de donner un nouveau souffle à la troisième édition de ce concours ciblant un très large public.
L’art intermédié par les algorithmes apparaissait alors comme une solution pour atteindre plusieurs objectifs :
- Permettre à des non-experts de créer des visuels esthétiques et originaux ;
- Générer des participations à la fois très nombreuses et très différentes les unes des autres ;
- Toucher un large public avec une expérience fascinante ;
- Apporter une dimension collective dans le processus de création individuel ;
- Permettre de créer sur tout supports.
PERMETTRE À DES NON-EXPERTS DE CRÉER DES VISUELS ESTHÉTIQUES ET ORIGINAUX
L’enjeu de ce concours était de toucher un large public, dépassant le petit cercle des designers et créateurs professionnels. Pour cela, il était important de permettre à tout utilisateur de se sentir artiste… et donc de proposer un dispositif de création capable de générer des visuels esthétiques et originaux, quelle que soit l’inspiration des participants ou leur habileté sur les supports numériques.
Au lancement du projet, nous avons imaginé plusieurs pistes génératives pour répondre aux objectifs du projet.
La deuxième piste, présentant un concept de “révolution” de matière, a été conservée, parce qu’elle créait un lien direct entre un geste, dessiné par le participant au concours, et le rendu esthétique “enrobé” autour de ce tracé initial.
La dimension générative apportait ici une solution efficace pour obtenir des résultats toujours esthétiques. En effet, les visuels générés ne sont pas le seul fait des participants : un algorithme intervient pour transformer le geste initial de chaque contributeur en un objet 3D.
Une fois la piste de la “révolution” validée, notre mission a consisté à calibrer cet algorithme pour qu’il soit capable de transformer n’importe quel geste, même le plus absurde, en une forme paraissant jolie.
Pour cela, un designer et un développeur ont travaillé main dans la main pendant plusieurs jours, associant les facilités de projection d’un outil de conception en 3D comme C4D, et les capacités de construction du WebGL. En additionnant leurs regards et leurs sensibilités, notre lead designer et notre lead creative codeur ont mis sur pied un programme informatique suffisamment performant et poétique pour générer des formes 3D toujours harmonieuses.
GÉNÉRER UN GRAND NOMBRE DE PARTICIPATIONS SUFFISAMMENT DIFFÉRENTES LES UNES DES AUTRES
Le programme de génération de formes 3D devait aboutir à des résultats suffisamment différents d’une participation à l’autre pour donner l’impression aux contributeurs d’être réellement auteurs de leurs créations, et les inciter à participer plusieurs fois.
Pour cela, nous avons introduit une forte dimension aléatoire dans l’algorithme de génération des formes 3D. Deux paramètres interviennent dans cet algorithme chargé d’enrober de la matière autour du geste du participant : l’angle de révolution et la hauteur de la translation entre les points de départ de la révolution et ceux d’arrivée. Ces deux paramètres sont définis aléatoirement parmis une plage de valeurs, que nous avions choisi pour que le résultat de la révolution paraisse toujours esthétique et chaque fois différent, même quand l’utilisateur réalise un geste identique.
Ensuite, les couleurs formant le dégradé sur l’objet 3D, et la couleur du fond, sont fixées aléatoirement au sein d’une palette composée spécifiquement pour l’opération. Les dix-huit couleurs composant cette palette ont été conçues pour se mélanger harmonieusement quel que soit le quatuor retenu par le hasard.
Enfin, une fois l’objet 3D généré par l’algorithme, l’utilisateur pouvait personnaliser sa création en modifiant à sa guise les couleurs, la matière et la transparence de sa création.
Compte tenu des 18 x 18 x 18 x 18 combinaisons de couleurs, des trois matières différentes et des dix degrés de transparence sélectionnables, cela représentait plus de trois millions de possibilités de configurations différentes, qui venaient s’ajouter aux formes déjà infiniment variées générées par l’algorithme et sa dimension aléatoire. Autrement dit… impossible d’obtenir deux fois le même résultat !
TOUCHER UN LARGE PUBLIC AVEC UNE EXPÉRIENCE FASCINANTE
Là résidait sans doute le plus gros défi du projet : intéresser un large public à l’art génératif et transformer ainsi un sujet pouvant paraître ésotérique en une vraie expérience ludique. Pour y parvenir nous nous sommes concentrés sur deux objectifs :
- Créer une expérience suffisamment attractive pour se suffire à elle-même ;
- Eliminer tous les freins à l’interaction et à la progression des utilisateurs dans l’expérience.
Tout d’abord, nous avons centré le parcours utilisateur sur la zone de la création : toutes les options de navigation dans l’application y convergent. Au sein même de cette zone de création, nous avons encouragé la liberté de créer en permettant aux utilisateurs de faire, dé-faire, re-faire, tester, personnaliser, etc. Nous avons ainsi rendu possible une expérience fascinante, un peu magique : voir un simple geste se transformer en quelque chose de tangible et joli.
Pour que cette expérience rencontre le plus large public possible, nous avons fait la chasse à tout ce qui pouvait freiner les interactions. Nous avons mené des tests d’utilisabilité sur l’application pour identifier et corriger les petites frictions susceptibles de décourager les utilisateurs.
Ces tests ont été réalisés grâce à la méthode des tests formatifs en “voice aloud” (voir la présentation détaillée de notre méthodologie dans ce précédent article). Cette méthode consiste à confronter un utilisateur neutre à des mises en situation concrètes, pour l’amener à effectuer des tâches sur un prototype de l’application. Le testeur est invité à exprimer à voix haute ce qu’il fait et ce qu’il voit sur l’application.
Ces tests nous ont permis de corriger des problèmes précis d’utilisabilité et d’ergonomie. Quelques exemples de correctifs sont présentés ci-dessous, montrant des wireframes avant et après les tests utilisateurs.
APPORTER UNE DIMENSION COLLECTIVE DANS LE PROCESSUS DE CRÉATION INDIVIDUEL
Pour faire écho à la signature de marque de la Société Générale — “L’esprit d’équipe” — il était prévu que l’opération ne se limite pas à un concours individuel de création de visuels de carte bancaire, mais inclue aussi une dimension collaborative.
Nous avons donc transformé les gestes individuels en actes de co-création : après avoir personnalisé sa particule 3D, chaque contributeur était invité à ajouter cette pièce au sein d’une oeuvre collaborative, composée des particules de tous les participants précédents.
Nous mobilisions ici aussi l’algorithme de révolution, comme ciment entre le niveau individuel et collectif. Pour tracer l’oeuvre collective, nous calculions le geste moyen de tous les participants, et nous l’utilisions comme “input” de l’algorithme, afin d’obtenir le squelette d’une forme 3D incarnant la communauté, qui était ensuite peuplée par les miniatures des créations individuelles.
En conséquence, chaque nouveau participant était susceptible d’influencer le tracé de la forme collective par son geste. C’est particulièrement vrai pour les premiers participants, lorsqu’un tracé supplémentaire influence fortement la moyenne. C’est de moins en moins visible lorsque le nombre de participants augmente, et que la participation d’un individu influence très marginalement la moyenne collective.
En conclusion, chaque nouvelle création individuelle contribuait à l’oeuvre collective de deux façons :
- en apportant une pièce en plus dans le maillage composant l’oeuvre collective,
- et en influençant le tracé moyen déterminant la forme 3D de cette oeuvre collaborative.
Cette étroite imbrication du niveau individuel et du niveau collectif incarnait très bien la notion “d’esprit d’équipe” de la Société Générale, mais elle a nécessité de mettre en place des solutions techniques avancées.
En effet, en postulant que le concours attirerait plusieurs dizaines de milliers de participations (ce qui s’est avéré), afficher côte à côte chacune des créations 3D au sein de l’oeuvre collective présentait plusieurs difficultés. Cela risquait d’abord de créer du bruit visuel et de nuire à la lisibilité de l’interface. Cela posait ensuite un sérieux problème de performance : nos navigateurs sont loin d’être capables d’afficher autant d’objet 3D complexes en même temps, tout en conservant la possibilité d’interagir avec.
Nous avons donc pris le parti de dessiner l’oeuvre collective à partir de formes simplifiées : des points rouges tous identiques qui chacun symbolisait une création individuelle et son positionnement précis au sein de l’oeuvre collective. Lorsque l’utilisateur zoome sur l’oeuvre collective, les points rouges les plus proches laissent place aux créations originales.
Pour des raisons de performance toujours, nous ne pouvions pas afficher ces créations en tant qu’objets 3D : nous exposions en réalité leur reflet en 2D. Nous avons donc dû produire l’image 2D de chaque création individuelle.
Pour garantir l’intégrité de la base d’images, nous ne pouvions pas réaliser ces rendus dans le navigateur. Nous avons donc utilisé Atom Electron pour les générer côté serveur. Cette technologie nous permettait d’embarquer sur un serveur de rendu un navigateur manipulé de manière programmatique, nous rendant ainsi capables d’automatiser la transformation du code WebGL des créations 3D en image 2D.
Pour assurer la robustesse de cette solution, nous l’avons complétée par un système de gestion de queue, RabbitMQ, qui assure que les rendus des images se fassent les uns à la suite des autres, sans crainte de surcharger le serveur, ou de perdre des rendus en queue.
Enfin, compte tenu des ressources mobilisées par cette fonction de génération d’images côté serveur, et de la taille de la base de données, nous avons opté pour une architecture technique articulant trois serveurs :
- un serveur frontal, pour gérer l’application à laquelle se connecte l’utilisateur ;
- un serveur de base de données pour gérer la base de données des participations ;
- un serveur pour le rendu image, équipé d’une carte graphique.
Cette architecture robuste et vertueuse présentait l’avantage d’être scalable, et pouvait surmonter d’éventuelles montées en charge : Rabbit MQ supportant des canaux de communication multiples, il était possible de mettre en place de nouveaux serveurs de rendu image en cas d’afflux de participations.
PERMETTRE DE CRÉER SUR TOUT SUPPORT
Pour toucher le plus grand nombre d’utilisateurs, une compatibilité sur une large gamme d’appareils s’imposait : ordinateurs, tablettes et smartphones.
Les écrans et le parcours utilisateur s’adaptaient à la taille du support de consultation, mais aussi à ses performances.
Le rendu 3D a ainsi été développé en WebGL et fonctionnait de façon fluide sur les ordinateurs, mais aussi les tablettes et smartphone récents. Pour les smartphones plus anciens, une version en Canvas permettait d’afficher un rendu 3D un peu moins esthétique mais plus économe, et compatible avec un plus grand nombre d’appareils.
Enfin l’expérience a aussi été déclinée dans l’univers physique, avec une version de démonstration destinée aux agences Société Générale. Une dizaine d’entre elles, localisées en centre-ville, et donnant sur une rue passante, ont affiché en vitrine sur grand écran les dernières créations réalisées par les participants au concours. Depuis la rue, les passants pouvaient interagir avec ces formes 3D grâce à une webcam qui détectait leurs mouvements.
LES RÉSULTATS : QU’APPREND-ON DE 24 000 PARTICIPATIONS ?
Bilan de l’opération
L’opération a été lancée le 19 mai 2015. Les participants avaient alors trois semaines pour soumettre leur plus beaux visuels génératifs au concours de carte bancaire. Une fois les vainqueurs désignés le 9 juin 2015, l’expérience a été pérennisée pendant un an : les visiteurs du site “Concours Crea-Carte” de la Société Générale pouvaient toujours créer, personnaliser leur particule 3D et la soumettre au sein de l’oeuvre collective, mais aussi consulter les oeuvres créées par tous les précédents participants.
Plus de 13 500 participants ont été enregistrés pendant les trois premières semaines du concours, soit une augmentation considérable du nombre de participations par rapport aux précédentes éditions du concours.
Le projet a été récompensé d’un Awwwards le 4 juin, et d’un FWA le 21 juillet. Ces deux prix de design ont contribué à relancer la visibilité du projet, et donc l’affluence sur le site lui étant dédié.
Les nombreux tweets et posts Facebook relayant le projet montrent que l’expérience a permis de toucher un public plus plus large que le seul cercle des amateurs de design numérique.
Un an après son lancement, le site comptabilise plus de 24 000 particules.
Préférences des participants
Les participations au concours constituent en elles-mêmes un jeu de données intéressant décrivant les tracés réalisés par les participants, et leur choix de couleur.
Le rouge, le noir et le jaune font ainsi partie des couleurs préférées par les participants, qui ont en revanche boudé les couleurs pastel. Le fait que le rouge et le noir soient les couleurs de la charte Société Générale y est sans doute pour quelque chose.
Les gestes tracés sur desktop, tablette et mobile présentent une très large palette de formes : des très minimaliste traits, aux signatures, en passant par les dessins figuratifs, etc.
Nous avons réalisé un classement par similarité de tracés des 2000 premiers participants, consultable sur : http://sg.sorting.dataveyes.com.
CONCLUSION : POURQUOI UNE MARQUE BANCAIRE DOIT S’INTÉRESSER À L’ART GÉNÉRATIF
Cette expérience d’art génératif menée aux côtés de la Société Générale a prouvé qu’il est possible de mobiliser un public large en proposant une expérience interactive où prime l’esthétique des données. En arrière-plan, ce projet original a permis à la Société Générale de démontrer au grand public que les algorithmes et les données peuvent être domestiqués et mis au service de l’utilisateur. Un enjeu fort pour le secteur bancaire.
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.
