Dataviz interactive pour l’OCDE

2016 - 2017

Conception d’un outil web de sensibilisation à destination du grand public, traduit en 5 langues.

Lorsque vous pensez au revenu de votre foyer, vous estimez-vous riche, pauvre ou dans la moyenne ? La plupart d’entre nous n’ont aucune idée ou se trompent sur leur situation par rapport au reste de la population. En 10 clics, vous pourrez voir combien de ménages sont mieux ou moins bien lotis que vous et confronter votre vision d’un monde idéal à la réalité.

Texte d’introduction à l’outil, OCDE

Nous avons cherché à rendre cet outil ludique, didactique et facile à appréhender par des utilisateurs aux horizons culturels très variés. Nous avons structuré l’information pour la rendre lisible, choisi une esthétique simple et cohérente, illustré et animé les données statistiques.

Vous pouvez consulter l’outil ci dessous, ou l’ouvrir dans un nouvel onglet.

Mon rôle

Nous avons travaillé en binôme avec le développeur Anthony Veyssière. J’ai travaillé sur l’expérience utilisateur et la direction artistique de l’interface, des illustrations et des animations.

Intentions

L’objectif de l’OCDE avec cet outil était de toucher un très large public. Il devait être conçu pour être traduit en plusieurs langues, et allait donc être soumis à des utilisateurs d’horizons culturels très divers. Il devait être engageant et plutôt ludique, et permettre de communiquer des informations statistiques parfois complexes. L’outil devait consister en un questionnaire permettant à l’utilisateur de renseigner des informations concernant ses revenus, son estimation de sa richesse par rapport au reste de la population, sa perception de la répartition des richesses et la répartition idéale des richesse selon lui. Une fois ces informations renseignées, l’outil devait les afficher en les confrontant aux données statistiques réelles.

Élaboration de la structure

La première étape a été de définir une structure générale. À partir des documents d’intention fourni par l’OCDE, nous avons élaboré des wireframes non-graphiques et non-interactifs. Cela nous a permis de prendre des décisions fondamentales sur l’organisation des contenus et de donner une cohérence à l’enchaînement des différents écrans. Il a servi de base à l’OCDE pour rédiger le contenu éditorial, par Anthony pour développer l’outil, et par moi pour concevoir l’interface. L’utilisation de Google Slides nous a permis de collaborer à distance.

Vue d’ensemble des wireframes (aussi appelés zonings). L’aspect rudimentaire a permis de se concentrer sur des questions fondamentales.

Direction artistique

Pour trouver une orientation esthétique, j’ai conçu deux planches tendance. Ces planches sont des composition d’éléments graphiques issus de mes recherches ou de liens fournis par l’OCDE. Elles contiennent des images issues d’infographies interactives ou non, d’illustrations ou de captures d’écrans. Comme l’audience de l’outil allait être très diverse, il fallait une esthétique universellement identifiable. J’ai choisi des visuels clairs, simples et très lisibles. Les couleurs sont en aplats, les formes sont géométriques, et les illustrations simples sont proches du pictogramme.

La planche tendance présentant des couleurs et des illustrations les plus gaies a été retenue pour définir l’identité graphique de l’outil.

Les deux planches tendances côte-à-côte. À gauche, les couleurs sont plus acides et les illustrations plus gaies. À droite, les couleurs sont plus douces, les illustrations plus minimalistes et sérieuses.

La maquette graphique du premier écran est basée sur les wireframes et la direction artistique définie par la planche tendance. L’objectif de cette écran est d’introduire l’outil à l’utilisateur et d’en expliquer les principales étapes.

Recherches de composition et d’illustration pour l’écran d’accueil.

Dans un soucis de lisibilité et de cohérence, l’illustration retenue pour l’écran d’accueil se base sur deux éléments universels : une planète schématique et un humain. La planète est déclinée en bulle pour évoquer le monde idéal, en opposition à la planète réelle sur laquelle le personnage repose.

L’écran d’accueil dans sa version aboutie est divisé en trois parties égales. À gauche, une introduction écrite signée du logo de l’OCDE permet d’introduire le sujet ; au centre, le bouton pour démarrer le questionnaire ainsi que ses différentes étapes ; et à droite, l’illustration permettant d’attirer l’œil et de résumer l’intention de l’outil.

Couleurs, illustrations et animations

Pour faciliter l’utilisation de l’outil, j’ai cherché à garder une continuité visuelle et conceptuelle entre les différents écrans. Ainsi, le turquoise est utilisé pour les éléments interactifs de l’interface, le rose pour évoquer un état idéal, le bleu pour représenter la réalité, et le jaune pour ce qui touche à l’utilisateur ou à la richesse.

Les formes et les concepts de l’illustration sont repris et déclinés à travers les écrans : une petite planète devient un foyer, peuplé de personnages aux attributs permettant de les identifier : hommes, femmes, enfants, pauvres ou riches. La planète se transforme également en diagramme circulaire pour évoquer la répartition des richesses.

Déclinaisons du concept de planète en foyer, diagramme, etc.

Visualisation de données

Les illustrations sont animées dynamiquement pour visualiser instantanément les données sélectionnées par l’utilisateur ou mentionnées par l’outil. Cela rend l’interaction plus ludique et les données plus facile à appréhender.

L’utilisateur peut donner son avis sur la répartition idéale des richesses entre les 10% les plus riches et les autres. La richesse est représentée par un diagramme rose, habité par une personne visiblement riche et 9 autres personnes.

Déclinaison danoise

Nous avons par la suite décliné cet outil pour les besoin de l’institut statistiques du Danemark. Ils souhaitaient communiquer leurs données nationales à la population danoise.

Nous avons donc retravaillé l’outil pour qu’il corresponde à leur besoin : code, structure, couleurs et illustrations.

Les couleurs et les illustration ont été adaptée pour s’adapter au contexte.

[div class= »no-br figure »]

Les planètes de l’OCDE permettait une représentation universelle. Nous les avons remplacé par des îles pour correspondre à une des spécificités géographique danoise.

Diffusion

Outre la déclinaison danoise, l’outil de l’OCDE est désormais traduit en neuf langues et a été diffusé sur des sites de presse du monde entier tels que El Pais, Le Figaro, CNN Mexico.