Datavisualisation
5 mai 2014
#1
#2
#3
#4
SOMMAIRE
Contexte
Les différents types de dataviz
Infographie : tips et best practices
Benchmark
#1- CONTEXTE
• 90 % de l’information transmise au cerveau est visuelle
et les images sont traitées par le cerveau 60 000 fois
plus vite...
Plan du métro londonien, Harry Beck
Origine de la viande
vendue à Paris1782
Comparer la taille des villes
Tableau poléomét...
• C’est la représentation de données synthétisées sous
forme visuelle.
• D’une certaine manière, c’est
de l’« information ...
#2- LES DIFFÉRENTS
TYPES DE DATAVIZ
P o u r q u o i ?
U s a g e s
• Communication institutionnelle :
rapports d’activité, rapports
annuels…
• Presse économiqu...
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 :...
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...
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...
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 :
organ...
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. Fl...
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...
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 consis...
#3- INFOGRAPHIE :
TIPS & BEST PRACTICES
• Pourquoi je réalise une dataviz ? Quels
sont mes objectifs ?
• Je dispose de KPI’s ?
• Comment je calcule le ROI ?
MES O...
• Quelle est ma cible ?
• Qu’est-ce que je veux qu’elle pense à la
fin de la lecture de mon infographie ?
• Comment veut-e...
• Quel type de data vais-je présenter ?
• Quelle structure est adaptée à mon
contenu ?
• Quel type de dataviz : statique,
...
• De quel budget je dispose ?
• De combien de temps ?
• De quelle équipe :
– Pour rassembler les données et les classer ?
...
• Est-ce que je peux récupérer des
données issues de plusieurs sources ?
• Mes sources sont-elles fiables et
actualisées ?...
• Comment vais-je présenter l’information pour
susciter l’intérêt (et donc un potentiel partage)
? :
– Mise en lumière : «...
• Quel plan de diffusion, quels relais (réseaux
sociaux, blog, …) une fois l’infographie
publiée ?
• Quelques pistes dans ...
« Let the data tell its story »
• Installer un univers créatif proche du sujet de la dataviz.
• Se poser la question : est...
• Comment mesurer la diffusion ?
– en comptabilisant les liens entrants vers ma
page via Google Webmaster Tools
– en suiva...
• Utiliser des sources fiables et des infos à jour.
Citer ses sources !
• Raconter une histoire
• Choisir un titre et une ...
• Se contenter d’une succession de graphiques
• Jouer uniquement sur la typo alors que
l’information peut être expliquée d...
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 mo...
#4- BENCHMARK
Datavisualisations « statiques »
Mission(s) to Mars
Sources : Cornell University, European Space Agency,
Nasa
http://datavis.tumblr.com/post/209224522/shne...
Le monde en 100
personnes
Jacques Hagley, 2013
http://www.courrierinternati
onal.com/files/illustrations/a
rticle/2013/05/...
Politicians' Salaries and Income Inequality
Ahmad Barclay, Joumana Al Jabri, Naji El Mir, Ramzi
Jaber, and Zahraa Mortada
...
The 39 stats: Charting Hitchcock Obsessions
Adam Frost, Zhenia Vasiliev
Quand l’infographie
concurrence un
article de fond...
Fiorucci – A slice for
everyone
Accurat
http://www.visualizing.org/vi
sualizations/fiorucci-slice-
everyone
Un exemple
de ...
Datavisualisations interactives
US gun deaths
Periscopic
http://guns.periscopic.com
« 414 509 stolen years » : ne pas oublier la
finalité de son infograph...
Bloomberg billionaires
http://www.bloomberg.com/bill
ionaires
Croiser des
dizaines de
données
sans
presque
s’en
apercevoir...
Fat or Fiction
http://visual.ly/fat-or-fiction?view=true
Un exemple pertinent d’utilisation de la
photoviz : le domaine cu...
Here is today
Luke Twyman
http://hereistoday.com/
Less is more
Le Pariteur
http://appli-
parite.nouvelles-
ecritures.francetv.fr
/#
Ludique,
engagé et
instructif !
Datavisualisations vidéos
(To do Albane)
New York City carbon emissions
Adam Nieman & Chris Rabet
http://www.youtube.com/watch?v=DtqSIplGXOA#sthash....
Sources
Sources
• 10 steps to creating the perfect infographic, Tiffany
Farrant-Gonzalez et Jarred Romley
• Visualisation de donné...
Réaliser une dataviz
avec Les Navigauteurs
Les étapes du projet
cadrage
déploiement
SET UP
data
intention
création
développements
PRODUCTION
performance
DIFFUSION
• ...
L’équipage
Directeur artistique
• Création de la
maquette graphique
Scénariste / copywriter
• Elaboration du scénario
• Wo...
Vos contacts Navigauteurs
Albane Dupety, Consultante digitale
albane@lesnavigauteurs.fr
Marie Sarda, Directrice commercial...
Prochain SlideShare
Chargement dans…5
×

Data visualisation - Tips et best practices

5 393 vues

Publié le

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.

Data visualisation - Tips et best practices

  1. 1. Datavisualisation 5 mai 2014
  2. 2. #1 #2 #3 #4 SOMMAIRE Contexte Les différents types de dataviz Infographie : tips et best practices Benchmark
  3. 3. #1- CONTEXTE
  4. 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. 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. 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. 7. #2- LES DIFFÉRENTS TYPES DE DATAVIZ
  8. 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. 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. 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. 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. 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. 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. 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. 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. 16. #3- INFOGRAPHIE : TIPS & BEST PRACTICES
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. #4- BENCHMARK
  30. 30. Datavisualisations « statiques »
  31. 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. 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. 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. 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. 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. 36. Datavisualisations interactives
  37. 37. US gun deaths Periscopic http://guns.periscopic.com « 414 509 stolen years » : ne pas oublier la finalité de son infographie
  38. 38. Bloomberg billionaires http://www.bloomberg.com/bill ionaires Croiser des dizaines de données sans presque s’en apercevoir !
  39. 39. Fat or Fiction http://visual.ly/fat-or-fiction?view=true Un exemple pertinent d’utilisation de la photoviz : le domaine culinaire
  40. 40. Here is today Luke Twyman http://hereistoday.com/ Less is more
  41. 41. Le Pariteur http://appli- parite.nouvelles- ecritures.francetv.fr /# Ludique, engagé et instructif !
  42. 42. Datavisualisations vidéos
  43. 43. (To do Albane) New York City carbon emissions Adam Nieman & Chris Rabet http://www.youtube.com/watch?v=DtqSIplGXOA#sthash.yjhgyJZ4.dpuf
  44. 44. Sources
  45. 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. 46. Réaliser une dataviz avec Les Navigauteurs
  47. 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. 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. 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

×