SlideShare une entreprise Scribd logo
Agile/Lean UX for data - datavisualisation - Agile Nantes
Responsable de l’offre Datavisualisation (UX data)
Consultant digital & innovation
chez EXL Group/Talan
Facilitateur & coach agile
#design thinking, #UX, #agilité
#transformations digitales, #dataviz
Matthieu Gioani
@Matt_Gio
MAI 2016AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI2
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20163
Chef de produit de Web Apps de visualisation de données
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20164
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20165
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20166
Agile/Lean UX for data - datavisualisation - Agile Nantes
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20169
10
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201611
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/
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/
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201613
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201614
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201616
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201617
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201618
http://www.chrisyin.com/images/spotify-mvp.png
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201619
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201620
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/
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201622
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
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)
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201627
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201628
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201629
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201630
La psychologie du dashboard
https://uxmag.com/articles/the-psychology-behind-information-dashboards
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201631
L’UX, un révélateur des résultats du big data
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201632
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201633
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201634
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
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
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 ;-)
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201638
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ù ?
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201642
Utilisateur ActionDécision
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
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
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/
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI47
La chaîne complète
Compréhension MémorisationAttention
MAI 2016
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201648
Tentez de lire ce graphique
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201649
Et celui-là ? Qu’en pensez-vous ?
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201650
Synthèse : les attributs pré-attentifs (Gestalt)
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201652
Une communication riche et efficace
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 +
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201655
Bubble chart
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201656
Sankey diagram
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201657
Waterfall diagram
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201658
Sunburst diagram
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201659
Trouver le bon équilibre
Valeur utilisateur
Facilité de
maintenance
Effort de
conception
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201660
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201665
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
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
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
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
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
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201673
http://labs.juiceanalytics.com/chartchooser/index.html
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201674
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201675
Si oui, vous savez suffisamment dessiner pour prototyper
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
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201679
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/
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201682
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201683
Sourec : http://fr.slideshare.net/anotheruxguy/paper-prototyping-workshop
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201684
POP - Prototyping on Paper (AppStore & Play Store)
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201685
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201688
Et autres Omnigrafle, Axure, …
VisioInVision
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201689
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201692
SAP BI
Tableau Cognos
Qlikview
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201693
Pensez « scénarios d’usage »
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201695
Chronologique/
Antéchronologique
Logique
(démonstration)
Spatiale Thématique
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201696
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
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201699
UX design
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016102
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016103
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016104
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016105
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016106
Agile/Lean UX for data - datavisualisation - Agile Nantes
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016108
Matthieu Gioani  Responsable de l’offre Datavisualisation
matthieu.gioani@gmail.com  @Matt_Gio
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
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016111
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016112
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
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
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

Contenu connexe

Tendances

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
UX REPUBLIC
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
Net Design
 
Le rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperienceLe rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperience
UX REPUBLIC
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
Thiga
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
Catherine Verfaillie
 
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPAMutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
Christophe Cotin Valois
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
Guillaume Abel
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entreprise
UX REPUBLIC
 
La vérité sur les utilisateurs
La vérité sur les utilisateursLa vérité sur les utilisateurs
La vérité sur les utilisateurs
UX REPUBLIC
 
Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative Technologie
UX REPUBLIC
 
Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners  Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners
Matthieu Gioani
 
Thiga Digital Product Management Framework
Thiga Digital Product Management FrameworkThiga Digital Product Management Framework
Thiga Digital Product Management Framework
Thiga
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
Idean France
 
SEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublicSEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublic
UX REPUBLIC
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Microsoft
 
Order to cash Agile
Order to cash AgileOrder to cash Agile
Order to cash Agile
Yannick Quenec'hdu
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublic
UX REPUBLIC
 
UX made in China @UXRepublic
UX made in China @UXRepublicUX made in China @UXRepublic
UX made in China @UXRepublic
UX REPUBLIC
 
Comment opérer votre transformation mobile ? - aux AppDays
Comment opérer votre transformation mobile ? - aux AppDaysComment opérer votre transformation mobile ? - aux AppDays
Comment opérer votre transformation mobile ? - aux AppDays
Alexandre Jubien
 
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liutSauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
Benjamin Richy
 

Tendances (20)

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
 
Le rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperienceLe rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperience
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPAMutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entreprise
 
La vérité sur les utilisateurs
La vérité sur les utilisateursLa vérité sur les utilisateurs
La vérité sur les utilisateurs
 
Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative Technologie
 
Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners  Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners
 
