UX : quand visualisation de données prend une nouvelle dimension

Partages

Grâce aux nouvelles technologies comme WebGL, la visualisation de données sur le web a pris une nouvelle ampleur au courant de ces derniers mois. Retours sur quelques sites à l’expérience utilisateur et au design réussi.

Annonce

Les données sont souvent difficilement interprétables aussi bien pour les initiés que pour le commun des mortels. La faute à une présentation souvent archaïque sous forme de tableaux ou bien d’images quelques peu douteuses…

Interaction et simplicité = compréhension accrue

Et si l’heure était venue de rendre ces données palpables et interactives ? Offrir à l’utilisateur la possibilité d’interagir avec des données peut rapidement augmenter sont potentiel de compréhension. Soutenu par des technologies comme WebGL, la data visualisation prend aujourd’hui une nouvelle dimension sur le web. En un coup d’œil, il nous est ainsi possible de comprendre et d’analyser une multitude de données sur un sujet précis. L’ajout d’effets en 3D et d’animations offre une expérience interactive parfaitement adaptée à ce genre de sujets.

Pour y voir plus clair et pour vous inspirer, je vous propose de découvrir 15 projets basés sur la visualisation de données sur le web. Rendez-vous en fin d’article pour quelques bonus et ressources.

Sailing Seas of Plastic

Ce site recense des données basées sur 24 expéditions en mer et nous démontre à quel point les océans sont envahis de plastiques en tout genre. Ce n’est pas moins de 268 000 tonnes de débris qui jonchent la surface du globe. Une très bonne visualisation, pour susciter une bonne prise de conscience.

data-visualisation

Gyroscope

Le projet Gyroscope avait fait grand bruit sur le web à sa sortie. Le principe est simple : donnez au système un accès à votre smartphone et à vos objets connectés. Le site modélise instantanément un tableau de bord très complet de données en tout genre, comme vos activités sportives, vos déplacements, les photos que vous avez prises et j’en passe. Une très bonne manière de visualiser les traces que nous laissons avec nos activités connectées.

data-visualisation

Hryvna.today

Un site ultra simple et clair pour avoir une vue d’ensemble sur la valeur de la monnaie en Ukraine, par rapport aux Dollars américains ou l’Euro.

data-visualisation

Tennis au Feminin

Comme son nom l’indique, ce site est un tableau de bord ultra complet sur le tennis au féminin. Il agrège de nombreuses données issues des réseaux sociaux et des performances réalisées au cours de matchs.

data-visualisation

Strava Insight

L’application pour runners et cyclistes vient de sortir un site présenter des tonnes de données de manière intelligente. Vous y trouverez des statistiques sur la vie des sportifs dans les plus grandes villes du monde.

strava-data

One Dollar Lesson

Lorsque Kaspersky veut sensibiliser les internautes aux dangers des paiements en ligne, elle donne naissance à un site de data visualisation de toute beauté ! Jetez-y un œil, il s’agit d’un des plus abouti de cette sélection.

data-visualisation

Lab Trends Experiment

Chaque jour, plus de 3 milliards de recherches sont effectuées sur Google. Mais parmi elles, combien concernent le climat ? L’expérience ludique tente de démontrer quelles recherches sont effectuées sur le sujet, depuis de nombreuses villes à travers le monde.

data-visualisation

Wrap Genius

Un voyage au cœur d’un meilleur étiquetage des aliments : voici ce que propose l’intéressant site Wrap Genius.

data-visualisation

GV 2014

Le rapport des investissement de Google dans des entreprises en 2014 ce compose dans la même logique qu’une infographie et est intéressante à plus d’un titre ! À tester de toute urgence.

data-visualisation

 

NYTimes Economic Growth

Plus simple dans son design que les exemples précédentes, cette visualisation intégrée sur le site du New York Times annonce de bonnes idées pour les argumentations du futur.

data-visualisation

Change Money

Découvrez comment Bitserve est entrain de changer la façon dont la monnaie circule autour du globe. Un site « promotionnel » vraiment bien pensé pour promouvoir le service.

data-visualisation

Evolution of web

Une infographie interactive sur l’évolution du web depuis sa naissance.

data-visualisation

The Happy Forecast

Happy Forecast démontre avec une visualisation 3D quels sont les quartier de Londres possédant le meilleur cadre de vie social.

data-visualisation

Metrogram 3D

Une expérience vraiment très intéressante sur la visualisation du métro à Tokyo. Testez-la, elle a de quoi vous donner le vertige !

data-visualisation

Google Ideas

Sans être véritablement un site de visualisation de données pur et dur, le site Google Ideas met un scène un intéressant globe pour donner quelques exemples de services proposés pour les personnes opprimées à travers le monde.

data-visualisation

HKI – Twitter

Retour sur une superbe expérience de visualisation de données, réalisée par le studio Hellohikimori lors de la conférence CES à Las Vegas.

data-visualisation

UK Motorcyle Accident

Le site n’est pas tout récent, mais je trouve que l’expérience de visualisation proposée y est vraiment intéressante.

data-gb

Ressources et bonus :

Pour aller plus loin et vous faire découvrir encore d’autres projets, je vous invite à consulter ces quelques liens supplémentaires :

Living The Change

Un site avec de nombreuses données et éléments graphique bien réalisés.

Google Globe

Un globe en WebGL open source pour modéliser plus facilement vos données géographique.

Conceptviz

Concept Viz est un site qui rassemble des centaines de concepts de visualisation de données. Un vrai régal pour les plus scientifiques d’entre vous.

Textures.js

Une librairie de textures et motifs en .svg pour habiller vos visualisations de données.

Chart Transition

Une expérience avec des graphiques animés sur le web.

Taucharts

Une librairie JS pour la visualisation de donnée

Tutoriel diagrammes circulaires flexibles avec CSS et SVG

Créer de superbes diagrammes avec SVG et Blend Modes

Pensez-vous que la Data Visualisation va elle prendre encore plus d’ampleur sur le web ?

Partages

4 commentaires

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*