Sites Inria

English version

Démonstrateur

1/03/2016

Efficacité et performance des transitions animées

Un nouveau démonstrateur, TAN, vient de faire son entrée au plateau Inria situé à EuraTechnologies. TAN propose d’illustrer trois exemples des travaux de recherche menés par Fanny Chevalier, chercheuse au sein de l’équipe de recherche Inria Mjolnir (commune avec l’université de Lille 1)* dans le domaine des transitions animées.

Internet regorge de transitions animées parfois gênantes pour l'usager, avec trop de stimulation visuelle, et souvent inutiles car l'animation ne véhicule pas la bonne information. En revanche, quand elles sont bien conçues, les transitions animées sont redoutablement efficaces. Le démonstrateur TAN propose d’illustrer trois exemples des travaux de recherche en cours dans le domaine des transitions animées.

Dans le cadre de ses travaux de recherche, Fanny Chevalier, chercheuse au sein de l’équipe de recherche Inria Mjolnir (commune avec l’université de Lille 1)*, a développé des modèles de transitions animées permettant une meilleure compréhension des interfaces, et conçu des outils les utilisant pour faciliter, par exemple, le travail de retouche d’image, ou l’édition de documents. Pour véhiculer au mieux l'information utile, le travail initial de conception de transitions animées est primordial. Ce travail est complexe en raison des nombreux paramètres à intégrer tels que la nature des transformations, les placements et trajectoires, les durées, rythmes et séquencement, etc. Le démonstrateur TAN, nouvellement installé sur le plateau Inria à EuraTechnologies, présente trois exemples de ses travaux.

Histomages

La retouche d'image qui associe les espaces de pixels et de couleurs.

Les histogrammes sont utiles pour comprendre les caractéristiques colorimétriques d'une image. On les retrouve sur les appareils photo numériques, ou par exemple dans les outils tels que Photoshop comme indicateurs pouvant guider la retouche numérique. Les manipulations d’images qui se basent sur la modification des histogrammes sont assez complexes pour les non-initiés, car les outils sont souvent peu adaptés. Histomages propose des animations qui facilitent la compréhension et la manipulation de cette représentation histogramme pour la retouche d’images numériques. Les pixels de l’image s’animent pour se « réorganiser » en fonction de leur valeur de couleurs, et former progressivement l’histogramme. Les pixels peuvent ensuite être directement déplacés dans cet espace de couleurs, par exemple, en faisant glisser une sélection de pixels clairs dans l’histogramme de luminance, vers une zone plus foncée. Des animations simples pour comprendre les correspondances entre deux représentations de la même image sur lesquelles on peut indifféremment travailler.

Diffamation

Des animations pour suivre et comprendre les modifications d’un document dans le temps.

Lorsque l'on produit un document texte ou du code source, on prend généralement soin de sauvegarder différentes versions plus ou moins stables pour garder une trace du processus d’écriture. Conserver différentes versions d’un même document s’avère utile quand on veut, par exemple, retrouver du contenu d’une ancienne version qui a été supprimé ou modifié depuis, ou quand on désire tout simplement comparer des versions.

Pour comprendre les changements entre différentes versions, les outils disponibles à l’heure actuelle présentent :

Soit une liste complète des changements comme ce que l’on peut voir sur Wikipedia. Cette liste montre les morceaux de texte modifiés hors de leur contexte.

  • Soit une représentation côte à côte de deux versions pour une comparaison directe : des couleurs sont utilisées pour mettre en avant le texte présent dans l’une ou l’autre des deux versions. Cette présentation fonctionne bien avec des lignes de code, que l’on peut aligner facilement, mais cela reste moins efficace avec du texte long où les correspondances ligne à ligne ne sont pas toujours possibles.
  • Soit une représentation de deux versions combinées, façon « mode révision » sous Word par exemple : les ajouts sont colorés et les suppressions sont barrées pour facilement repérer les changements. Dans ce dernier cas, si l’on voit les changements dans leur contexte, on ne voit en revanche pas pas ni les deux versions du document original, ni la version finale : il faut reconstruire ces dernières mentalement.

Toutes ces options ont des qualités et peuvent être très efficaces lorsqu'on connaît les versions que l'on cherche car elles sont limitées à deux versions en particulier. Mais pour aller plus loin et montrer plus de deux versions, Diffamation propose d’animer du texte entre différentes versions d'un même document. Diffamation intègre des animations élaborées qui montrent de manière intelligible les ajouts, modifications et suppressions de texte entre deux versions ou plus du document.

Gliimpse

Un éditeur pour les langages à balises (e.g. HTML, LaTeX, wiki) qui permet de basculer instantanément du code source au document qu’il produit, et inversement.

Les langages dits "à balisage" (Markup Language) sont très répandus sur le Web, avec pour exemples les plus populaires, le langage wiki, ou le langage HML. Dans un document en Markup , toutes les informations sur la mise en page et le style, telles que la mise en forme du texte, les polices, ou encore les éléments graphiques spéciaux comme les tables, sont indiquées au moyen de balises. Ce modèle, qui sépare les détails de mise en forme du document de son contenu, a l’avantage de permettre une édition plus générique du rendu final du document. Par exemple, il est possible de changer d’une seule opération la couleur de tous les titres dans un document Markup (tous les titres balisés seront affectés), alors qu’il faudrait changer cette option pour chaque titre un à un dans un document classique (dit WYSIWIG).

A l'heure actuelle, pour éditer du wiki, la manipulation est assez fastidieuse : il faut changer le code Markup du document, puis, pour voir le résultat, il faut sauvegarder et compiler ou recharger la page (par ex. Wikipedia).

Les langages à balise sont aussi très utilisés par les scientifiques comme par exemple le langage d'édition LaTeX, qui offre une grande qualité de mise en page de documents, et d'édition de formules mathématiques complexes. Ici aussi, les méthodes d'édition reposent soit sur un modèle enregistre/montre le rendu, soit sur un modèle visualisation côte à côte des lignes du langage. Ce mode de visualisation côte à côte  est plutôt efficace mais il peut encore être amélioré.

Gliimpse permet de passer instantanément du code source au document qu’il produit, sans passer par des manipulations répétitives de sauvegarde et compilation. Des animations sophistiquées permettent de comprendre le lien entre le texte brut du code et les textes formatés, images et autres éléments visuels qu’il produit. Les transitions animées sont optimisées pour visualiser sans effort la représentation mise en forme d'un document défini par balises.

Pour découvrir et tester ces trois exemples de transitions animées, rendez-vous sur le Plateau Inria à EuraTechnologies où vous pourrez échanger avec nos chargés des partenariats et projets d’innovation. Vous pouvez aussi allez découvrir le site de TAN et tester les démonstrations proposées.

 

* équipe Mjolnir (commune avec l'Université Lille 1) au sein de l'UMR 9189 CNRS-Centrale Lille-Université Lille1, CRIStAL.

Haut de page

Suivez Inria tout au long de son 50e anniversaire et au-delà !