Data et UX en business intelligence

DATARAMA - NANTES DIGITAL WEEK 2016
MATTHIEU GIOANI
Data et expérience utilisateur
en business intelligence

MES ACTIVITÉS
DATARAMA - NANTES DIGITAL WEEK 2016 - MATTHIEU GIOANI SEPT. 20162
Enseignement (EDNA, Audencia, Université de Bretagne)
Conseil
Audit, analyse des
impacts, aide aux choix
Facilitation &
Coaching
Agilité, Design Thinking,
Startup internes
Design
Service design thinking ,
UX pour la data
Matthieu Gioani @Matt_Gio
Responsable de l’offre Datavisualisation (UX data)
Consultant digital & innovation
chez EXL Group/Talan

LE GROUPE TALAN
Créé en 2002, le groupe Talan est un acteur français, multi-spécialiste du
conseil et des services, qui accompagne ses clients dans leur
transformations agiles, digitales et opérationnelles.
Des interventions à succès résultant de la combinaison de métiers
complémentaires et d’une expertise sectorielle.
TALAN EN UN COUP D’OEIL
Conseil
opérationnel et
expertise métiers
/ conseil IT
Prise en charge
de projets
Expertise
technologique
Intégration de
solutions logicielles
Support
opérationnel

ORGANISATION DU GROUPE TALAN
Campus
Innovation
Communauté
Labs
Un pôle d’expertise autour des
Technologies et Pratiques du Digital
pour des réponses sur mesure
Shore
Des solutions en
Nearshore autour du
Digital et du Testing.
Solutions
Des multi-spécialistes
sectoriels pour adresser
les projets de bout en
bout avec un fort
ancrage « métiers ».
Des pôles d’Expertises autour
de solutions BI & BIG DATA,
CRM, ERP, EAM et FrontEnd.
Un pôle Conseil métier
pour comprendre les
enjeux et identifier les
leviers de la
transformation
Un ensemble de partenaires et des
startups capables de créer de la
valeur pour Talan et ses clients.
Client

AVANT CELA, CHEZ RICH ANALYSIS
Chef de produit de Web Apps de visualisation de données

Mon ambition :
vous faire prendre conscience que la représentation
des données est l’affaire de tous

DÉMÊLONS LES NOTIONS…

FORME FONCTION
DESIGN

focus sur l’utilisateur
LE DESIGN, ASSOCIER LA FORME ET LA FONCTION
SEPT. 2016DATARAMA - NANTES DIGITAL WEEK 2016 - MATTHIEU GIOANI8

C’EST QUOI L’UX DESIGN ?

UX DESIGN = USER EXPERIENCE DESIGN
La différence entre concevoir l’expérience et le produit
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/

LA PROFONDEUR DE L’UX
• 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/

C’est un design qui se vit, qui s’éprouve,
s’expérimente. L’utilisateur en ressent
immédiatement l’effet parce que son expérience
s’en trouve instantanément transformée,
améliorée, augmentée.
Stéphane Vial, Court traité du design

ET SI ON APPLIQUE CELA À LA DONNÉE ?

DE LA DONNÉE À LA CONNAISSANCE
Dans une logique de prise de décision
Données
Brute
Information
Interprétée pour
être assimilable
Connaissance
Reliée à un
contexte pour lui
donner du sens
Action

DATAVISUALISATION : LA DÉFINITION DE COLIN WARE
DATARAMA - NANTES DIGITAL WEEK 2016 - MATTHIEU GIOANI16
La Datavisualisation est l’utilisation de
représentations graphiques de données,
interactives ou statiques pour amplifier les
processus cognitifs
(attention, compréhension, mémorisation)
SEPT. 2016

LA DATAVISUALISATION, À QUOI CA SERT ?
Faire comprendre en
donnant du sens à des
données complexes
Faciliter la prise de
décision sur des
informations clés
Communiquer
clairement des
données chiffrées
SEPT. 2016

