Les infographies permettraient une augmentation de 25 % du trafic sur le site par rapport à du contenu « texte » plus traditionnel. Source : Content Marketing Institute Survey, Novembre 2012.

1. Datavisualisation
5 mai 2014

2. #1
#2
#3
#4
SOMMAIRE
Contexte
Les différents types de dataviz
Infographie : tips et best practices
Benchmark

3. #1- CONTEXTE

4. • 90 % de l’information transmise au cerveau est visuelle
et les images sont traitées par le cerveau 60 000 fois
plus vite que le texte. Sources : 3M Corporation & Zabisco.
• Pour 46,1 % des internautes, le design d’un site est le
critère n°1 pour juger de la crédibilité d’une marque. Source
: Stanford Persuasive Technology Lab.
• Les infographies permettraient une augmentation de 25
% du trafic sur le site par rapport à du contenu « texte »
plus traditionnel. Source : Content Marketing Institute Survey, Novembre 2012.
« 1 image vaut 1000 mots… »

5. Plan du métro londonien, Harry Beck
Origine de la viande
vendue à Paris1782
Comparer la taille des villes
Tableau poléométrique, Charles de Fourcroy
1861 1933
1869
Carte des pertes de l’armée napoléonienne
durant la campagne de Russie
« En fait de calcul et
de proportion, le plus
sûr moyen de frapper
l’esprit, est de parler
aux yeux »
William Playfair, 1780
… et ce n’est pas nouveau !

6. • C’est la représentation de données synthétisées sous
forme visuelle.
• D’une certaine manière, c’est
de l’« information esthétique ».
Mais au fait, c’est quoi la datavisualisation ?

7. #2- LES DIFFÉRENTS
TYPES DE DATAVIZ

8. P o u r q u o i ?
U s a g e s
• Communication institutionnelle :
rapports d’activité, rapports
annuels…
• Presse économique
• Résultats d’études, de sondages
Field of Commemoration
Valentina D'Efilippo (The artwork is included in 'The Infographic
History of the World' by Harper Collins, 2013)
http://www.valentinadefilippo.co.uk/
Illustrer une quantité, une évolution
1. Graphique

9. P o u r q u o i ?
U s a g e s
Comparer des données sur une échelle
spatiale
• Presse : inégalités géographiques
• Marque : localisation des
enseignes/points de vente
• Association : cartographie des
actions de terrain
• Etc.
2. Carte

10. P o u r q u o i ?
U s a g e s
+ e t -
Représenter les interconnexions entre
des données
• Transports : plan de métro ou de
bus, liaisons aériennes et
ferroviaires
3. Réseau
Charting the Beatles
Mike Deal
http://mikemake.com/Charting-the-Beatles

11. P o u r q u o i
U s a g e s
Représenter une chronologie
• Communication institutionnelle :
chronologie développement de la
marque
• Graphique horloge : 1h / 12h
Visualing Painters’ Lives
Accurat, Giorgia Lupi, Michela Buttignol
https://www.flickr.com/photos/accurat/sets/7215763395
3437972/
4. Temporalité

12. P o u r q u o i ?
U s a g e s
Hiérarchiser des données, illustrer une
répartition
• Communication institutionnelle :
organigramme d’entreprise,
répartition d’un budget, …
• Blog ou presse : mots-clés les plus
recherchés, thématiques les plus
traitées, …
5. Hiérarchie
Obama’s 2011 Budget Proposal: How It’s Spent
Shan Carter and Amanda Cox
http://www.nytimes.com/interactive/2010/02/01/us/budg
et.html?_r=0

13. P o u r q u o i ?
U s a g e s
Représenter un mouvement et des
échanges
• Croisement d’un nombre important
de données
6. Flux
Nobels, no degrees
Giorgia Lupi, Simone Quadri, Gabriele Rossi, Davide
Ciuffi, Federica Fragapane, Francesco Majno
http://www.accurat.it

14. P o u r q u o i ?
U s a g e s
Représenter une composition ou une
répartition
• Communication institutionnelle :
budget
The Art Market for Dummies
Jean Abbiateci
7. Matrice

15. P o u r q u o i ?
Us a g e s
Pour communiquer et informer
>> Une infographie combine différents
types de dataviz et consiste en une
explication plus qu’en une simple
comparaison de données.
Qui dit bonne infographie dit donc
storytelling.
• Marque : process de fabrication,
démarche développement durable,
etc.
• Presse : traiter un sujet de manière
décalée, présenter une tendance...
The 39 stats: Charting Hitchcock Obsessions
Adam Frost, Zhenia Vasiliev
8. Infographie

