L’éco-conception digitale consiste à rendre votre site internet plus vert et moins polluant. Ce sont des actions qui pourraient s’apparenter aux petits gestes quotidiens que nous faisons pour l’environnement (le tri, prendre moins la voiture, favoriser les circuits courts, etc.). Bien qu’elle ne soit pas la solution miracle pour résoudre tous les problèmes liés au numérique, l’application de ces conseils par chaque créateur de site web pourrait contribuer à réduire considérablement l’impact environnemental du numérique sur notre planète.
C’est pourquoi Kaiman a choisi de placer l’éco-conception au cœur de son processus créatif et de vous proposer des sites éco-conçus.
Le green UX, c’est quoi ?
C’est une approche de conception centrée sur l’utilisateur qui vise à concilier les objectifs environnementaux et les besoins des utilisateurs. Cette démarche consiste à créer des interfaces numériques user friendly tout en minimisant leur impact sur l’environnement.
Le Green UX repose sur l’idée que la durabilité et la responsabilité environnementale ne doivent pas être sacrifiées au profit de l’expérience utilisateur. Au contraire, il s’efforce de trouver un équilibre entre une conception intuitive et efficace et la réduction de la consommation d’énergie, des ressources et des émissions de carbone.
Comment rendre mon site internet vert d’un point de vue UX/UI ?
Étape 1 : Faire le parcours le plus intuitif possible
Chaque action entreprise par un utilisateur demande des ressources et consomme de l’énergie.
Donc plus votre parcours utilisateur est long, plus l’utilisateur devra chercher longtemps et rester longtemps sur votre site, ce qui entraînera plus de consommation.
Pour adopter une démarche éco-responsable, il faut faciliter l’accès au maximum aux principales fonctionnalités ou pages du site.
Par exemple, sur desktop (ordinateur), évitez d’utiliser un menu burger, car cela engage un clic supplémentaire pour accéder au menu, entraînant une consommation inutile.
L’objectif est de créer un site clair et épuré sans informations superflues, ce qui va permettre à l’utilisateur d’accéder facilement à ce qu’il recherche.
Dans cette optique de tout minimiser, il est important de réfléchir au parcours utilisateur pour limiter le nombre de pages sur le site et ainsi limiter le nombre de ressources à charger au lancement du site.
Des outils permettent de connaître la consommation de notre parcours utilisateur comme l’extension “Green It” disponible sur Google Chrome. Cette extension permet de connaître la consommation d’une page et de sauvegarder l’analyse.
Grâce à cela, vous pouvez charger et sauvegarder l’analyse de toutes les pages de votre parcours utilisateur pour ensuite les additionner et savoir combien consomme votre parcours et où est-ce que vous pouvez faire des améliorations.
Étape 2 : Travailler l’optimisation de vos images
Une grande partie de la consommation d’un site provient des images. Souvent, elles ne sont ni optimisées en termes de qualité, ni de taille. Pour réduire l’impact environnemental de vos images, privilégiez le format SVG autant que possible.
1. Réduire son poids pour une meilleure éco-conception
Si toutefois mettre une image est obligatoire, assurez-vous de l’exporter à la taille exacte requise. Si vous avez besoin d’un visuel de 300px par 400px, cela ne sert à rien de prendre une image qui fait le double. On peut bien sûr toujours la redimensionner via le code, mais cela ne changera rien à son poids initial et sa consommation.
Le mieux est donc de le faire au préalable et de les exporter en 72 dpi (qualité de l’image). Cela est largement suffisant pour un affichage web.
Pour pousser la méthode encore plus loin comme la taille de l’image change généralement en fonction de l’appareil que l’on utilise (ordinateur, tablette, mobile…), il est conseillé de faire une image différente pour chaque breakpoint (points choisis dans le code qui déterminent les tailles d’écrans où il y aura des changements pour adapter au mieux le site). Utiliser aussi les nouveaux formats d’images spécifiques au web permet de réduire leur poids (webp, avif). Cela permet d’optimiser au maximum le poids des images de notre site internet.
2. Appliquer un traitement spécial aux images pour limiter leur impact environnemental
Le traitement que l’on peut effectuer sur les images influe également sur leur impact.
En effet, une image en couleur consommera plus qu’une image en noir et blanc ou en monochromie et bichromie, car l’affichage des couleurs demande plus d’énergie donc plus il y en a plus ça consomme. Le meilleur moyen est de faire des images tramées, car elles ont un poids vraiment minime et une consommation d’énergie réduite.
Voici un exemple avec des chiffres qui parlent par eux-mêmes :
L’image “Mauvais” est l’image d’origine qui n’a pas été retravaillée.
L’image “Bon” a été compressée et retaillée pour être à la taille de son conteneur. L’original passe de 7360 × 4912px à 700 × 560px.
L’image “Excellent” est en N&B avec un effet tramé. Elle est également retaillée à la taille de son conteneur.
Cela montre bien qu’avec un simple travail sur les images, nos sites peuvent consommer moins et par conséquent charger également plus vite, ce qui ravira à la fois la planète mais aussi vos utilisateurs.
Étape 3 : Limiter vos animations et l’utilisation de vidéos
Elles sont également très gourmandes en énergie. Pour un site éco-responsable, réduisez leur utilisation au minimum.
Cependant, si l’utilisation d’une vidéo est nécessaire, vous pouvez réduire sa taille d’affichage, ne pas la mettre en pleine largeur, ne pas la lancer de façon automatique, ni la mettre en boucle.
Pour les animations, si vous en voulez absolument, nous vous invitons à les faire en CSS le plus possible. C’est le langage de code qui consomme le moins et qui demande le moins de ressources. De plus, contrairement à ce que l’on pourrait penser, de nombreuses animations sont réalisables en CSS.
Évitez les GIF animés qui sont lourds et nécessitent un chargement conséquent. Il est conseillé d’utiliser plutôt des SVG animés qui pèsent moins lourds et qui en plus permettent un meilleur rendu visuel.
Nous vous recommandons également de bannir les sliders (carrousels) sur vos sites. Ils consomment de façon inutile, car ils font appel, la plupart du temps, à de lourdes librairies Javascript qui nécessitent beaucoup de ressources pour fonctionner.
De plus, la plupart des utilisateurs ne les utilisent pas. C’est une charge supplémentaire inutile pour votre site qui apporte peu voir pas de valeur.
Étape 4 : Choisissez bien vos typographies
Charger une typographie consomme énormément. Plus vous utilisez de typographies, plus votre site sera lourd à charger.
L’idéal serait d’utiliser des typographies déjà présentes sur les systèmes d’exploitation (Windows, Mac, Linux…) des utilisateurs comme Arial, New times roman, Verdana, Century gothic ou encore Garamond et pleins d’autres. Comme ces typographies sont déjà installées, il n’y a pas besoin de les charger pour les afficher sur l’écran de l’utilisateur. Cela représente une économie importante.
L’autre alternative est d’utiliser des polices Google fonts qui ont été optimisées pour une utilisation web. Elles sont plus énergivores que les polices pré-installées, mais elles sont malgré tout mieux que d’autres polices.
Les polices d’Adobe, par exemple, créent de nombreuses redirections pour l’affichage, ce qui engendre une consommation d’énergie supplémentaire inutile.
Cependant, si vous devez respecter une charte graphique et que vous n’avez pas le choix sur la typographie utilisée, vous pouvez faire en sorte d’utiliser le moins de variantes (light, bold…) possibles et d’utiliser des formats faits pour le web comme WOFF et WOFF2, qui ont une meilleure compression. Cela limitera l’impact environnemental de votre typographie.
Le moins reste toujours le mieux.
Alors ? Prêt à vous lancer dans l’éco-conception digitale ?
La liste de conseils pourrait encore être plus longue, il existe de nombreuses façons d’améliorer l’éco-conception d’un site internet. Nous vous avons présentés ici, les principaux points concernant l’UX et l’UI d’un site internet.
Il est aussi important de noter que toutes ces modifications ont vocation à réduire le poids de votre site. Un site plus léger est un site qui se charge plus rapidement. Un site rapide, Google aime ça. Votre site pourra donc bénéficier d’un meilleur référencement naturel (SEO) grâce à ces actions.
L’éco-conception apporte de nombreux avantages pour votre site : un impact environnemental moindre, un meilleur référencement et un meilleur parcours utilisateur.
Voici quelques exemples de sites web éco-conçus qui ont suivi ces principes avec succès :
Low Tech Lab : Le Low-tech Lab est une initiative en recherche et documentation en Open-Source qui a pour objectif de promouvoir les innovations low-tech tout en accélérant leur avancement. Leur site est un parfait exemple des bonnes pratiques à suivre.
Ecosia : Un moteur de recherche écologique qui plante des arbres pour chaque recherche effectuée. Leur site web met en avant leur engagement écologique et offre une expérience utilisateur fluide.
Vous pouvez tester votre site internet pour connaître son impact global, grâce à notre outil K-Green.
Vous aussi, vous voulez vous lancer dans l’éco-conception et vous ne savez pas par où commencer ?
Laissez-vous guider par notre équipe d’experts.
