Les transitions visuelles différenciées

L’informatique moderne permet d’interagir avec des systèmes complexes et de grandes quantités de données. Ceci oblige d’une part à coder toujours plus d’information en restant lisible, d’autre part à assurer la « conscience de la situation » de l’utilisateur, c’est-à-dire sa compréhension des évolutions du système [13].

L’animation est souvent évoquée parmi les solutions à l’un ou l’autre problème. Elle peut tout d’abord être exploitée comme canal supplémentaire de présentation d’information [21]. Elle permet aussi de notifier des événements de façon plus ou moins intrusive [4, 9] et de confirmer les conséquences d’actions par des retours animés [17, 19]. Parfois ces animations expriment des changements immédiats en des changements visuels fluides : on parle alors de transitions animées. Il est régulièrement avancé que les transitions animées sollicitent moins les capacités cognitives de l’utilisateur pour maintenir sa conscience de la situation [6, 7, 14, 17, 26]. Toutefois, alors que le média graphique est bien maîtrisé, concevoir des animations pour les interfaces reste une tâche compliquée. Comment concevoir, avec les animateurs, des animations cohérentes avec les représentations graphiques? Comment ne pas surcharger visuellement l’interface ? Quelles informations coder par des animations et comment ? Pour répondre à ces questions, nous allons tout d’abord introduire la notion de transition visuelle. Les transitions animées en sont des exemples. Nous utiliserons ensuite cette notion pour introduire une technique baptisée transition visuelle différenciée, ou transition différenciée.

Les transitions différenciées permettent de combiner dans une même opération visuelle les fonctions de transition et de présentation d’information. Cette approche repose sur la constatation suivante : bien que la plupart des animations de transition relient deux états par une trajectoire unique, plusieurs trajectoires sont possibles. Choisir une trajectoire plutôt qu’une autre suffit à véhiculer des informations utiles.

Dans cet article nous proposons une définition plus précise des transitions différenciées avant de montrer des exemples d’utilisation. Puis nous abordons les principales questions liées à la conception des transitions différenciées, et terminons en évoquant les travaux existants.

TERMINOLOGIE

Nous présentons ici une terminologie relative aux transitions différenciées, en nous appuyant sur une modélisation conceptuelle des transitions visuelles. La notion subjective d’animation [18] n’est pas évoquée ici, mais notre modèle s’applique aux animations de transition, qui constituent un cas particulier de transition visuelle.

Rendu
Nous supposons qu’une application graphique est constituée d’objets du domaine synchronisés avec une représentation visuelle. Chaque objet est caractérisé par un ensemble de propriétés dont chacune est rendue ou non. Une propriété est dite rendue si elle influe sur la représentation visuelle de l’objet. On suppose que la représentation visuelle d’un objet peut se déduire de la valeur de ses propriétés rendues, par application d’une fonction R de rendu statique. Pour rendre compte des effets de transition, nous introduirons des fonctions T de rendu transitoire qui fournissent une représentation de l’objet variable au cours du temps.

Transitions

Nous nous limitons au cas d’un objet du domaine composé de deux propriétés p et q, et pour lequel :
❖ p est une propriété rendue dont la valeur passe instantanément de p0 à p1 au temps t0.
❖ q est une propriété non rendue.

Par exemple, l’objet est une jauge qui contient un liquide de viscosité q (qi pour l’eau et qj pour l’huile), et dont le taux de remplissage p passe brusquement de p0 à p1. Ce changement peut se traduire visuellement :
❖ Sans transition (figure 1a): la mise à jour est effectuée par simple application de R(p) ; la représentation visuelle de l’objet change donc instantanément. Par exemple, la hauteur du liquide de la jauge varie brusquement.
❖ Par transition simple (figure 1b): nous disposons, en plus de R(p), d’une fonction de rendu transitoire T(p0, p1, t-t0) qui prend en entrée la variation de p et le temps écoulé depuis cette variation. T se substitue à R dans l’intervalle [t0, t1]. Par exemple, le liquide descend doucement en changeant de couleur.
❖ Par transitions différenciées (figure 1c): le cas est le même que précédemment mais la fonction de rendu transitoire T(q, p0, p1, t-t0) dépend de q. Par exemple, la jauge se videra plus ou moins vite en fonction de la viscosité.

Lorsqu’il se produit une transition différenciée, nous dirons que p est la propriété de référence et q est la propriété rappelée.

Transitions pseudo-différenciées et renforcement 

Intéressons-nous maintenant au cas où q est rendu, c’està-dire lorsque les fonctions de rendu statique et transitoire dépendent de q. Par exemple p est traduite par la position d’une icône et q par sa couleur.

