Mettre en œuvre
Bravo, vous passez à la réalisation de votre projet ! Vous trouverez ici toutes les ressources et bonnes pratiques pour que votre produit respecte tout ce que vous avez appris plus tôt.
Dimensionner la démarche
Cadrer et prioriser les moyens à engager en évaluant votre démarche sur deux axes : l'opportunité du projet et votre capacité à le mettre en œuvre.
Oui, l'entreprise est suffisamment mature, mais il faut mener des études complémentaires sur les opportunités possibles.
Oui, à condition d'identifier les enjeux cruciaux en termes d'éco-conception.
Non, la priorité est de monter en compétence et de se structurer pour mieux cerner ses opportunités et pouvoir y répondre.
Oui, il existe un vrai potentiel, mais il faut structurer la démarche, sensibiliser, former les équipes et allouer un budget.
Notez votre démarche sur 10 pour chacun des critères ci-dessous : la moyenne par axe et votre positionnement sur la matrice se calculent automatiquement.
Pour l'évaluation de l'opportunité
5.0/10- 5
- 5
- 5
- 5
- 5
- 5
- 5
- 5
Pour l'évaluation de la capacité
5.0/10- 5
- 5
- 5
- 5
- 5
- 5
Capacité forte · Opportunité forte
Oui, à condition d'identifier les enjeux cruciaux en termes d'éco-conception.
S'inspirer des 7R du Zéro Déchet
Une grille de lecture pour interroger chaque décision produit sous l'angle de la sobriété.
Refuser
Refuser d'ajouter des fonctionnalités sans valeur ajoutée pour l'utilisateur.
Réduire
Réduire le nombre de fonctionnalités, surtout quand elles ne sont plus utilisées.
Réparer
Optimiser le code en continu, éviter les erreurs dans les appels.
Réutiliser
Capitaliser sur les composants, notamment avec un Design System.
Recycler
Réemployer des fonctionnalités déjà développées ailleurs dans l'entreprise (back office, player, etc.).
Réinventer
Repenser les fonctionnalités pour d'autres cibles ou contextes d'utilisation.
Revendiquer
Communiquer en interne et à l'externe une charte numérique responsable ou une déclaration d'éco-conception.
Les bonnes pratiques Design
UX, UI, Product Designer, Design System : de quoi guider ce que vous produisez vers plus de sobriété.
Parcours
9 pratiques- Miser sur les unités fonctionnelles clés en éliminant les fonctionnalités et services non essentiels.
- Optimiser les formulaires à étapes en évitant le surplus d'étapes et de champs à compléter.
- Limiter les échanges utilisateur / serveurs sur la vérification de saisie, en indiquant le format attendu.
- Éviter le défilement de page infini.
- Éviter l'auto-complétion quand ce n'est pas irritant pour l'utilisateur.
- Capitaliser autant que possible sur les fonctionnalités et composants natifs.
- Donner aux utilisateurs le contrôle sur les interactions.
- Penser l'usage pour l'accès en faible connexion ou avec un matériel ancien.
- Limiter le nombre de notifications et permettre à l'utilisateur de les paramétrer.
Contenu (visuel et textuel)
5 pratiques- Penser le contenu des pages pour être léger (limiter le nombre d'images, le texte, la structure).
- S'assurer que le contenu vidéo, audio ou animé est porteur d'information.
- Compresser les images sans perte de qualité et définir une taille maximum par image (en ko) selon les formats affichés.
- Favoriser les images vectorielles, le style CSS et les formats comme le WebP et l'AVIF.
- Éviter les images en pleine largeur.
Identité et interactions
7 pratiques- Proposer un design simple et épuré.
- Éviter les carrousels en autoplay.
- Permettre de mettre les animations, défilements et vidéos en pause.
- Limiter la quantité de ressources graphiques (polices, iconographie, etc.).
- Capitaliser sur les composants (Design System).
- Mesurer le poids des composants d'interface (Design System) pour s'assurer d'un impact minimum.
- Privilégier les changements instantanés aux changements animés (éviter les animations qui nécessitent du JavaScript).
Les bonnes pratiques Tech
Dev front, back, architecte, PO : de quoi guider une démarche plus éco-responsable dans les produits que vous développez.
Spécifications
5 pratiques- Indiquer l'impact environnemental des fonctionnalités principales sur les chemins critiques du parcours.
- Définir le profil des matériels et OS supportés, le plus ancien possible, pour éviter l'obsolescence matérielle.
- Mettre en place une alerte et un consentement avant tout déclenchement d'un capteur du terminal.
- Définir un poids maximum par écran et le surveiller.
- Définir une limite de requêtes par écran et la surveiller.
Développement
12 pratiques- S'assurer que la compression des images, audio et vidéos est adaptée au contenu et au contexte de visualisation.
- Réduire le poids des fichiers téléchargés par les utilisateurs.
- Compresser et minifier les scripts.
- Mettre en place un chargement progressif des ressources affichées à l'écran (lazy loading).
- Charger uniquement les composants nécessaires.
- Limiter le nombre de domaines différents, et donc de serveurs sollicités.
- Mettre en cache les données, entrées API et ressources les plus utilisées, avec une durée d'expiration.
- Réduire la quantité de ressources transférées sur le réseau via une compression de données.
- Définir des dates d'expiration sur les données.
- Mettre en place un processus d'archivage ou de suppression des données.
- Limiter les cycles d'intégration continue au strict nécessaire exigé par la procédure qualité.
- Mesurer et réduire le poids des polices (retirer les subsets inutiles, changer l'encodage, retirer les caractères inutiles).
Outils et ressources
Référentiels, outils pratiques et retours d'expérience pour passer à l'action. Filtre par typologie.
Handbrake
Outil de compression vidéo.
JPEGmini
Réduction du poids des images.
CMS éco-conçu
Logiciel libre éco-conçu (Translucide).
WSG - Web Sustainability Guidelines
Guidelines du W3C pour un web soutenable, réparties en 4 thèmes (UX design, développement web, hébergement et infrastructures, stratégie et produit) avec de nombreuses ressources actionnables.
Kraken.io
Optimisation des performances et de l'impact des images.
Impact / Effort / Sustainability Quadrants
Matrice qui intègre la notion de durabilité, par l'auteur du Sustainability Square. À adapter avec intelligence à son contexte.
Compétences à développer
Les savoir-faire à faire monter dans les équipes pour ancrer l'éco-conception dans la pratique, organisés en deux familles : éco-concevoir et piloter.