photo d'une cafetière italienne

Éco-conception web – Choisir ses fonctionnalités

Les fonctionnalités web, c’est comme le café. Besoin d’un bon café ? Une bonne cafetière à l’italienne et c’est parti : performance ET sobriété, utilisatrice heureuse.

Je vais vous épargner les chiffres vous disant que le numérique participe beaucoup au réchauffement climatique, et on va plutôt se concentrer sur les actions concrètes à mener !

1. Déterminez quelles sont les fonctionnalités qui sont vraiment utiles

Le besoin d’utilisation (UX power)

💡 Est-ce que la fonctionnalité envisagée provient d’un besoin utilisateur ? Ok on met en place !

💡 Est-ce que vous avez vu cette fonctionnalité chez vos concurrent•es ? Ou vous trouvez que “ça claque ? “. Si ça ne correspond pas à un réel besoin de vos utilisateur•ices, on met de côté 😉.

Alors on est d’accord que sauf exception, vos utilisateur•ices ne vont pas vous formuler spontanément leurs besoins en mode : “bonjour j’aurai besoin d’un formulaire sur telle page, avec tels champs, d’une présentation vidéo sur telle page…”.

Voici donc plusieurs façons de recueillir leurs besoins

Au plus simple – budget modeste :

  • Repérer les points de friction grâce à des outils de type Google Analytics : pages vues, sur quel support (mobile, ordinateur …), quelle proportion achète, lis, souscrit, participe ? Où sont les points d’abandon ?
  • Demander leur avis via des enquêtes de satisfaction en essayant d’être précis sur les sujets qui vous semblent prioritaires.

L’idéal – si vous pouvez vous le permettre :

Je vous recommande vivement de réaliser des ateliers UX ! Ceci afin de mieux cerner votre cible et ses besoins !

Analysez le cycle de vie

Ce n’est pas uniquement lié aux fonctionnalités, mais elles en font partie. Lors de la conception de votre site ou service en ligne, il faut garder en tête tout son cycle de vie qui comprend :

  1. Conception : on est en plein dans cette phase pour le choix des fonctionnalités
  2. Réalisation : design puis développement
  3. Déploiement : mise en place de l’hébergement et mise en ligne
  4. Administration : mise en place ou mise à jour des contenus
  5. Utilisation : vos utilisateurs utilisent votre site
  6. Maintenance : résolution d’éventuels bugs techniques, mises à jour régulières
  7. Fin de vie : A part si votre produit ou service devient obsolète par absence de marché, il est plus que souhaitable d’éviter cette étape, et de mettre l’accent sur les étapes 1 et 6 pour créer un site ou service en ligne durable.
Illustration des étapes du cycle de vie d'un site web

Autre indicateur à suivre : le temps de navigation

On a tendance à penser que plus nos utilisateur•ices restent longtemps sur notre site mieux c’est (spoiler : non ^^).

S’iels repartent immédiatement après être arrivé•es, il y a en effet un soucis à investiguer. En dehors de cela, votre but est de les amener à réaliser les actions souhaitées dans un minimum de temps, et ce pour 2 raisons :

  1. leur garantir une expérience positive (Par exemple sur une boutique en ligne si une personne arrive à faire son achat rapidement, elle ne perd pas de temps et sera probablement heureuse de ne pas avoir galéré trois plombes rencontré des difficultés pour trouver les informations sur un produit, choisir son mode de livraison et payer)
  2. Le temps passé par un•e utilisateur•ice sur un site web ou un service en ligne est l’élément le plus déterminant pour réduire ou augmenter l’empreinte environnementale de ce site. En résumé, moins l’utilisateur•ice passe de temps sur votre site, plus son impact environnemental associé et faible.

L’arborescence et le nombre de pages

On dévie un peu des fonctionnalités à proprement parler, mais petit aparté sur le nombre de pages de votre site. Il peut être intéressant pour le référencement d’avoir de nombreuses pages selon votre secteur d’activité pour vous placer sur des mots-clés et sujets variés.

