Le Green UX, pour rendre notre Design d’application plus écologique

Dans le contexte actuel où la réduction de notre impact carbone est plus que nécessaire, un design web adapté est une piste à prendre en considération.

Un site web produit environ 1,76 grammes de CO2 à chaque page consultée. Si votre site internet fait 10 000 pages vues par mois, alors c’est jusqu’à 211 kilogrammes de CO2. C’est plus de carbone que dix arbres peuvent absorber en une année.

Concevoir un design minimaliste, accessible

Un design épuré, avec des éléments graphiques allégés, qui doivent aider le visiteur à naviguer plus facilement et mettre en avant les informations les plus importantes, simplement. Limiter les animations coûteuses en performances.

Seules les fonctionnalités nécessaires sont présentées à l’utilisateur, afin de le pousser directement à l’action, ce qui améliore également l’accessibilité.

Sur chacune des pages du site, demandez-vous pour chaque élément s’il doit être présent.

Le but est d’être dans la sobriété numérique, l’objectif est d’aller à l’essentiel en retirant le superflu.

Fluidifier le parcours utilisateur permet de faire les tâches plus rapidement et donc de consommer moins.

De plus, moins il y a de fonctionnalités et d’éléments, plus l’application est légère, moins il y a de chargement et moins de maintenance à effectuer par la suite.

Un design compatible sur tous les supports

Pensez “Mobile first” (optimisé pour le mobile), afin d’éviter de charger des éléments lourds sur le téléphone avec une connexion mobile. Le temps de chargement sera plus rapide et la navigation fluide et épurée.

Réalisez un design responsive et passe-partout, compatible sur n’importe quel appareil (ordinateur, smartphone, tablette, smart TV, …).

Votre application doit être durable et utilisable sur tous les supports même anciens, afin d’éviter l’obsolescence prématurée et le rachat avec production inutile de matériel.

Pensez au lazy-loading

Le lazy-loading ou le “chargement à la demande”, permet d’économiser de la bande passante en affichant les données ou visuels seulement quand ils sont demandés par l’utilisateur.

Dans une démarche Green IT (éco-TIC), il faut réfléchir à réduire les requêtes dans les bases de données et éviter trop d’appels vers les APIs. Ces derniers, entraînent des allers-retours consommateurs d’énergie vers les serveurs dans des data-centers (verts de préférence), souvent à l’autre bout du monde.

Définissez des composants qui ne seront chargés qu’à la demande et pas avant.

Le concept de Skeleton Screen (placeholders à la place des contenus) peut vous aider à combler les zones destinées à ces composants en cours d’affichage.

Si vous utilisez des éléments externes type Google Map, vidéos, widgets, plugins, affichages en temps réel ou réseaux sociaux, attendez qu’ils soient demandés avant de tout montrer.

Recyclez vos visuels

Vous pouvez réutiliser une image sur toutes les sous-pages d’une même rubrique. Appliquez un filtre dessus, à l’aide du CSS, pour créer de nombreuses variantes à partir d’une seule photo (en couleur, en noir en blanc, avec un effet de flou, en dégradé, en arrondi, …), afin de les modifier pour éviter le côté répétitif.

Réduisez le nombre de polices d’écriture utilisées

Le chargement des fonts nécessite des ressources, surtout si elles sont stockées sur un serveur externe. Plus vous avez de polices différentes, plus les données à télécharger seront lourdes et polluantes. Utilisez donc deux polices d’écritures au maximum.

Il existe d’ailleurs, des typographies éco-conçues et plus économiques (EcoFont, Ryman Eco…) Autre solution, les polices systèmes classiques n’auront pas besoin d’être téléchargées car déjà installées sur l’ordinateur.

Limitez le nombre de couleurs

Pour afficher les couleurs sur un site, les écrans dépensent de l’énergie qui augmente quand les couleurs se multiplient.

Même conseil que pour les polices, choisissez deux couleurs principales (sobres et unies) à utiliser sur votre application.

Le Dark mode ou “mode sombre”, moins énergivore, peut également être conseillé pour réduire la fatigue visuelle et le nombre de pixels à afficher.

Optimisez et limitez l’utilisation d’images

Les images représentent une quantité de données à stocker et télécharger (par exemple, les GIFs sont plus lourds qu’une courte vidéo). Le format des images a un impact sur la performance du site.

Compressez vos images et respecter les bonnes tailles et extensions (Le PNG est plus lourd que le JPG).

Plutôt que d’utiliser des images, vous pouvez choisir de les remplacer par des icônes SVG, du style en CSS3 ou du texte qui sera référencé.

Minimisez les vidéos

La vidéo consomme une grande quantité de données. Le streaming vidéo représente 61 % du trafic Internet et les vidéos utilisent 80% des données du web.

Pensez donc à réduire la taille et durée de la vidéo à télécharger et héberger sur votre site, en évitant par exemple les génériques de début ou de fin.

Réduisez la qualité et choisissez une résolution plus basse (pas besoin de 4K).

Désactivez la lecture automatique et ne charger le player vidéo que quand il est demandé.

Prévoyez une version imprimable de votre site

Pour réduire la quantité d’encre et de papier utilisé, il est recommandé d’avoir une feuille de style CSS pour imprimante (fichier print.css).

Cette version va permettre de supprimer les éléments inutiles (pub, images, éléments d’interface, …) lors de l’impression d’une page du site.

Choisissez une typographie imprimable fine et plus écologique (Century Gothic, par exemple).

Optimisez le référencement SEO

En effet, plus le site est facile à trouver, moins l’utilisateur devra charger de pages pour trouver l’information. Le but est de réduire les appels faits sur les serveurs des moteurs de recherche, pour avoir plus d’économies d’énergies.

L’impact carbone d’un jour de requêtes sur Google est l’équivalent d’un trajet de 6,7 millions de km en véhicule léger (80 000 requêtes chaque seconde, soit 77 km).

Mesurez les émissions carbone de votre site web

Vous pouvez mesurer et évaluer l’impact environnemental d’un site avec des outils d’audits (EcoIndex, Green IT-Analysis, Ecometer, …), qui vous donneront des pistes d’améliorations pour votre éco-conception. Monitorez également votre application pour connaître les parcours utilisateurs et les fonctionnalités vraiment utilisées, afin de les optimiser.

Par Grégoire HOT, Développeur JS chez Proxiad Nord