Réflechir l’éco-conception

Sur cette page

1. a. Présentation du guide
2. b. Quels enjeux environnementaux ?
3. c. Quel rôle pour le designer de service numérique ?
4. d. L’écoconception de services numériques

a. Présentation du guide

Vocation du guide

Ce guide a été publié dans sa première version en février 2021. Ses autrices ont constaté que la plupart des ressources sur l’écoconception de services numériques est destinée à des profils techniques tels que des développeurs.

L’ambition du guide est donc de synthétiser les bonnes pratiques de design en matière d’écoconception au sein d’une ressource structurée et ouverte à tous grâce à sa licence Creative Commons licence CC-By. Vous êtes donc libre de partager, modifier ou réutiliser ce contenu, sous réserve d’en citer les auteurs.

Ce guide a une visée réflexive plutôt que normative. Il pose des pistes de réflexion ainsi qu’une liste conséquente, mais non exhaustive, de bonnes pratiques. L’écoconception peut cependant amener des réflexions beaucoup plus radicales et long-termistes que celles proposées dans ce guide. De nombreuses pistes de réflexions et références sont disponibles dans la section 9. Aller plus loin dans la démarche.

Périmètre

Le guide traite du design de services numériques (sites web et applications mobiles principalement). Il n’aborde donc pas les sujets de print, packaging et autres branches du design. La communication et l’éco-branding sont abordés dans la partie Communiquer sans tomber dans le Greenwashing.

Bien que le guide se concentre sur les aspects environnementaux, il ne faut pas pour autant oublier que le secteur numérique génère de nombreuses conséquences sociales et psychologiques. Nous tentons donc de faire le pont avec l’accessibilité, l’économie de l’attention et l’inclusion. Toutefois, ces dimensions sont mentionnées à la marge car le sujet serait trop large pour être entièrement traité ici et la vocation de ce guide est de se concentrer sur les questions écologiques.

Public visé

Ce guide est avant tout destiné aux UX et UI designers. Néanmoins, tout concepteur de service numérique (chef de projet, développeur, product owner…) y trouvera matière et conseils.

Son ambition est de permettre à tout designer, quel que soit son niveau technique, d’initier une démarche d’écoconception. Nous souhaitons que chacun ait des clés pour agir à son échelle et initier une démarche d’écoconception.

Contributions et évolutions du guide

Le guide a vocation à évoluer et être enrichi au cours du temps grâce aux contributions de la communauté. Vous souhaitez y contribuer ? Rejoignez le channel #projet_ecoconception sur le Slack des Designers Éthiques.

Ce guide a été écrit sous la direction d’Aurélie Baton et Anne Faubry, designers d’expérience utilisateur, membres de Designers Éthiques, et avec l’aide précieuse de contributeurs et contributrices (Relecture et contributions). II est le résultat de la somme d’expertise, d’expérience et de recherche de designers et de professionnels du numérique engagés depuis plusieurs années dans l’écoconception.

b. Quels enjeux environnementaux ?

Le secteur du numérique a un impact environnemental très élevé :

• En 2020, il représentait 2,1% à 3,9% des émissions mondiales de gaz à effet de serre mondiales (Explications sur l’empreinte environnementale du numérique). Si on fait le parallèle avec le secteur des transports, l’empreinte du numérique se situe entre celles de tous les avions du monde (environ 2%) et de tous les camions du monde (environ 4%) (The Shift Project).
• Sa part d’émissions grossit très vite. L’ADEME estimait qu’elle pourrait doubler d’ici 2025 (estimation antérieure à la crise de Covid-19).
• Outre les émissions de Gaz à Effet de Serre dont on parle beaucoup, les impacts sont massifs sur la consommation de ressources (entre autres les métaux), d’eau, et d’énergie, lors de la phase de fabrication (Empreinte environnementale du numérique mondial).
• Il n’y a pas d’effet de substitution global. On entend parfois que le numérique permet de remplacer d’autres usages plus polluants (transport, biens de consommation…) et serait donc plus écologique malgré son empreinte. Or, depuis l’avènement du numérique il y a 30 ans, les émissions mondiales de gaz à effet de serre ont augmenté de manière exponentielle, malgré la dématérialisation de l’économie promise par le numérique (Publications du GIEC). Les impacts de ce secteur viennent simplement se cumuler aux autres postes d’impact environnemental.

