ATAM 2022 - Concevoir et réaliser un produit responsable dans une démarche agile

There is a better way
1
Un grand merci à nos sponsors et partenaires
@espritagile #atam22
http://atmrs.esprit-agile.com

View Slide

2
OCTO Part of Accenture © 2022 - All rights reserved
Concevoir et réaliser un produit
responsable dans une démarche agile
OCTO Technology
Agile Tour Aix-Marseille
10 Novembre 2022

View Slide

3
La raison de votre présence avec nous :
A : Je découvre le sujet
B : Je souhaite approfondir
mes connaissances
C : Les autres conférences
ne me tentaient pas
D : La réponse D

View Slide

4
● Orienter les choix
techniques et archi
● Faire respecter les
exigences de qualité
technique du produit
● Superviser la conception
● Piloter et prioriser les
arbitrages sur le produit
● Spécifier les besoins
● Effectuer les tests
fonctionnels
● Recueillir et analyser les
besoins utilisateurs
● Contribuer à la priorisation
des fonctionnalités
● Concevoir et formaliser les
parcours utilisateurs les plus
pertinents possibles
Lina Yahi
Product Owner
[email protected]
Joy Desdevises
UX-UI Designer
[email protected]
Florian Leroy
Tech Lead
[email protected]

View Slide

5
Produit web
Ce qui nous a réunit

View Slide

6
Produit web
Reprise d’un site
avec un
nouveau départ

View Slide

7
Produit web
Reprise d’un site
avec un
nouveau départ
Optimisation
ergonomique
des pages et
parcours

View Slide

8
Produit web
Reprise d’un site
avec un
nouveau départ
Produit ayant du
sens pour nos
utilisateurs
Optimisation
ergonomique
des pages et
parcours

View Slide

9
Produit web
Reprise d’un site
avec un
nouveau départ
Produit ayant du
sens pour nos
utilisateurs
Optimisation
ergonomique
des pages et
parcours
Équipe
sensibilisée aux
produits
responsables

View Slide

10
OCTO s’engage
vers le Numérique Responsable
Eco-conçu Inclusif et
accessible
Respect de la
vie privée

View Slide

11
Respect de la vie
privée
01

View Slide

12
Un site vous demande votre consentement pour le dépôt de cookies
Et il n’a pas de bouton pour tout refuser d’un coup…
A : J’accepte tout
B : Je refuse chaque
cookie unitairement
C : Je quitte le site D : La réponse D

View Slide

13
Un droit et besoin
utilisateur bien
encadré

View Slide

14
Les données à caractère personnel
Données personnelles
● Nominative ou qui se rattache à
une personne
● Permettent de l’identifier
directement ou indirectement.
● Régies par le RGPD, leur transfert et
leur hébergement hors UE est
restreint et implique un avenant au
contrat
Données sensibles
● Toute donnée pouvant entrainer une
discrimination : origine ethnique,
orientation sexuelle, données de
santé
● Très régulées, toute collecte ou
traitement de ces données suppose
une analyse d’impact et des
mesures de sécurité spécifiques.
● Leur transfert hors UE est également
très strictement contrôlé

View Slide

15
๏ Quelles sont les données jugées nécessaires ?
๏ Quels traitements allez-vous appliquer ?
(enregistrement, conservation, transmission…)
๏ Pour quelle finalité de traitement (objectif) ?
๏ Se renseigner sur les contraintes légales liées
aux données soumises à une réglementation
spécifique.
๏ Avez-vous identifié les responsables de
traitement ?
๏ Comment comptez-vous tracer et protéger
l’accès aux données ?
๏ Comment allez-vous pseudonymiser ou
anonymiser les données ?
Toujours challenger le besoin de récolter une
donnée par rapport à l’utilisation finale.
Identifier les données collectées

View Slide

16
๏ Consentement de l’utilisateur
๏ Informer sur les données récoltées et la finalité
de traitement
๏ Donner la possibilité de modifier ses données
personnelles
๏ Donner la possibilité de supprimer ses données
personnelles
๏ Donner la possibilité de recevoir ses données
personnelles en format structuré
Point d’attention
Respecter le droit des personnes

