Bilan de la masterclass “Expériences interactives et sobriété numérique”

La masterclass “Expériences interactives et sobriété numérique” - lien externe a eu lieu le 1er février 2022, sur twitch.tv/noesya - lien externe.

Jean-Frédéric — Souvent dans la publicité, on recherche l’innovation, la première mondiale. J’aime beaucoup la définition de Georges Mohammed-Cherif (Président de Buzzman) qui disait que la publicité s’invitait chez les gens sans leur accord et que du coup, il valait mieux arriver avec du champagne ! Une expérience, c’est souvent une logique publicitaire, qui cherche l’effet wow. Au final, tout le monde commence à avoir la gueule de bois et si je continue sur les références publicitaires, on est un peu comme dans la campagne Louise l’influenceuse alcoolique de BETC. Créer une expérience c’est avant tout un travail d’écriture avec comme objectif de créer une émotion, de raconter une histoire, de valoriser l’utilisateur. La conception de l’idée doit s’affranchir de la technique. On peut faire une analogie avec le cinéma des majors versus le cinéma indépendant. C’est pas évident de captiver le public avec moins de moyens mais il faut un travail d’écriture différent, des parti-pris esthétiques différents… Quelques exemples (pas sobres du tout) : A short Journey - lien externe, Vivatech - lien externe, Cancer fighter - lien externe, Swell - lien externe.

Alexis — Des sites d’émotion, avec des prix sur les plateformes comme Awwwards, FWA… Site ou installation numérique qui propose une façon innovante de raconter une histoire, délivrer des informations ou présenter un produit avec des dispositifs interactifs qui immergent l’utilisateur dans la narration. C’est un peu un équilibre entre le site web et le jeu vidéo. Quelques exemples (pas sobres du tout) : Retrominder - lien externe, Pop Challenge - lien externe, Black Snake - lien externe, Atelier Richelieu - lien externe.

Lara-Jane — Une expérience interactive, c’est un moment qu’on passe avec une marque, son interlocuteur. Il s’agit de proposer des interfaces qui demandent aux utilisateurs de participer, et éventuellement avec un message à faire passer. C’est un moment avec une marque, une interface digitale, une participation de l’utilisateur. L’expérience est un tout, qui commence avec l’hébergement. Un exemple sobre : BETC Sustainable - lien externe, Virtuous Cycle - lien externe.

Nicolas — Une histoire ou une pub dont vous êtes le héros ! Quelques exemples (plutôt sobres) : Slavery footprint - lien externe, Sens Fiction - lien externe et aussi : Yamauchi No.10 Family Office - lien externe, How to talk to white kids about racism - lien externe.

Antoine — Un site qui procure des émotions, qui nous marque, dont on se souvient pendant longtemps, ludique, pas forcément avec du webGL. Un exemple sobre : Zoë Pepper - lien externe et un pas sobre : Because recollection - lien externe.  

Les expériences sont-elles inutiles ?

Une expérience peut être inutile, comme le sont de nombreuses autres choses : une randonnée, une balade à vélo, une œuvre d’art, est-ce utile ? L’expérience peut être de l’ordre du poétique et de l’artistique. La question fondamentale est celle du but poursuivi par l’expérience : non pas “à quoi sert-elle ?”, mais “à qui sert-elle ?”. Si l’expérience répond à un besoin réel des usagers, la situation est fondamentalement différente d’une opération commerciale qui sert l’intérêt de la marque qui la finance.

Timothee_Goguely — Avant de parler design et technique, il faudrait déjà se poser la question d’avec qui vous bossez, d’à quoi vous contribuez en bossant sur tel ou tel projet. Parce que si c’est pour se retrouver à faire des sites éco-conçus pour vendre des SUV (coucou Volkswagen Canada - lien externe), c’est juste du pur greenwashing. Il y a deux postures antagonistes face à cette question. L’insider travaille pour tous les projets, quelle que soit la marque et sa nocivité sociale et écologique, et essaie d’améliorer la sobriété de sa production. L’outsider refuse de travailler pour des marques qu’il ou elle juge trop toxique. La première posture considère qu’il faut améliorer l’existant (le système est capitaliste, on ne va pas le changer, mais on peut améliorer nos productions faute de mieux), quand la seconde, plus politique, considère qu’il faut changer le système (il faut encadrer le capitalisme et passer à une économie post-croissance).

