La 6ème édition de l’UXD Meetup a eu lieu le mardi 17 juin de 18h30 à 19h30 à la Cantine de Nantes. À cette occasion, nous parlerons Dataviz. Un buzz word désormais célèbre ! Mais que se cache-t-il vraiment derrière la dataviz ? Nous avons levé le voile et exploré les raisons d’un tel succès. À l’heure où la masse de données ne cesse de grossir, la dataviz est un moyen de vulgariser et de représenter des données de manière digeste. Véritable mélange d’art et de science, la dataviz est aujourd’hui un outil de communication puissant. Cependant, cette nouvelle pratique ne s’improvise pas et la démarche scientifique reste essentielle.

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

67. © 2014 – Cédric Bouré
UXDMeetup
#6

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

83. © 2014 – Cédric Bouré
UXDMeetup
#6

84. © 2014 – Cédric Bouré
UXDMeetup
#6

85. © 2014 – Cédric Bouré
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