Thiga Digital Product Management Framework
Thiga Digital Product Management FrameworkThiga Digital Product Management Framework
Thiga Digital Product Management Framework
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
 
SEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublicSEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublic
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
 
Order to cash Agile
Order to cash AgileOrder to cash Agile
Order to cash Agile
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublic
 
UX made in China @UXRepublic
UX made in China @UXRepublicUX made in China @UXRepublic
UX made in China @UXRepublic
 
Comment opérer votre transformation mobile ? - aux AppDays
Comment opérer votre transformation mobile ? - aux AppDaysComment opérer votre transformation mobile ? - aux AppDays
Comment opérer votre transformation mobile ? - aux AppDays
 
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liutSauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
Sauvez la princesse avec un design sprint Digital SummR17 - b.richy - f.liut
 

Similaire à Agile/Lean UX for data - datavisualisation - Agile Nantes

Design Sprint - DevFest Nantes 2016
Design Sprint - DevFest Nantes 2016Design Sprint - DevFest Nantes 2016
Design Sprint - DevFest Nantes 2016
Matthieu Gioani
 
Utilisation du big data en entreprise
Utilisation du big data en entrepriseUtilisation du big data en entreprise
Utilisation du big data en entreprise
Pierrick Thébault
 
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
Netwave
 
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & AkeneoSéminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
Smile I.T is open
 
Data Breakfast : La transformation digitale à l'heure de la data
Data Breakfast : La transformation digitale à l'heure de la dataData Breakfast : La transformation digitale à l'heure de la data
Data Breakfast : La transformation digitale à l'heure de la data
Converteo
 
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
Adobe
 
Présentation So-youz
Présentation So-youzPrésentation So-youz
Présentation So-youz
So-youz
 
Power Bi et Sage
Power Bi et SagePower Bi et Sage
Power Bi et Sage
Jean Michel Bonfanti
 
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
SEO CAMP
 
Agile nantes leanstartup_20160323
Agile nantes leanstartup_20160323Agile nantes leanstartup_20160323
Agile nantes leanstartup_20160323
Association Agile Nantes
 
Atelier Scribing pour le groupe Business Analysis de l'ADIRA
Atelier Scribing pour le groupe Business Analysis de l'ADIRAAtelier Scribing pour le groupe Business Analysis de l'ADIRA
Atelier Scribing pour le groupe Business Analysis de l'ADIRA
Annick Rimbod-Pethiod, CBAP
 
CV | Chef de projet innovation & digital - Consultante en transformation digi...
CV | Chef de projet innovation & digital - Consultante en transformation digi...CV | Chef de projet innovation & digital - Consultante en transformation digi...
CV | Chef de projet innovation & digital - Consultante en transformation digi...
Lauraline MANIGLIER
 
Ux Virtua - ecom 2016 -Geneva
Ux Virtua - ecom 2016 -GenevaUx Virtua - ecom 2016 -Geneva
Ux Virtua - ecom 2016 -Geneva
Rémi Brocherez
 
Bien utiliser Google Analytics
Bien utiliser Google AnalyticsBien utiliser Google Analytics
Bien utiliser Google Analytics
Matthieu Tran-Van
 
Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?
Jérôme DIDAT
 
IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???
Jérôme DIDAT
 
Hippocampe right management-24-11-2016
Hippocampe right management-24-11-2016Hippocampe right management-24-11-2016
Hippocampe right management-24-11-2016
Pascale GEMIGNANI
 
L'art de la visualisation pour une meilleure compréhension des données
L'art de la visualisation pour une meilleure compréhension des donnéesL'art de la visualisation pour une meilleure compréhension des données
L'art de la visualisation pour une meilleure compréhension des données
Minitab, LLC
 
Conference Marketing automation, l’accélérateur de performance
Conference Marketing automation, l’accélérateur de performanceConference Marketing automation, l’accélérateur de performance
Conference Marketing automation, l’accélérateur de performance
Objectif Papillon
 

Similaire à Agile/Lean UX for data - datavisualisation - Agile Nantes (20)

Design Sprint - DevFest Nantes 2016
Design Sprint - DevFest Nantes 2016Design Sprint - DevFest Nantes 2016
Design Sprint - DevFest Nantes 2016
 
Utilisation du big data en entreprise
Utilisation du big data en entrepriseUtilisation du big data en entreprise
Utilisation du big data en entreprise
 
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
E-commerce Paris 2013: Comment augmenter son taux de conversion de 10% grâce ...
 
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & AkeneoSéminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
Séminaire E-commerce "J'ai mal à mon catalogue" by Smile & Akeneo
 
