5 exemples inspirants d'infographies interactives
Publié par Xavier Foucaud le - mis à jour à
La data visualisation, de plus en plus digitale, permet à un nouveau format d'émerger : l'infographie interactive. Présentation en 5 exemples réussis.
La data visualisation est l'étude ou l'art de représenter des données de façon visuelle. De plus en plus digitale, celle-ci permet aux responsables marketing de mettre en forme l'information dans un format encore plus adapté au Web : l'infographie interactive. Souvent créée en HTML 5, elle permet d'intégrer du son, de la vidéo, des animations à l'image de fond, tout en laissant à l'internaute le soin de consulter le contenu au fil du scrolling. Nous avons sélectionné pour vous 5 exemples inspirants d'infographies interactives :
1. Analyse des tweets du film "Into the Woods" (brainsonic)
L'agence brainsonic, spécialisée dans le content marketing, vient de dévoiler un nouveau format d'infographie interactive. Dans l'exemple qui analyse les tweets français sur le film "Into the Woods", une vidéo YouTube est intégrée et directement consultable dans l'infographie, les statistiques sont illustrées par des GIFs animés, tandis qu'un extrait de la BO peut être lu sur Spotify grâce à une intégration du service dans l'infographie.
On aime : L'apparition successive et animée de chaque information à mesure qu'on descend dans la page, et la possibilité d'intégrer l'infographie dans une page Web.
2. Comment marche un moteur de voiture (Animagraffs)
Relayée sur le site du New York Times, cette infographie signée Jacob O'Neal explique en détails comment fonctionne un moteur de voiture. Dans cette réalisation en HTML5, il ouvre la capot et plonge l'internaute au coeur d'un moteur 4 cylindres, qui s'anime sous ses yeux en descendant la page.
On aime : La qualité des visuels avec effet de transparence, qui rendent lisibles des schémas plutôt complexes. Les animations, simples mais efficaces, permettent, grâce aux couleurs, de faire vivre efficacement les mécanismes et circuits présentés.
3. L'appétit des géants de la technologie (Simply Business)
Cette infographie interactive ambitieuse, signée de l'anglais Simply Business, compare les stratégies d'acquisition des 15 dernières années de 5 géants du Web (Apple, Amazon, Google, Yahoo! et Facebook). Plusieurs niveaux de lecture sont proposés ici : une liste chronologique des acquisitions par marque, en cliquant sur chaque logo, ou une lecture du graphique. Là encore, plusieurs critères d'information à disposition. L'internaute peut cliquer sur un des cercles du graphique, représentant chacun une acquisition (un clic sur le cercle renvoie vers un article sur le Web), filtrer par secteur (mobile, média, e-commerce, social media, logiciel...), ou encore par coût ou fréquence.
On aime : Le nombre important d'informations présentés en une seule infographie. Au premier abord complexe et u peu austère, l'infographie se prend rapidement en main. La bonne idée : le renvoi vers des articles Web permet immédiatement d'en savoir plus sur chaque acquisition.
4. L'évolution de la collaboration sociale (Autodesk 360)
Une infographie n'est pas forcément verticale. Présenter les données de façon horizontale s'avère même souvent la meilleure solution pour remonter le temps à l'aide d'une timeline. C'est ce qu'a choisi Autodesk 360 dans son infographie interactive qui montre l'évolution de la collaboration en entreprise, des années 50 à nos jours.
On aime : La possibilité de scroller avec son clavier, qui change des autres infographies. Le design minimaliste, inspiré de la BD et de ses bulles, retranscrit bien l'information. Là aussi, des liens renvoient vers des articles Web ou Wikipédia pour apporter plus d'informations sur le contenu proposé.
5. Un siècle d'aviation (The Guardian)
Une infographie à voir et à écouter ! The Guardian nous propose ici une carte mondiale en temps réel de tous les vols, mais également un cours d'histoire sur les 100 ans de l'aviation. Le premier volet propose de voir en direct les itinéraires ou les avions en vol. Le deuxième chapitre revient sur la naissance de l'industrie aéronautique. En troisième page, un diaporama interactif parcourt les dates-clés de l'aviation. Enfin, la quatrième partie nous projette dans le nombre de passagers, la consommation de carburant et l'impact environnemental à prévoir dans les années à venir. A chaque fois, un commentaire audio accompagne les images.
On aime : Le commentaire audio qui plonge directement le lecteur dans un vrai reportage interactif. Le nombre d'informations est impressionnant, tout comme la possibilité, à chaque fois, de se laisser guider ou de cliquer selon ses envies sur la carte présentée. Une infographie à la limite du mini-site Web.
Source : Hongkiat.com