Une démarche de développement "Ecoloy by design"

Ou comment réduire l’impact environnemental des logiciels ? Augmenter leur efficience ?

Trois principes sont fondateurs sur lesquels s’appuient les pratiques :

• Simplicité : Démarche qualitative > éviter l’usine à gaz.
• Frugalité : Limiter la couverture et la profondeur fonctionnelle au minimum (nombre d’éléments affichés, taux de compression, etc…)
• Pertinence : Une interaction pertinente fait gagner du temps à l’internaute, donc économiser des ressources.

Ils existent actuellement plus d'une centaine (115) de pratiques ou règles recensées pour optimiser écologiquement une application.

Faire un logiciel simple, épuré et efficace

Les premières pratiques sont assez abstraites mais sans doute les plus pertinentes :

• Éliminer les fonctionnalités non essentielles

Selon des études (cast software et standish group), 70% des fonctionnalités ne sont jamais ou rarement utilisées. 45% ne sont jamais utilisées.

• Ne pas les inclure ou les supprimer réduit le poids du logiciel, donc son cout en ressources.

Cela a aussi pour effet d’en simplifier l’utilisation, puisqu’il y a moins de choses à comprendre.

• Fluidifier l’UX et les « processus ».

On comprend quand même quand ils parlent de réduire le nombre d’écrans, le nombre d’étapes, le temps nécessaire pour que l’utilisateur atteigne son objectif qu’il s’agit bien de cela.

Une expérience utilisateurs UX plus efficace n’augmente pas seulement la satisfaction des utilisateurs mais, en réduisant le temps passé sur le site, permet d’en réduire l’impact écologique.

• Favoriser un UI design simple et épuré

Ce qui fait moins d’éléments affichés, donc téléchargés, calculés, etc… C’est aussi plus facile à comprendre pour les utilisateurs.

• Utiliser une approche « mobile first »

C’est à dire commencer par concevoir le site pour des appareils mobiles, qui ont des petits écrans et sont plus lents que les ordinateurs de bureau.

Cela permet de se focaliser sur l’essentiel au niveau fonctionnalités, et aussi d’être efficient à plein de niveaux : taille des pages, animations, traitements javascript, lisibilité, …

• Utiliser des traitements asynchrones si possible

Encourager l’utilisateur à lancer un traitement un arrière plan, puis à aller chercher le résultat plus tard, ce qui limite le temps passé sur le site.

Les pratiques techniques

On a ensuite beaucoup de pratiques techniques, plus ou moins haut niveau, plus ou moins spécifiques à un univers (drupal, php, etc…).

Voici une sélection compressée :

• Réduire le nombre de requêtes HTTP et la bande passante utilisée
• Regrouper, minifier et compresser les ressources statiques (js, css, …)
• Optimiser les images, les fichiers audios et vidéos, les documents PDF, etc…
• Utiliser des sprites
• Préférer des glyphes aux images
• Utiliser des images vectorielles, optimisées.
• Mettre en cache tout ce qui peut l’être, et bien utiliser les en têtes Expires, Cache-Control, et les ETags pour que le cache soit le plus efficace possible.
• Utiliser CSS pour les dégradés ou coins arrondis plutôt que des images
• Respecter l’historique du navigateur (ne pas forcer de refresh avec les boutons précédent / suivant)
• Utiliser des polices standards (pour ne pas avoir à télécharger de police)
• Éviter les calculs cotés clients
• Envoyer des fichiers CSS, JS et HTML valides
• Ne pas faire redimensionner les images par le navigateur (avec width, height, …)
• Utiliser des sélecteurs CSS efficaces (id, classe), regrouper les déclarations similaires, utiliser les notation abrégées (margin plutôt que margin-top, margin-bottom, etc…)
• Fournir une CSS print, pour limiter le nombre de pages imprimées
• Éviter les animations
• Faire attention à la manipulation du DOM pour éviter les repaint/reflow inutiles (cacher les nœuds pendant leur modification, ne pas modifier de nœud inutilement, …)
• Éviter les calculs coté serveur
• Favoriser les pages statiques
• Utiliser des caches pour ne pas accéder à des données ou recalculer des données inutilement
• Optimiser les images les fichiers audios et vidéos, les documents PDF, etc… lors du développement initial et pas dynamiquement à chaque accès, quand c’est possible.
• Utiliser des serveurs virtualisés, et mutualisés, pour partager les ressources avec d’autres services
• Installer uniquement les services (daemon) indispensables, désactiver les logs inutiles (par exemple de MySQL ou d’apache)
• Utiliser des solutions performantes (serveurs asynchrones type nginx, …)

L'avenir du design durable : une vision unifiée

La durabilité écologique et sociale dans la conception UX/UI verte ne sont pas disparates ; elles sont interconnectées. Il s'agit d'une approche visionnaire qui fait converger la conscience écologique et la responsabilité sociale. En intégrant ces principes aux processus de conception, les concepteurs ouvrent la voie à un avenir numérique qui non seulement excelle en termes de fonctionnalité, mais enrichit également la vie tout en prenant soin de notre planète.

Vous êtes prêt à améliorer vos applications et votre digital ? contactez nos experts, ils sont à votre écoute et à votre disposition.