L’écoconception agit sur plusieurs limites planétaires. Ainsi, quand on en vient à parler d’impacts environnementaux, il ne faut pas regarder uniquement les émissions de gaz à effet de serre mais l’ensemble des 9 limites planétaires. Les bonnes pratiques de ce guide prennent en compte d’autres impacts tels que l’utilisation d’eau douce, les modifications de l’occupation des sols, l’introduction de nouvelles entités dans l’environnement ou encore l’intégrité de la biosphère.

Pour prendre en compte ces limites, il existe des dispositifs d’évaluation internationaux et normés, tels que l’Analyse de Cycle de Vie (ACV) définie par les normes ISO 14040/44, ainsi que l’empreinte environnementale de produit ou PEF tel que définie par la Commission Européenne, Product Environmental Footprint (PDF – anglais).

Afin d’éviter ces effets contre-productifs et l’augmentation des impacts, il est crucial de privilégier une approche systémique (Lien avec le design systémique).

Pour aller plus loin :

• Liste de ressources sur l’empreinte environnementale du numérique

c. Quel rôle pour le designer de service numérique ?

75% des impacts environnementaux du numérique surviennent lors de la fabrication des appareils (Empreinte environnementale du numérique en France – ARCEP). Or, l’obsolescence des terminaux est principalement causée par la couche logicielle : applications, sites web, logiciels, jeux vidéos… En effet, plus un service numérique est lourd, plus l’utilisateur aura besoin de renouveler son terminal pour un appareil plus puissant.

• Ainsi, en 30 ans, la durée de vie moyenne d’un ordinateur a été divisée par 3 (GreenIT.fr).
• En 2021, 37% des Français achetaient un nouveau smartphone parce que l’ancien ne fonctionnait plus correctement (lenteur, bug…) ou parce que le système d’exploitation n’était plus à jour (Baromètre du numérique 2021 – PDF).

Par exemple, le poids médian d’une page web est passé de 14 Ko en 1995, à 500 Ko en 2011, à 2,1 Mo en 2021 (HTTP Archive). Pour avoir un ordre de grandeur, le premier jeu vidéo Doom sorti en 1993 pesait 2,3 Mo. Il comportait pourtant du graphisme 3D, un gameplay de tir à la première personne, une dizaine d’ennemis différents, de la musique…

Le problème qui se cache derrière cette obésité des pages web est la puissance informatique requise pour faire fonctionner un service numérique aujourd’hui. Plus le service est lourd et les pages web complexes (taille du DOM), plus le nombre de cycles CPU et de la quantité de RAM nécessaires pour les générer sera élevé. Cela mène ainsi progressivement à un renouvellement forcé du matériel.

Le principal levier d’écoconception est donc la réduction de la consommation de ressources numériques (RAM, CPU) qui engendre une réduction systémique de tous les impacts environnementaux. En réduisant la consommation de ressources informatiques, on réduit ainsi l’obsolescence des équipements, qu’il s’agisse des équipements utilisateurs ou des équipements réseau ou serveur.

Les designers interviennent en amont des projets. Ils ont donc une place de choix pour réduire les impacts des services numériques qu’ils conçoivent et, par conséquent, l’obsolescence du matériel.

d. L’écoconception de services numériques

L’écoconception est une démarche d’amélioration continue qui vise à limiter les ressources informatiques. Elle intervient à 3 niveaux : terminal utilisateur, réseau et centre informatique (data center). Dans une démarche d’écoconception, on s’intéresse au service numérique dans sa globalité.

Les services numériques englobent les sites web, les applications mobiles, les logiciels, les API, les pilotes logiciels d’un matériel, les systèmes d’exploitation, les systèmes de recommandation…

Un service numérique est constitué de l’ensemble des matériels, logiciels et infrastructures qui permettent de réaliser une action – trouver l’horaire d’un train, consulter le solde de son compte en banque, etc. – au format numérique.

Frédéric Bordage, Ecoconception / les 115 bonnes pratiques, 2019

Les recommandations des parties 1, 2, 3, 8 et 9 concernent tous les services numériques, tandis que celles des parties 4 à 7 sont plus spécifiques aux sites web et applications mobiles.

L’écoconception est une démarche standardisée (ISO – IEC 62430:2019).

Appliquée au numérique, elle a pour objectif de proposer de nouveaux services numériques ayant moins d’impacts sur l’environnement tout au long de leur cycle de vie.

Livre blanc GreenConcept, 2020

