L’utilisation des animations dans les interfaces graphiques

L’utilisation des animations dans les interfaces graphiques

L’utilisation des animations dans les interfaces graphiques

L’animation est définie comme étant l’art de dessiner le mouvement en plus de manipuler et d’interpréter les actions sous-entendues qui se déroulent entre chaque cadre clé. Cette définition indique que les transitions entre deux cadres peuvent être plus importantes que les cadres eux-mêmes (Baecker et Small, 1990). En effet, les domaines des sciences et des arts visuels affirment que le mouvement possède un potentiel de communication plus riche que les éléments statiques. Le mouvement et les animations peuvent être efficaces d’un point de vue perceptuel pour le recueil et le traitement de l’information en plus d’être facilement interprétables par l’homme. Bien qu’ils soient utiles pour aider à faire ressortir visuellement des changements tout en augmentant la capacité d’interprétation des systèmes complexes, ces concepts sont souvent sous-utilisés lors de la conception des interfaces graphiques (Bartram, 2007). Les animations peuvent être employées dans divers contextes comme pour montrer le déroulement d’une histoire, d’un processus ou d’une simulation, ou encore pour amuser à l’intérieur d’un jeu vidéo. Toutefois, cet ouvrage s’intéressera particulièrement à l’utilisation des animations pour montrer des changements d’état ou des transitions entre différentes vues de données.

En se basant sur les principes utilisés par les créateurs de dessins animés, Chang et Ungar (1993) ont créé un modèle appliqué aux éléments de l’interface graphique d’un système d’exploitation. En remplaçant les transitions soudaines par des transitions animées, ils ont démontré que les animations peuvent augmenter la compréhension, l’attrait et l’expérience des interfaces utilisateur. Plus tard, Thomas et Calder (2001) ont repris ce modèle afin d’étendre les principes proposés dans un contexte réaliste, soit dans un prototype de logiciel pour le dessin par ordinateur. Leurs études démontrent que les animations peuvent aider à diriger et concentrer l’attention de l’utilisateur sur des éléments clés de l’interface graphique. Cependant, ils notent qu’une animation inappropriée pourrait distraire l’utilisateur en attirant son attention sur l’animation elle-même et non sur la complétion efficace de la tâche en cours.

Présentation statique ou animée

À l’intérieur d’un logiciel de visualisation ou de furetage de données, il arrive souvent que l’utilisateur change la vue des données. La transition entre deux vues de données peut se produire de deux façons. Premièrement, la transition peut être soudaine (aussi appelée une transition statique ou immédiate), c’est-à-dire que la nouvelle vue s’affiche directement sans aucune animation (voir Figure 1.1, en haut). L’autre méthode consiste à utiliser une transition fluide ou animée (voir Figure 1.1, en bas) qui montre de façon constante la progression des changements entre la vue initiale et finale. Cette dernière permet de mieux comprendre la direction des mouvements et de bien associer la position de chaque élément du début à la fin de la transition. La Figure 1.1 montre un exemple où les données sont représentées par des points, mais une transition de vue peut arriver dans n’importe quelle visualisation de données par exemple dans les visualisations d’arborescences, de graphes ou d’histogrammes. Ces transitions peuvent impliquer un changement du positionnement, des couleurs, de la taille ou de l’orientation des éléments. Du point de vue de l’utilisateur, elles peuvent aussi opérer sur un défilement ou un zoom en deux dimensions, un changement de caméra dans une visualisation en trois dimensions, ou encore un changement dans le genre de représentation visuelle.