16. #3- INFOGRAPHIE :
TIPS & BEST PRACTICES

17. • Pourquoi je réalise une dataviz ? Quels
sont mes objectifs ?
• Je dispose de KPI’s ?
• Comment je calcule le ROI ?
MES OBJECTIFS
Les questions à se poser avant de commencer

18. • Quelle est ma cible ?
• Qu’est-ce que je veux qu’elle pense à la
fin de la lecture de mon infographie ?
• Comment veut-elle être vue lorsqu’elle
partage un contenu sur les réseaux
sociaux ? (quelqu’un de drôle, quelqu’un
de savant, quelqu’un d’engagé…)
MA CIBLE
Les questions à se poser avant de commencer

19. • Quel type de data vais-je présenter ?
• Quelle structure est adaptée à mon
contenu ?
• Quel type de dataviz : statique,
interactive ou vidéo ?
• Quelle taille / quel format disponible pour
ma dataviz ? Site web, appli mobile,
réseau social…
LA STRUCTURE
Les questions à se poser avant de commencer

20. • De quel budget je dispose ?
• De combien de temps ?
• De quelle équipe :
– Pour rassembler les données et les classer ?
– Pour designer ma dataviz ?
En fonction des réponses, je pourrai
déterminer si la dataviz sera créée en interne,
via un outil « clés en main » ou confiée à une
agence spécialisée dans le domaine.
LES MOYENS
Les questions à se poser avant de commencer

21. • Est-ce que je peux récupérer des
données issues de plusieurs sources ?
• Mes sources sont-elles fiables et
actualisées ?
• Avec quelle histoire puis-je relier toutes
les données collectées ?
LES FAITS
Les questions à se poser avant de commencer

22. • Comment vais-je présenter l’information pour
susciter l’intérêt (et donc un potentiel partage)
? :
– Mise en lumière : « Vous ne saviez pas que
XYZ existait, mais pourtant voici son effet »
– Opportunité « Vous pensez peut-être que
XYZ n’est pas possible mais si, voici
pourquoi ça l’est »
– Peur : « Vous pensez que XYZ est ok, mais
voici pourquoi ça ne l’est pas »
– Humour…
L’ANGLE
Les questions à se poser avant de commencer

23. • Quel plan de diffusion, quels relais (réseaux
sociaux, blog, …) une fois l’infographie
publiée ?
• Quelques pistes dans le cas d’une dataviz
statique (image) pour faciliter sa diffusion :
– nommer mon image et lui attribuer une balise alt
– faciliter le partage (boutons réseaux sociaux,
embed code, …)
– l’accompagner d’un texte de présentation (que
Google pourra utiliser pour le référencement)
– toujours indiquer l’url de base de mon infographie
sur celle-ci !
LA DIFFUSION
Les questions à se poser avant de commencer

24. « Let the data tell its story »
• Installer un univers créatif proche du sujet de la dataviz.
• Se poser la question : est-ce que mon infographie rend
la data plus facile à comprendre ? (et pas seulement
plus belle...)
TIP : Dans le cas d’une infographie complexe, il peut être utile de présenter
une « pré-maquette » (structure / squelette de l’infographie) à quelques
personnes pour obtenir un feedback avant de lancer l’habillage créatif.
Pendant la phase créative

25. • Comment mesurer la diffusion ?
– en comptabilisant les liens entrants vers ma
page via Google Webmaster Tools
– en suivant l’évolution du nombre de followers,
de partage…
– en comptabilisant le nombre de
téléchargements depuis mon serveur.
• Comment redéployer mon infographie ? Je
peux transformer ma dataviz statique en
dataviz animée (vidéo), etc.
LE REPORTING &
LE REDÉPLOIEMENT
Après la mise en ligne

26. • Utiliser des sources fiables et des infos à jour.
Citer ses sources !
• Raconter une histoire
• Choisir un titre et une accroche parlants
• Limiter l’usage de texte
• Prêter attention à la combinaison des couleurs
(en général, on les limite à 3)
• Retrouver l’ADN graphique de la marque
• Etre créatif et s’écarter des templates !
• Prévoir le temps nécessaire… Collecte de
données, classification, structure, créa, allers-
retours… tout ça prend du temps !
DO’S

27. • Se contenter d’une succession de graphiques
• Jouer uniquement sur la typo alors que
l’information peut être expliquée de manière
plus visuelle
• Voir trop grand, trop complexe… La dataviz doit
rendre la data plus claire !
• Utiliser du jargon : on veut que l’infographie
circule au-delà d’un public d’initiés
• Penser que l’infographie va vivre seule : il faut
penser à sa diffusion, à son relais sur les
réseaux sociaux par exemple
DON’T…