L’écoconception est obtenue par une démarche de sobriété. L’impact du numérique sur l’environnement vient principalement de la fabrication des matériels informatiques. En éco-concevant les services numériques (applications, sites web ou encore logiciels), on permet leur fonctionnement sur des appareils anciens et des réseaux moins performants. Ainsi, les utilisateurs n’expérimentent pas un service « qui rame » et sont donc moins tentés de renouveler leurs appareils (smartphone, pc, tablette). On peut aussi utiliser plus longtemps les infrastructures existantes : réseaux, centres informatiques, etc. sans avoir à les remplacer ou à en ajouter.

Plus on intervient tôt, c’est à dire lors de l’expression du besoin, de la conception fonctionnelle, du maquettage, plus l’effet de levier est fort en terme de réduction de l’empreinte environnementale.

Frédéric Bordage, Ecoconception / les 115 bonnes pratiques

Avant de passer à l’étape de conception, il est crucial d’évaluer précisément les besoins pour éviter d’ajouter sans le vouloir des fonctionnalités inutiles. Environ 45% des fonctionnalités demandées ne sont jamais utilisées, et 70% ne sont pas essentielles (Ecoconception web : Les 115 bonnes pratiques). La définition du besoin est donc une étape capitale et doit se faire avec les parties prenantes au projet.

L’écoconception est donc une démarche globale d’amélioration continue, dont l’objectif est la réduction des impacts environnementaux, notamment via la sobriété numérique. L’une de ses clés principales est l’unité fonctionnelle.

L’unité fonctionnelle correspond à la fonction principale que remplit le service et se traduit souvent par un acte métier. Par exemple : “Acheter une place de concert”, “Regarder une vidéo de 5 mn depuis un smartphone en 4G”, “Rechercher un numéro de téléphone”, “Échanger 20 mn en visio”, “Prendre RDV chez le médecin depuis un ordinateur portable”…

Les questions à se poser

Le premier besoin à évaluer est celui du service numérique en lui-même :

• L’utilisation du numérique pour ce service est-elle nécessaire ?
• Existe-t-il d’autres solutions non-numériques pour répondre à ce besoin ?

Critère 1.9 du RGESN
Privilégier des technologies standard interopérables (comme le SMS plutôt qu’une notification digitale) permet de valider le critère 1.9 du référentiel général de l’écoconception des services numériques.
Voir le référentiel

On peut ensuite s’interroger sur les autres besoins à définir :

• Quels sont les réels besoins justifiant la création du service ?
• La valeur ajoutée du service justifie-t-elle la mobilisation des ressources requises pour sa création ? Est-ce qu’on crée plus de valeur qu’on en détruit ?
• Cette fonctionnalité est-elle vraiment nécessaire ? Est-ce qu’on peut faire autrement ?
• Que se passerait-il si on ne l’avait pas ?
• Quelle est la quantification minimale répondant aux besoins des utilisateurs ? Nombre de résultats, résolution d’image, qualité de son, durée de vidéo…

Critère 1.1 du RGESN
Répondre de façon argumentée aux questions ci-dessus permet de valider le critère 1.1 du référentiel général. de l’écoconception des services numériques.
NB : Il est recommandé de compléter par « une analyse qualitative des impacts environnementaux directs et indirects potentiels liés au service, qui se traduira par la réalisation d’un arbre de conséquences ».
Voir le référentiel

Critère 4.7 du RGESN
Opter pour les choix les plus sobres entre le texte, l’image, l’audio ou la vidéo, selon les besoins utilisateurs, permet de valider le critère 4.7 du référentiel général de l’écoconception des services numériques.
Voir le référentiel

Critère 6.6 du RGESN
Restreindre l’usage des capteurs des terminaux utilisateurs au besoin du service (éviter la géolocalisation par exemple) permet de valider le critère 6.6 du référentiel général de l’écoconception des services numériques.
Voir le référentiel

Exemple

Fonctionnalité non-essentielle

BBC podcast nous offre 2 choix de téléchargements : “haute qualité” et “basse qualité”.
Par défaut, si on ne connaît pas l’impact de l’un ou de l’autre, on va choisir l’option “haute qualité” qui est 2 fois plus lourde. Or à l’oreille la différence n’est pas ou peu perceptible.
L’unité fonctionnelle est certainement “Écouter une émission en podcast” et non pas « Écouter une émission en haute qualité ou basse qualité”
On pourrait donc ici éliminer une fonctionnalité non-essentielle et ne garder qu’une option de téléchargement : l’option basse qualité, sans la nommer ainsi !