Figure 1.1 Comparaison entre une transition soudaine (en haut) et une transition animée (en bas) Plusieurs études ont été menées afin de démontrer si l’utilisation des animations apporte un réel avantage à la manipulation d’une interface graphique ou à la visualisation de données. Parmi celles-ci, Robertson et al. (2002) ont trouvé que les participants préfèrent des animations pour visualiser des changements entre les points de vue d’un ensemble de hiérarchies en plus de réduire le temps de complétion des tâches par rapport à une transition soudaine. Klein et Bederson (2005) démontrent que le défilement vertical animé dans un document contenant du texte augmente l’efficacité des tâches de lecture et de repérage d’éléments précis comparativement à un défilement direct non animé. Selon Heer et Robertson (2007), il est plus facile d’identifier le déplacement d’un élément et d’estimer le pourcentage de changement d’une valeur entre deux dispositions différentes d’un graphique de données statistiques à l’aide d’une transition animée plutôt qu’une transition soudaine. Finalement, Shanmugasundaram et al. (2007) ont montré que les utilisateurs ont plus de facilité à percevoir les connexions entre les éléments d’un diagramme noeuds-liens quand des transformations sont appliquées avec une transition fluide. Leurs résultats indiquent aussi qu’il est ainsi plus facile de maintenir mentalement les informations sur la structure d’un graphe à travers divers changements de points de vue tout au long de l’animation.

Quelques techniques de base

Les ralentissements en début et en fin de mouvement (slow-in et slow-out) tentent de reproduire le déplacement réel d’un objet physique qui a une masse et une inertie. Le mouvement sera alors plus lent au début avant d’atteindre une vitesse maximale puis ralentir jusqu’à un arrêt complet. Cette technique permet de minimiser l’effet de surprise lors du début de l’animation et aussi de préparer l’utilisateur à un déplacement plus rapide par la suite (Chang et Ungar, 1993). Utilisée par les animateurs, cette technique s’est répandue chez les chercheurs dont Chang et Ungar (1993), Bederson et Boltman (1999), Yee et al. (2001) ainsi que Heer et Robertson (2007) pour développer des animations par ordinateur dans plusieurs prototypes de recherche. De plus, Dragicevic et al. (2011) comparent différentes distorsions temporelles pour les animations dont une vitesse constante pour toute la durée de l’animation, un ralentissement en début et en fin de mouvement, une accélération en début et en fin de mouvement ainsi qu’une vitesse adaptée en fonction des parties les plus complexes de l’animation.

Le ralentissement en début et en fin de mouvement s’avère le plus efficace parce qu’il maximise la prédiction du mouvement. Un autre principe qui favorise le renforcement de la réalité est le mouvement des objets selon des trajectoires arquées. Lorsqu’un objet se déplace de façon non interactive selon ses propres forces, il a tendance à adopter un mouvement légèrement curviligne plutôt que rectiligne (Chang et Ungar, 1993). Un exemple concret de ce principe est utilisé par Yee et al. (2001) pour l’animation de noeuds dans un graphe de données avec une disposition circulaire sur plusieurs orbites. Au lieu de faire une simple translation linéaire entre deux positions, ils utilisent une transition arquée suivant la trajectoire de l’orbite de chaque noeud. Ainsi, le mouvement est non seulement plus naturel, mais cela empêche aussi les deux trajectoires de se croiser apportant donc moins de confusion lors de la transition et moins d’occlusion entre les éléments. Pour y arriver, les chercheurs utilisent des coordonnées polaires plutôt que des coordonnées rectangulaires étant donné que la disposition du graphe est circulaire.

Les transitions visuelles différenciées

En plus de répondre aux principes de base des animations, les transitions visuelles différenciées ont le mandat de présenter de l’information. En effet, elles regroupent dans une même séquence des éléments propres au mouvement entre les éléments tout en rajoutant une dimension adaptée aux données. Pour concevoir des transitions différenciées efficaces, Schlienger et al. (2006) proposent un guide comportant quelques éléments à suivre. Ils énoncent qu’il est nécessaire de privilégier la continuité, de jouer sur les paramètres des trajectoires (vitesse, accélération, oscillations et déformations), d’exploiter les apparitions et les disparitions, de bien combiner les transitions entre elles et de favoriser le travail avec un animateur. Ils conseillent aussi de rester honnête pour éviter de confondre une animation avec une évolution réelle du système et ainsi venir biaiser l’interprétation de l’utilisateur. Pour démontrer visuellement ce concept, deux exemples de transitions différenciées ont été implémentés : les Graviticônes et les Mobilistes. Le premier exemple est utilisé dans le contexte de la copie ou du téléchargement d’un fichier dans une interface de bureau virtuel.