Sous cette hypothèse, les transitions simples deviennent des transitions différenciées. Dans la figure 2a, les transitions sont différenciées dans la mesure où le déplacement d’une icône jaune et le même déplacement d’une icône bleue sont deux effets visuels différents. Dans ce cas, nous parlerons cependant de transitions pseudo-différenciées afin de le distinguer des situations où d’autres dimensions visuelles comme la trajectoire spatiale sont également fonction de q (figure 2b). Cette distinction est possible dans le cas où le rendu R est décomposable en deux rendus partiels Rp et Rq . Par exemple, Rp donne la position de l’icône en fonction de p et Rq sa couleur en fonction de q. Dans ce cas, chaque variation de p peut se traduire visuellement par :
❖ des transitions pseudo-différenciées (figure 2a) : le rendu statique est une combinaison de Rp et Rq , le rendu transitoire est une combinaison de T(p0, p1, tt0) et de Rq.
❖ des transitions différenciées (figure 2b): même cas que précédemment, mais le rendu transitoire partiel T(q, p0, p1, t-t0) dépend de q. Dans ce cas particulier, on parlera de renforcement de transitions pseudodifférenciées.

EXEMPLES DE TRANSITIONS DIFFERENCIEES 

Dans cette partie, nous illustrons les transitions différenciées par deux nouvelles techniques appelées Graviticônes et Mobilistes. La plupart des animations décrites ici peuvent être visualisées en Flash depuis le site http://www.intuilab.com/transdiff.

Les Graviticônes 

Dans les bureaux virtuels, la copie d’un fichier s’accompagne parfois de l’affichage d’une barre de progression, et s’achève par l’apparition soudaine du fichier copié dans la fenêtre de destination (figure 3). Des efforts sont portés sur l’animation d’attente, mais peu sur la continuité visuelle de l’opération dans sa globalité. Par ailleurs, peu d’attention est prêtée à la prévention d’erreurs et à la conscience de la situation : au début de la copie, les informations sur le fichier et le transfert ne sont accessibles qu’à travers un examen attentif, et la copie terminée, les indications fournies sont maigres.

Les Graviticônes comblent ces lacunes par des transitions différenciées. Nous les illustrons par un scénario. Pour son état de l’art, Charles, chercheur en IHM, télécharge une vidéo. A l’initiation du transfert, l’icône de la vidéo se duplique, s’étire longuement (figure 4a) et est lentement « aspirée » par un tube (figure 4b) ; Charles en déduit que la vidéo est lourde et le transfert lent. Pendant le téléchargement, il trouve la même vidéo sur un autre site duquel il tente le téléchargement. La copie de l’icône s’étire autant mais est très rapidement aspirée par le tube ; il en déduit que le transfert est beaucoup plus rapide. Charles choisit donc d’interrompre le téléchargement précédent.

Charles veut ensuite copier son article et les documents associés sur une clé USB. Il commence par son article : l’icône est aspirée (figure 5a, 5b), rapidement « expirée», puis se positionne légèrement (figure 5c); la copie est rapide et le fichier de petite taille. Ensuite, il copie le répertoire contenant les articles de son état de l’art. Alors qu’il s’apprête à copier la vidéo, l’icône du répertoire s’écrase très lourdement (figure 4c). Il en déduit qu’il est très gros. Il décide alors de ne conserver que les articles indispensables afin de libérer de la place sur la clé USB pour sa vidéo.

Les Graviticônes s’appuient sur un modèle de fichiers qui préserve la cohérence pendant la copie : en plus d’une taille, chaque fichier possède un emplacement variable qui peut être soit un répertoire soit un processus de transfert, et une vitesse de transfert. Des animations de transition sur l’emplacement (propriété de référence) permettent à la fois d’assurer la continuité visuelle et d’évoquer la taille et la vitesse (propriétés rappelées) par des déformations et des variations sur la durée de l’animation.

Les Mobilistes 

Couramment employés dans les IHMs, les composants « liste » peuvent comporter des éléments hétérogènes, comme des fichiers et des dossiers. Ils peuvent également être réordonnés suite à un calcul ou un événement. Visuellement, ces modifications peuvent être exposées :
➤ Sans transition, comme dans les listes classiques. De par leur immédiateté, les changements d’ordre peuvent être difficile à interpréter [17].
➤ Par transitions simples, ou pseudo-différenciées lorsque chaque type d’élément possède un rendu différent. On peut animer de façon fluide des déplacements d’éléments, comme dans DigiStrips [17]. La nature des changements est plus claire : l’animation crée un lien continu entre l’état de départ et d’arrivée.
➤ Par transitions différenciées, par exemple en animant différemment les déplacements d’éléments selon leur type. La nature du réordonnancement est visible, ainsi que les types des objets concernés. Il s’agit d’une technique de type Mobiliste.

Table des matières

I)INTRODUCTION
II) GENERALITES
III) METHODOLOGIE
IV) RESULTATS
V) COMMENTAIRES ET DISCUSSION
VI) CONCLUSION  
VII) REFERENCES
ANNEXES
RESUME

Lire le rapport complet