Cependant vous concentrer sur moins de pages mais avec un contenu plus travaillé sera moins lourd sur les serveurs, plus simple à analyser au niveau cycle de vie et à maintenir. Vous pouvez aussi archiver certaines pages au fur et à mesure, dès que le contenu devient moins pertinent.

La conception mobile first :

illustration d'un mobile avec écrit "moi d'abord"

La plupart des process conceptions actuelles suivent le principe du “mobile first”. Même si votre cible est essentiellement présente sur ordinateur, il reste intéressant de faire votre conception sur mobile en premier, car cela aura directement une incidence sur le design et le développement. La complexité est moindre pour passer de mobile à desktop que l’inverse au niveau du code. Vous éviterez ainsi la difficulté de devoir “compresser” vos contenus pour que tout rentre sur le format mobile.

2. À partir de là comment ça se passe ?

Une fois que vous avez listé les fonctionnalités réellement nécessaires & utiles, posez-vous les 2 questions suivantes pour chacune d’entre elles :

Quel est la mesure précise à atteindre ? Le volume souhaité ?

Cela peut être un taux de compression pour les sections présentant différents médias images, la résolution des vidéos, le nombre maximum de requêtes serveurs, le nombre d’éléments affichés dans une liste. Plus vous serez précis dans la quantité et la qualité attendue, plus éviterez du surplus.

Existe-t-il une version plus sobre pour le même résultat ?

illustration de l'alternative aux carousels d'images

Par exemple, si vous souhaitez présenter des visuels de mise en avant de catégories (blog, produit, etc.) sur votre page d’accueil, vous pouvez afficher des images statiques avec un petit effet de style en CSS, plutôt qu’en carrousel.

Cela peut aussi être un choix de dimension : est-ce que vous avez réellement besoin de cette image en plein écran ?

Pour le e-commerce ou pour des points d’actions attendues critiques : les tests AB

Si vous hésitez entre 2 fonctionnalités, testez les 2 ! Et vous saurez ainsi laquelle fonctionne le mieux. Le principe consiste à présenter une version à un groupe d’utilisateurs et une autre version à l’autre partie des utilisateurs, puis à analyser les résultats des comportements pour choisir la version à mettre en place.

Vous pouvez faire appel à une entreprise spécialisée pour la mise en place de ce type de test ou utiliser des outils tels que Google Optimize.

La compatibilité avec des appareils plus anciens

Sobriété dit aussi possibilité d’atteindre des utilisateur•ices qui consultent vos sites et app sur des appareils plus anciens (les utilisateur•ices qui ne remplacent pas leur smartphone ni leur ordinateur tous les ans mais uniquement quand ils ne fonctionnent plus 🌍).

En ne proposant que les fonctionnalités essentielles, avec un design plus minimaliste et du code propre et léger, vos site et app seront naturellement performants !

Attention plus simple ne veut pas forcément dire regrouper des fonctionnalités pour en faire un seule qui fait tout 😉.

Les a priori et le cas de l’autocomplétion

L’autocomplétion sur les champs d’un formulaire est parfois très pratique pour proposer un gain de temps et éviter certaines erreurs de saisie par exemple. Toutefois, cette fonctionnalité nécessite de nombreux allers-retours entre navigateur et serveur (malgré la captation directe possible de certaines informations).

L’alternative dans ce cas précis est de donner le maximum d’informations d’aide à l’utilisateur, et de limiter également la quantité d’informations demandées si elles ne sont pas absolument nécessaires.

Pour aller plus loin sur ce sujet, je vous recommande de lire l’article sur la conception de formulaires agréables pour vos utilisateurs 😉.

Les stats, la data, les chiiiiiffres

Pouvoir tracker les moindres faits et gestes des personnes qui se promènent sur votre site, vous pouvez penser que c’est très important pour pouvoir analyser les chiffres de ventes, les comportements pour adapter votre contenu et vendre plus, être plus visible, etc. Ok mais jusqu’à quel point ?