View Slide

17
Respect de la
vie privée en
design

View Slide

18
Théorie des Nudges
Le respect de la vie privée en design

View Slide

19
Théorie des Nudges
incitation douce qui va modifier
le comportement d’un
individu/consommateur

View Slide

20
Exemples de nudges
Passage piéton en Islande

View Slide

21
Exemples de nudges
Passage piéton en Islande Escalier piano à côté des
escalators

View Slide

22
Théorie des Nudges
Light Pattern

View Slide

23
Théorie des Nudges
Light Pattern
Dark Pattern

View Slide

24
Focus sur le bandeau de cookies

View Slide

25

View Slide

26

View Slide

27
Nos convictions : synthèse des bonnes pratiques
Le RGPD n'est pas qu'une affaire de juristes, elle est le fruit de la
collaboration entre les équipes technique et juridique
RGPD

View Slide

28
Bien expliciter le besoin dès la
la phase de cadrage
RGPD

View Slide

29
Les mises en évidence :
boutons ou autre contenu
la phase de cadrage
RGPD

View Slide

30
La liberté d’action
la phase de cadrage
RGPD

View Slide

31
La transparence
La liberté d’action
la phase de cadrage
RGPD

View Slide

32
L’écoconception
numérique
02

View Slide

33
En 2025, l’empreinte carbone du numérique devrait…
A : Doubler celle du
transport aérien
B : Égaler celle du trafic
automobile mondial
C : Dépasser celle de
l’industrie du ciment
D : A, B et C donc D

View Slide

34
L’empreinte carbone en hypercroissance
10%
Mode
7%
8%
Industrie du ciment
3,8%
Numérique
9%
Industrie automobile
4%
Transport aérien
2020 2025
Sources : Bordage et al., 2019 ; Kaizen+Zenika, 2020
Part de responsabilité des émissions de gaz à effet de serre

View Slide

35
La fabrication est plus impactante que l’usage
Part du coût en ressources de terminaux
fabrication usage
smartphone 85%
35 - 45 AR Paris-Brest en TGV
15%
laptop 75%
250 - 500 AR Paris-Brest en TGV
25%
Source : GreenIT.fr

View Slide

36
Comment réduire
l’empreinte carbone de
nos produits numériques ?

View Slide

37
Promouvoir un numérique
sobre
Grâce aux composants
réutilisables, la mission des
designers et développeurs
est plus rapide et facile.
Sobriété et efficience
Outils au service de l’éco-conception numérique
Se recentrer sur les besoins
primaires utilisateur
Éviter le développement et
la maintenance de
fonctionnalités ou services
sans usage en se
concentrant sur l’essentiel.
Green it
Assurer un développement
sobre et l’efficience des
fonctionnalités.
Optimiser l’expérience en
réduisant le temps d’usage.

View Slide

38
2.1
Focus sur les images

View Slide

39
Est-ce que la photo a un sens, une utilité, une valeur informative ?

View Slide

40
NON

View Slide

41
Remplacer par
une illustration
NON
Supprimer

View Slide

42
OUI (ou souhaitée quand même)
Remplacer par
une illustration
NON
Supprimer

View Slide

43
Remplacer par
une illustration
NON
Supprimer
La télécharger à la taille minimale nécessaire

View Slide

44
Remplacer par
une illustration
NON
Supprimer
La télécharger ou la convertir au format WebP

View Slide

45
Remplacer par
une illustration
NON
Supprimer
Retravailler les trames, la qualité, les couleurs pour
réduire sa taille au maximum (exemple :
Squoosh.app)

View Slide

46
Remplacer par
une illustration
NON
Supprimer
Retravailler les trames, la qualité, les couleurs pour
réduire sa taille au maximum (exemple :
Squoosh.app)
Pour les logos : format png

View Slide

47
2.2
La quantité et qualité
d’informations

View Slide

48
Adoptez une approche mobile first

View Slide