Digitzu – Comment ne pas changer le monde actuel ET passer de 10 Tonnes CO2/personne à 2 Tonnes en 8 ans ?

landiaegal — Il faudrait effectivement commencer par questionner l’usage avant de réfléchir à la façon d’utiliser moins d’énergie pour alimenter cet usage, puis d’utiliser une énergie plus décarbonée, puis de faire de la compensation. En tout cas c’est ce que préconise l’ADEME, Bihouix, JMJ… Usage qui dépend de matières premières non renouvelables (avec en plus un gros conflit d’usage) = pas durable = ne peut pas durer (malgré les milliards investis dans le metavers)

Sur les rapports entre acteurs de la tech et industries pétrolières : New Greenpeace Report Exposes Big Tech Connection to Big Oil - lien externe

Numérique responsable

Pour comprendre les enjeux du numérique responsable, les MOOCs Sensibilisation Numérique Responsable (30min) - lien externe & Numérique Responsable (Complet) - lien externe de l’Institut du Numérique Responsable - lien externe.

philippepsm — Le site de l’Ademe et la dernière campagne liée au “Numérique Responsable” - lien externe :)

Poids et performance

yannkozon – Est-ce qu’il n’y a pas une antinomie entre l’expérience interactive sur le web depuis plus de 15 ans et la sobriété numérique ? Les expériences full-flash avait déjà à l’époque les mêmes problématiques qu’aujourd’hui (manque d’accessibilité, besoin de perf, poids…)

Les expériences sont lourdes parce qu’il y a souvent beaucoup d’images, de vidéos, d’assets à télécharger, ce qui fait du temps de transfert. Mais elles sont souvent aussi lourdes en termes de performance, c’est-à-dire qu’il faut une machine très récente pour les faire tourner correctement. Et si ça rame, on peut être tenté de changer de machine, ce qui est en fait de l’obsolescence stimulée.

L’interactivité et la personnalisation d’un message peuvent être des vecteurs facilitant la compréhension et l’assimilation d’un message. C’est un média actif. Une expérience peut dans certains cas s’avérer plus impactante et pertinente qu’une vidéo.

Il y a un biais, parce que les développeurs et concepteurs sont trop bien équipés, tant en termes de machines qu’en termes de réseau. Peut-être qu’un équipement moins performant améliorerait la sobriété. Les développeurs cherchent à être à la pointe, à l’avant-garde technique, pas à être sobres.

Au-delà des expériences actuelles, le métaverse promet des situations encore plus problématiques. La pandémie a augmenté l’acceptabilité du concept, mais nous n’avons pas de solutions techniques viables écologiquement. Le concept est très poussé par Facebook, et d’autres acteurs qui y voient un nouveau marché, et d’importantes sources de profits. Finalement, la meilleure solution ne serait-elle pas de ne pas faire ce métaverse ?

Obsolescence

nico3rg0 — Avons-nous besoin de nouvelles applications ou devices ou bien de meilleurs services et expériences utilisateurs?

Timothee_Goguely – Rappelons quand même un point : l’impact environnemental du numérique réside essentiellement au niveau de la fabrication des terminaux (écrans, ordinateurs, smartphones…). Pour réduire cet impact, il faut donc avant tout faire durer ces terminaux les plus longtemps possible. Un site web ou une expérience interactive éco-conçue doit donc pouvoir tourner sur des terminaux et navigateurs d’il y a 5 ou 6 ans, sans quoi cela ne fait que pousser au renouvellement des terminaux, et donc augmenter considérablement son impact environnemental. Et je ne parle même pas de l’accessibilité web qui est le plus souvent reléguée au second plan voir complètement ignorée.

Sur les devices et l’obsolescence : “Extending the lifespan of smartphones and other electronics by just one year would save the EU as much carbon emissions as taking 2 million cars off the roads annually, a new EEB study finds.” Source : Revealed: The climate cost of ‘disposable smartphones’ - lien externe

Framework Laptop - lien externe, un ordinateur portable ultra-performant, fin et léger, conçu pour durer.

3D

