Image mise en avant pour l'article

Éco-conception : créer un site efficace sans sacrifier votre design

21 octobre 2024
Green web - UI Design
Comprendre l’importance de l’éco-conception est essentiel pour créer un site Web à la fois sobre, design et fonctionnel. Car oui, l’éco-conception en matière de numérique responsable vise à obtenir le meilleur rendement avec le minimum de ressources.


Pour comprendre l’enjeu autour de l’éco-conception, il faut prendre conscience que toutes les activités humaines créent une pollution et sont consommatrices d’énergie. Et cela vaut aussi pour le monde numérique, même s’il est dématérialisé. Par exemple, le streaming vidéo représente pas moins de 60 % des flux de données du Web. Quant à internet, il englobe à lui seul 4 % des émissions mondiales de gaz à effet de serre (GES), soit plus que les émissions de la France.

En tant qu’acteurs du numérique, nous avons donc un impact sur l’environnement et un rôle à jouer dès la phase de conception d’un site Web. D’ailleurs, la loi REEN (Réduction de l’Empreinte Environnementale du Numérique) du 15 novembre 2021 définit 5 piliers pour réduire l’empreinte environnementale du numérique en France. Celle-ci s’adresse à tous les acteurs du monde numérique, y compris aux consommateurs.

Découvrez les axes possibles pour éco-concevoir votre site internet sans sacrifier sa Direction Artistique et son identité graphique.

Photo d'une personne tapant sur un ordinateur portable avec un environnement naturel en arrière-plan, entourée d'icônes représentant des éléments digitaux tels que la sécurité, les transactions financières, et la collaboration, illustrant le concept d'éco-conception dans le design numérique.

Qu’est-ce que l’éco-conception ?

Définir l’éco-conception par le fait de limiter l’impact environnemental dès la conception des produits ou services numériques est réducteur. Car l’éco-conception va au-delà de la simple conception. C’est pourquoi la méthode à suivre pour concevoir des produits digitaux éco-responsables va, elle aussi, au-delà et présente plusieurs avantages. On vous explique.

Éco-conception : la définition

Pour bien cerner ce qu’est l’éco-conception, reprenons la définition officielle du ministère de la Transition écologique et de la Cohésion des territoires.

« L’éco-conception consiste à intégrer la protection de l’environnement dès la conception des biens ou services. Elle a pour objectif de réduire les impacts environnementaux des produits tout au long de leur cycle de vie : extraction des matières premières, production, distribution, utilisation et fin de vie.

Elle se caractérise par une vision globale de ces impacts environnementaux : c’est une approche multi-étape (prenant en compte les diverses étapes du cycle de vie) et multicritère (prenant en compte les consommations de matière et d’énergie, les rejets dans les milieux naturels, les effets sur le climat et la biodiversité). »

S’il n’y a pas encore de loi pour régir l’éco-conception, il existe un cadre juridique avec la loi REEN du 15 novembre 2021 qui vise à réduire l’empreinte environnementale du numérique.

Cette loi est constituée de 5 piliers et c’est précisément le 3e pilier qui nous intéresse : l’adoption d’usages numériques écoresponsables, via la création d’un référentiel général d’éco-conception qui fixe des critères de conception durable. N’oublions pas non plus la loi anti greenwashing du 1er janvier 2023.

Ainsi, il ne s’agit pas seulement de déclarer faire de l’éco-responsabilité, il faut surtout le prouver et montrer des exemples.

Éco-conception : les avantages du numérique responsable

Plus qu’une contrainte, l’éco-conception entraîne de vastes avantages. Elle :

  • réduit l’empreinte environnementale en minimisant les ressources nécessaires, les déchets numériques, etc. ;
  • réduit des coûts de conception et d’exploitation des ressources numériques ;
  • valorise l’Expérience Utilisateur (UX) globale, grâce à des sites plus simples et plus appréhendables ;
  • facilite l’expérience contributeur en back-office avec un back-office plus léger et simplifié qui limite le nombre de manipulations pour déposer ou créer une page, un document, etc.

Ainsi, l’éco-conception vise à faciliter l’accessibilité par la simplification. C’est aussi une solution pour améliorer les performances techniques des sites Web (amélioration de la vitesse de chargement, par exemple).