49
“Sélection naturelle” des informations à afficher

View Slide

50
๏ Supprimer la programmation superflue
Point d’attention

View Slide

51
๏ Permettre un accès rapide à l’information
Point d’attention

View Slide

52
๏ Limiter voire supprimer les grandes images ou
fonctions inutiles
Point d’attention

View Slide

53
fonctions inutiles
๏ Développer un code source le plus léger
possible
Point d’attention

View Slide

54
fonctions inutiles
๏ Développer un code source le plus léger
possible
๏ proposer des contenus clairs, faciles et rapides
à comprendre
Point d’attention

View Slide

55
Exemple : optimisation d’une page d’accueil en mobile first

View Slide

56
? ?
Image

View Slide

57
Quantité
d’information

View Slide

58
Quantité
d’information

View Slide

59
Quantité
d’information

View Slide

60
Quantité
d’information

View Slide

61
Quantité
d’information

View Slide

62

View Slide

63
2.3
Technique et
développement

View Slide

64
Une application web, c’est…
Des échanges
Des calculs dans
le navigateur
Une
application
web impacte
la conso
électrique et
la durée de
vie du
terminal

View Slide

65
Optimiser toutes les
ressources
Réduire au maximum la
taille des cookies
Minifier et compresser
les assets
Supprimer le code mort
et les ressources inutiles
Réduire la
quantité de
données
transférées
Levier d’action n°1

View Slide

66
Optimisation des assets
.avif
50% plus petit
que .jpeg
.webp
30% plus petit
que .jpeg
.jpeg
format le MOINS impactant format le PLUS impactant
Support
navigateur
Transparence Sans perte
.avif 73,4% ✅ ✅
.webp 97,23% ✅ ✅
Format d’images

View Slide

67
Optimisation des assets
Font subsetting, exemple avec la police d’écriture Century Gothic
Nettoyage des
langues
Nettoyage des
caractères
Compression
134 ko
WOFF2 + WOFF
20 ko 24 ko
36 ko
48 ko

View Slide

68
Mettre en place du lazy
loading pour les images, le
CSS et les scripts
Limiter les
polices d’écriture
Trouver le bon compromis
entre la taille et le nombre
d’assets à télécharger
Utiliser le cache
navigateur
Réduire le
nombre de
requêtes
aux assets

View Slide

69
Optimisation des requêtes
Focus APIs
Utiliser le cache et les
CDNs
Stocker en local
Service worker
Web storage API
IndexedDb
Ajouter un
back for front
Minimiser les
redirections
Préférer les saisies
assistées en offline

View Slide

70
Importer les modules à la
demande
Animer l’UI avec les bons
attributs d’animation
Valider les pages web via
le W3C markup et trouver
le bon compromis de
rétrocompatibilité
Ajuster la taille de l’image
et éviter le
redimensionnement à
l’affichage
Réduire les
traitements
côté
navigateur

View Slide

71
2.4
S’auditer régulièrement

View Slide

72
La mesure instanée
Green IT Analysis
Outil de sensibilisation
Calcul de l’éco-index
Calcul d’empreinte (GES, eau)
Google Lighthouse
Orienté performances
Mesure la performance,
l’accessibilité, le respect des
bonnes pratiques, le SEO et les
capacités PWA

View Slide

73
PÉRIMÈTRE
● Analyse d’une page web et d’un parcours utilisateur
● Indicateurs mesurés : Taille du DOM HTML, nombre de requêtes,
poids des pages
● Indicateurs environnementaux : Gaz à effet de serre, eau
● Vérification de 24 bonnes pratiques
AVANTAGES
● Rapide à utiliser (quelques minutes suffisent)
● Facile de s’auto-évaluer : un site éco-conçu c’est A à B voir C
POINTS D’ATTENTION
● Chaque croix n’est pas équivalente en gain
● Bon outil mais mesure instable suivant les navigateurs
GreenIT Analysis

View Slide

74
Le score GreenIT au même titre que les indicateurs de suivi
“classiques”

View Slide