28. Trop de couleur tue
la couleur…
C’est bien de
penser d’abord à la
data, mais le choix
du visuel joue aussi
76 % ça fait moins
que ¾ en fait ?
Source : The Guardian
… et trop de
graphiques tuent le
graphique
Quelques dataviz ratées…

29. #4- BENCHMARK

30. Datavisualisations « statiques »

31. Mission(s) to Mars
Sources : Cornell University, European Space Agency,
Nasa
http://datavis.tumblr.com/post/209224522/shnelll-we-
collect-things
Une
infographie qui
colle
créativement
à son sujet

32. Le monde en 100
personnes
Jacques Hagley, 2013
http://www.courrierinternati
onal.com/files/illustrations/a
rticle/2013/05/1176/Infogra
phie100PersonnesGrand.jp
g
Simplicité
et lisibilité
malgré un
nombre
important
de
données

33. Politicians' Salaries and Income Inequality
Ahmad Barclay, Joumana Al Jabri, Naji El Mir, Ramzi
Jaber, and Zahraa Mortada
Des inégalités
détectables au
premier coup d’œil

34. The 39 stats: Charting Hitchcock Obsessions
Adam Frost, Zhenia Vasiliev
Quand l’infographie
concurrence un
article de fond : la
filmographie
d’Hitchcock en 39
stats !

35. Fiorucci – A slice for
everyone
Accurat
http://www.visualizing.org/vi
sualizations/fiorucci-slice-
everyone
Un exemple
de dataviz
intégrée
dans une
campagne
360, pour
s’adresser à
une cible
particulière

36. Datavisualisations interactives

37. US gun deaths
Periscopic
http://guns.periscopic.com
« 414 509 stolen years » : ne pas oublier la
finalité de son infographie

38. Bloomberg billionaires
http://www.bloomberg.com/bill
ionaires
Croiser des
dizaines de
données
sans
presque
s’en
apercevoir
!

39. Fat or Fiction
http://visual.ly/fat-or-fiction?view=true
Un exemple pertinent d’utilisation de la
photoviz : le domaine culinaire

40. Here is today
Luke Twyman
http://hereistoday.com/
Less is more

41. Le Pariteur
http://appli-
parite.nouvelles-
ecritures.francetv.fr
/#
Ludique,
engagé et
instructif !

42. Datavisualisations vidéos

43. (To do Albane)
New York City carbon emissions
Adam Nieman & Chris Rabet
http://www.youtube.com/watch?v=DtqSIplGXOA#sthash.yjhgyJZ4.dpuf

44. Sources

45. Sources
• 10 steps to creating the perfect infographic, Tiffany
Farrant-Gonzalez et Jarred Romley
• Visualisation de données, les leçons de l’Histoire,
Gaëtan Gaborit
• Information is beautiful Awards, Kantar
• 5 do’s and don’ts when creating infographics for visual
content marketing, Jomer Gregorio
• Optimizing an infographic for search engines (SEO),
Anson Alexander
• L’expérience Navigauteurs

46. Réaliser une dataviz
avec Les Navigauteurs

47. Les étapes du projet
cadrage
déploiement
SET UP
data
intention
création
développements
PRODUCTION
performance
DIFFUSION
• brief client
• planning
• budget
• collecte des données
• classification
• scénario
• intention graphique
• squelette de la dataviz
(dans le cas d’une dataviz
interactive)
• intégration html
• développements
• tests et recette
• wording
• maquette
graphique
• mise en ligne
• déploiement du
plan de com
(réseaux
sociaux, …)
• reporting &
analyse
Les Navigauteurs peuvent vous accompagner à toutes les étapes du projet 

48. L’équipage
Directeur artistique
• Création de la
maquette graphique
Scénariste / copywriter
• Elaboration du scénario
• Wording
Consultant
• Planning & budget
• Supervision des équipes
créatives et techniques
• Suivi du projet
• Reporting
Motion designer
Dans le cas d’une dataviz
animée
• Animation
• Encodage vidéo
Intégrateur html /
développeur
Dans le cas d’une dataviz
interactive
• Intégration html de la page
Expert data
• Recherche et fabrication
des données
• Classification des données

49. Vos contacts Navigauteurs
Albane Dupety, Consultante digitale
albane@lesnavigauteurs.fr
Marie Sarda, Directrice commerciale
marie@lesnavigauteurs.fr
site :
www.lesnavigauteurs.fr
blog :
www.wethinkcontent.com