Aussi, même les acteurs qui ont peu d’intérêt pour l’aspect environnemental y trouveront des avantages certains en matière de Design UX et UI (interface utilisateur).

Éco-conception : la méthode pour concevoir des sites éco-responsables

Pour établir une liste des bonnes pratiques à prendre en compte pour concevoir des produits digitaux éco-responsables, il faut une méthode. Et celle-ci est à mettre en place tout au long du cycle de vie et dès la conception.

L’enjeu du numérique responsable ou de l’éco-conception est de parvenir à obtenir le meilleur rendement avec le minimum de ressources. L’idée n’est pas de se priver de tout élément graphique, mais d’opter pour des compromis afin d’obtenir la meilleure note possible, tout en tenant compte des enjeux propres à chaque site Web.

Dans cette logique, si une fonctionnalité n’est pas utilisée ou secondaire, il vaut mieux ne pas l’intégrer.

La méthode pour éco-concevoir des sites Web repose sur 4 piliers basés sur les grandes étapes de la conception :

  • la stratégie : élaboration du cahier des charges en veillant à limiter le périmètre pour ne garder que l’essentiel ;
  • la conception (Direction Artistique) : Expérience Utilisateur (UX), User Interface (UI) et spécifications fonctionnelles ;
  • la réalisation : développement back et front ;
  • l’exploitation : hébergement et création de contenu.

Vous l’aurez compris, ici nous nous intéresserons à la partie conception.

 

Quelles sont les bonnes pratiques éco-responsables en design ?

Comme nous l’évoquions, l’idée n’est pas de se priver de tout élément graphique, mais de faire des compromis. Ces derniers passent par différentes pratiques en matière de design, d’expérience utilisateur et d’utilisation de l’interface.

Les bonnes pratiques d’éco-conception en UX Design ?

L’UX Design d’un site éco-responsable se veut sobre, simple et efficace. Autrement dit, l’interface doit permettre aux visiteurs de s’y retrouver facilement dans toutes les informations présentes.

Pour cela, il faut être synthétique et répondre aux attentes des utilisateurs, à savoir les besoins primaires. En pratique, cela signifie qu’il faut limiter la hiérarchie de l’information et cibler les besoins urgents de l’utilisateur.

La meilleure façon de procéder est donc de se limiter à :

  • une seule image : les vidéos et les images sont ce qui prend le plus de ressources ;
  • un menu burger qui permet un accès direct à l’information : l’utilisateur peut accéder à la page souhaitée en déroulant simplement le menu d’un simple clic ;
  • peu d’actualité : rester sobre, simple et clair ;
  • la valorisation des besoins primaires : l’utilisateur sait où cliquer pour répondre à ses attentes.

Pour vous aider à y voir plus clair et illustrer ce qui précède, prenons deux exemples.

Le premier exemple est la page d’accueil de l’APEC, un grand site de recrutement des cadres. Nous avons choisi cet exemple, car son score Eco-Index est de B. Nous reviendrons ultérieurement sur ce qu’est cette notation et cet outil. Sachez pour le moment que les scores vont de A à G, A étant le meilleur score.

Capture d'écran de la page d'accueil de l'APEC, avec des sections pour les candidats et les recruteurs. Au centre, une image montre un homme avec un ordinateur portable, accompagné d'un texte encourageant à améliorer son profil sur les réseaux sociaux via un web-atelier. D'autres options incluent un simulateur d'entretien d'embauche et un espace dédié aux startups.

Comme vous pouvez le constater, l’UX Design est simple et épuré. Les designers ont fait le choix d’un site synthétique. Ils ont probablement pensé en Mobile First (optimisé pour la navigation mobile), ce qui peut être une bonne solution en matière d’expérience utilisateur.

On retrouve dans cet exemple :

  • une seule image ;
  • une présentation rapide des missions du site ;
  • un menu qui permet de savoir où cliquer en fonction de son profil (candidat ou recruteur) ;
  • de l’actualité.

De plus, d’un simple scroll (voir l’image ci-dessous), les utilisateurs ont accès à des outils et informations. On retrouve ensuite un peu de promotion, ainsi que le footer (pied de page).

Capture d'écran d'une section promotionnelle du site de l'APEC intitulée « Outils et infos-clés pour votre vie pro », proposant de participer à des événements emploi, d'accéder à des outils pour sa carrière, et de décrypter les tendances du marché de l'emploi. En bas, le footer inclut des liens vers des ressources et options de contact, ainsi qu'une section pour télécharger l'application APEC sur Google Play et l'App Store.