75
Partager son score en Sprint
Review pour sensibiliser au
sujet.

View Slide

76
2.5
Pour résumer

View Slide

77
UX, DEV,
PO :
garants d’une
conception sobre
et raisonnée
Le mieux qu’on puisse faire c’est de ne rien faire
Au quotidien : priorisation, pousser les réflexions notamment avec la data…
UX, DEV,
PO :
garants d’une
conception sobre
et raisonnée

View Slide

78
Mettre le moins d’images possible
et privilégier les formats moins
coûteux en énergie UX, DEV,
PO :
garants d’une
conception sobre
et raisonnée

View Slide

79
Limiter le nombre d’informations
et s’assurer de la pertinence de
chacune
PO :
garants d’une
conception sobre
et raisonnée

View Slide

80
chacune
Réduire la charge navigateur et
limiter les échanges
PO :
garants d’une
conception sobre
et raisonnée

View Slide

81
chacune
Sensibiliser le client et l’équipe,
l’éco-conception a sa place
dans les rituels
Réduire la charge navigateur et
limiter les échanges
PO :
garants d’une
conception sobre
et raisonnée

View Slide

82
L’accessibilité
03

View Slide

83
Quel est le pourcentage de personnes concernées par l’accessibilité ?
A : Entre 20 et 40% B : Entre 12 et 15%
C : Environ 8% D : La réponse D

View Slide

84
84
● 20 % de la population française est concernée par
le handicap (permanent) et cela monte à 40 % en
prenant en compte les situations de handicap
temporaires, soit 28 millions de français et
françaises.
● Avec le vieillissement de la population ces chiffres
sont en hausse (1 français sur 3 aura plus de 60 ans
en 2035).
● Et c’est sans compter les situations de handicap
situationnel ou liées à l’équipement numérique non
optimal…
20 à 40 %
des utilisateurs/trices
ont un accès difficile,
partiel ou impossible
aux informations
et services en ligne.
Sources : OCIRP / APF / INSEE / OMS

View Slide

85
Mais qui sont ces utilisateurs ?
Marie a roulé son siège
sous la table et utilise
le numérique sans difficulté.
Lyès a une tendinite
au poignet : il ne peut plus
utiliser sa souris.
Radka ne parle pas encore
bien français : elle a besoin
de textes simples.
Olivier est daltonien :
il ne perçoit pas toutes
les couleurs.

View Slide

86
L’accessibilité,
c’est pouvoir utiliser
un service numérique,
quelle que soit
sa façon d’y accéder.
C’est un droit fondamental.
Et une obligation légale en France depuis la loi de 2005 pour l'égalité des droits et des chances.
Si l’accessibilité est essentielle pour certain(e)s,
elle apporte du confort à tout le monde.

View Slide

87
Perte
d’audience
Surcoût
et dette
Mauvaise
réputation
Risque
juridique
Pour en savoir plus : https://blog.octo.com/accessibilite-faites-ce-minimum-pour-derisquer/
Risques du manque d’accessibilité

View Slide

88
88
La dette technique d’accessibilité grossit tôt et vite.
On ne corrige pas
l’accessibilité
numérique :
on fabrique accessible.
Risque de l’approche corrective

View Slide

89
Approche corrective Conception accessible

View Slide

90
Erreurs d’accessibilité courantes
Détectées par des tests automatisés
Étude WebAIM de 2022 sur 1 million de sites web
Source : https://webaim.org/projects/million/
Contraste
faible
Alternative
textuelle
manquante
Lien vide Étiquette de
champ
manquante
Langue du
document
manquante
Bouton vide

View Slide

91
3.1
Au quotidien

View Slide

92
Intégrer l’accessibilité à son quotidien
BACKLOG
priorisé
US en
rédaction
US
à estimer
US
prête
DEV
TO DO
DEV
DOING
DEV
REVIEW
RECETTE
PO
DONE
DOD
- Tests d’accessibilité
automatisés avec Lighthouse
- …
DOD
validés par le PO
- …
DOD
DOD
DOD
DOD
- Règles de gestion et tests
d’acceptance liés à
l’accessibilité sont rédigés
dans l’US
- …
DOD
- Estimer l’effort nécessaire
pour que la fonctionnalité
soit accessible
-...
DOD
- Revue des maquettes
(contraste..)
- …
UX/UI
REVIEW
DOD
validés par l’UX
- …
DOD
A METTRE
EN PROD

