Designer & développer des services digitaux responsables Si le numérique est indéniablement une solution pour limiter les effets du réchauffement climatique, son développement exponentiel - matériels, logiciels et réseaux - nécessite aujourd'hui de mener une réflexion sur l'optimisation de son impact sur la planète (l'équivalent de 82 millions de radiateurs électriques allumés en permanence en 2019). Du design au développement (sites web, applications,...), en passant par l'amélioration continue, ce livre blanc, réalisé grâce aux énergies (non carbonées) de nos équipes Conseil, UX, UI & Tech, vise à donner notre approche de l'éco-conception à chacune des étapes d’un projet numérique responsable. Un enjeu mais aussi - soyons lucides - un combat pour trouver le juste équilibre entre l'expérience utilisateur, les objectifs business et l'optimisation des ressources. Les 5 étapes clés de l'éco-conception : + Audit : état des lieux de l'existant & de la proposition de valeur + Définition : challenger, prioriser, définir un budget performance + Idéation : élaboration des concepts systémiques dans une démarche de sobriété + Design des parcours & des interfaces selon les guidelines d’éco-conception + Développement : prise en compte des impacts environnementaux tout au long du développement de son app/site Bonne lecture !

1. LIVRE BLANC
Designer & développer
des services digitaux responsables
Éco-Conception

2. N’HÉSITEZ PAS À PASSER SLIDESHARE
EN PLEIN ÉCRAN POUR UNE LECTURE
PLUS CONFORTABLE (MOINS PIXELLISÉE)
Bonne lecture !
😉

3. 3
L’IMPACT DU NUMÉRIQUE
En 2019, le numérique a représenté
près de 4% des émissions carbonées
dans le monde
(avec une augmentation soutenue
observée de 8%/an)*.
*Source : Empreinte environnementale du numérique mondial, Frédéric Bordage, GreenIT.fr, Septembre 2019
Smartphones
3,5Mds
d’équipements
(hors accessoires)
34
Milliards
Autres
téléphones
3,8Mds
TV, ordinateurs,
vidéoprojecteurs
3,1Mds
Objets connectés
19Mds
En 2019, on comptait* :Si le numérique fait partie intégrante
de nos vies et qu’on attend de lui
qu’il contribue à faire évoluer
les comportements et les usages
pour limiter les effets du réchauffement
climatique (via les smart grids,
la mobilité connectée, le e-commerce,
les bâtiments intelligents, etc), on se doit
de prendre en compte son impact.
INTRODUCTION

4. 4
L’IMPACT DU NUMÉRIQUE
Le numérique a une empreinte de 2 à 3 fois celle de la France (en termes d’énergie primaire, émissions de GES, eau).
Les principaux impacts environnementaux du numérique
proviennent :
• De la fabrication des équipements électroniques
• De la consommation électrique nécessaire pour leur utilisation.
INTRODUCTION
L’utilisation des smartphones représenterait entre 6 et 9%
des impacts provoqués par l’ensemble des équipements
numériques*.
Impact du numérique mondial en 2019
exprimé en équivalence d’usage de la vie
courante* :
Émissions de gaz à effet de serre :
• 116 millions de tours du monde
en voiture
• 1,5 milliard de salariés français
parcourant chaque jour 25 kms aller-
retour en voiture pour aller travailler,
pendant 1 an.
Eau :
‣ 242 milliards de packs d’eau minérale
(9 litres)
‣ 3,6 milliards de douches
Consommation d’électricité :
• 82 millions de radiateurs électriques
(1000 Watts) allumés en permanence
*Source : Green IT

5. 5
LA DEMARCHE D’ÉCO-CONCEPTION
L’éco-conception vise à réduire la quantité de ressources
informatiques nécessaire pour fournir le service à l’utilisateur.
Cela passe par :
• L’allongement de la durée de vie des équipements
• Le design des services qui sont utiles et ont du sens
• Le développement des sites web et des applications
dans une démarche de sobriété
Pour quels bénéfices ?
• Améliorer le retour sur investissement des projets
• Améliorer la performance économique des sites et applications
• Ajouter du sens et embarquer les collaborateurs, en cohérence
avec les démarche RSE et d’accessibilité des entreprises
• Contribuer à aligner la marque entre son discours et ses actes et nourrir
une relation sincère avec les clients.
Il ne s’agit pas d’opérer une révolution dans nos démarches de design
et de développement, mais plutôt d’ajouter une « couche de conscience
active » à toutes les étapes du projet.
INTRODUCTION
Objectif de l’étude :
Donner notre approche
de l’éco-conception à chacune
des étapes d’un projet,
du design au développement
(web et app), en passant
par l’amélioration continue.

6. Éco-concevoir c’est « Intégrer l’environnement
dès la conception d’un produit ou service,
et lors de toutes les étapes de son cycle
de vie ». Cette approche concerne aujourd’hui les services
et systèmes, notamment digitaux. L’éco-conception
est une démarche économique, écologique et sociale.
Elle n’est réservée à aucun secteur ou type
de produit.
AFNOR

7. 7
INTRODUCTION
03. Idéation
02. Définition
01. Audit
05. Développement
04. Conception
Le cycle de
l’éco-conception
Création / refonte de service
Service existant

8. CECI EST UN EXTRAIT DU LIVRE BLANC
POUR ACCÉDER À LA VERSION COMPLÈTE
GRATUITEMENT, RENDEZ-VOUS ICI
TÉLÉCHARGER
Bonne lecture !

9. 01 AUDIT
Mesurer l’existant et l’appétence fonctionnelle
au regard des impacts environnementaux
ACCÉDEZ À L’INTÉGRALITÉ DU LIVRE BLANC
EN TÉLÉCHARGEMENT GRATUIT
SUR NOTRE SITE !
TÉLÉCHARGER

10. Fort impact environnemental
positif des parcours/fonctionnalités
Forte valeur d’usage
des parcours/fonctionnalités
Valeurenvironnementale
Valeur d’usage
Efficience
Maximum
10
Intégrer les critères d’impacts environnementaux
dans tous les outils de mesure de l’existant et d’observation terrain
Etat des lieux de la proposition de valeur
et du fonctionnel proposé
• Evaluer les fonctionnalités proposées
au regard de leur contribution à l’objectif
• Analyser l’efficience fonctionnelle : mesure
du succès ou non des parcours clés
du service pour établir un mapping
du niveau d’efficience fonctionnelle
• Identifier les pages pas ou peu utilisées
• Analyser les pages avec un taux de rebond
élevé.
AUDIT
Ci-après une matrice d’efficience fonctionnelle pour positionner les fonctionnalités en
fonction de leur intérêt pour l’utilisateur et de leur impact sur l’environnement :

11. Etat des lieux des interfaces
• Niveau de performance et temps de chargement des pages d’un
site existant
• Mesure de l’empreinte environnementale d’un site avec
• Ecoindex.fr (proposé par greenit.fr)
• Poids et fréquence de mises à jour
• Analyse des notations et verbatims utilisateurs
11
Intégrer les critères d’impacts environnementaux
dans tous les outils de mesure de l’existant et d’observation terrain
AUDIT
01 02
Tech Design
Conseil
& Architecture
Appréhender les tendances,
l'univers concurrentiel et donner
un cap stratégique au projet.
01 02
Tech Design
Conseil
& Architecture
Appréhender les tendances,
l'univers concurrentiel et donner
un cap stratégique au projet.
01 02
Tech Design
Conseil
& Architecture
Appréhender les tendances,
l'univers concurrentiel et donner
un cap stratégique au projet.
Tech
01 02
Tech Design
Conseil
& Architecture
Appréhender les tendances,
l'univers concurrentiel et donner
un cap stratégique au projet.
is it happening?
Navigation
begins
Time to first
byte
The first non-
blank paint on
screen
Navigation has
successfully
started
Page’s primary
content is visible
Page looks
nearly done
Visually usable
and engagable
First input
Delay (RUM)
End of load
lifecycle
First
Contentful
Paint
First
Meaningful
Paint
Visually
ready
Fully
Loaded
First Paint Time to
Interactive
is it useful? is it usable?
< Speed Index >

12. 02 DÉFINITION
Challenger et prioriser pour viser l’essentiel
ACCÉDEZ À L’INTÉGRALITÉ DU LIVRE BLANC
EN TÉLÉCHARGEMENT GRATUIT
SUR NOTRE SITE !
TÉLÉCHARGER

13. 13
Challenger et prioriser le fonctionnel,
dans une démarche de sobriété
• Lister les correctifs à apporter rapidement en
application directe de l’audit
• Dessiner les contours du MVP sur lequel concentrer
les efforts (ou lister les fonctionnalités & parcours à
éliminer ou retravailler si le service existe déjà)
• Si possible, identifier des opportunités de nouveaux
services ou nouvelles fonctionnalités à impact
positif s’inscrivant dans une roadmap à plus long
terme
Cette phase de définition doit permettre de :
La réflexion autour d’un MVP et d’une roadmap permettra d’anticiper
les structures et ajouts à venir, et donc de prévoir des solutions souples
et modulables.
DÉFINITION

14. 14
Se fixer un « budget performance »
Il s’agit d’une mesure a respecter, par exemple
pour un site web :
- Poids page < 1 Mo
- Requêtes < 60 ressources (images, styles, scripts).
Exemple d’outil pour calculer un budget
performance : performancebudget.io.
Pour une app : le budget performance se traduit
par le poids de l’application, le volume de mises à jour
annuel et le nombre de requêtes réseau par an.
Un budget performance est un ensemble de contraintes que vous allez pouvoir
appliquer à vos pages en fonction de votre cible et du matériel dont elle dispose.
DÉFINITION

15. 03 IDÉATION
Imaginer des concepts systémiques
et les trier dans une démarche
de sobriété
ACCÉDEZ À L’INTÉGRALITÉ DU LIVRE BLANC
EN TÉLÉCHARGEMENT GRATUIT
SUR NOTRE SITE !
TÉLÉCHARGER

16. 16
Imaginer des concepts en ayant une approche systémique
& les trier à la lumière des choix techniques
Cette phase d’idéation se constitue
d’une réflexion approfondie
sur les concepts afin d’envisager toutes
leurs externalités. Les participants imagineront
des solutions et/ou des réponses
fonctionnelles intégrant autant que possible
une vision globale et systémique
des impacts du service sur l’environnement
et la société.
La phase de sélection des idées devra
également se faire au prisme des contraintes
techniques ou budgétaires fixées
préalablement.
Un exemple de User Journey faisant apparaître les
questionnements/impacts potentiels suite à la phase d’idéation
Persona, objectifs & périmètre
Actions, tâches
Emotions & points de frictions
Opportunités & points d’amélioration
Impact environnemental
Phases
PHASE 1 PHASE 2 PHASE 3 PHASE 4
IDÉATION

17. 04 DESIGN DES PARCOURS
& DES INTERFACES
Tester rapidement les idées pour économiser
les ressources. Concevoir en suivant les
guidelines d’éco-conception
ACCÉDEZ À L’INTÉGRALITÉ DU LIVRE BLANC
EN TÉLÉCHARGEMENT GRATUIT
SUR NOTRE SITE !
TÉLÉCHARGER

18. 18
Tester les nouveaux services ou fonctionnalités le plus rapidement
possible
Dans un souci d’économie de temps et de ressources, il sera important
de tester les pistes dans leur état minimal afin d’éviter
de surconsommer en énergie et d’y consacrer trop de budget...
Après avoir défini les objectifs du test et la typologie des réponses
attendues, il s’agira d’en choisir le format et le niveau
d’aboutissement.
Par exemple, pour valider son hypothèse
concernant l’importance d’une photo
de profil éditable, Le Bon Coin
a simplement ajouté un picto indiquant
cette possibilité sur le placeholder
de la photo. Moins de 1% des utilisateurs
ont cliqué sur le picto depuis
l’application mobile en production,
indiquant ainsi une faible appétence
à la fonctionnalité et faisant gagner
un temps précieux aux équipes.
DESIGNDESPARCOURS&INTERFACES

19. Il est préférable également :
- D’utiliser les polices déjà présentes en standard
sur les ordinateurs et ne nécessitant pas de
téléchargement,
- De privilégier l’usage des composants natifs
- De proposer un Dark mode
19
Design des interfaces suivant les guidelines & identification
des futurs KPI qui permettront de tracker la valeur
d’une fonctionnalité donnée
LES IMAGES
• Apportent t-elles réellement
de la valeur à l’utilisateur
• Contiennent-elles
des informations utiles ?
• Pourrait-on atteindre
le même impact
avec des images plus petites ?
• Est-il possible de réduire
les images non visibles
par les utilisateurs
(ex dans les carrousels) ?
• S’il s’agit de photos,
pourraient-elles être
remplacées par des images
vectorielles, avec le même
impact ?
LES VIDEOS
Un site avec vidéo peut être
2x plus lourd qu’un site
sans vidéo et générer plus de
charge CPU sur l’ordinateur
de l’utilisateur, donc plus
d’énergie consommée.
Il est nécessaire de se poser
les mêmes questions
que pour les images, retirer
les « auto-play » des vidéos
et proposer dans tous les cas
des formats courts.
LES ANIMATIONS
Elles doivent être
utilisées avec parcimonie
et être utiles, en facilitant
la compréhension
de l’utilisateur
sur un parcours,
une tâche à accomplir ou
en donnant un feedback
sur une action faite.
DESIGNDESPARCOURS&INTERFACES

20. DÉVELOPPEMENT
D’UN SITE WEB
Prendre en compte les impacts
environnementaux dès l’architecture technique
d’un site et tout au long de son développement
ACCÉDEZ À CETTE PARTIE
EN TÉLÉCHARGEANT GRATUITEMENT
LE LIVRE BLANC SUR NOTRE SITE !
TÉLÉCHARGER
05

21. 06 DÉVELOPPEMENT
D’UNE APP
Prendre en compte les impacts environnementaux
dès l’architecture technique d’une app et tout
au long de son développement
ACCÉDEZ À CETTE PARTIE
EN TÉLÉCHARGEANT GRATUITEMENT
LE LIVRE BLANC SUR NOTRE SITE !
TÉLÉCHARGER

22. CONCLUSION

23. L’éco-conception n’est pas
la responsabilité d’une personne
au sein de l’équipe
C’est une responsabilité collective
pour des services numériques
plus utiles et durables.

24. 24
CONCLUSION
Checklist
Audit
Définition
Idéation
Développement
Design des parcours
& interfaces
ACCÉDEZ À LA CHECKLIST COMPLÈTE
EN TÉLÉCHARGEMENT GRATUIT
SUR NOTRE SITE !
TÉLÉCHARGER

25. 25
Depuis plus de 10 ans, USERADGENTS,
l'agence digitale mobile first du groupe
HighCo, accompagne les entreprises
dans le design et le développement
de services digitaux sur-mesure :
applications mobiles, sites web, chat
& voice bots, expériences AR & VR,
dispositifs in-store.
Mobile First & User Centric
12 ans
60 experts
35 awards

26. Merci !
8 rue de la Rochefoucauld - 75009 Paris
01 77 75 65 90
www.useradgents.com