Pour aller plus loin

• Ecoconception web : Les 115 bonnes pratiques – 4ème édition sur github – GreenIT
• Guide de questionnement pour le développement de services numériques (PDF) – ADEME
• Une appli écoconçue pour favoriser les circuits courts – GreenIT

Le rôle indispensable de l’expérience utilisateur (Green UX)

La Green UX désigne le fait de rester centré sur les besoins réels et les attentes des utilisateurs, pour limiter son impact environnemental. Ecoconcevoir, c’est revenir aux principes fondamentaux de la conception centrée utilisateur, parfois dévoyée à des fins commerciales (voir la partie sur le risque de Greenwashing et le design persuasif).

Aller à l’essentiel du besoin ne va pas au détriment de l’expérience utilisateur, bien au contraire. Un exemple pour illustrer ce principe est la différence entre l’approche de Google qui propose un logo et un simple champ de saisie, par opposition à la page d’accueil de Yahoo! chargée d’informations inutiles : météo, bourse, actualités, horoscope, publicités, etc. (Ecoconception web : Les 115 bonnes pratiques).

Sans compter le nombre de requêtes serveur au moment du lancement d’une recherche, ces 2 exemples extrêmes répondent au même besoin attendu d’un moteur de recherche, à savoir l’unité fonctionnelle “Effectuer une recherche sur le web”, mais avec 2 approches UX complètement différentes. La première approche est la plus efficace en termes de besoin, mais également la plus appréciée des utilisateurs. D’autres moteurs de recherche tels que Qwant ou DuckDuckGo, plus respectueux de la vie privée, utilisent également ce principe de simplicité.

De plus, appliquer une approche “Green-UX” a des conséquences sur l’ensemble du processus de fabrication du service numérique :

• les décisions concernant la composition d’une interface,
• le choix de composants et de fonctionnalités,
• le parcours de navigation.

Cela se répercute automatiquement sur les métiers du design, du développement, de la mise à jour et de la maintenance du service. Il est donc primordial d’avoir une réflexion de sobriété et d’efficacité orientée sur les utilisateurs et utilisatrices afin de réduire l’empreinte environnementale finale du service.

La mesure et l’évaluation sont au cœur même de la démarche d’écoconception. Avant d’envisager une refonte de votre site web ou service, il est important de comprendre son impact et d’identifier les principaux leviers d’amélioration.

• S’il s’agit d’un nouveau service, il peut être intéressant d’évaluer un service concurrent ou similaire pour éviter les mêmes erreurs. Mesurez l’impact de l’expérience sur des sites équivalents. Tentez d’évaluer votre nombre d’utilisateurs, le matériel nécessaire et l’impact de votre service du mieux possible pour orienter vos choix ultérieurs.
• Si vous partez d’un produit existant, évaluez l’impact environnemental du parcours utilisateur et identifiez ses axes d’amélioration et les bonnes pratiques à mettre en place.

Les questions à se poser

• À quoi peut ressembler un « usage excessif » du service ? Puis-je estimer quantitativement ce seuil ?
• À quoi peut ressembler un usage opposé à celui pour lequel je conçois ?
• Quels sont les risques d’effet rebond à l’usage du service ?
• Si l’environnement était mon client, qu’est-ce que je changerais à mon service ?
• Quels effets négatifs pourrait générer une utilisation de mon service à grande échelle ?

Les questions ci-dessus proviennent du Tarot Cards of Tech (en anglais).

Pour un service existant :

• Quel est l’impact environnemental du parcours utilisateur ?
• Quels en sont les leviers d’amélioration ?

Pour un service à créer :

• Quels pourraient être les impacts négatifs du produit à court et long termes ?
• Les avantages du produit compensent-ils ses impacts négatifs ?

La mesure d’impact permet également de sensibiliser autour de soi, notamment des décisionnaires sensibles aux indicateurs et objectifs quantitatifs. Cependant, elle peut être complexe à effectuer et chronophage. Rappel : mesurer ne doit pas être une fin en soi. Le numérique, comme les autres secteurs, doit réduire son impact global et toute amélioration est bonne à prendre à partir du moment où elle n’engendre pas de transferts de pollution.

Evaluer l’impact du parcours utilisateur

Après avoir défini l’unité fonctionnelle (par exemple “acheter un billet de train en ligne”) et le scénario d’utilisation, évaluez l’empreinte environnementale du parcours utilisateur.