Si les datas sont réellement toutes utilisées, décortiquées, et que des besoins sont identifiés régulièrement grâce à cela, alors oui, on peut garder les tracker. Sinon essayez d’alléger et de garder le strict minimum. Par exemple, vous pouvez concentrer vos outils uniquement sur certaines parties précises de votre site.

Vous pouvez également vous pencher sur des alternatives au traditionnel Google Analytics, comme Matomo.

Pssst, en parlant chiffres, un site plus sobre vous coûtera généralement moins cher (en réalisation et en maintenance) qu’un site très complexe !

Le cas des CMS* et des solutions SaaS**

Ces sites dont la réalisation est accessible au grand public permettent de s’offrir un site à petit prix. Ils sont aussi un bon choix possible pour bon nombre d’activités professionnelles tant que l’on n’a pas besoin de fonctionnalités très techniques.

Faire appel à une équipe pour avoir un site développé sur mesure a un certain coût (même en appliquant des principes de sobriété). Il est donc parfois naturel de se tourner vers des solutions un peu plus “clé en main”, du moins dans un premier temps.

C’est mon cas actuellement, mon site n’est pas parfait (notamment sur le plan éco-responsable j’ai une liste de choses à améliorer ^^), mais c’est un premier pas en attendant d’avoir le temps pour faire mieux.

Attention, sans un minimum de connaissance, si vous vous lancer dedans seule-e, ce type de projet peut vite devenir très chronophage. (C’est comme se lancer dans des travaux chez soi. Lorsque que vous estimez le temps prévu pour la réalisation, multipliez ce nombre par 3 et vous approcherez du temps réellement nécessaire). Cela ne doit pas vous empêcher de vous lancer, mais adaptez vos plans planning en fonction 🙂.

Mais revenons-en à notre sujet fonctionnalités.

Pour vos sites CMS ou Saas donc, il y a plusieurs possibilités pour optimiser votre impact

  • Choisissez un thème minimaliste et mis en avant pour sa légèreté (thèmes “lightweight”). Examinez-les à l’aide d’outils comme GTMetrix  ou EcoIndex .
  • Sélectionnez soigneusement les plugins à mettre en place, et nettoyez/supprimez régulièrement ceux dont vous n’avez plus besoin. Vous pouvez en tester plusieurs pendant la phase de création de votre site et ajuster selon vos besoins.

Si on prend le cas de WordPress, il s’agit un CMS très utilisé, il est donc facile de trouver des informations grâce à la communauté. La maintenabilité aussi sera probablement meilleure que pour un site fait maison. Il est donc aussi tout à fait possible de se servir de WordPress comme base pour se créer un site sur-mesure et éco-conçu avec un thème construit de A à Z.

*CMS : CMS signifie « Content Management System » ou en français : « Système de gestion de contenu ». Il s’agit de solutions open-source gratuites, qui sont à installer et personnaliser comme on le souhaite. Généralement quelques connaissances techniques sont à avoir ou acquérir si vous souhaitez réaliser autre chose qu’un blog simple. Le plus connu est WordPress

**SaaS : (« Software as a Service » ou en français : « logiciel en tant que service ») est une solution logicielle applicative hébergée dans le cloud et exploitée en dehors de l’organisation ou de l’entreprise par un tiers. Dans le cas des sites web, on vous met une solution prête à l’emploi à disposition, qui est généralement payante pour y présenter vos contenus. Ex : Shopify, Squarespace, Webflow …

Pour conclure, ou pour commencer

Si vous êtes une grosse structure, votre site est l’un des axes sur lequel mettre en place des choses rapidement pour être plus éco-responsable.

Si vous êtes en solo ou une petite entreprise, c’est tout à fait possible aussi sans y mettre toute votre tréso !

L’essentiel c’est de se lancer 😀!

Échangeons sur le sujet 🤗

Nous pouvons travailler ensemble sur l’éco-conception de votre site internet, app, logiciel.

D’autres sujets à explorer dans le domaine de la conception durable et accessible :

Image de couverture : Thomas Murphy

Comments are closed

© 2021 Yellowazo