OÙ EST LE SENS ?

DE LA NÉCESSITÉ D’INTÉGRER
DU DESIGN DANS UN PROJET DATA

#1 L’UTILISATEUR N’EST PAS RESPECTÉ

#2 L’UTILISATEUR N’EST PAS SATISFAIT
70%
des projets BI
n’apportent pas la
valeur attendue
par les utilisateurs
(Gartner, 2013)

#3 L’UTILISATEUR EST MAL COMPRIS
La psychologie du dashboard : des désirs profonds et des attentes pragmatiques
Le besoin et le
sentiment de contrôle
La gestion de la
mémoire à court terme
La facilité d’utilisation
https://uxmag.com/articles/the-psychology-behind-information-dashboards

#4 SOUS LA MASSE D’INFORMATION, IL FAUT ÉCLAIRER…
Le design, un révélateur des résultats du big data
90%
du stock mondial de
données a été créé
ces 2 dernières années
(mai 2015)

Comment avoir une analyse actionnable, des meilleures
pistes à creuser et des représensations visuelles qui
traduisent l’information ?
La réponse : nous devons rendre la donnée plus humaine
[grâce à la datavisualisation].
David Hoffer, head of UX at declara
what doesbig data look like? Visualization iskey for humans, WIRED

COMMENT RENDRE LA DONNÉE
« PLUS HUMAINE ? »
 LA DÉMARCHE « UX POUR LA DATA »

ON S’INSPIRE DU LEAN UX
Lean
UX
Design thinking
Développement
Agile
Logique de MVP

LEAN UX

UNE DÉMARCHE DE DESIGN ADAPTÉE À LA DATA
Renommée « datavisualisation » ou « UX pour la data » 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

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

POINT D’ENTRÉE : LA PROBLÉMATIQUE
Départ d’un existant
Comment améliorer le reporting des ventes de
Cola pour aider les commerciaux, sur le terrain
et au siège, à prendre les bonnes décisions sur
les activités quotidiennes ?

ELLE SE DIVISE EN QUESTIONS…
QQOQCCP
Qui
Quoi
Où
Quand
Combien
Comment
Pourquoi

ELLE SE DIVISE EN QUESTIONS…
Liée à des cas d’usages
Dans quels magasins de la région Ouest les
bouteilles de Cola de 1,5l ne sont plus
disponibles et depuis quand ?
Combien ? Quand ?Où ?

… QUI IMPLIQUE DES ACTIONS À EFFECTUER
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 d’achats
3. Rassurer mes interlocuteurs sur les 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

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
35

FORMULATION D’HYPOTHÈSES
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 octobre 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 PERCEPTION VISUELLE, COMMENT CA MARCHE ?
La chaîne complète
Compréhension MémorisationAttention
SEPT. 2016

EXEMPLE : FACILITER LE TRAVAIL DU CERVEAU
Les sériés de données commencent-t-elles en même temps ? Il y a-t-il des corrélations ?

EXEMPLE : FACILITER LE TRAVAIL DU CERVEAU
Et celui-là ? Qu’en pensez-vous ?

CONCEPTION D’UNE RESTITUTION DE DONNÉES
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

LA PUISSANCE DE LA CONTRAINTE : BIEN CONNAÎTRE SON OUTIL
Créer un binôme expert/designer sur 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

Option 1
202 180
9080
15
Appels
24 500
13 500
12 65410 541
7 500
Ventes
Appels
Volume de ventes
Option 2
DÉFI
Quelle représentation choisir pour afficher les données ?
SEPT. 2016

Option 1
+ Type de graphique
répandu
- Difficile de lire les
étiquettes
- Difficile de comparer les
données entre elles
202 180
9080
15
Appels
24 500
13 500
12 65410 541
7 500
Ventes
Appels
Volume de ventes
+ Données lisibles
+ Comparaison facilitée
par la représentation
Option 2
DÉFI
Quelle représentation choisir pour afficher les données ?
SEPT. 2016

