Data visualisation - Tips et best practices

7 054 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

×