Le “dashboard” un sous genre de la visualisation de données complexes

Dans le genre de la représentation des données, le “dashboard” est assez souvent représenté sous forme d’infographie, fixe et statique. On voit pourtant de plus en plus de ces “tableaux de bords” compiler des données dynamiques dans des présentations adaptées et graphiquement abouties.

En quelques années d’observation, il m’a été donné d’en collecter quelques exemples que voici (cliquez sur les images).

Tout utilisateur de Mac connait l’application “dashboard” d’OSX, souvent considérée comme intrusive, suffisamment en tous cas pour voir fleurir des scripts “anti dashboard” un peu partout sur le web.

Le plus connu sans doute et le premier à avoir présenté une forme sexy et amusante est celui de sprint.

Dans le même esprit, plus marketing, et pour les alcooliques, celui sponsorisé par la Vodka Grey Goose, dans le même esprit que Sprint, en plus ésotérique.

Un prestataire leader dans le domaine : idashboard, qui s’est fait une réputation en représentant les résultats des jeux olympiques de Vancouver.

Un autre prestataire moins convaincant graphiquement : Inverra

La rmn renoue avec ses ambitions multimédia

Vous avez dit croissance ?

Pas très original, j’ai répondu à la question sur ce que je ferai si j’avais une minute par “sleep”. Comme la grande majorité des contributeurs du site Test Tube, qui annonce le prochain film de David Suzuki. Un petit film de présentation qui parle de croissance, de démographie et de chiffres exponentiels. Une question est posée au début du film, et tous les gens qui ont répondu comme vous apparaissent sur l’écran, attachés à de petites bactéries flottantes. C’est bien fait. Le player subtil des produits NFB est réutilisé, et un petit détail amusant, vous pouvez réduire ou grossir à la volée David Suzuki qui vous parle. Tout est dans ce détail.

Voir Test Tube

Que la montagne est belle…

Il y a une petite semaine, l’Office National du Film du Canada mettait en ligne une présentation multimédia du Mont Royal, cette colline qui surplombe Montreal, passage obligé et bucolique, à deux pas de l’agitation urbaine.

Un sans faute. Non seulement la réalisation est parfaite, mais au delà de la technique, les designers du Dpt. (le studio graphique en charge de projet) ont réussi à instiller ce qui est sans doute le plus difficile dans un projet : une ambiance.

Pour cela, ils ont modélisé la montagne en 3D, comme un objet flottant sur un fond nocturne, avec un léger effet de paralaxe qui lui donne un relief subtil.

C’est souvent dans le détail que l’on remarque l’intervention d’une vrai équipe graphique sur ce type de projet. Et la, pour qui est attentif, on a une multitude de détails qui donnent une finesse d’execution remarquable : les transitions sur les portfolios photos, le jeu discret de 3D sur les typos flottantes, les effets d’intéraction sur les vignettes (fade out + blur + mouvement)… Tout cela est très bien fait.

Et pour parfaire le tout, l’intervention de l’audience relève encore le niveau, en donnant un aspect vivant à un sujet qui aurait pu être très académique : le feed de tweets sur le sujet, le renvoi vers les vidéos d’Urbania et les photos de flickr, les témoignages téléphoniques des amoureux de l’endroit…

De la belle oeuvre, qui nous dit encore que si l’habillage ne fait pas tout, il permet de transcender un sujet.

Voir Sacré Montagne

Pourquoi on n’est pas encore prêt à voir des webdocus en html5

Je réagis à un article de 3wdoc, sur le sujet.

Plutôt nuancé, l’auteur énonce certains faits sur le html5 qui ne me semblent pas aussi évidents que cela.

Le html5 n’est pas une technologie ouverte

Le html5 n’est pas une technologie totalement ouverte, contrairement à ce que l’on peut entendre. C’est au contraire un puissant organisme de censure qui empêche n’importe qui de faire n’importe quoi, ce qui est une bonne chose en soi. Cependant, l’expérience prouve que toute tentative de formater le web reste assez peu probante aujourd’hui. La transversalité n’est pas du tout une réalité. En fait, moi mon expérience, c’est que ce que l’on trouve de plus transversal aujourd’hui au dela du html de base, c’est flash, installé par défaut avec tous les navigateurs. Amusant non ?

Une technologie ouverte n’est pas gage de succès

Quand bien même le html5 serait ouvert aux contributions de développeurs open source, cela ne voudrait pas dire grand chose. En effet, on s’aperçoit en examinant l’histoire récente que ce sont les industriels qui se sont fait la part du lion. Rien ne dit que cela continuera, surtout pas moi, mais aujourd’hui, les leaders du marché sont Microsoft et son navigateur, contre Firefox qui se fait sévèrement tailler des croupières (trop lourd, trop ouvert…), Adobe contre tous ceux qui se sont essayés à les concurrencer.  Le dernier exemple qui me vient à l’esprit est Gimp qui est une hérésie en matière d’ergonomie.