UTILISER UN TABLEAU OU UN GRAPHIQUE ?
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

LES DIFFÉRENTS TYPES DE PROTOTYPAGE
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

PROTOTYPONS SUR PAPIER

POP PERMET DE RENDRE SES PROTOTYPES PAPIER INTERACTIFS
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

LES LOGICIELS UTILISABLES
Et autres Omnigrafle, Axure, …
VisioInVision

ET POWERPOINT !! LE KIT DE PROTOTYPAGE
Ou Keynote pour les Mac-Addicts

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

LES PLATES-FORMES DE BI OU LE DÉVELOPPEMENT WEB
Angular + D3.js
Tableau Cognos
Qlikview

VOTRE RESTITUTION EST UN SERVICE !
Pensez « scénarios d’usage »

NOS RÔLES ET POSTURES

UN CHERCHEUR
Chercheur de pépites d’or : imaginer des services autour des données

EXEMPLE : PROJET DANS LA SANTÉ
Projet pour un acteur national de la santé

UN ÉDITEUR

EDITEUR : PROJET INPI – DÉPÔTS DES BREVETS
Tableau de bords de gestion des dépôts de brevets

La perfection est atteinte,
non pas lorsqu'il n'y a plus rien à ajouter,
mais lorsqu'il n'y a plus rien à retirer.
Antoine de Saint-Exupéry

L’ACTIVISTE : RIGUEUR & TRANSPARENCE
La transparence pour poser les bases de la discussion et de l’analyse

EXEMPLE SNCF RESEAU : TRANSPARENCE & CLARTÉ

EXEMPLE : GROUPE BANQUE POPULAIRE

UN ÉDUCATEUR
Redonner le pouvoir d’agir et faire gagner en autonomie : re-capacitation

OUTIL INTERNE : LE JEU DE CARTES UX DATA

UN MÉDIATEUR

EXEMPLE GRDF : LES ENTITÉS DU PROJET
4 équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design

EXEMPLE GRDF : LE DESIGN EN TANT QUE MÉDIATEUR
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

EXEMPLE : L’UX DESIGN CHEZ GRDF
Challenger MûrirDéfinir TesterDévelopperConcevoir
Etudier les macros
besoins;
Chiffrer le macro coût
de réalisation;
Découper en
fonctionnalités ou en
lots le projet (Analyse
par valeur);
Planifier les
possibilités de
réalisation du projet.
Initialiser le Backlog;
Plan de release;
Définir les Persona;
Détecter et définir les
sources.
Construire le modèle
de données.
Transformer la
maquette crayonnée
en maquette
graphique;
Ecrire les
spécifications
techniques détaillées;
Développer les User
Stories;
Préparer les
documents de mise
en recette;
Mettre en recette les
user stories.
Corriger les retours
sur recette;
Suivre l’avancement
de la recette.
Définir les
indicateurs;
Définir les règles de
calcul et de gestion;
Faire une maquette
crayonnée;
Définir et prioriser les
User stories.
KANBAN AGILE SCRUM
1 2 3 4 5 6
UX design

MÉDIATEUR : VOUS AVEZ LES SOLUTIONS, ENSEMBLE

CONCLUSION

TOUT LE MONDE N’EST PAS CHEF ÉTOILÉ MAIS TOUT LE MONDE CUISINE…
“Le design est trop important pour être
laissé aux seules mains des designers”
Tim Brown, co-fondateur d’IDEO

La représentation des données est l’affaire de tous

Merci à tous !
Matthieu Gioani  Responsable de l’offre Datavisualisation
matthieu.gioani@exl-group.com  @Matt_Gio

Data et UX en business intelligence

Data et UX en business intelligence

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

En vedette

En vedette (20)

Similaire à Data et UX en business intelligence

Similaire à Data et UX en business intelligence (20)

Plus de Matthieu Gioani

Plus de Matthieu Gioani (7)

Data et UX en business intelligence