Autre exemple, la page d’accueil du site d’EDF. Cette page reprend les mêmes principes, et pourtant, il s’agit d’un très gros site avec une architecture développée.

La capture d'écran présente la page d'accueil du site EDF. Elle montre un bandeau promotionnel invitant à visiter le Pavillon EDF pour gagner des places pour les Jeux de Paris 2024. En dessous, plusieurs options s'offrent aux utilisateurs : suivre leur consommation, consulter leur facture, devenir client, ou signaler un déménagement. Sur la gauche, un menu permet de choisir parmi plusieurs catégories telles que "Particulier", "Entreprise", "Collectivité", ainsi que des rubriques spécifiques comme "EDF recrute" et "Groupe EDF".

Le design est simple et épuré, mais on reconnaît très facilement la marque et la charte graphique.

À gauche, un portail d’entrée permet de rejoindre les grandes rubriques du site (particuliers, entreprises, collectivités, etc.). On peut aussi voir les besoins primaires des utilisateurs d’un coup d’œil rapide : « je veux suivre ma consommation », « je veux consulter ma facture », « je veux devenir client », etc.

Les bonnes pratiques d’éco-conception en UI Design

La direction artistique a un grand rôle à jouer dans le UI design, car tous les éléments ajoutés utilisent des ressources, alourdissent la page, etc., et ont donc un impact sur les émissions du site.

Il existe plusieurs points clés sur lesquels travailler pour améliorer la performance des sites internet sans pour autant sacrifier tous les éléments.

> UI design éco-responsable : les images

Les images et les photos pèsent lourd. L’option la plus radicale est de ne pas ou peu utiliser d’images. Pour autant, il ne faut pas se passer d’éléments visuels, car des compromis sont possibles.

  1. Utiliser la bonne taille et le bon format d’image : pour une image qui apparaîtra par exemple en 900 x 700 pixels, il n’est pas nécessaire d’UI uploader une image de plus grande taille. En effet, non seulement l’image pèserait plus lourd, mais cela demanderait au navigateur de « travailler » pour retailler l’image à la bonne taille. Il est aussi possible de convertir les images en WEBP, un format moins lourd qui conserve une bonne qualité. Toutefois, celui-ci n’est pas indexé par les moteurs de recherche, ce qui peut être problématique pour certains visuels.
  2. Utiliser des illustrations en SVG : lorsque des illustrations sont suffisantes pour illustrer le propos, il vaut mieux se tourner vers cette alternative, car le format SVG est moins lourd.
  3. Utiliser des filtres sur les photos : avec un filtre de type « pixels », les photos n’ont plus besoin d’être en qualité haute, car elles sont volontairement dégradées. On peut également utiliser un filtre monochrome sur les visuels. Il y a alors moins de pixels de couleurs différentes et l’image est moins lourde.

Les sites de Mountain Riders (image ci-dessous) et Dalkia en sont de bons exemples.

L'image montre la page d'accueil du site de Mountain Riders, une organisation engagée dans la protection des montagnes. Le message principal "Ensemble pour nos montagnes" est mis en avant, avec des options claires pour les visiteurs : "Je fais un don", "J'adhère", et "Je deviens partenaire". Le design intègre des illustrations de montagnes et des éléments visuels naturels, soulignant l'engagement de l'organisation envers l'environnement. Un menu est accessible en haut à droite de la page, avec une icône de couleur verte.

Malgré les filtres, nous restons capables de voir l’image et de comprendre son contenu. Le cerveau est lui aussi apte à comprendre le message véhiculé par l’image. Cela n’interfère donc pas dans l’expérience utilisateur.

De plus, l’option des filtres présente l’avantage de renforcer l’identité graphique.

Vous avez peur de ce que pourraient en penser vos utilisateurs ? Le site Dalkia a fait le choix d’expliquer sa démarche éco-responsable à l’aide d’un message d’information original et humoristique.