Vous pouvez utiliser un outil comme GreenIT Analysis qui est disponible sur Chrome et Firefox, ainsi qu’en version CLI / ligne de commande si vous souhaitez automatiser les analyses. Il permet d’évaluer :

• la performance environnementale de l’unité fonctionnelle et les impacts environnementaux associés (alternative : EcoIndex.fr) ;
• la mise en œuvre (ou non) des bonnes pratiques du référentiel d’écoconception web selon des règles de test et des seuils de conformité.

En analysant les pages et en sélectionnant l’option “Activer l’analyse des bonnes pratiques” vous obtiendrez un score et des pistes d’améliorations.

La note EcoIndex de chaque page se situe sur une échelle de A à G (A étant la meilleure note) et est accompagnée d’un score entre 1 et 100 (100 étant le meilleur score).

Les mesures de EcoIndex (poids de la page, nombre de requêtes, nombre d’éléments du DOM), ainsi que les bonnes pratiques testées, vous permettent d’avoir une première idée des pistes d’améliorations.

NB : il est important d’effacer le cache au début de l’analyse et de désactiver les bloqueurs de publicité pour une mesure réaliste. Il faut aussi lancer l’analyse après avoir scrollé et fait ses actions sur la page.

Exemple

Utilisation du plugin GreenIT-Analysis

La mesure de l’impact environnemental d’une page web avec le plugin GreenIT Analysis donne ici une note de D. On voit en effet que la page pèse près de 9 Mo et qu’un certain nombre de bonnes pratiques d’écoconception ne sont pas appliquées.

Après avoir analysé et sauvegardé chaque page, l’historique du parcours est disponible en cliquant sur « Historique ». Vous pouvez alors exporter les résultats vers un tableur et faire la somme des impacts des pages afin d’obtenir l’impact global du parcours.

En fonction de vos cas d’usages, il peut être pertinent d’évaluer l’impact d’un parcours “découverte” et d’un parcours “récurrent” :

• Parcours découverte : Nettoyer le cache de votre navigateur. Évaluer l’impact du parcours en fonction de l’unité fonctionnelle choisie. N’oubliez pas de sauver l’analyse de chaque page visitée.
• Parcours récurrent : Évaluer l’impact du parcours pour les visites suivantes, sans nettoyer le cache (les données sont mises en cache et l’impact devrait être moindre).

À cette étape d’évaluation et d’état des lieux, vous pouvez également effectuer des mesures de performance avec les outils habituels : GTmetrix, Lighthouse, Yellow Lab Tools, etc. Un site écoconçu sera non seulement léger mais aura également de bons résultats de performance car il est efficient.

L’onglet Réseau de votre navigateur vous apporte également une grande aide pour comprendre ce qui se passe lors du chargement de votre page. Vous pouvez consulter clairement le nombre de requêtes qui sont appelées et le poids des données qui transitent. Une requête HTTP peut appeler des dizaines de Mo de données.

NB : Que vous choisissiez GreenIT Analysis ou un autre outil, il sera important de conserver le même dans la durée de l’amélioration continue de votre service afin d’obtenir des résultats comparables.

Note importante : l’évaluation de l’impact environnemental via ces outils ne remplace pas un audit et une Analyse du Cycle de Vie conduite par des experts. L’ACV est basée sur les normes ISO 14040 et 14044 (Analyse du Cycle de Vie ACV). C’est le seul outil reconnu dans les cadre du déploiement progressif de l’affichage environnemental en France et en Europe.

Pour aller plus loin :

• Livre blanc – l’éco-conception de services numériques, Alliance GreenIT, 2017
• Qu’est-ce que EcoIndex, EcoIndex
• Sous le capot de la mesure EcoIndex, Blog Octo
• GreenIT Analysis – readme
• Boîte à outils – Collectif Conception responsable de service numérique

Identifier les opportunités d’allègement

Lorsqu’il s’agit de refondre un site existant, il est parfois possible d’obtenir des données de navigation du site, notamment si le client a une solution de type Google Analytics ou ContentSquare, ou une solution open source comme Matomo ou plausible.io. Ces deux dernières sont préférables pour le respect de la confidentialité des données des utilisateurs (Google Analytics : retour sur la mise en demeure de la CNIL).

Cela peut permettre d’identifier différentes opportunités d’écoconception :

