Support de la présentation Agile Nantes Mai 2016.
Présentation de notre démarche Agile/Lean UX et datavisualisation.
Issu de 6 ans d'activités et de retours d'expériences sur le sujet chez EXL Group/Talan.
10. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201611
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/
11. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201612
• L’aspect visuel : rendre l’ensemble plus
désirable et d’agir principalement sur nos
émotions
• Le squelette qui va définir la clarté et la
lisibilité
• La structure : l’enchaînement des pages
ou des écrans (Interaction/information
architecture)
• Les fonctionnalités de l’application ou
le contenu du site qui découlent
directement des objectifs
• La vision stratégique qui va nous
permettre de définir les besoins de
l’utilisateur et donc les objectifs
http://ux-fr.com/experience-utilisateur-definition/
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/
14. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201615
AGILE UX LEAN UX
Sprints
PO
Scrum
Kanban
Scrumaster
Intégrer l’UX et
l’agilité dans une
méthode
commune de
développement
Les équipes Agiles
et UX travaillent
ensemble
Application des
approches UX dans une
logique de
développement produit
(Build/Measure/Learn)
MVP
Boucle
d’apprentissage
Résolution de
problèmes
Validation
terrain
Inspiré du Lean Startup
Design intégré dans le
développement et le
business
Inspiré de https://studio.uxpin.com/blog/lean-ux-vs-agile-ux-is-there-a-difference/
Approche
itérative
centrée
utilisateur
20. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201621
Par Anthony Viviano, Ajay Revels and Ha Phan
Valider rapidement avec le client plus que sortir des produits sans valeur pour
l’utilisateur final
Conception collaborative plus que conception dans son coin
Résoudre les problèmes des utilisateurs plus que faire la prochaine
fonctionnalité “cool”
Mesurer des KPI’s plus que des métriques non définies
Utiliser les outils/pratiques appropriées plus que suivre le plan
Un design souple et léger plus que des wireframes lourds ou des specs
https://www.smashingmagazine.com/2014/01/lean-ux-manifesto-principle-driven-design/
22. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201623
Dans une logique informatique ou de prise de décision
Données Information Connaissance
Brute Interprétée pour
être assimilable
Reliée à un
contexte pour lui
donner du sens
Action
23. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201624
Renommé « datavisualisation » pour nos clients
ObjectifsOutils
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arboresence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
Inspiré du « Double Diamond » du Design Council (2005)
24. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI25
La Datavisualization est l’utilisation de
représentations graphiques de données,
interactives ou statiques pour amplifier les
processus cognitifs
(attention, compréhension, mémorisation)
MAI 2016
25. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI26
Démocratiser la
compréhension en
donnant du sens à des
données complexes
Faciliter la prise de
décision sur des
informations clés.
Capter et diriger
l’attention de
l’utilisateur
MAI 2016
29. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201630
La psychologie du dashboard
https://uxmag.com/articles/the-psychology-behind-information-dashboards
30. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201631
L’UX, un révélateur des résultats du big data
34. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201635
Renommée « datavisualisation » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
35. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201636
Renommée « datavisualisation » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
36. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201637
*Blueberrino est une boisson gazeuse à la myrtille avec une pulpe qui ne faut pas secouer ;-)
38. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201639
Liée à des cas d’usages
*Blueberrino est une boisson gazeuse à la myrtille avec une pulpe qui ne faut pas secouer ;-)
Combien ? Quand ?Où ?
39. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201640
C’est le processus actuel
1. Se coordonner avec mes commerciaux terrains
dans l’heure pour agir vite sur les magasins clés
2. Lancer les réapprovisionnements avec l’entrepôt
et la centrale
3. Rassurer mes interlocuteurs comptes-clés
40. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201641
Renommée « datavisualisation » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
41. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201642
Utilisateur ActionDécision
42. 43
Karim, 34 ans
Chef des Ventes Régionales (CVR)
Direction des ventes
Ses préoccupations au quotidien
• Les produits sont-ils tous en rayon ?
• Les ventes sont-elles meilleures
qu’avant ? (Année, mois, semaine)
• Les commerciaux se déplacent-ils
pour remonter des infos fraîches ?
Les décisions qu’il doit prendre
• Quel magasin privilégier par rapport
aux autres ?
• Quels produits privilégier par rapport
à d’autres ?
Rôle : coordonner l’activité des
responsables de secteurs
« Plus les produits
sont présents, plus les
clients sont contents »
Ce qui compte pour lui Moment et fréquence
d’utilisation du support
• Être le meilleur des CVR et le
savoir (si les autres peuvent le
savoir, c’est bien aussi ;-)
• Avoir la confiance de ses
clients et de ses collaborateurs
• Tous les matins, jours
ouvrés, à 8h
Support de lecture
43. 44
Nom, Âge
Activité
Service
Ses préoccupations au quotidien
•
•
•
Les décisions qu’il doit prendre
•
•
Rôle
« Citation »
Ses besoins / Ce qui compte Moment et fréquence
d’utilisation du support
•
•
•
•
•
•
Support de lecture
44. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201645
Nous croyons que les Chefs des Ventes Régionales ont
besoin d’un tableau de bord à double niveau (synthèse +
détails) pour savoir quel produit ils doivent privilégier.
Nous saurons que nous avons raison avec leur feedback
lors de l’atelier du 2 mai 2016
Nous croyons [faire ça] pour [ses personnes] pour atteindre [ce résultat]. Nous
saurons que nous avons [raison / tort] avec [du feedback qualitatif, quantitatif, des
changements de KPI].
http://www.ux-republic.com/integrer-lux-design-environnement-agile/
45. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201646
Renommée « datavisualisation » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
46. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI47
La chaîne complète
Compréhension MémorisationAttention
MAI 2016
47. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201648
Tentez de lire ce graphique
48. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201649
Et celui-là ? Qu’en pensez-vous ?
49. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201650
Synthèse : les attributs pré-attentifs (Gestalt)
50. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201651
Travail solitaire ou en atelier
AFFICHAGE
DES DONNÉES
ASPECTS
COGNITIFS
ERGONOMIE
& GRAPHISME
ARCHITECTURE
DE L’INFORMATION
.Attention
.Mémorisation
.Bruit visuel
.Couleurs
.Polices
.Ecran/papier
.Choix des
composants
.Validité
.Pertinence
.Objectifs
.Structure
.Mise en valeur
51. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201652
Une communication riche et efficace
52. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201653
Vous êtes
l’expert qui vient
résoudre le
problème
Vous êtes le
facilitateur qui
guide les choix
Vous êtes
l’animateur d’une
session collective
- Intelligence collective utilisée +
53. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201654
Voir les documentations éditeurs ou appeler l’expert de votre outil
Visualisations et
structure
Personnalisation
graphique
Interactions et
animations
• Visualisations classiques
• Visualisations avancées
• Bubble chart
• Sun burst
• Waterfall chart
• Sankey Diagram
• Cartes
• Intégration de
visualisations de librairies
externes (D3.js, cross
filters, …)
• Couleurs
• Modèles
• Une à une
• Icônes
• Polices
• Fond
• Images
• Définitions des
interactions
• Clic
• Survol
• Swipe
• Ajout d’animations
• Ouverture
• Fermeture
• Mise à jour
• Personnalisation des
tooltips
54. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201655
Bubble chart
55. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201656
Sankey diagram
56. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201657
Waterfall diagram
57. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201658
Sunburst diagram
58. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201659
Trouver le bon équilibre
Valeur utilisateur
Facilité de
maintenance
Effort de
conception
60. Option 1
Option 2
559 Appels
€ 7 500 Ventes
Appels
Ventes 7 500 €
559
Option 3
559 7 500
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI61
Quelle représentation choisir pour afficher les données ?
MAI 2016
61. Option 1
Option 2
+ simple et accès direct à la donnée
- Trop de distraction et occupation
d’espace inutile
- Échelle variable
- Invitation à comparer des valeurs
non liées
559 Appels
€ 7 500 Ventes
Appels
Ventes 7 500 €
559
Option 3
559 7 500
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI62
Quelle représentation choisir pour afficher les données ?
MAI 2016
63. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201666
Données quantitatives et précises et les comparer entre elles
: tableau
Identifier des tendances, des patterns ou des exceptions :
graphique
Identifier des corrélations : graphique ou tableau
64. Afficher les différents variables d’un jeu de données
Montrer comment une variable à une influence sur les autres
Mettre en valeur l’évolution sur une période
Montrer comment différents éléments créent un ensemble
Différencier les parties d’un ensemble
Montrer les valeurs les plus hautes et basses
Mettre en valeur les écarts
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201667
Comparaison
Composition
Distribution
Tendance
Relation
65. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201668
Afficher les différents variables d’un jeu de données
Source : http://labs.juiceanalytics.com/chartchooser/index.html
66. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201669
Montrer comment différents éléments créent un ensemble
Différencier les parties d’un ensemble
Source : http://labs.juiceanalytics.com/chartchooser/index.html
67. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201670
Montrer les valeurs les plus hautes et basses
Mettre en valeur les écarts
Source : http://labs.juiceanalytics.com/chartchooser/index.html
68. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201671
Mettre en valeur l’évolution sur une période
Source : http://labs.juiceanalytics.com/chartchooser/index.html
69. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201672
Montrer comment une variable à une influence sur les autres
Source : http://labs.juiceanalytics.com/chartchooser/index.html
70. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201673
http://labs.juiceanalytics.com/chartchooser/index.html
72. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201675
Si oui, vous savez suffisamment dessiner pour prototyper
73. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201676
• Validation des hypothèses, sans dépenser beaucoup de
moyens (temps ou argent)
• Stimulation de nouvelles idées
• Jetable (le droit à l’erreur élevé en principe de
fonctionnement)
• Déclenche la conversation et aligne les parties prenantes
74. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201677
Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
Objet de prototypage :
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
Objet de prototypage :
• Interactions fines
• Ergonomie finale
• Graphisme final
75. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201678
Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
Objet de prototypage :
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
Objet de prototypage :
• Interactions fines
• Ergonomie finale
• Graphisme final
77. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201680
Rapide &
évolutif
Simple Peu cher
Efficace Fun
http://www.kryzalid.net/journal/conception-d-interface-5-bonnes-raisons-de-ne-pas-oublier-le-papier/
78. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201681
- Fidélité +
https://www.linkedin.com/pulse/question-fidelity-wireframes-vs-prototypes-patrick-kuntz
83. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201686
Renommée « datavisualisation » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER
84. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201687
Le prototypage logiciel
Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
Objet de prototypage :
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
Objet de prototypage :
• Interactions fines
• Ergonomie finale
• Graphisme final
85. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201688
Et autres Omnigrafle, Axure, …
VisioInVision
87. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201690
Outil maîtrisé par beaucoup de personnes
Outil omniprésent dans les entreprises et organisations ! => tout le monde peut
modifier !
Interfaçage aisé avec Excel pour traiter des données
88. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201691
Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
Objet de prototypage :
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
Objet de prototypage :
• Interactions fines
• Ergonomie finale
• Graphisme final
89. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201692
SAP BI
Tableau Cognos
Qlikview
90. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201693
Pensez « scénarios d’usage »
91. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201694
Planter le
décor
Le
persona
en 2 mots
Ses
objectifs
Ses
actions
Le résultat
92. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201695
Chronologique/
Antéchronologique
Logique
(démonstration)
Spatiale Thématique
94. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201697
4 équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design
95. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201698
L’UX design et la visualisation de données, support au dialogue entre les équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design
96. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201699
UX design
105. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016110
Évaluation du Return On Time Invested
Une note de 1 à 5 à main levée
1 = « J’ai perdu mon temps »
2 = …
3 = « C’est neutre. Ca vaut le temps passé »
4 =
5 = « C’est génial, ces 6 heures en valent plus du double »
Puis annoncez un point positif et un point à améliorer
106. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016111
107. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016112
108. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016113
https://eagereyes.org/ : belle prise de recul sur la dataviz
http://www.informationisbeautiful.net/ : datajournalisme inspirant
http://www.coolinfographics.com/ : l’actualité des infographies et de la dataviz
http://www.datavisualization.fr/blog/ : L’actualité et des analyses en français
http://www.visualcomplexity.com/vc/ : catalogue d’exemples réels de dataviz
http://flowingdata.com/ : dataviz interactive
http://www.dailyinfographic.com/ : datavisualisation/infographie
http://www.visualisingdata.com/ : visualisations intéressantes
109. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016114
http://www.thefunctionalart.com/2012/10/recommended-readings-for-
infographics.html
http://www.excelcharts.com/blog/
http://www.viewtific.com/how-to-choose-the-right-chart-revised-version/
http://fellinlovewithdata.com/guides/how-to-become-a-data-visualization-
expert-a-recipe
110. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016115
https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?langu
age=fr