Finalement, l’open source reste encore un truc de geeks, le grand public etant frileux, et sourtout parceque les meilleurs dev finissent toujours chez les gros acteurs du marché. C’est simple : ils payent… c’est triste mais le profit est un moteur puissant…

La puissance du html5 ?

Elle reste encore vraiment à prouver. Comme les exemples fournis dans un article précédent, et que je ne peux m’empecher de redonner ici, le html5 est vraiment loin du compte pour arriver aux fonctionnalités et à la puissance de flash. De nombreuses années les séparent.

Moi aussi, j’ai eu l’occasion de voir le site réalisé pour Arcade Fire. J’adore ce genre d’exemple qui joue en fait comme un contre-exemple. Ca ne marche bien que sur un seul navigateur (Chrome). Le preload est à revoir, il faut attendre plusieurs minutes pour que ca monte (et je suis très patient). Pour insister sur cette notion de preload, Adobe a énormément réfléchi à cette question et son système est d’une performance inégalée. Enfin, j’ai trouvé la démonstration faible, le principe de l’ouverture de fenêtres multiples (avec présence de la barre haute de header !) étant une hérésie selon moi. Cette fonction Javascript de base qu’est l’OpenWindow a été abandonnée depuis plus de 5 ans. J’irais même plus loin, on a créé les bloqueurs de popup popunder pour empecher cette pratique trop intrusive.

J’attends toujours le site qui me fera craquer pour le html5.

La puissance de flash

Tous les sites chroniqués ici sont fait en flash. Je dis bien tous. Flash est incontournable et le restera longtemps  avant de trouver un concurrent convaincant, car il est simple et bien pensé. Imaginer que l’on pourra faire la même chose en html5 est assez peu probable, sauf en s’entourant d’une batterie de développeurs qui multiplieront les coûts de production dans des proportions qu’aucun producteur de contenu ne sera prêt à assumer.

Et cela ne fait que commencer. Après la gestion très pointue de la 3D temps réel, flash vient d’annoncer son player en 64bits. Miam ! Ca va dépoter.

Une ouverture pour l’html5

C’est vrai aussi qu’il y a de très bonnes choses dans l’html5.

Tout le monde va s’y mettre et moi aussi, mais pas dans le webdocu il y a peu de chance qu’il remplace ce qui est fait aujourd’hui avec flash, donc qu’il devienne une alternative pour les webdocus. Pas assez souple.

Et je crois que le langage sera vraiment utilisé par le plus grand nombre quand on aura un éditeur html5 qui permettra d’en exploiter les fonctions et les librairies (javascript) complexes. Et la vous savez quoi ? Ca sera Adobe qui créera ce logiciel là, comme il l’a fait avec Dreamwaver. On a pas fini de rigoler…

Pourquoi vous DEVEZ vous mettre à After Effect !

Merci à Maxime Jegat pour ce lien qui complète les quelques articles que j’ai pu faire sur ce sujet, dans le périmètre de la photo créative. Un bon nombre d’exemples complémentaires de ce qui est faisable avec ce logiciel, réalisables aussi avec flash (mais avec un niveau d’expertise un peu plus soutenu…), dont nombre avec de beaux travaux de typo cinétique.

Dans ce dernier genre, je ne peux m’empêcher de vous ressortir le fameux “houellebecq”

Lire l’article sur After effects (sur multimediashooter)

Le Houellebecq :

Plongée photo

Je ne me souviens plus grand chose de cette série, mais je me souviens bien que c’est une des première fois que je voyais cette technique utilisée. Carnivale, un cas d’école qui a fait des émules. Tellement qu’aujourd’hui, le style en est devenu presque banal. A l’époque, After Effects ne permettait pas vraiment ce genre de traitement dont l’expert était Houdini, de Side Effects.

Quelques exemples donc, avec After Effects, ci dessous.

Et un site, qui applique la même technique, mais avec flash avec interactivité et en temps réel. Un classique.

Stories 2010, un cas d’école

Il y a 6 mois quand j’étais tombé sur ce site réalisé par le “Census Bureau” américain, l’équivalent de l’Insee pour le recensement en France, je m’étais dit “wow !”.

Et en le revisitant aujourd’hui, je me dis un peu la même chose. Un design d’interface équilibré, clair, qui laisse la place aux témoignages. Un double système de navigation : par mosaique, très classique mais surtout un triple panoramique à 180°, géographique (campagne, ville, village), réalisé dans ce genre que j’affectionne particulièrement : l’effet de paralaxe. Des sous-titres anglais/espagnol activables à la volée (pas si simple…), un preload explicite et un player subtil (la barre de progression qui se grossit quand on la saisit…).

Bref, de la belle oeuvre qu’on aimerait voir plus souvent.

Voir Stories 2010