• Les pages sur lesquelles les utilisateurs restent très peu de temps ou au contraire très longtemps par rapport à leur contenu : L’utilisateur rencontre-t-il un problème ? → Opportunité de fluidifier le parcours.
• Les allers-retours successifs entre deux pages : Y a-t-il quelque chose qui n’est pas clair pour l’utilisateur ? → Opportunité de simplifier et raccourcir le parcours global.
• Les pages ayant un taux de rebond élevé : Qu’est ce que les utilisateurs attendent de cette page ? Y a-t-il une redirection intempestive ou déceptive vers cette page ? → Opportunité de refondre une page à l’aide d’une démarche d’écoconception, de supprimer une page ou de l’exclure d’un parcours où elle n’est pas nécessaire.
• Les pages ou parcours les plus visités : Quel est l’impact environnemental de ces parcours ? Ces pages consomment-elles beaucoup de ressources ? Puis-je réduire leur impact, même à la marge ? → Opportunité d’alléger l’impact des parcours de nombreux utilisateurs.
• Les mots clés les plus recherchés : Que recherchent mes utilisateurs ? Puis-je les aider à trouver plus facilement en restructurant mon menu ou ma page d’accueil par exemple ? → Opportunité de simplifier le parcours et de limiter le nombre de requêtes.
• Les régions où se situent majoritairement mes utilisateurs : Dans quel pays se trouvent-ils ? → Opportunité de rapprocher mon hébergeur de mes utilisateurs pour diminuer l’impact environnemental.
• Les pages qui ne sont jamais visitées : Est-il possible de les supprimer ? Leur contenu est-il obsolète ? → Opportunité de réduire la taille du site.

Ces données sont utiles avant d’effectuer de gros changements : elles permettent de mesurer la performance avant et après. N’oublions pas que capter des données est énergivore. Si un site évolue peu, il peut être inutile de faire remonter quotidiennement ou instantanément ces chiffres.

Les questions à se poser

• De quelles données ai-je besoin ?
• À quelle fréquence en ai-je besoin ?
• Sur quelle période en ai-je besoin ?
• Quelle solution me permettant de collecter ces données est la plus légère et la plus respectueuse de la vie privée de mes utilisateurs ?
• Ai-je prévu l’expiration et la suppression de ces données ?

Plus un utilisateur passe de temps sur un site pour accomplir son objectif, plus l’empreinte environnementale sera élevée. Bien que cela semble évident, on s’aperçoit vite que beaucoup de sites n’ont pas à coeur de raccourcir le parcours utilisateur. En effet, certains modèles économiques fondés sur la captation de l’attention ou l’augmentation du panier moyen (pour ne citer qu’eux) viennent se heurter à des objectifs d’amélioration de l’expérience. Or, une expérience qui n’est pas fluide a souvent une empreinte environnementale élevée. L’écoconception rejoint ici les bonnes pratiques d’économie de l’attention.

A cette étape, il est aussi important de remettre en question nos habitudes de conception, comme le propose cet article du Low Tech Lab, Faire un site low-tech :

Le web design et le développement web ont été largement influencés par les modèles des GAFAM, (…) Il est donc important de ne pas suivre les tendances de conception, de les questionner, et de bien définir ce qui est nécessaire pour ce projet.

Low Tech Lab, Faire un site low-tech (consulter en ligne)

Les questions à se poser

• Quelle est l’unité fonctionnelle ?
• Combien d’étapes faut-il pour y arriver ?
• Est-ce que ce parcours est accessible ?
• Comment puis-je augmenter le taux de transformation tout en raccourcissant le parcours ?

Exemple

Navigation fluide

Unité fonctionnelle : Trouver des informations sur les impôts

Alors qu’il est parfois difficile de trouver des informations sur certains sites administratifs, le site du gouvernement du Royaume-Uni (gov.uk) fournit une navigation simple, claire, et sans fioritures.

Par exemple, pour trouver une information sur les réductions d’impôts, le chemin est simple :

Le parcours s’effectue en 4 pages seulement.
Chaque page du parcours a un score EcoIndex de A ou B.

L’empreinte environnementale est donc faible contrairement à beaucoup d’autres sites du même type.

Lorsque l’on conçoit d’abord pour écrans d’ordinateurs dits « desktop », on a tendance à ajouter beaucoup de contenu, à « combler les vides ». Lorsque l’on passe ensuite à la conception des écrans mobiles, on a alors du mal à tout faire rentrer dans ce petit espace, surtout de manière pratique et hiérarchisée. L’expérience se trouve alors détériorée : l’utilisateur a du mal à naviguer et l’impact environnemental est accru par le chargement de contenu superflu.

