Responsable de l’offre Datavisualisation (UX data)
Consultant digital & innovation
chez EXL Group/Talan
Facilitateur & coa...
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 - 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-de...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201612
• L’aspect visuel : rendre l’ensemble plus
désirable et...
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...
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 ra...
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
D...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201624
Renommé « datavisualisation » pour nos clients
Objectif...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI25
La Datavisualization est l’utilisation de
représentations graphi...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI26
Démocratiser la
compréhension en
donnant du sens à des
données c...
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/...
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
Objecti...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201636
Renommée « datavisualisation » pour nos clients
Objecti...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201637
*Blueberrino est une boisson gazeuse à la myrtille avec...
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 ga...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201640
C’est le processus actuel
1. Se coordonner avec mes com...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201641
Renommée « datavisualisation » pour nos clients
Objecti...
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...
44
Nom, Âge
Activité
Service
Ses préoccupations au quotidien
•
•
•
Les décisions qu’il doit prendre
•
•
Rôle
« Citation »
...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201645
Nous croyons que les Chefs des Ventes Régionales ont
be...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201646
Renommée « datavisualisation » pour nos clients
Objecti...
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
A...
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 ...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201654
Voir les documentations éditeurs ou appeler l’expert de...
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...
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 NA...
Option 1
Option 2
+ simple et accès direct à la donnée
- Trop de distraction et occupation
d’espace inutile
- Échelle vari...
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...
Afficher les différents variables d’un jeu de données
Montrer comment une variable à une influence sur les autres
Mettre e...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201668
Afficher les différents variables d’un jeu de données
S...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201669
Montrer comment différents éléments créent un ensemble
...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201670
Montrer les valeurs les plus hautes et basses
Mettre en...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201671
Mettre en valeur l’évolution sur une période
Source : h...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201672
Montrer comment une variable à une influence sur les au...
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
...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201677
Prototypage
papier
Prototypage
logiciel
Outil final
Obj...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201678
Prototypage
papier
Prototypage
logiciel
Outil final
Obj...
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://w...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201681
- Fidélité +
https://www.linkedin.com/pulse/question-fi...
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-pr...
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
Objecti...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201687
Le prototypage logiciel
Prototypage
papier
Prototypage
...
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és...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201691
Prototypage
papier
Prototypage
logiciel
Outil final
Obj...
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...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201695
Chronologique/
Antéchronologique
Logique
(démonstration...
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 P...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201698
L’UX design et la visualisation de données, support au ...
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 - 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 à ...
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 d...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016114
http://www.thefunctionalart.com/2012/10/recommended-re...
AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016115
https://www.ted.com/talks/david_mccandless_the_beauty_...
Agile/Lean UX for data - datavisualisation - Agile Nantes
Agile/Lean UX for data - datavisualisation - Agile Nantes
Agile/Lean UX for data - datavisualisation - Agile Nantes
Prochain SlideShare
Chargement dans…5
×

Agile/Lean UX for data - datavisualisation - Agile Nantes

915 vues

Publié le

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.

Publié dans : Business
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
915
Sur SlideShare
0
Issues des intégrations
0
Intégrations
32
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Agile/Lean UX for data - datavisualisation - Agile Nantes

  1. 1. 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
  2. 2. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20163 Chef de produit de Web Apps de visualisation de données
  3. 3. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20164
  4. 4. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20165
  5. 5. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20166
  6. 6. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 20169
  7. 7. 10
  8. 8. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201611 http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/
  9. 9. 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/
  10. 10. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201613
  11. 11. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201614
  12. 12. 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
  13. 13. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201616
  14. 14. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201617
  15. 15. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201618 http://www.chrisyin.com/images/spotify-mvp.png
  16. 16. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201619
  17. 17. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201620
  18. 18. 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/
  19. 19. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201622
  20. 20. 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
  21. 21. 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)
  22. 22. 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
  23. 23. 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
  24. 24. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201627
  25. 25. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201628
  26. 26. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201629
  27. 27. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201630 La psychologie du dashboard https://uxmag.com/articles/the-psychology-behind-information-dashboards
  28. 28. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201631 L’UX, un révélateur des résultats du big data
  29. 29. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201632
  30. 30. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201633
  31. 31. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201634
  32. 32. 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
  33. 33. 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
  34. 34. 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 ;-)
  35. 35. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201638
  36. 36. 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ù ?
  37. 37. 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
  38. 38. 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
  39. 39. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201642 Utilisateur ActionDécision
  40. 40. 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
  41. 41. 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
  42. 42. 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/
  43. 43. 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
  44. 44. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI47 La chaîne complète Compréhension MémorisationAttention MAI 2016
  45. 45. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201648 Tentez de lire ce graphique
  46. 46. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201649 Et celui-là ? Qu’en pensez-vous ?
  47. 47. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201650 Synthèse : les attributs pré-attentifs (Gestalt)
  48. 48. 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
  49. 49. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201652 Une communication riche et efficace
  50. 50. 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 +
  51. 51. 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
  52. 52. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201655 Bubble chart
  53. 53. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201656 Sankey diagram
  54. 54. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201657 Waterfall diagram
  55. 55. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201658 Sunburst diagram
  56. 56. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201659 Trouver le bon équilibre Valeur utilisateur Facilité de maintenance Effort de conception
  57. 57. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201660
  58. 58. 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
  59. 59. 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
  60. 60. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201665
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201673 http://labs.juiceanalytics.com/chartchooser/index.html
  69. 69. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201674
  70. 70. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201675 Si oui, vous savez suffisamment dessiner pour prototyper
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201679
  75. 75. 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/
  76. 76. 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
  77. 77. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201682
  78. 78. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201683 Sourec : http://fr.slideshare.net/anotheruxguy/paper-prototyping-workshop
  79. 79. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201684 POP - Prototyping on Paper (AppStore & Play Store)
  80. 80. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201685
  81. 81. 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
  82. 82. 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
  83. 83. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201688 Et autres Omnigrafle, Axure, … VisioInVision
  84. 84. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201689
  85. 85. 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
  86. 86. 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
  87. 87. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201692 SAP BI Tableau Cognos Qlikview
  88. 88. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201693 Pensez « scénarios d’usage »
  89. 89. 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
  90. 90. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201695 Chronologique/ Antéchronologique Logique (démonstration) Spatiale Thématique
  91. 91. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201696
  92. 92. 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
  93. 93. 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
  94. 94. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 201699 UX design
  95. 95. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016102
  96. 96. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016103
  97. 97. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016104
  98. 98. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016105
  99. 99. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016106
  100. 100. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016108
  101. 101. Matthieu Gioani  Responsable de l’offre Datavisualisation matthieu.gioani@gmail.com  @Matt_Gio
  102. 102. 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
  103. 103. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016111
  104. 104. AGILE/LEAN UX FOR DATA - AGILE NANTES - MATTHIEU GIOANI MAI 2016112
  105. 105. 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
  106. 106. 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
  107. 107. 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

×