C’est quoi l’éco-conception ?
Vous trouverez dans cet article tous les éléments de réponse liés à l’éco-conception d’une application web ou mobile. Commençons très simplement avec la définition de l’éco-conception.
La définition de l’éco-conception a évolué au fil des années. On peut néanmoins se référer à la norme ISO14006 v2020 qui définit l’éco-conception d’une application web ou mobile comme :
“[Une] approche méthodique qui prend en considération les aspects environnementaux du processus de conception et développement dans le but de réduire les impacts environnementaux négatifs tout au long du cycle de vie d’un produit”.
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 termes de réduction de l’empreinte environnementale.
Concrètement, l’éco-conception a pour objectif de prévoir des solutions plus durables ou bien moins énergivores dès le lancement de votre projet numérique. Eco-concevoir une application, c’est prendre en compte toutes les étapes de son cycle de vie. De l’origine de l’électricité consommée par votre hébergement à l’utilisation finale par le consommateur.
Inclure les parties prenantes
L’éco-conception d’une application web ou mobile, n’est pas que le travail du développeur.
En effet, comme nous l’avons précisé dans la définition, l’éco-conception couvre l’ensemble du cycle de vie de votre application. Ainsi, il vous faudra réunir tous les acteurs impliqués dans le développement de votre projet.
3 points clés pour une application web ou mobile éco-conçue
Il serait long et fastidieux de détailler les facteurs permettant de rendre votre application plus verte. Nous pouvons néanmoins orienter l’éco-conception sur trois points clés, à savoir :
- Réduire le nombre de requêtes
- Diminuer le volume échangé
- Limiter les traitements d’informations
L’objectif n’est donc pas de ne plus polluer, mais de polluer radicalement moins. Il faut donc comme le dit Frédéric Bordage :
L’éco-conception d’une application
Tout comme il existe des bonnes pratiques pour développer une application, il en existe aussi pour créer des applications soucieuses de l’environnement. Pour réduire l’impact écologique de votre application, nous vous invitons à suivre les bonnes pratiques suivantes. Elles sont au nombre de cinq et sont applicables à court, voire moyen terme.
L’éco-conception ce n’est pas seulement faire un geste pour aider la planète :
C’est aussi améliorer l’expérience client !
Découvrez comment grâce aux cinq bonnes pratiques suivantes.
Faire le tri des fonctionnalités essentielles
Pour concevoir une application éco responsable, il faut savoir se séparer de fonctions peu, voire pas utilisées. Pour cela, il va vous falloir évaluer les besoins de votre entreprise.
Toujours selon Frédéric Bordage environ 45 % des fonctionnalités demandées ne sont jamais utilisées.
Si vous êtes dans le cadre d’une création d’application, vous devrez être très consciencieux lors de la rédaction des spécifications fonctionnelles. Cela vous permettra d’éviter les fonctionnalités inutiles et les possibles doublons ou chevauchements.
Si vous avez déjà développé votre application, nous pouvons vous aider à faire le point sur les fonctionnalités existantes. Vous pouvez vous appuyer sur notre article Audit applicatif : Analyser la complétude fonctionnelle.
L’objectif de cette première étape est donc de faire un point sur les fonctionnalités offertes par votre application :
- Les fonctionnalités clés sont-elles présentes ?
- Toutes les fonctionnalités sont-elles nécessaires ?
Une fonctionnalité se définit par la valeur qu’elle apporte aux utilisateurs. Elle est fonctionnelle, pratique pour l’utilisateur. Une fonctionnalité métier répond à un besoin des utilisateurs, de l’entreprise ou d’une organisation concernée.
Elle rend un service en rapport avec le métier correspondant. Par exemple : “Créer un devis pour un client.” “Planifier un rendez-vous.” “Comparer des produits du catalogue.”
Au-delà de l’impact écologique, ce tri vous permettra également de réduire les facteurs de risque d’obsolescence de votre application en vous assurant de la complétude fonctionnelle. Vous souhaitez en savoir plus sur les facteurs d’obsolescence d’une application ? Nous vous invitons à consulter cet article.
Analyser l’impact environnemental du parcours utilisateur
Avant de vous lancer dans la mise à jour ou le remplacement de votre application web ou mobile, il faut pouvoir estimer l’impact actuel.
Il existe plusieurs outils pour analyser l’impact environnemental du parcours utilisateur. Voici trois exemples :
- GreenIT (extension de navigateur Chrome et Firefox)
- websitecarbon.com
- ecometer.org
Ces outils ont pour objectif de calculer la consommation énergétique de votre page. Une fois la page analysée vous obtenez une note (de A à G généralement), ainsi que des indications sur :
- L’éco-index qui définit votre score
- La consommation d’eau générée par la page
- L’émission en grammes équivalent CO2 générée par la page
- La taille du DOM (Document Object Model)
- Le poids de la page en ko
- Le nombre de requêtes envoyées
Pour mesurer l’impact total du parcours utilisateur, répétez l’opération pour chaque page visitée. Sauvegardez les données de chaque page puis additionnez-les. Vous obtiendrez les consommations totales générées par un utilisateur.
Vous pouvez également attribuer une note moyenne au parcours utilisateur complet :
- Attribuez une valeur à chaque note où A = 1 et G =7
- Reportez ces valeurs aux notes obtenues (avec GreenIT par exemple).
- Calculez la moyenne.
Si le parcours utilisateur implique de visiter 3 pages avec pour notes respectives A, D et G.
Alors le parcours aura une note globale de D. (Calcul : (1+4+7)/3 = 4 = D)
Cette vue plus globale vous permet de prioriser vos actions. Vous pourrez ainsi traiter en premier les parcours utilisateurs les plus énergivores. Cependant, ne négligez pas les contraintes liées à votre écosystème applicatif.
Comment faire dans le cas où l’application n’a pas encore été développée ?
Dans ce cas, il est compliqué de calculer l’impact du parcours utilisateur. Vous pouvez dans un premier temps discuter de l’éco-conception avec votre prestataire. Il prendra des mesures pour limiter l’impact de votre application lors des premières phases de développement. Si vous ne faites pas appel à un prestataire, vous pouvez vous référer aux conseils situés un peu plus bas dans l’article : Éco-conception et design.
Simplifier le parcours et fluidifier l’expérience
Lorsque l’on entre dans une démarche d’éco-conception, il faut voir plus loin que les ressources énergétiques utilisées par l’application elle-même.
Tout d’abord, il vous faut simplifier le parcours ! Plus il y a de pages à visiter avant l’objectif fixé, plus il y aura de ressources à charger et plus l’impact de votre parcours utilisateur sera élevé.
En effet, plus le temps passé sur un site web ou une application est important, plus la consommation d’énergie est importante. Cela peut vous sembler simple. Pourtant, c’est à l’opposé des stratégies marketing de captation. L’objectif de ces dernières est de capter l’attention de l’utilisateur le plus longtemps possible. De telles pratiques participent à rendre l’expérience utilisateur moins fluide. Elles augmentent également l’empreinte environnementale laissée par votre application.
Prenons l’exemple d’une entreprise qui utilise cette stratégie : Facebook. On constate qu’une page web ne pèse pas moins de 11 Mo. Un score impressionnant quand on sait que le poids moyen d’une page est d’environ 1,2 Mo.
Éco-conception à partir d’une version mobile
Si vous souhaitez concevoir une application web et mobile, commencez par la version mobile. C’est une pratique très intéressante pour deux raisons :
Commençons par la première raison : la responsivité.
En démarrant par la version mobile, vous éviterez des problèmes d’adaptation de la version bureau vers le mobile. Il est plus difficile de faire rentrer la version bureau d’une application dans un petit écran que d’adapter la version mobile à une version bureau.
La deuxième et sûrement la plus importante : vous vous en tiendrez à l’essentiel.
Commencer par la version mobile vous permettra de vous en tenir aux contenus et fonctionnalités essentielles. Pour une version mobile réussie vous devez enlever tout le superflu et cela a plusieurs avantages sur votre version bureau :
- Amélioration de l’expérience client
- Parcours plus simple
- Expérience plus fluide
- Délais d’affichage diminué
- Diminution de l’impact environnemental
- Moins de ressources utilisées
- Temps passé sur l’application amoindri
- Meilleur référencement
- Rapidité d’affichage
- Responsivité
Pour le développement d’une application native, les pratiques d’éco-conception restent les mêmes que pour une application web ou bureau. L’objectif est de limiter le poids et la consommation en ressources de votre application en maximisant sa conception comme nous allons le voir juste après (code, fonctionnalités, tailles de fichiers uploadés).
Éco-conception et design
Les bases de votre application web ou mobile sont désormais posées.
Comme vous avez pu vous en rendre compte dans cet article, l’un des principaux problèmes est lié au poids de votre code source. Le poids est lui directement lié aux contenus que vous importez pour designer votre site internet (images, sons, polices d’écriture…) ou aux fonctions que vous souhaitez implémenter (plugins, documents à télécharger…).
Dans cette partie, nous vous proposons différentes astuces pour rendre votre application plus verte.
Optimiser la taille et compresser les images
Les photos sont sans doute le contenu le plus utilisé dans la conception d’applications.
La plupart des photos utilisées sont bien plus grandes que nécessaire. La taille d’affichage d’une photo sur bureau est d’environ 700 px. Le problème est que la plupart des photos téléchargées sont entre 3 et 5 fois trop grandes. Le navigateur devra alors fournir un effort supplémentaire pour les redimensionner et les télécharger.
Pour améliorer les performances d’affichage de votre application vous devez dans un premier temps redimensionner les images à utiliser (sauf si elles sont déjà à la bonne taille). Une fois votre image redimensionnée il est temps de la compresser. Pour ce faire, vous pouvez utiliser des outils en ligne (et gratuits) comme CompressorPng.
Enfin, faîtes attention au format. Certains formats sont plus lourds que d’autres comme le format .PNG. Veillez à utiliser les formats appropriés.
- Les photos au format .jpeg ou .webp
- Les illustrations au format .svg, les fichiers .png sont à éviter
- Les icônes au format glyphs, icone CSS ou à défaut .svg
Faire attention aux vidéos
Les vidéos représentent, en 2019, 61% du trafic internet descendant selon Sandvine, The Global Internet Phenomena Report. Elles sont mises en avant comme le contenu le plus efficace pour vendre un produit, présenter une entreprise ou pour n’importe quel autre prétexte.
Seulement voilà, il y a un problème : le poids.
Les vidéos sont souvent les fichiers les plus lourds de votre application. Êtes-vous sûr qu’elles ne peuvent pas être remplacées par une infographie par exemple ? Il faut limiter l’usage de la vidéo (surtout la lecture automatique) et oublier les fonds animés qui alourdissent irrémédiablement votre page. Vous pouvez évidemment les compresser, mais le poids (suivant la durée de la vidéo) restera important.
Alors comment faire pour inclure des vidéos ? Il faut simplement éviter d’intégrer les vidéos dans la page. Préférez utiliser une image redimensionnée et compressée assortie d’un lien cliquable par exemple.
Utiliser des polices natives
Les polices de caractères peuvent être un élément de design très important selon votre activité. Il existe des polices systèmes, communes à la majorité des systèmes d’exploitation et des polices personnalisées, téléchargeables.
L’avantage d’utiliser une police système est qu’elles est déjà préinstallée dans le terminal. Cela permet d’éviter l’installation et le téléchargement de police personnalisée sur le terminal utilisateur. Votre application est donc plus rapide et moins énergivore.
La liste des polices de caractères préinstallées peut être longue et varie selon le système d’exploitation (OS) du terminal. On note néanmoins que certaines d’entre elles sont communes à plusieurs OS. Voici une liste qui pourrait vous aider :
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Si vous souhaitez tout de même utiliser des polices d’écritures personnalisées, préférez les formats compressés WOFF ou WOFF2.
Limiter les interactions et les animations
Interagir avec les utilisateurs de votre application est crucial dans certains domaines d’activité. Malgré tout, veillez à ne pas en abuser !
Depuis plusieurs années, les chatbots ont fait leur apparition sur nos applications. Pourtant, la plupart du temps, ces chats sont présents car c’est un effet de mode.
Souvent mal configurés, dysfonctionnels ou considérés comme inutiles, ils créent de la frustration chez l’utilisateur. Le Nielsen Norman Group suggère, dans The User Experience of Chatbots, d’investir en priorité dans l’amélioration globale de l’expérience utilisateur plutôt que dans un chatbot.
Les chatbots alourdissent votre page. S’ils ne vous apportent que très peu, préférez une solution alternative.
Les animations sont, elles aussi, importantes pour capter l’attention de l’utilisateur mais cela a également un prix. Les animations sont lourdes et ralentissent votre application (surtout celles en JavaScript).
Il est donc préférable de les éviter ou du moins de les limiter. Pour les limiter, préférez les apparitions instantanées aux fondus. Encore une fois l’objectif de l’éco-conception n’est pas de changer radicalement votre application. L’objectif est de trouver des solutions plus écoresponsables.
Doucement sur les plugins et widgets
Les plugins et autres widgets sont de gros (voire de très gros) consommateurs de ressources. N’hésitez pas à les remplacer ! Prenons un exemple très simple et courant sur des applications : la redirection vers vos réseaux sociaux.
Dans la plupart des cas, ce sont des plugins ou des widgets qui sont chargés de cette fonctionnalité. Il existe pourtant une solution tout aussi simple ne nécessitant que très peu de ressources : utiliser des images cliquables au format .svg.
Même visuel, même résultat, mais un poids négligeable comparé à l’utilisation d’un plugin.
Il en va de même pour l’intégration de Google Maps par exemple.
Intégrer Google Maps à votre application la rend bien plus gourmande en ressources.
Pensez-vous que vos utilisateurs ont réellement besoin de voir la localisation précise ?
De manière générale, écrire votre adresse en toutes lettres suffit. Si pour des raisons stratégiques ou graphiques, vous souhaitez intégrer une vue directe de Google Maps, il existe d’autres solutions.
Vous pouvez tout à fait utiliser la même astuce qu’avec les réseaux sociaux. Insérez une image cliquable renvoyant à une URL Google Maps pointant vers votre localisation exacte.
Conclusion sur l’éco-conception
Dans le cadre d’une éco-conception, il faut prendre en compte la globalité du cycle de vie de l’application, du Data Center au terminal utilisateur. Vous pouvez par exemple vous demander :
Le Data Center utilisé est-il alimenté à l’énergie verte ?
Si ce n’est pas le cas, vous pouvez opter pour un Data Center plus vert. Il est important d’analyser chaque étape du cycle de vie, afin d’essayer de trouver quand cela est possible une alternative plus verte.
Ne pas polluer est impossible, mais nous pouvons faire le choix de réduire l’impact de nos applications sur l’environnement. Vous ne pourrez probablement pas tout éco-concevoir pour des raisons techniques ou stratégiques, mais certaines bonnes pratiques peuvent être mises en place facilement.
L’éco-conception est un processus par étape qui doit être inclus dans une démarche plus globale spécifique aux besoins et à l’activité de chaque entreprise.
Vous souhaitez développer une application ou moderniser une application existante en tenant compte des principes de l’éco-conception ? Prenez rendez-vous avec un expert AxioCode et parlez-nous de votre projet.
Demandez conseil à un expert et échangez sur votre projet.
Vous souhaitez étudier la modernisation de votre application ? Vous pouvez bénéficier de notre service d’audit dédié aux applications web et mobiles. Vous obtiendrez ainsi une étude détaillée de votre application et une feuille de route pour la moderniser avec succès.
Eco-conception : l’infographie