L’approche “Mobile first” consiste à concevoir d’abord pour les appareils mobiles. Cela permet de :

• aller à l’essentiel et ainsi de réduire les fonctionnalités et contenus accessoires
• s’assurer que notre service fonctionnera correctement sur les appareils mobiles qu’utilisent en moyenne 55% des internautes (Statista, 2021).

Bien entendu, il ne s’agit pas non plus de délaisser la version desktop. Toutefois, il est plus facile de passer un écran mobile en desktop que l’inverse.

Cette approche dite « mobile first » doit être pensée pour des terminaux mobiles peu puissants et avec une connexion réseau non optimale (3G plutôt que 4G par exemple). Ces contraintes techniques obligeront les concepteurs à se concentrer sur l’essentiel et à produire un service numérique sobre et peu impactant.

Livre blanc GreenConcept, 2020 (consulter en ligne)

Les questions à se poser

• Qu’est-ce qui est essentiel ?
• Quel est le minimum de technologie nécessaire pour résoudre le problème ?
• Est-ce que cela fonctionne sur mobile et desktop ?
• Est-ce que la taille des boutons et champs est adaptée au mobile ?

Exemple

Conception “mobile first”

Unité fonctionnelle : Faire une simulation de droits

Pour un service de simulation par exemple, on peut être tenté de demander de nombreuses informations ce qui ralentit le parcours, peut décourager les utilisateurs car ils n’ont pas toutes les informations sous la main, etc.

L’approche “mobile first” illustrée sur cette maquette (exemple fictif) permet d’aller à l’essentiel des informations nécessaires pour un premier niveau. On peut fournir une option avancée également si l’utilisateur veut aller plus loin.

De cette façon on fournit un service accessible sur mobile, et une expérience simple et fluide.

Critère 2.5 du RGESN
Concevoir un service responsive, autrement dit « s’adaptant à différents types de terminaux d’affichage », permet de valider le critère 2.5 du référentiel général de l’écoconception des services numériques.
Voir le référentiel

Critère 2.6 du RGESN
Effectuer une revue de la conception prenant en compte l’empreinte environnementale avant de commencer le développement permet de valider en partie le critère 2.6 du référentiel général de l’écoconception des services numériques.
Voir le référentiel

Pour aller plus loin :

• Écoconception / Les 115 bonnes pratiques – 4ème édition – GreenIT (github)

Eco-concevoir des applications mobile

Les bonnes pratiques de prototypage pour les écrans mobiles sont valables pour les sites « responsive », mais aussi pour les applications. NB : un site dit « responsive » est un site dont les éléments (menu, blocs…) s’adaptent dynamiquement à la taille de l’écran.

Privilégier les app web

Dans une démarche d’écoconception, il est recommandé de privilégier les applications web (site web, Progressive Web Apps ou PWA) aux applications natives pour plusieurs raisons :

• Réduire l’obsolescence induite sur les terminaux utilisateurs : les applications natives ont besoin des dernières versions d’OS (système d’exploitation) et parfois même des dernières générations d’équipements pour fonctionner ce qui induit une obsolescence des matériels. Peu d’apps natives fonctionnent sur des équipements au-delà de 7 ans. Alors que des apps web, par exemple, sont a priori disponibles dans tout navigateur et pour tout type d’équipement. Cela leur assure une bonne interopérabilité et une bonne longévité. Voir à ce sujet le critère “Le service numérique a-t-il été conçu avec des technologies standards plutôt que des technologies propriétaires ou spécifiques à une plateforme ou à un système d’exploitation ?” du RGESN.
• Nombre de versions réduit à un : Les applications natives nécessitent un travail démultiplié (version iOS, version Android, version web…) lors du développement mais aussi de la maintenance. Cela consomme plus de ressources en termes d’heures de travail effectuées, de développement du système de design, de stockage de ces ressources…
• Mises à jour maîtrisées : Les applications natives ont des mises à jour à installer régulièrement ; ceci génère des transferts de données pour des milliers, voire millions d’utilisateurs. Ces mises à jour accélèrent souvent l’obsolescence des smartphones : elles saturent la mémoire ou rendent certaines fonctionnalités inutilisables. Par ailleurs, les mises à jour des apps natives se font via un store par le remplacement d’un seul gros fichier. Les applications web, quant à elles, permettent de maîtriser la mise à jour, fichier par fichier.
• Poids plus léger : Les applications web sont généralement 10 fois plus légères que les applications natives. La quantité de données transférées aux utilisateurs et la sollicitation de la mémoire du terminal s’en trouvent ainsi diminuées.