View Slide

93
Titre des pages
Alternatives
textuelles Hiérarchie des titres
Contrastes suffisants Zoom du texte Navigation clavier
Utilisabilité des
formulaires
Animations
Alternative aux
medias Structure de base
Les 10 critères d’acceptance à ajouter à chaque US
Voir en ligne : Easy Checks – A First Review of Web Accessibility, by Web Accessibility Initiative (WAI) : https://www.w3.org/WAI/test-evaluate/preliminary/

View Slide

94
Outils de tests d’accessibilité
Tests automatisables
Seuls 25 % environ des tests
d’accessibilité sont
automatisables. Le reste doit
être vérifié humainement, par
des tests manuels.
WAVE
extension
navigateur
& API
Tanaguru
engine
service
auto-hébergé
& web service
Web
developer
extension
navigateur

View Slide

95
Score RGAA
60% dès le
premier audit

View Slide

96
3.2
Focus sur les
contrastes

View Slide

97
Vérifier les contrastes dès la phase de prototypage
Colour contrast analyser (CCA)

View Slide

98

View Slide

99

View Slide

100

View Slide

101
3.3
Pour résumer

View Slide

102
L’accessibilité ne concerne pas que les personnes
en situation de handicap visible
Accessibilité
Concevoir pour
tous

View Slide

103
Concevoir dès le début,
pour tous les utilisateurs
Accessibilité
Concevoir pour
tous

View Slide

104
On ne corrige pas l’accessibilité,
on fabrique accessible
Accessibilité
Concevoir pour
tous

View Slide

105
Adopter une démarche
d’amélioration progressive
en agilité
Accessibilité
Concevoir pour
tous

View Slide

106
L’accessibilité est un travail d’
équipe impliquant
tous les profils
Adopter une démarche
d’amélioration progressive
en agilité
Accessibilité
Concevoir pour
tous

View Slide

107
Conclusion
4

View Slide

108
Concevoir un produit responsable
Tous les profils sont concernés : c’est un travail d’équipe
Dev
Bonnes pratiques
de
développement
PO
chef d’orchestre
priorise et recette
les fonctionnalités
Commanditaire
Donne le cap sur les
priorités
Designer
Design inclusif,
respectueux des
utilisateurs

View Slide

109
Pour approfondir
NOS RÉFÉRENCES
Atelier 2 tonnes
https://app.2tonnes.org/participant/carbonfootprint
Digital technologies in Europe: an
environmental life cycle approach.
Bordage, F., de Montenay, L., Bengassem, S.,
Delmas-Orgelet, J., Domon, F., Prunel, D., Vateau, C.
et Lees Perasso, E. GreenIT.fr.2021.
Empreinte environnementale du numérique
mondial, GreenIT.fr
Bordage et al.
Numérique responsable : l’informatique
peut-elle être écologique ?
Kaizen + Zenika (2020)
NOS FORMATIONS
Informations et inscription sur
https://www.octo.academy/
(Éco)conception responsable de service
numérique
Tous profils
Piloter la conception et la réalisation de
produits et services responsables
Product Owner, Chef de projet
Masterclass Digital Kaizen
Dirigeants, managers

View Slide

110

View Slide

111
https://roti.express/r/atam2022-25
Merci !
Un petit ROTI ?

View Slide

112
Un grand merci à nos sponsors et partenaires
@espritagile #atam22
http://atmrs.esprit-agile.com

View Slide

ATAM 2022 - Concevoir et réaliser un produit responsable dans une démarche agile

ATAM 2022 - Concevoir et réaliser un produit responsable dans une démarche agile

Esprit Agile

More Decks by Esprit Agile

Featured

Transcript