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 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… »

Plan du métro londonien, Harry Beck Origine de la viande

vendue à Paris 1782

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 !

• 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 ?

#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 é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

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

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

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é

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

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

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

P o u r q u o i ?

U s 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

#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 OBJECTIFS

Les questions à se poser avant de commencer

• 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

• 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

• 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

• 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

• 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

• 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

« 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

• 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

• 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

• 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…

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…

#4- BENCHMARK

Datavisualisations « statiques »

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

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

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

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 !

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

Datavisualisations interactives

US gun deaths

Periscopic

http://guns.periscopic.com

« 414 509 stolen years » : ne pas oublier la

finalité de son infographie

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 culinaire

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.yjhgyJZ4.dpuf

Sources

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

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

• 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

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

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