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

http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/

• 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 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

http://www.chrisyin.com/images/spotify-mvp.png

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/

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

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

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

La psychologie du dashboard
https://uxmag.com/articles/the-psychology-behind-information-dashboards

L’UX, un révélateur des résultats du big data

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
Charte graphique
Applications/sites
Interfaces

Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Charte graphique
Applications/sites
Interfaces

*Blueberrino est une boisson gazeuse à la myrtille avec une pulpe qui ne faut pas secouer ;-)

Liée à des cas d’usages
*Blueberrino est une boisson gazeuse à la myrtille avec une pulpe qui ne faut pas secouer ;-)
Combien ? Quand ?Où ?

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

Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Charte graphique
Applications/sites
Interfaces

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

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/

Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Charte graphique
Applications/sites
Interfaces

La chaîne complète
Compréhension MémorisationAttention
MAI 2016

Tentez de lire ce graphique

Et celui-là ? Qu’en pensez-vous ?

Synthèse : les attributs pré-attentifs (Gestalt)

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

Une communication riche et efficace

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 +

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

Bubble chart

Sankey diagram

Waterfall diagram

Sunburst diagram

Trouver le bon équilibre
Valeur utilisateur
Facilité de
maintenance
Effort de
conception

Option 1
Option 2
559 Appels
€ 7 500 Ventes
Appels
Ventes 7 500 €
559
Option 3
559 7 500
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
Quelle représentation choisir pour afficher les données ?
MAI 2016

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
Comparaison
Composition
Distribution
Tendance
Relation

Afficher les différents variables d’un jeu de données
Source : http://labs.juiceanalytics.com/chartchooser/index.html

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

Mettre en valeur l’évolution sur une période

Montrer comment une variable à une influence sur les autres

http://labs.juiceanalytics.com/chartchooser/index.html

Si oui, vous savez suffisamment dessiner pour prototyper

• 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

Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
• Interactions fines
• Ergonomie finale
• Graphisme final

Prototypage
papier
Prototypage
logiciel
Outil final
graphiques
d’actions
éléments
• Graphisme final

Rapide &
évolutif
Simple Peu cher
Efficace Fun
http://www.kryzalid.net/journal/conception-d-interface-5-bonnes-raisons-de-ne-pas-oublier-le-papier/

- Fidélité +
https://www.linkedin.com/pulse/question-fidelity-wireframes-vs-prototypes-patrick-kuntz

Sourec : http://fr.slideshare.net/anotheruxguy/paper-prototyping-workshop

POP - Prototyping on Paper (AppStore & Play Store)

Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Charte graphique
Applications/sites
Interfaces

Le prototypage logiciel
Prototypage
papier
Prototypage
logiciel
Outil final
graphiques
d’actions
éléments
• Graphisme final

Et autres Omnigrafle, Axure, …
VisioInVision

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

Prototypage
papier
Prototypage
logiciel
Outil final
graphiques
d’actions
éléments
• Graphisme final

SAP BI
Tableau Cognos
Qlikview

Pensez « scénarios d’usage »

Planter le
décor
Le
persona
en 2 mots
Ses
objectifs
Ses
actions
Le résultat

Chronologique/
Antéchronologique
Logique
(démonstration)
Spatiale Thématique

4 équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design

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

UX design

Matthieu Gioani  Responsable de l’offre Datavisualisation
matthieu.gioani@gmail.com  @Matt_Gio

É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

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

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

https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?langu
age=fr

Agile/Lean UX for data - datavisualisation - Agile Nantes

Contenu connexe

Tendances

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

Dernier

Agile/Lean UX for data - datavisualisation - Agile Nantes