Blog

Astuces de Pro pour créer des Infographies interactives

Voici comment créer des infographies interactives véritablement remarquables.

L’avenir de la visualisation des données est dans l’interactivité.

Les infographies sont partout sur le Web en ce moment, et elles sont de plus en plus interactives. Sur cette page, j’ai rassemblé des exemples d’infographies interactives et j’ai examiné ce qui les rend géniales, vous trouverez des ressources pratiques et des bibliothèques pour vous aider à créer la vôtre.

Lisez la suite pour savoir comment créer un design qui s’engage vraiment avec son public.

 

01- Comprendre la psychologie

01-1-interactive-infographics

Cette infographie explique pourquoi les infographies fonctionnent

Avant de commencer à faire votre infographie interactive, il vaut la peine de considérer pourquoi vous la voulez interactive.

Comme l’explique l’infographie brillante Pourquoi Votre Cerveau Désire de l’Infographie, les personnes sont visuellement connectées. Nous sommes tous beaucoup plus susceptibles d’être prêts à lire, à comprendre et à nous souvenir d’une présentation qui inclut des visuels attrayants. Mais alors que les visuels sont sans doute l’outil d’apprentissage le plus essentiel, ils ne peuvent pas aller plus loin.

Il existe également la composante cruciale de l’apprentissage cinétique, grâce à laquelle les gens sont plus en mesure de conserver l’information en mouvement. Il est donc très logique que l’ajout d’interactivité au champ de visualisation des données déjà puissant rende l’infographie encore plus mémorisable et efficace.

Cette combinaison d’approches visuelles et cinétiques est ce qui transforme l’infographie interactive en visualisations de données d’avenir. Bien sûr, certains thèmes infographiques ne favorisent tout simplement pas l’utilisation d’éléments interactifs, mais beaucoup d’autres sont considérablement améliorés par eux. L’interactivité peut aider à donner un sens à l’information, le contrôle à l’utilisateur et à capturer l’imagination comme aucun graphique statique ne peut faire.

 

02- Ajoutez du piquant avec des effets de défilement

02-1-interactive-infographics

Les animations peuvent rendre plus intéressant un sujet ennuyeux

L’un des types d’interactivité les plus populaires ne nécessite qu’un petit défilement de la part de ses utilisateurs, déclenchant généralement des animations et des transitions. Créant un peu le même effet qu’une boite à surprises; Les utilisateurs ne peuvent s’empêcher de terminer ce qu’ils ont commencé.

C’est une excellente technique pour attirer les spectateurs dans une histoire et les faire se sentir plus engagés sans surcharger les limites d’intérêt. L’infographie ci-dessus utilise des animations subtiles et flashy qui rendent le voyage à travers un sujet assez ennuyeux aussi fun que possible.

Le défilement peut également être utilisé de manière très simple, avec des récits simples. Par exemple, regardez cette visualisation de la capacité de l’iPod. Le contenu est incroyablement basique, mais le facteur de défilement fait un excellent travail de communication du sujet.

 

03- Paginer pour une digestion facile

03-1-interactive-infographics

Séparer l’infographie en pages permettra à l’utilisateur de ne pas être débordé par l’information

Votre Dose Journalière d’Eau permet aux utilisateurs de cliquer sur les pages plutôt que de les faire défiler et montre comment certains concepts fonctionnent mieux avec cette approche multipage.

Les éléments sur chaque page sont interactifs au-delà du simple mouvement entre les sujets, donc cliquer sur une nouvelle page assure davantage à l’utilisateur qu’il est temps de bien digérer une partie avant de passer à la suivante.

 

04- Laissez les utilisateurs mettre en évidence certaines zones

04-1-interactive-infographics

Certaines des meilleures infographies ont une quantité incomparable de données et les distillent dans un seul graphique maniable. Mais ces visualisations prennent souvent beaucoup de patience et de persévérance pour être assimilées. La mise en lumière interactive de différentes parties peut aider à minimiser la confusion initiale, ce qui est essentiel pour attirer et retenir l’utilisateur Web moyen qui se laisse facilement distraire.

L’infographie sur les déclarations de revenus de La Direction Générale des Finances Publiques indiquée ci-dessus, Combien ne sont pas réclamées chaque année, aurait pu afficher le nombre d’individus et les montants de l’argent non réclamé par Etat dans un grand tableau, mais en présentant cela individuellement, c’est beaucoup moins confus.

04-2-interactive-infographics

Utiliser la même fonctionnalité dans les pages contribue à la cohérence

Les perspectives professionnelles (ci-dessus) qui affichent des pourcentages d’emplois offerts à la fois par profession et par niveau d’études, ont une présentation similaire. Mais cette infographie comprend tellement d’informations qu’il a été nécessaire de la diviser en plusieurs pages différentes.

Cependant, la fonctionnalité de rollover est la même sur toutes les pages, ce qui rend l’information comme étant d’un seul tenant. Si vous n’avez pas le temps ou les ressources nécessaires pour créer quelque chose d’aussi robuste, vous pouvez en général compléter avec quelques animations bien placées.

D’une manière beaucoup plus simple, ce guide commercial des actifs immatériels utilise des animations de défilement pour ajouter de la vitalité à ses graphiques et tableaux autrement mondains, ce qui contribue à attirer l’attention de l’utilisateur sur toute la page.

 

05- Cacher quelque information

05-1-interactive-infographics

Masquer des informations supplémentaires à explorer derrière des liens cliquables pour les utilisateurs

Une autre excellente façon d’amener les utilisateurs à participer activement à l’expérience infographique est d’avoir des clics ou des rollovers qui offrent plus d’informations. Non seulement cela encourage l’utilisateur à être curieux et à explorer, mais aussi lui permet de sauter des sujets mineurs qui ne l’ intéressent pas, sans le décourager à continuer avec le reste de l’infographie.

Sous la Matière Grise, on utilise des icônes intéressantes (comme ‘la Grosse Cargaison d’Einstein’) pour encourager les utilisateurs à lire les faits associés à chaque domaine du cerveau. A l’issue plus complexe des exemples, se trouve le guide SimpliSafe de la sécurité à la maison (montré ci-dessus). Il y a beaucoup plus que des liens cliquables dans ce voyage à travers les différents niveaux de la sécurité de la maison, mais leur inclusion permet une expérience d’apprentissage plus riche.

 

06- La participation de l’utilisateur est convaincante

06-1-interactive-infographics

L’information personnalisée est convaincante, mais seulement pour certaines situations

You vs John Paulson, montre un exemple du type d’infographie qui remplit ses informations en fonction des entrées de données particulières de l’utilisateur. En entrant votre salaire annuel, vous avez une comparaison avec le montant d’argent que le trader étranger John Paulson fait en quelques minutes (avec quelques autres exemples, juste pour bien vous faire comprendre).

Parce que ce type d’interactivité ne fonctionne que pour une minorité de sujets, il est moins fréquent que les autres. Cependant, c’est probablement aussi le plus convaincant, non seulement parce qu’il invite la plupart des utilisateurs à participer, mais aussi parce qu’il utilise des informations personnalisées.