L'image est une capture d'écran du site Web de Dalkia, qui met en avant son engagement pour un site internet écoresponsable. Le message humoristique commence par rassurer l'utilisateur : "Non, votre écran n’est pas cassé, et nos graphistes ne sont pas en vacances." Ensuite, le texte explique que le numérique est classé comme le 6e plus grand pollueur mondial et, face à ce constat, Dalkia propose un site internet conçu dans une démarche écoresponsable. Le site se distingue en n'intégrant pas d'éléments énergivores comme un carrousel d'images. Un bouton "Suivant" invite à continuer la navigation.

À ce stade, vous comprenez certainement que les vidéos sont, quant à elles, fortement déconseillées en matière d’UI Design et d’éco-conception.

UI Design éco-responsable : les polices de caractères (typographie)

De même que pour les visuels, les polices d’écriture exigent des ressources et affectent la notation Eco-Index des sites Web.

Voici quelques recommandations :

  • se limiter à 1 ou 2 typographies ;
  • privilégier les polices système qui sont les polices préinstallées sur les terminaux, car elles ne nécessitent pas de requête pour être chargées ;
  • utiliser des polices au format WOFF/WOFF2 (Web Open Font Format), si vous voulez vraiment utiliser une police spécifique et graphique, un format compressé spécifiquement pour un usage Web.

Et si vous faites le choix d’avoir peu d’éléments et moins d’images sur votre site, vous aurez évidemment plus de marge de manœuvre en matière de typographie.

UI Design éco-responsable : le mode « éco »

Le mode « éco » est encore peu utilisé sur les sites Web de par sa nature très différente. Ici, il ne s’agit pas de faire des compromis en se passant de certains éléments graphiques qui demandent beaucoup de ressources. Après tout, certains sites ont des enjeux qui nécessitent parfois de conserver ces éléments-là.

Avec le mode « éco », un simple bouton permet de basculer vers une version minimaliste du site internet. Celui-ci désactive tous les éléments qui demandent beaucoup de ressources.

Ce qui est intéressant, c’est que c’est l’utilisateur qui choisit ce qu’il veut afficher ou non. Il devient acteur de sa navigation et de sa consommation.

Cette pratique présente donc l’intérêt de sensibiliser l’utilisateur à son propre impact lorsqu’il utilise internet. C'est un point d’autant plus intéressant que beaucoup d’utilisateurs n’ont pas encore conscience des effets environnementaux de leur navigation.

Par exemple, la métropole de Brest souhaitait mettre son territoire en avant sur son site Web. Pour cela, elle voulait conserver les photos. Nos experts Adimeo a donc travaillé avec elle sur un mode « éco » lors de la création et du développement de projet sous Drupal.

Si vous allez sur leur site, vous verrez que l’utilisateur peut activer ou désactiver le mode « éco » en bas à gauche. Lorsque le mode « éco » est activé, les photos ne sont plus présentes, mais toutes les autres informations restent affichées.

Ici, le mode « éco » est donc le bon compromis entre les besoins du client et la démarche d’éco-conception.

 

Tester l’impact environnemental de son site Web : l’Eco-Index

Tester l’impact de votre site internet vous permet de faire les choix adaptés en matière d’éco-conception.

Pour cela, il existe l’outil Eco-Index. Sous forme de plugin ou de site internet, l’outil donne un score aux sites Web. Il détaille aussi cette notation et les points qui peuvent être améliorés.

Pour vous donner un aperçu de cet outil, passons à un cas pratique avec le site Dalkia, dont nous avons parlé précédemment. L’idée ici est de vous montrer qu’il y a toujours des points à améliorer.

Comme nous l'avons vu, Dalkia a fait le choix de mettre peu de photos et d’utiliser des filtres. Néanmoins, il y a beaucoup d’éléments UX, et cela se ressent sur la notation de l’Eco-Index. Le site affiche en effet un score de C, soit une note de 70/100.

L'image montre le résultat d'un test de performance éco-conception d'un site Web, avec un score de 70 sur 100, classé dans la catégorie "C". Le message indique "Encore un effort !", suggérant que le site est presque optimisé, mais nécessite encore quelques améliorations pour être pleinement efficace.  Le classement de la page est de 24 941 sur 109 053 sites analysés. Les détails supplémentaires fournis montrent :  La page est jugée trop lourde avec un poids de 1,183 Mo. Elle est qualifiée de "Simple" avec 362 éléments. La page effectue un nombre jugé excessif de requêtes, soit 41 au total. Le message encourage à consulter les détails pour comprendre les aspects à améliorer.