Le premier problème est un problème de performance, avec des technologies (webGL) qui nécessitent un device récent, et qui va utiliser beaucoup de batterie. Ensuite les librairies 3D sont lourdes, il faut questionner l’utilité avant de charger 500 ko pour faire tourner une canette.

Timothee_Goguely – Non mais là le Metaverse, faut pas déconner non plus, il faut juste pas l’encourager et ne pas y participer !! Et ça commence par arrêter d’en parler à tout bout de champs.

Interactivité et accessibilité

YunaOrsn – C’est un coût si on le voit comme une surcouche de temps à appliquer en plus à la fin… Ca devrait être un état d’esprit dès le début du projet :/ c’est choquant de se dire que son projet ne sera pas accessible dès le début et qu’on ne fait rien pour changer ça

Timothee_Goguely — Accessibilité et éco-conception sont complètement liés ! Je vous renvoie au billet de Bertrand Keller à ce sujet Deux points de vue se confrontent : une vision “marché” et une vision “métier”. Dans la vision “marché”, c’est au client de décider s’il veut payer un site accessible ou pas. Si le client souhaite payer, l’équipe le fait, sinon, non. Dans le cas d’une expérience interactive, ce n’est pas une charge négligeable, cela peut impliquer une version complètement différente de la navigation et de la présentation des contenus. La vision “métier” affirme que c’est un impératif pour faire du bon travail, qu’il faut le faire quel que soit l’avis du client. Dans cette vision, ce n’est pas un coût supplémentaire parce que c’est pris en compte dès le départ et non négociable. C’est un travail supplémentaire uniquement si l’on considère qu’on peut faire le travail sans. C’est une question de formation des développeurs et de posture professionnelle.

Digitzu – Accessibilité, webperf, écoconception, RGPD, GreenUX, sécurité sont des engrenages : toute action sur l’un influence les autres.

Une expérience interactive, en faisant des choix ergonomiques atypiques et en ignorant les enjeux d’accessibilité, est malheureusement trop souvent excluante et peu accessible.

Une histoire de pédagogie

mat2long – Dans le cas de projet web, il y a aussi beaucoup de pédagogie à faire avec ses clients, beaucoup ne se rendent même pas compte de toutes ces problématiques

Il faut éduquer les clients et former les équipes à tous niveaux, en commençant par expliquer que l’accessibilité ne coûte pas plus cher si l’on s’en préoccupe dès le début, et à tous les niveaux. On peut facilement mettre en place des référents et des ateliers pour acculturer les équipes, et favoriser une collaboration étroite entre les équipes créa et dev. Le Référentiel général d’écoconception de services numériques (RGESN) - lien externe est un document de référence, ainsi que le guide de référence de conception responsable - lien externe et les Strategies for Sustainable Web Design - lien externe fourmillent de bonnes pratiques.

yannkozon — Pour aider à la réflexion sur le sujet, il y a quelques articles intéressants ici - lien externe

Digitzu – 1. Recueillir les besoins - 2. Green-UX sur la fonctionnalité principale (MVP, unité fonctionnelle) - 3. Écodéveloper sobre et webperf - 4. Virer tout le reste, le gras :p

Des prix à réinventer

Digitzu – Il manque les catégories “écoconception”, “sobriété” ou “numérique responsable” sur Awwwards. Les participants à la masterclass s’accordent sur l’hypothèse d’expériences produites par un tout petit nombre d’acteurs (un petit milieu qui n’a pas grand sens), fascinés par le cinéma et les jeux vidéos, qui auraient aimé en faire, et qui compensent une certaine frustration. Les prix alimentent cet écosystème en rendant désirables sans jamais questionner le besoin, l’usage et l’impact. Les prix pourraient récompenser la sobriété, soit comme une nouvelle catégorie, soit, encore mieux, comme un critère transversal pour toutes les catégories de prix.

YunaOrsn – Un “petit milieu qui n’a pas grand sens” mais qui fait beaucoup de bruit, vivement qu’on parle autant des initiatives plus sobres. D’ailleurs merci Hey Low pour Lowww directory  - lien externe;)

ddsnkrs — Pour compléter ce que vous dites sur l’éco-conception et l’accessibilité voici un observatoire de l’impact positif - lien externe.

