Weitere ähnliche Inhalte Ähnlich wie UXD#6 - La Dataviz c’est joli mais ça sert à quoi ? (20) UXD#6 - La Dataviz c’est joli mais ça sert à quoi ?1. © 2014 – Cédric Bouré
UXDMeetup
La dataviz c’est
joli mais ça sert
à quoi ?
#UXDmeetup
#6
17 juin 2014
2. © 2014 – Cédric Bouré
Pourquoi ce
sujet ?
#UXDmeetup
3. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Pourquoi ?
UXDMeetup
#6
#UXDmeetup
!
QUI SOMMES NOUS?!
QUEL EST LE RAPPORT AVEC L’UX?!
!
!
INTERACTION!
HOMME / MACHINE //// HOMME / DONNÉES!
!
CRÉATION D’INTERFACES QUI CONNECTENT!
LES UTILISATEURS ET LES DONNÉES!
4. © 2014 – Cédric Bouré
Qu’est ce que
c’est ?
#UXDmeetup
5. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Pourquoi ?
UXDMeetup
#6
#UXDmeetup
6. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Qu’est ce que c’est ?
UXDMeetup
#6
#UXDmeetup
Couverture "The Economist” du 25 février 2010 © Brett Ryder
http://www.economist.com/node/15579717
7. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Big data
UXDMeetup
#6
#UXDmeetup
90%
DES DONNÉES
!
ONT ÉTÉ CRÉÉES AU COURS DES
2 DERNIÈRES
ANNÉES
!
CHAQUE
JOUR
!
2,5
TRILLONS
D’OCTETS DE DONNÉES
http://www-01.ibm.com/software/fr/data/bigdata/
8. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Les enjeux de la révolution digitale
UXDMeetup
#6
#UXDmeetup
http://www-01.ibm.com/software/fr/data/bigdata/
!
90%!
DES MÉNAGES SERONT
CONNECTÉS À INTERNET EN 2017!
!
X30!
AUGMENTATION DU VOLUME DE !
DONNÉES D’ICI 5 ANS!
!
!
80%!
DES DONNÉES INTERNET SONT
NON STRUCTURÉES!
!
X5!
LES DONNÉES NON STRUCTURÉES
CROITRONT 5 FOIS PLUS VITE QUE
LES DONNÉES STRUCTURÉES!
9. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Perception
UXDMeetup
#6
#UXDmeetup
80%!
DU CERVEAU EST DÉDIÉ AU!
TRAITEMENT VISUEL
10. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Définition
UXDMeetup
#6
#UXDmeetup
DataViz - ou Visualisation de Données!
_________________!
!
C’est l’ensemble des techniques de représentation graphique et
d’exploration visuelle de données quantitatives permettant de
traduire un ensemble de données brutes en information décisive!
!
http://www.data-business.fr/visualisation-donnees-dataviz-nuls-definition-exemples
11. © 2014 – Cédric Bouré
“En fait de calculs et de proportions, le plus sûr
moyen de frapper l’esprit est de parler aux yeux.”!
#UXDmeetup
William Playfair 1780!
Citation!
12. © 2014 – Cédric Bouré
#UXDmeetup
S'adresser à l'intelligence visuelle!
Faciliter la compréhension!
13. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Big Data
UXDMeetup
#6
#UXDmeetup
NOUS AVONS TOUS APPRIS À ÉCRIRE ET À COMPTER,!
MAIS QUI A BÉNÉFICIÉ !
D’UNE VÉRITABLE FORMATION SUR !
L’ÉLABORATION ET LA LECTURE DES GRAPHIQUES ?!
14. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
UXDMeetup
#6
#UXDmeetup
FAIRE
PARLER
LES DONNÉES
Objectif
15. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Perception
UXDMeetup
#6
#UXDmeetup
COMBIEN DE 3?!
!
!
2164597546321546497752316164549334!
2113464973461549764316454797413461!
5349742431975724169436794513649121!
5487887739898831515125394545211222
16. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Perception
UXDMeetup
#6
#UXDmeetup
COMBIEN DE 3?!
!
!
2164597546321546497752316164549334!
2113464973461549764316454797413461!
5349742431975724169436794513649121!
5487887739898831515125394545211222!
!
Réponse = 15
17. © 2014 – Cédric Bouré
Hier, aujourd’hui
et demain
#UXDmeetup
18. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
1786
graphique circulaire
William Playfair
/// Graphique circulaire / diagrammes linéaires / batons
/// Mise au premier plan l’importance des graphiques
#UXDmeetup
19. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
1857 Florence Nightingale Diagrammes circulaires, statisticienne et infirmière britannique
Fin du XVIIIe
...au cours du XIXe
/// Formes modernes de représentations graphiques
/// Graphiques très créatifs // curieusement avant-gardistes
/// Illustrator aujourd’hui
#UXDmeetup
20. © 2014 – Cédric Bouré© 2014 – Cédric Bouré1869 Charles Joseph Minard Source : http://en.wikipedia.org/wiki/Charles_Joseph_Minard
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
/// Exploit / Représenter en un seul schéma des données de nature différentes
/// Des effectifs en hommes / des indications géographiques (distances, villes, cours d’eau) / des
températures / des directions (vers la Russie ou dans le sens opposé).
1869
#UXDmeetup
21. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
À partir des années 1980
nouvel essor dû
/// développement des sciences cognitives
/// évolutions technologiques
#UXDmeetup
22. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
Années 2000
âge d’or / nouvel essor
/// Infographies / augmentation
/// Nouveaux moyens de visualisation
/// Images, animations, vidéo
/// Lot de nouveaux outils
#UXDmeetup
23. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
Ajourd’hui
âge de l’immersivité
c’est l’interface qui raconte l’histoire.
#UXDmeetup
24. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
#UXDmeetup
25. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
#UXDmeetup
26. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
AVANT-HIER, HIER, AUJOURD’HUI ET DEMAIN
Mais aussi…
Quand "Le Progrès" !
se perd dans une infographie « raciste »
#UXDmeetup
27. © 2014 – Cédric Bouré
Principales techniques
de visualisation
#UXDmeetup
28. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
RECAP’
http://dl.dropbox.com/u/80689521/datavizofdataviz.png
Zoom
#UXDmeetup
29. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principes et techniques de visualisation
UXDMeetup
#6
#UXDmeetup
VISUALISATION DE DONNÉES!
≠!
INFOGRAPHIE
30. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
!
!
!
!
!
“Une bonne image est celle qui!
« verse directement l’information dans nos yeux »!
presque sans avoir besoin de l’analyser”!
!
!
!
David McCandless, le « pape de la datavisualisation »!
!
!
!
!
CITATION
#UXDmeetup
31. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
LE CHOIX DE MODE DE VISUALISATION
/// Quel est le message que vous essayez de transmettre ?!
!
/// A quel public la visualisation est-elle destinée ?!
!
/// Quelles sont les questions de ce public ?!
!
/// Quelles réponses lui donnez-vous ?!
!
/// Cette visualisation répond-elle à toutes les questions ?!
!
/// Les données les plus importantes sont-elles mises valeur ?!
!
/// Les vues sont-elles intuitives ?!
!
/// Peut-on comprendre la visualisation en 30 secondes sans informations
supplémentaires ?
#UXDmeetup
32. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principes et techniques de visualisation
UXDMeetup
#6
#UXDmeetup
VISUALISATION DE DONNÉES!
≠!
INFOGRAPHIE
33. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Parallèle
UXDMeetup
#6
#UXDmeetup
✓ Good design makes a
product useful !
!
✓ Good design is aesthetic !
!
✓ Good design makes a
product understandable!
!
✓ Good design is honest
✓ Good data visualisation
makes information useful!
!
✓ Good data visualisation is
aesthetic!
!
✓ Good data visualisation
makes information
understandable!
!
✓ Good data visualisation is
honest
Dieter Rams!
“ten principles for good design”!
https://www.vitsoe.com/eu/about/good-design
34. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principales techniques de visualisation
UXDMeetup
#6
#UXDmeetup
Free JavaScript library | Dynamic, Interactive maps in modern web browsers
#UXDmeetup
35. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principes et techniques de visualisation
UXDMeetup
#6
Free and open-source | JavaScript and SVG for web-native visualizations
d3js
#UXDmeetup
36. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principes et techniques de visualisation
UXDMeetup
#6
#UXDmeetup
Free under MIT license | JavaScript visualizations in modern web browsers
#UXDmeetup
37. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principes et techniques de visualisation
UXDMeetup
#6
#UXDmeetup
Datavisualization.ch | collection of tool
#UXDmeetup
38. © 2014 – Cédric Bouré
Valeur business &
exemples
#UXDmeetup
39. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Les bénéfices de la dataviz
UXDMeetup
#6
« ACCES AUX DONNEES »!
Les nouveaux supports permettent d’accéder plus facilement à l’information
véhiculée par les données!
!
!
!
« ERGONOMIE » !
Le fondement de la Data Visualisation : Représenter les données de manière
visuelle, graphique!
!
!
!
« RAPIDITE »!
Les nouveaux moyens de stockage et de visualisation permettent d’accéder
rapidement au détail de nombreuses données!
!
!
!
« PARTAGE »!
Mode de communication, permettant d’adresser toute l’organisation pour devenir
le support de décision et de travail collaboratif!
!
!
!
« UNIVERSALITE »!
La Data Visualisation ne permet pas seulement une compréhension intellectuelle,
elle transforme un ensemble de données brutes en une information permettant
d’agir
40. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Les secteurs de la dataviz
UXDMeetup
#6
✓ Le Data Journalisme!
!
✓ La Data Visualisation comme outil d’aide à la décision!
!
✓ Une professionnalisation de la visualisation de données
(experts, start-up)!
!
✓ Une démocratisation de la visualisation de données
par l’accès à des outils simples et pratiques en ligne!
!
✓ Et d’autres domaines en émergence…
#UXDmeetup
41. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Les secteurs d’activités
UXDMeetup
#6
✓ Biens de consommation grand public /// L’Oréal, Ubisoft!
!
✓ Services aux entreprises /// Accenture!
!
✓ Industrie /// Ingenico, Philips, Schlumberger, STMicroelectronics!
!
✓ Médias /// BFM Business, France Télévisions, InfoPro, Prisma Media!
!
✓ Marketing et publicité /// IFR-GfK, Lagardère Active, PagesJaunes, SM-
Marketing Convergence!
!
✓ Recherche scientifique /// IMEC!
!
✓ Service public /// SPF Économie!
!
✓ Télécom /// Alcatel-Lucent, Orange, SFR!
!
✓ Transport et logistique /// Aéroports de Paris, ID Logistics, SNCF, Voyages-
sncf.com!
!
✓ …
#UXDmeetup
42. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Principaux cas d’utilisation
UXDMeetup
#6
Etude Big Data de Jaspersoft
#UXDmeetup
43. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Améliorer le pilotage de l’entreprise
UXDMeetup
#6
coût en téléphonie pour un employé
IMEC
#UXDmeetup
44. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Améliorer le pilotage de l’entreprise
UXDMeetup
#6
Un tableau de bord stratégique pour fédérer toutes les actions locales
L’oreal
45. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Améliorer la relation client
UXDMeetup
#6
Présenter les principaux indicateurs de performance (qualité de service, temps de prise
en charge et taux d’abandon) avec un détail sur le taux de résolution au premier contact.
SFR
46. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Identifier immédiatement les reports d’achats de ses clients
UXDMeetup
#6
Radars représentant l’investissement des annonceurs chez Lagardère Active
Lagardère
47. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
!
“ L’enjeu esthétique n’est pas le but initial des projets de
visualisation de données. Son but, c’est de rendre certains
phénomènes plus compréhensibles.”!
!
Manuel Lima!
!
!
VISUEL INFORMATIF OU OBJET D’ART?
#UXDmeetup
48. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Ce qu’il ne faut pas oublier
UXDMeetup
#6
Author: FFunction.
49. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Valeur business et exemples
UXDMeetup
#6
Exemple 1
50. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Valeur business et exemples
UXDMeetup
#6
Exemple 2
51. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
Valeur business et exemples
UXDMeetup
#6
Exemple 3
52. © 2014 – Cédric Bouré
Retour d’expériences
#UXDmeetup
53. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
UXDMeetup
#6
Matthias Rischewski Laurent Neyssensas
#UXDmeetup
54. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
UXDMeetup
#6
Philippe Roux Julien Kostreche
#UXDmeetup
55. © 2014 – Cédric Bouré
!
faire parler les données
#UXDmeetup
56. © 2014 – Cédric Bouré
!
Julien
Kostrèche
Julien
est
un
spécialiste
des
médias.
Après
des
études
à
Sciences
Po
Paris,
il
est
journaliste
pour
plusieurs
titres
de
presse.
Il
lance
et
dirige
la
rédaction
du
Magazine
Don
Quichotte,
devient
rédacteur
en
chef
de
la
filiale
online
de
l’agence
CAPA
puis
rejoint
l’équipe
de
Serge
Moati
sur
France
5.
De
2004
à
2009,
il
assure
la
direction
des
programmes
de
la
chaîne
locale
Télénantes
puis
la
rédaction
en
chef
des
éditions
électroniques
du
bimédia
Terra
eco
jusqu’en
2011
.
julien.kostreche@ouestmedialab.fr
@jkostreche
!
Philippe
Roux
Philippe
est
un
pionnier
de
l’Internet.
Premier
prestataire
de
services
et
hébergeur
à
Nantes
en
1994,
il
se
spécialise
dans
le
conseil
pour
les
collectivités
et
services
publics
(impliqué
dans
SmartCities).
En
1997,
il
fonde
la
société
Kosmos
qui
développe
et
édite
un
logiciel
de
gestion
de
contenu
(CMS)
pour
les
universités,
les
grandes
organisations
et
l’éducation
(leader
français
des
ENT).
En
2005,
il
revend
sa
société
et
se
consacre
depuis
au
montage
de
projets
collaboratifs
innovants.
philippe.roux@ouestmedialab.fr
@PhilippeRouxB
!
les pilotes du médialab
#UXDmeetup
57. © 2014 – Cédric Bouré
Le 1er cluster des
médias dédié au
numérique.
!
Les principaux acteurs
ligériens et bretons de la
filière et leurs partenaires
regroupés autour de
projets innovants et
collaboratifs
UXDMeetup
#6
#UXDmeetup
58. © 2014 – Cédric Bouré
Intro
!
nouvelles écritures!UXDMeetup
#6
#UXDmeetup
59. © 2014 – Cédric Bouré
!
data deluge
UXDMeetup
#6
#UXDmeetup
60. © 2014 – Cédric Bouré
!
big data
UXDMeetup
#6
#UXDmeetup
61. © 2014 – Cédric Bouré
!
open data
UXDMeetup
#6
#UXDmeetup
62. © 2014 – Cédric Bouré
!
tous média / tous data
UXDMeetup
#6
63. © 2014 – Cédric Bouré
!
des écrans partout
UXDMeetup
#6
#UXDmeetup
64. © 2014 – Cédric Bouré
!
appétit du public
UXDMeetup
#6
#UXDmeetup
65. © 2014 – Cédric Bouré
!
métiers d’avenir
UXDMeetup
#6
#UXDmeetup
66. © 2014 – Cédric Bouré
!
data rédactions
UXDMeetup
#6
#UXDmeetup
68. © 2014 – Cédric Bouré
!
ateliers collaboratifs
69. © 2014 – Cédric Bouré
!
!
le process du ddj
UXDMeetup
#6
70. © 2014 – Cédric Bouré
!
les grandes étapes UXDMeetup
#6
#UXDmeetup
71. © 2014 – Cédric Bouré
!
partir des chiffres UXDMeetup
#6
#UXDmeetup
72. © 2014 – Cédric Bouré
!
visualiser / éditorialiser!
#UXDmeetup
73. © 2014 – Cédric Bouré
!
exemple 1http://www.paysdelaloire.fr/?id=8589
UXDMeetup
#6
#UXDmeetup
74. © 2014 – Cédric Bouré
!
exemple 2!https://destinationsante.com/iframes/hyblab-rougeole/rougeole.html
UXDMeetup
#6
#UXDmeetup
75. © 2014 – Cédric Bouré
!
exemple 3!http://pays-de-la-loire.france3.fr/2014/04/24/reseaux-sociaux-lautre-terrain-de-jeu-du-fc-nantes-465329.html
UXDMeetup
#6
#UXDmeetup
76. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
UXDMeetup
#6
Antoine Banctel-Chevrel Sylvain Ornetti
#UXDmeetup
77. © 2014 – Cédric Bouré
Témoignage UXD Meetup
Datavisualisation
en théorie… et en pratique
Mardi 17 juin 2014
UXDMeetup
#6
78. © 2014 – Cédric Bouré
Beaucoup de façons de
représenter des données
UXDMeetup
#6
79. © 2014 – Cédric Bouré
Des bonnes …
UXDMeetup
#6
80. © 2014 – Cédric Bouré
… et des moins bonnes
UXDMeetup
#6
81. © 2014 – Cédric Bouré
… et des moins bonnes
UXDMeetup
#6
82. © 2014 – Cédric Bouré
Biais visuels
UXDMeetup
#6
86. © 2014 – Cédric Bouré
Biais sociaux
UXDMeetup
#6
87. © 2014 – Cédric Bouré
Biais sociaux
UXDMeetup
#6
88. © 2014 – Cédric Bouré
Confrontation avec les clients
UXDMeetup
#6
89. © 2014 – Cédric Bouré
Confrontation avec les clients
UXDMeetup
#6
90. © 2014 – Cédric Bouré
Confrontation avec les clients
UXDMeetup
#6
91. © 2014 – Cédric Bouré
Confrontation avec les clients
UXDMeetup
#6
92. © 2014 – Cédric Bouré
Confrontation avec les clients
Forums
UXDMeetup
#6
93. © 2014 – Cédric Bouré
Confrontation avec les clients
Enseigne 1
Enseigne 2
UXDMeetup
#6
94. © 2014 – Cédric Bouré
Confrontation avec les clients UXDMeetup
#6
95. © 2014 – Cédric Bouré
Conclusion
#UXDmeetup
96. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
!
!
!
La visualisation de données se retrouve in fine à la croisée des
chemins entre plusieurs métiers :!
!
Designer, ergonome, journaliste, graphiste, développeur,
photographe…!
!
A eux de se parler, de comprendre les enjeux de leurs
différents métiers pour produire des visualisations qui joignent
l’utile à l’agréable, voire de nous dévoiler des réalités jusque-là
difficile à se représenter.!
!
!
!
!
!
!
CONCLUSION
#UXDmeetup
97. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
!
!
!
En fait, les formes que prendra le futur de la data visualization
sont difficiles à prévoir, car la dataviz est au croisement!
de différentes disciplines (ergonomie et IHM1, IT, design,
analytique, communication...).!
!
Ce sont en grande partie les innovations dans chacun de ces
domaines qui contribueront à l’évolution de la data
visualization.!
!
!
!
!
!
!
!
!
CONCLUSION
#UXDmeetup
98. © 2014 – Cédric Bouré© 2014 – Cédric Bouré
MerciPARTAGE, ÉCHANGE…
_____________________
!!1ère PARTIE DU SUPPORT RÉALISÉ ET PRÉSENTÉ PAR
!Baptiste RONGIER | EMOTIC
Heidi GHERNATI | BAKASABLE
!_____________________
!!INTERVENANTS / RETOURS D’EXPÉRIENCES
!Matthias Rischewski et Laurent Neyssensas | Laboratoire Readi, l’Ecole de Design de Nantes Atlantique
Philippe Roux et Julien Kostreche | Ouest MediaLab
Antoine Banctel-Chevrel et Sylvain Ornetti | Dictanova
!!
#UXDmeetup
99. © 2014 – Cédric Bouré
Un événement
fondé par
#UXDmeetup
& Cédric Bouré, Liv Levebvre
Heidi Ghernati, Michaël Thoby