Sachez que l’Eco-Index note de manière assez sévère, de A à G. Par conséquent, un site qui affiche un score de D a déjà fait pas mal d’efforts.

Il est également possible de consulter le détail du score, en sachant qu’Eco-Index prend 3 critères en compte : le poids de la page, sa complexité et le nombre de requêtes. Sur ces 3 critères, l’outil utilise une médiane et une cible représentée par le point noir. Il nous montre où la page se situe par rapport à la cible.

detail-du-score

L’Eco-Index propose aussi des recommandations (Expérience Utilisateur, Expérience Contributeur ou UI et développement) pour ces 3 critères, afin d’améliorer votre score. Ces recommandations reviennent sur les points déjà abordés précédemment.

Voici un résumé des conseils pour améliorer le score d'éco-conception d'une page web :  Page trop lourde : Optimisez les images, évitez les vidéos, compressez les fichiers (HTML, CSS, JS), et facilitez la mise en cache. Page trop complexe : Simplifiez le contenu et les fonctionnalités, adoptez l'approche "mobile first", et évitez le scroll infini. Trop de requêtes : Limitez les widgets, utilisez des polices standard, regroupez les images et les fichiers CSS/JS.

Enfin, l’outil communique des informations en matière d’empreinte environnementale de la page en question.

L'empreinte environnementale d'une page web est mesurée en fonction de deux principaux indicateurs :  Consommation d'eau : La page consomme 24 litres d'eau bleue pour 1 000 visites par mois. Émissions de gaz à effet de serre : La page émet 1,6 kg de CO2e pour 1 000 visites par mois. Équivalents :  1 kg de CO2e correspond à un trajet de 3 km en voiture. Une douche consomme 6 litres d'eau par minute. Par exemple, si la page génère 1,7 kg de CO2e et consomme 2,5 litres d'eau pour 1 000 visites, cela correspond à un trajet en voiture de 5,5 km et une douche de 4 minutes.

Ici, nous avons fait le test avec la page d’accueil, mais en réalité, il faut tester chaque page du site, ou au moins les principales pages du parcours utilisateur, et ce, pour en faire une note moyenne. Cela implique bien entendu d’identifier un parcours au préalable.

Vous l’aurez compris, c’est à vous de définir le niveau d’éco-conception que vous souhaitez pour votre site : exigeant, fort ou modéré. Gardez à l’esprit qu’un score de D est déjà une bonne moyenne.

Mais sachez aussi que le niveau d’exigence peut avoir un impact sur votre Direction Artistique. En effet, pour passer d’une note D à B, les efforts, et donc les impacts, seront plus importants. Cela pourra par exemple concerner la quantité d’images, leurs tailles, la hauteur d’écran des pages, etc., en sachant que deux hauteurs d’écrans équivalent à un score de B et quatre hauteurs d’écrans à un score de C ou D.

De plus, le poids des images doit être optimisé, le menu de navigation doit être iso en mobile et desktop, ce qui pousse vers l’usage d’un menu burger.

A contrario, si vous visez une note inférieure à D, les impacts sur la Direction Artistique seront moindres : pas de conséquences sur l’utilisation des images et pas d’impact sur l’économie des éléments.

Du point de vue de la Direction Artistique uniquement, l’idée de l’éco-conception n’est pas de tout sacrifier pour obtenir un site doté d’une bonne note. Il est important de prendre en compte ce qui est essentiel et ce qui ne l’est pas, ainsi que ce qui a le plus d’importance et ce qui en a le moins. Parfois, des compromis entre les différents points suffisent à équilibrer la note donnée par l’Eco-Index. Il est donc important de trouver un équilibre réaliste en fonction des enjeux du site (audience avec une maturité digitale ou non, par exemple).

Crédit photo : RRice1981

Image mise en avant pour l'article
Juliette Beziat
Directrice Artistique
L'éco-conception numérique : des bonnes pratiques durables pour des projets efficaces
Télécharger l'e-book
Webinar
Éco-conception : comment créer un site sobre sans sacrifier votre DA ?
Voir le webinar !
Un projet de création ou de refonte d'un site Web ?
Tout au long de votre projet, nos experts vous conseillent et vous accompagnent. Pour obtenir plus d'information, contactez-nous !
Contactez-nous