Éco-conception : créer un site efficace sans sacrifier votre design
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.
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.
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).
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.
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.
- 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.
- 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.
- 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.
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.
À 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.
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.
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.
Enfin, l’outil communique des informations en matière d’empreinte environnementale de la page en question.
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