L’animation, en plus de montrer la progression de la copie, évoque également la taille du fichier en question et la vitesse de transfert. De plus, elle permet de suivre le déplacement du fichier depuis son endroit d’origine jusqu’à sa destination finale. Ainsi, pour chaque copie, l’animation utilisera des déformations différentes et appropriées en fonction des informations du système (taille du fichier, emplacement, vitesse initiale et vitesse finale). De leur côté, les Mobilistes, utilisées dans la gestion du transport d’un aéroport, ont pour but de notifier le contrôleur lorsqu’une modification se produit dans l’horaire des déplacements prévus afin qu’il puisse adapter ses directives. Ainsi, les animations utilisées prennent en compte le type de véhicule impliqué dans la modification afin de rendre une trajectoire cohérente aux objets qui se sont déplacés dans l’interface. L’avion va donc survoler la liste par la droite, un autobus va faire marche arrière vers la gauche puis s’insérer au bon endroit tandis qu’un véhicule de service effectuera un demi-tour vers la gauche. Si plusieurs changements surviennent en même temps, ces transitions différentiées pourront être juxtaposées pour se produire l’une après l’autre. La Figure 1.2 présente la séquence d’animation d’une inversion de deux éléments de la liste représentés par un avion et un véhicule de service.

Table des matières

INTRODUCTION
CHAPITRE 1 REVUE DE LA LITTÉRATURE
1.1 L’utilisation des animations dans les interfaces graphiques
1.1.1 Présentation statique ou animée
1.2 La conception des animations
1.2.1 Quelques techniques de base
1.3 Les transitions visuelles différenciées et les transitions par étapes
1.3.1 Les transitions visuelles différenciées
1.3.2 Les transitions par étapes
1.3.2.1 Les transitions animées pour la visualisation des arborescences
1.3.2.2 Les transitions animées pour la visualisation des graphiques statistiques
1.3.3 Opportunités pour des recherches futures
1.4 Les widgets et le contrôle des animations
1.4.1 Les menus contextuels pour le contrôle continu
1.4.2 Les widgets conçus pour contrôler des animations
1.5 Résumé
CHAPITRE 2 ANALYSE ET CRÉATION D’ANIMATIONS POUR LES ARBORESCENCES
2.1 Implémentation d’un prototype
2.2 Les animations linéaires et par étapes
2.3 Les animations hiérarchiques
2.4 Analyse des possibilités et choix de compromis
CHAPITRE 3 EXPÉRIMENTATION ET RÉSULTATS
3.1 Méthodologie de l’expérimentation
3.1.1 Identification des tâches
3.1.2 Hypothèses
3.1.3 Déroulement
3.1.4 Équipements et environnement de test
3.1.5 Participants
3.1.6 Conditions de l’expérimentation
3.2 Analyse et discussion des résultats
3.2.1 Résultats pour la tâche principale
3.2.2 Résultats pour la tâche secondaire
3.2.3 Appréciation et classement des animations selon les participants
3.2.4 Retour sur les hypothèses
3.3 Directives de conception des animations
CHAPITRE 4 ANALYSE ET CRÉATION DE WIDGETS POUR LE CONTRÔLE DES ANIMATIONS
4.1 Définition des propriétés pour le contrôle des animations
4.1.1 Le contrôle discret des animations
4.1.2 Le contrôle continu des animations
4.1.3 Repérage de la position dans l’animation
4.2 Conception des widgets pour le contrôle des animations
4.2.1 Caractéristiques de base pour concevoir des widgets novateurs pour le contrôle des transitions
4.2.2 Maquettes de widgets novateurs pour le contrôle des animations
4.3 Résumé
CONCLUSION
LISTE DE RÉFÉRENCES BIBLIOGRAPHIQUES
Tableau 3.1 Résumé des hypothèses sur la performance des animations
Tableau 3.2 Résumé du support des hypothèses par les résultats de l’expérimentation
Tableau 3.3 Résumé des directives de conception pour les transitions animées

Télécharger le rapport complet