Des outils pour mesurer

Comment mesurer la sobriété ? Sous le capot de la mesure Ecoindex  - lien externe!

La solution Google Lighthouse - lien externe est disponible en extension de navigateur, dans la console Chrome, et aussi sur web.dev - lien externe. Pour aller plus loin dans le suivi des sites, Lighthouse CI - lien externe permet d’automatiser le suivi du front sur les 4 métriques Performance, SEO, Accessibilité et Best practices. Cet outil s’intègre dans une chaîne d’intégration continue. La console de développeur Chrome permet de simuler un réseau moins performant (throttle), c’est très utile pour optimiser. L’enregistrement des performances permet de mesurer les frames par seconde en temps réel, de mesurer la charge sur le processeur et la carte graphique pour pouvoir l’optimiser.

Enfin, le Website Carbon Calculator - lien externe permet d’estimer l’empreinte carbone d’une page en considérant la qualité de l’hébergement et celle de la page.

Cacher ou précompiler

Les technologies précompilées, comme la Jamstack - lien externe, permettent d’alléger la charge en processeur du côté serveur. Dans WordPress, par exemple, quand on visite une page, le serveur Apache reçoit la requête, la transfère au moteur PHP qui exécute le code de l’application, ce code se connecte à une base de données SQL, l’interroge, structure les données, génère une page HTML et la renvoie. Il faut donc que le serveur fasse tourner Apache, PHP et la base SQL, et éventuellement un service de base de cache (type Redis ou Varnish), avec ce que cela implique d’utilisation de RAM et de processeur, de nécessité d’infogérance pour éviter les problèmes de sécurité et de latence pour renvoyer une page, qui dans de nombreux cas n’a pas changé depuis la demande précédente. Dans un site précompilé, quand on visite une page, le serveur NGINX renvoie le fichier HTML déjà prêt. Lorsque du contenu est ajouté ou modifié, toutes les pages sont recompilées et renvoyées à la place des précédentes. Cela fait plus de travail à l’écriture, et moins à la lecture, ce qui est pertinent pour la plupart des sites.

Si l’on utilise pas de technologie précompilée, il est possible d’utiliser un cache côté serveur - lien externe afin de garder la trace de la page générée, et d’éviter de la recréer inutilement. A contrario, si l’on utilise une technologie précompilée, il est possible de gérer le contenu avec un CMS headless, un type d’outil de gestion de contenu qui sépare le back du front. Parmi ces outils, on peut citer Strapi, NetlifyCMS ou Forestry.

Un meilleur traitement des images bitmap

Il est souhaitable d’utiliser les formats webp et avif, une solution efficace pour optimiser les images : Use WebP images - lien externe. Il est souhaitable également de redimensionner les images côté serveur : plutôt que d’envoyer une grande image et de l’afficher en tout petit, préparer automatiquement plusieurs formats et les servir grâce aux balises pictures et srcset: Serve responsive images - lien externe

Des outils pour automatiser la compression des images existent, comme par exemple Imagify - lien externe pour WordPress. D’autres outils existent pour faire ça manuellement comme Tinyjpg - lien externe ou SVGOMG - lien externe pour optimiser les SVG. [suggestion d'Amanda le 28 avril 2024 : https://www.websiteplanet.com/fr/webtools/imagecompressor/ - lien externe permet de compresser des images qui vont jusqu'à 50 MB en format jpeg mais également en png!]

antho_parle_web — Le pb c’est qu’à long terme les contributeurs(trices) ne suivent pas tjrs les directives données par le(la) dev.

La génération des images aux formats optimisés doit être automatisée par le développeur, cette responsabilité ne doit pas incomber aux personnes qui gèrent les contenus.

Plutôt que d’utiliser de nombreuses petites images, on peut gagner à utiliser un sprite CSS, une grande image qui présente côte à côte toutes les petites. Cela permet de charger plusieurs images en une seule requête. Cela dit, l’approche tombe en désuétude avec l’HTTP2.

Il faut aussi veiller à ne pas charger les images avant qu’elles ne soient nécessaires, en utilisant le lazy load.

Du vectoriel et de l’animation sans vidéos

