Allier design et tech pour créer des produits numériques durables
Zoom sur les challenges de l’éco-design et les bonnes pratiques de collaboration entre designers et développeurs frontend.
Partager Allier design et tech pour créer des produits numériques durables
Créer des produits numériques durables demande l’engagement des designers, des développeurs, des clients et des parties prenantes. Découvrons comment mettre tout le monde sur la même longueur d’onde et quelles bonnes pratiques appliquer pour mettre en place une démarche d’éco-conception à la fois efficace et à la hauteur des enjeux de durabilité numérique.
Les challenges du design durable
Bien que le numérique aille de pair avec la dématérialisation, cette dernière n’est possible que grâce à des serveurs, des téléphones et des ordinateurs. Tout le cycle de vie de ces appareils produit 4 % des émissions de gaz à effet de serre : recherche des ressources, fabrication du matériel, livraison, fin de vie, recyclage ou destruction, autant d’étapes gourmandes en ressources. L’éco-conception va permettre de les économiser, notamment en consommant moins d’électricité et en prolongeant la durée de vie des appareils.
Comment convaincre son client ou ses parties prenantes ?
Pour embarquer un client ou des collègues dans un projet de produit numérique éco-conçu, une phase de sensibilisation est nécessaire, pendant laquelle on va expliquer en quoi consiste l’éco-conception et montrer, par des exemples clairs, ce que l’on peut gagner en définissant les bons KPIs. Il s’agit d’un moment idéal pour faire de la pédagogie, casser les croyances et commencer à nommer les bonnes pratiques sur lesquelles s’engager. Sans oublier de rappeler que 80 % de l’éco-conception réside dans la performance, ce qui augmente le taux de transformation, améliore le référencement et la qualité de l’expérience utilisateur. Passer à l’éco-conception n’est pas une nouvelle méthode de conception mais l’intégration de bonnes pratiques qui permettront de limiter les impacts négatifs sur l’environnement.
80 % de l’éco-conception réside dans la performance, ce qui augmente le taux de transformation, améliore le référencement et la qualité de l’expérience utilisateur.
Des arguments de poids
L’éco-conception ne permet pas seulement de réduire l’impact environnemental du numérique. C’est également un moyen de :
- Réduire les coûts : bien que l’éco-conception prenne plus de temps, elle permet d’avoir moins de serveurs, moins de données à stocker et moins de maintenance à faire. Il s’agit donc d’un investissement.
- Anticiper la loi : dans certains pays européens, le sujet est déjà à l’ordre du jour du législatif, lancer le processus dès maintenant permet de prendre de l’avance sur ce qui apparaît comme une future norme probable.
- Améliorer son image de marque : s’engager à réduire l’impact environnemental du numérique peut être un levier de différenciation auquel les nouvelles générations sont sensibles.
- Fidéliser les utilisateurs : si l’expérience est plus efficace et agréable, les visites des utilisateurs peuvent devenir plus fréquentes.
Quand agir ?
Niji est une entreprise née en 2001, présente en France, à Singapour et Casablanca. À la fois cabinet de conseil, agence de design et société de mise en œuvre technologique, Niji intervient sur tous les aspects du numérique et est à l’origine de plusieurs success stories de l’éco-conception.
Selon Cristella Henriques, head of frontend practice, spécialisée en green IT et design durable chez Niji, il est essentiel de prendre en compte cette contrainte au moment de la conception, car 80 % des impacts y sont déterminés. Quand on sait que 45 % des fonctionnalités ne sont jamais utilisées, se poser la question de leur réelle utilité est crucial. Fédérer toutes les parties prenantes du projet autour de cet objectif semble donc incontournable.
Mesurer le succès d’une démarche éco-design
Afin de mesurer l’impact environnemental d’un site, des outils existent. C’est le cas par exemple de l’EcoIndex, qui fournit une note de A à G à partir de l’URL d’un site. Pour la refonte de leur propre site, l’agence Niji a visé la note de A sur toutes ses pages. Le résultat : une interface en noir et blanc qui utilise des éléments SVG et un site qui après refonte pèse moins que la page d’accueil de la précédente version.
Détail du header du site de la RATP
Lorsque la RATP a confié la refonte de son site à l’agence Niji, c’est la note de B qui a été visée. L’objectif était de réduire les impacts, tout en permettant un design moins radical, qui a permis de conserver l’image de marque. Ainsi, l’éco-score du site de la RATP est passé de 34/100 à 71/100.
L’exemple du cas RATP
Lorsque Niji a effectué la refonte du site de la RATP, le processus s’est articulé autour de ces 12 étapes, dont six seront détaillées ensuite :
- Audit
- Focus group
- Personae et parcours
- Mapping du contenu
- Workshop navigation
- Green best practices
- Sélection des KPI
- Zoning et wireframes
- Direction artistique
- POC
- Préparation des assets
- Webdesign
Le mapping de contenu
Cette étape permet de lister l’ensemble des typologies de contenu et de pages sur le site, mais aussi à voir comment les contenus sont reliés entre eux. L’idée est de faire apparaître les templates et de définir une stratégie de cycle de vie des contenus.
Les bonnes pratiques d’éco-conception
Lors de cette étape, tous les métiers interviennent, avec un référent par partie : stratégie/specs, design UX, DA, content/SEO/analytics, frontend, backend, architecture, hébergement. L’objectif est de voir sur quelles pratiques chaque partie peut s’engager. La direction artistique peut par exemple décider de limiter le nombre de typographies.
La direction artistique
Le système graphique est construit sur du SVG, format plus léger que les images. Il utilise des éléments vectoriels avec des motifs qui évoquent le mouvement sans animations. Les contrastes colorés tiennent compte des contraintes d’accessibilité. Le résultat ? Un vocabulaire graphique riche, modulable, éco-conçu et unique à la RATP.
Cette étape est un travail réalisé en chambre par les designers, qui appliquent le look and feel à la page d’accueil. À ce stade, aucun frein n’est mis à la créativité ! Les idées sont ensuite partagées avec les équipes techniques afin de discuter des propositions, qui sont validées par tous avant d’être soumises au client.
Le PoC (Proof of Concept)
Ce processus technique consiste en l’intégration d’une page en conditions réelles, avec tous les éléments nécessaires au fonctionnement du site, et sert à vérifier si le tout est conforme aux KPIs et à la liste de bonnes pratiques définies en amont. Le nombre de requêtes (les éléments chargés pour afficher la page : fonts, images, Javascript, styles…) doit être limité.
Dans le cas de la RATP, la V1 du header de la page d’accueil comprenait plusieurs images et éléments graphiques, qui multipliaient le nombre de requêtes. Après simplification, la V3 n’a plus qu’une image unique en header, et les éléments graphiques superflus ont été retirés. La dernière version du PoC est ensuite développée et testée. Après obtention d’une note de B, le concept a été validé.
La préparation des assets
La validation du PoC permet d’isoler les grandes parties de la maquette, de réduire le nombre d’images par page, de vérifier le découpage des blocs, et de développer des concepts simples et légers. L’adoption d’éléments répétables, l’application simple d’un effet de box shadow à n’importe quel élément, et des séparateurs faits avec des accents circonflexes répétés ont notamment contribué à alléger le poids du site et donc à accélérer le chargement. Pour Amélie Poirier de Niji, la mise au point de telles pratiques nécessite un fort niveau de collaboration, ce que Figma permet, notamment dans un contexte où les équipes opèrent à distance.
Pour centraliser l’ensemble des données, un toolkit est créé. En tant que source de vérité, cet outil permet d’éviter les erreurs. Les tokens, adoptés par Niji, permettent d’identifier les fonts, les couleurs, les ombres portées et l’utilisation de chacun des éléments. On trouve également dans le toolkit des informations concernant la navigation, la sous-navigation, les différents états, cards, tags, ou encore le traitement des contenus du blogs. Ainsi, un vocabulaire commun est posé, ce qui aide les différents acteurs du projet à travailler et communiquer clairement.
Côté technique, le toolkit sert de bible graphique et de specs. Les testeurs et les développeurs s’y réfèrent à chaque nouvelle maquette. Chez Niji, les développeurs se réjouissent de la mise en place des variables et du déploiement de Dev Mode. Dans le code, ils construisent les éléments avec une logique de cascade en s’appuyant sur celle du design.
Le handoff nécessite une communication transparente entre tech et design. Faites le tour des fonctionnalités offertes par Figma pour fluidifier ce processus.
L’UI design
L’étape finale est celle de l’UI, où tous les écrans sont déclinés et où le concept est appliqué à l’ensemble des pages. Les échanges sur cette partie du travail se sont faits via les commentaires et de vive voix. Les informations importantes sont documentées dans des notes, directement dans Figma. Les différentes variantes des pages sont nommées et décrites de façon claire afin que les équipes techniques aient une compréhension précise de la construction des pages. Pour tester les designs et la façon dont les éléments réagissent, les intégrateurs ont un espace dédié : la sandbox (ou bac à sable), où ils peuvent tester la capacité des pages à évoluer en essayant différentes longueurs de texte ou différentes positions d’éléments.
Les bonnes pratiques design et tech
Pour Amélie Poirier, référente en éco-conception et accessibilité chez Niji, les bonnes pratiques sont les suivantes :
- Identifier avec l’ensemble des expertises les bonnes pratiques sur lesquelles on souhaite s’engager
- Discuter avec le client du niveau de compromis souhaitable entre l'efficience recherchée et les exigences marketing.
- Éliminer le superflu : typos ou animations en nombre, fonctionnalités facultatives
- Simplifier les parcours pour que l’utilisateur atteigne son but rapidement, limitant la dépense de requête
- Valoriser les éléments simples et légers (tels que le SVG)
- Rester aligné avec les normes d’accessibilité (cf. plugins Figma)
- Alléger les éléments transverses comme le header et le footer pour limiter la profondeur des arborescences.
- Concevoir sur de petits devices pour limiter l’ajout d’éléments
- Éviter les conteneurs flex, les vidéos en autoplay et les carrousels
Et côté développement, Cristella Henriques, head of frontend practice spécialisée en green IT et design durable chez Niji préconise de :
- Travailler avec des éléments réutilisables au maximum
- Éviter les spécificités graphiques, sauf si elles sont justifiées côté design
- Économiser les données téléchargées sur le site
- Réduire le nombre d’animations et de fonts, réduire le poids des images avec des formats légers
- Tester, mesurer tout au long du parcours avec les outils comme EcoIndex, Lighthouse, Yellow Lab…
Selon Amélie Poirier, il peut également être intéressant d’avoir un référent éco-design par service. Cela présente l’avantage de resserrer les liens au sein des équipes en créant un alignement dirigé vers le numérique responsable.
Figma peut vous aider à passer plus rapidement de l’idée au produit en mettant les designers et les développeurs sur la même longueur d’onde. Découvrez comment ici.
Améliorer la collaboration entre design et tech
L’encadrement
La démarche d’éco-conception s’inscrit dans le numérique responsable. Elle vise à limiter l’impact environnemental des services numériques. En plus de diminuer la consommation de ressources, la simplification qu’elle implique permet de limiter la fracture numérique, en évitant la création de sites trop complexes ou trop lourds qui ne seraient pas utilisables par tous. Cette initiative est portée par le RGESN (Référentiel général d'écoconception de services numériques).
L’accessibilité est aussi au cœur des préoccupations liées au numérique responsable ; elle est légiféré par le RGAA (Référentiel Général d’amélioration de l’accessibilité)
Enfin, la RGPD encadre le respect de la vie privée des utilisateurs.
Amélie recommande aux designers :
- Au début, de laisser libre cours à son imagination et sa créativité et ne pas se contraindre
- D’être ouvert aux discussions avec la tech et communiquer sans limites, à travers les commentaires ou de vive voix pour lever les freins
- D’avoir un vocabulaire commun pour créer une bonne entente (chronophage en début de projet, mais très important pour la suite)
Cristella préconise aux UI developers :
- De prendre le temps d’expliquer les contraintes techniques aux designers, sans hésiter à vulgariser
- D’être à l’écoute, ne pas imposer de contrainte sans raison
- De suggérer des compromis afin de débloquer les situations
Et Figma, dans tout cela ? Au-delà des fonctionnalités de collaboration qui aident à rapprocher design et tech, pour Amélie, l’arrivée des variables et des tokens a permis de rationaliser le design et de définir un langage plus précis, qui fluidifie la communication avec les développeurs. Pour Cristella, dont l’équipe continue de découvrir le potentiel de Dev Mode, il s’agit d’un pas vers la tech fait par Figma qui ouvre de nouvelles perspectives.
Amélie Poirier, lead designer, référente en éco-conception et accessibilité, et Cristella Henriques, head of frontend practice, spécialisée en green IT et design durable chez Niji, ont partagé avec la communauté Figma leur expérience de la création de produits numériques plus durables ainsi que leurs bonnes pratiques dans ce webinaire.