Data Breakfast : La transformation digitale à l'heure de la data
Data Breakfast : La transformation digitale à l'heure de la dataData Breakfast : La transformation digitale à l'heure de la data
Data Breakfast : La transformation digitale à l'heure de la data
 
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
Adobe Education Leadership Forum in Paris, 19 June 2015 #AdobeEDU2015
 
Présentation So-youz
Présentation So-youzPrésentation So-youz
Présentation So-youz
 
Power Bi et Sage
Power Bi et SagePower Bi et Sage
Power Bi et Sage
 
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
Google Analytics App+web - Sébastien Monnier et Rihab Zarrai - SEO Camp'us Pa...
 
Agile nantes leanstartup_20160323
Agile nantes leanstartup_20160323Agile nantes leanstartup_20160323
Agile nantes leanstartup_20160323
 
Atelier Scribing pour le groupe Business Analysis de l'ADIRA
Atelier Scribing pour le groupe Business Analysis de l'ADIRAAtelier Scribing pour le groupe Business Analysis de l'ADIRA
Atelier Scribing pour le groupe Business Analysis de l'ADIRA
 
CV | Chef de projet innovation & digital - Consultante en transformation digi...
CV | Chef de projet innovation & digital - Consultante en transformation digi...CV | Chef de projet innovation & digital - Consultante en transformation digi...
CV | Chef de projet innovation & digital - Consultante en transformation digi...
 
Ux Virtua - ecom 2016 -Geneva
Ux Virtua - ecom 2016 -GenevaUx Virtua - ecom 2016 -Geneva
Ux Virtua - ecom 2016 -Geneva
 
Bien utiliser Google Analytics
Bien utiliser Google AnalyticsBien utiliser Google Analytics
Bien utiliser Google Analytics
 
Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?
 
IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???
 
Hippocampe right management-24-11-2016
Hippocampe right management-24-11-2016Hippocampe right management-24-11-2016
Hippocampe right management-24-11-2016
 
CV Fabrice
CV FabriceCV Fabrice
CV Fabrice
 
L'art de la visualisation pour une meilleure compréhension des données
L'art de la visualisation pour une meilleure compréhension des donnéesL'art de la visualisation pour une meilleure compréhension des données
L'art de la visualisation pour une meilleure compréhension des données
 
Conference Marketing automation, l’accélérateur de performance
Conference Marketing automation, l’accélérateur de performanceConference Marketing automation, l’accélérateur de performance
Conference Marketing automation, l’accélérateur de performance
 

Agile/Lean UX for data - datavisualisation - Agile Nantes

  • 2. Responsable de l’offre Datavisualisation (UX data) Consultant digital & innovation chez EXL Group/Talan Facilitateur & coach agile #design thinking, #UX, #agilité #transformations digitales, #dataviz Matthieu Gioani @Matt_Gio MAI 2016AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI2
  • 3. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20163 Chef de produit de Web Apps de visualisation de données
  • 4. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20164
  • 5. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20165
  • 6. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20166
  • 8. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20169
  • 9. 10
  • 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/
  • 12. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201613
  • 13. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201614
  • 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
  • 15. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201616
  • 16. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201617
  • 17. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201618 http://www.chrisyin.com/images/spotify-mvp.png
  • 18. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201619
  • 19. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201620
  • 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/
  • 21. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201622
  • 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
  • 26. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201627
  • 27. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201628
  • 28. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201629
  • 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
  • 31. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201632
  • 32. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201633
  • 33. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201634
  • 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 ;-)
  • 37. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201638
  • 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
  • 59. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201660
  • 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
  • 62. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201665
  • 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
  • 71. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201674
  • 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
  • 76. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201679
  • 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
  • 79. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201682
  • 80. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201683 Sourec : http://fr.slideshare.net/anotheruxguy/paper-prototyping-workshop
  • 81. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201684 POP - Prototyping on Paper (AppStore & Play Store)
  • 82. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201685
  • 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
  • 86. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201689
  • 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
  • 93. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201696
  • 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
  • 97. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016102
  • 98. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016103
  • 99. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016104
  • 100. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016105
  • 101. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016106
  • 103. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016108
  • 104. Matthieu Gioani  Responsable de l’offre Datavisualisation matthieu.gioani@gmail.com  @Matt_Gio
  • 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