Le vectoriel peut être beaucoup plus léger que l’image bitmap. Dans le site Organic Basics - lien externe, l’image bitmap est chargée à la demande, si l’on clique sur l’illustration vectorielle.

Il existe de nombreuses techniques d’animation, dont certaines permettent une narration alternative à la vidéo. Les animations peuvent être faites en CSS ou en JavaScript, en natif ou avec une librairie.

Lottie - lien externe est une technologie Open Source d’animation vectorielle portée par Airbnb. Elle permet de travailler dans After Effects, et d’exporter des animations exploitables sur le Web. Ces animations peuvent être légères à transférer et à jouer, mais ce n’est pas toujours le cas. La libraire de base pèse 265kb, et la librairie light 147kb. Quelques beaux exemples, plus ou moins sobres : Samuel Day - lien externe, Waaark - lien externe. Charger la librairie Lottie est intéressant si le site utilise beaucoup d’illustrations, mais pour 1 ou 2 ça peut être intéressant de passer par une animation en CSS ou SVG directement. Un exemple de site fait tout en vidéo alors que ça aurait pu être remplacé par du Lottie : A is for Albert - lien externe.

Quelques animations CSS : Species in pieces - lien externe, Carousel 2.5D - lien externe, Ikko Tanaka - lien externe, Liquid (Chrome only) - lien externe, Seeding - lien externe. Quelques animations JS, avec ou sans Matter.js (77ko) - lien externe : Mélange vanilla et matter - lien externe, Parapluie - lien externe

Lynn and Tonic - lien externe, un jeu avec le redimensionnement du navigateur.

Peu de vidéos, et bien optimisées

Les vidéos doivent être utilisées avec grande parcimonie, c’est certainement la pire source de consommation de bande passante. L’approche expérimentale de Gabe Ferreira - lien externe montre des alternatives à la vidéo plein écran. Le contournement de la vidéo peut être vu comme une intéressante contrainte créative.

Si les créatifs échouent, il reste à compresser au maximum la vidéo. Le Shift Project propose ce guide - lien externe qui utilise le logiciel Open Source Handbrake - lien externe. Par ailleurs, il est souvent préférable de passer par une plateforme de diffusion vidéo, qui va encoder la vidéo en plusieurs résolutions et adapter la diffusion en fonction de la bande passante disponible. Youtube a un player très lourd par défaut, Vimeo est bien plus optimal, et offre des options plus professionnelles.

3D : oui, mais…

La 3D n’est pas intrinsèquement lourde ou légère. Une animation CSS 3D peut être très légère en poids et en processeur. Il est possible d’utiliser une librairie, l’une des plus utilisées étant Three.js (604kb quand même !). De la 3D sans texture, avec un résultat très beau : Plume - lien externe, mais 17 mo chargées, donc l’absence de textures ne suffit pas. D’autres exemples, plus ou moins légers : Stripe Press - lien externe et How to Talk to White Kids about Racism - lien externe, Monopo - lien externe.

De la belle typographie

L’évolution des technologies Web permet d’intégrer des typographies efficacement dans des expériences. Le poids d’une fonte est modeste, et l’impact visuel peut-être énorme : Pienso - lien externe (crédit locomotive). Il est bien entendu nécessaire de limiter le nombre de familles et de variantes de graisses, mais cette contrainte créative respectée, le potentiel visuel est immense. Les fontes variables permettent des jeux d’animations créatifs - lien externe. Thanks in advance - lien externe, un bel exemple typographique et vectoriel.

Un hébergement sobre

Tous les hébergeurs ne se valent pas. La Green Web Foundation propose une liste d’hébergeurs “green” - lien externe. Infomaniak présente ses actions en faveur de l’écologie - lien externe, Greenshift, hébergé chez EvoSwitch aux Pays-Bas, présente les siennes - lien externe ainsi que CloudFlare - lien externe. Il y a aussi 1984 hosting - lien externe, en Islande.

Solar Protocol - lien externe et Low tech magazine - lien externe deux exemples intéressants d’hébergement solaire.

L’accessibilité n’est pas une option, c’est un impératif

yannkozon – L’intégration de base prend en compte l’accessibilité, sinon c’est volontairement de l’exclusion.

nico3rg0 — Principes d’accessibilité - lien externe.