A considérer : Comme de nombreux sujets en écoconception, il s’agit d’évaluer le gain dans le contexte de votre service et de son unité fonctionnelle. Dans certains cas, par exemple, si les transferts de données en phase d’utilisation sont importants et engendrent une plus grande consommation de ressources par le navigateur, il peut être plus pertinent de développer une app native.

Tous les projets de design n’offrent pas le choix de la technologie. Si vous n’êtes pas concerné par ce sujet un peu plus technique, vous pouvez directement passer à la partie suivante Réaliser et développer. Cependant, beaucoup de designers développent eux-mêmes leurs sites web, notamment lorsque le client a un petit budget ne permettant pas d’embaucher 2 personnes. Le choix le plus simple pousse alors souvent à se tourner vers WordPress mais pour écoconcevoir, ce n’est pas forcément le meilleur choix, comme nous l’expliquons ensuite.

Le choix entre site statique et CMS (content management system, outil de gestion de contenu) fait débat. La décision à prendre dépendra du contexte et des personnes impliquées dans le projet. Nous proposons ici plusieurs éléments de réflexion qui pourront vous aider dans le choix de solution en fonction de votre contexte et de vos possibilités.

Principes du site statique

Les générateurs de sites statiques sont des outils permettant de générer individuellement chaque page HTML d’un site web. Pour cela, conformément aux recommandations du W3C, on distingue totalement la forme et la mise en page d’un côté, et le contenu de l’autre. Lors d’une modification, le site va ainsi être généré de nouveau, mettant à jour les fichiers statiques déjà existants.

Les avantages des sites statiques sont nombreux :

• Le contenu est maintenu à part de la mise en page, permettant ainsi une meilleure gestion éditoriale.
• S’agissant de contenus statiques, il n’est plus nécessaire de disposer de langages dits « dynamiques », ni même de bases de données.
• Les pages n’étant plus calculées et rendues sur le serveur à chaque requête, on observe une nette amélioration des performances.

Tout cela réduit fortement l’impact environnemental du site.

Exemples de générateurs de sites statiques :

• Eleventy (11ty)
• Jekyll
• Hugo
• NextJS
• Nuxt

A considérer : Il est difficile de prévoir comment les technologies sur lesquelles certains générateurs reposent seront maintenues dans quelques années. Cela pourrait dans certains cas engendrer une dette technique. Par ailleurs, si un site statique est recommandé, le générateur en lui-même peut être surdimensionné par rapport à votre besoin. Il faut donc veiller à bien choisir son générateur.

Principes du CMS

CMS signifie Content Management System ou Système de gestion de contenu. Comme le nom l’indique, c’est un programme permettant de créer un site web, souvent facilement (sans nécessité d’être un développeur), et de l’alimenter « à plusieurs mains », sans aide technique non plus. Les CMS permettent par exemple d’accorder différents niveaux de droits aux administrateurs ou encore de structurer le contenu selon que c’est un article, une FAQ, etc.

Exemples de CMS :

• WordPress, le plus connu. Environ 36% des sites web sont faits avec WordPress (WordPress in 2024 – en anglais)
• Kirby, celui utilisé pour ce site
• Translucide
• Grav
• Osuny

Certains CMS et thèmes proposés comportent beaucoup de fonctionnalités inclues par défaut qui peuvent alourdir inutilement votre site. C’est un peu comme utiliser un porte-conteneur pour traverser une rivière : cela peut nécessiter beaucoup de ressources, être surdimensionné et pas forcément le plus pratique.

Pour autant, recourir à d’autres CMS ou thèmes optimisés ne consomme pas nécessairement plus de ressources qu’un site statique. Nous vous donnons plus bas des conseils pour minimiser l’impact de la solution retenue.

Par exemple, le CMS Translucide est par essence écoconçu. Il repose sur l’essentiel, avec le moins de fonctionnalités possibles. A l’inverse de WordPress auquel on doit retirer un maximum de couches, Translucide en a très peu au départ et utilise des technologies standards et open-source (principalement HTML, CSS, PHP). L’ajout de fonctionnalités fait l’objet d’une réelle réflexion au sein du collectif.