Les illustrations interactives

Une illustration interactive est une image fixe qui dispose de zones actives ou de boutons affectant une action spécifique à chaque région. Il peut s’agir d’une image, d’une photographie, d’une frise chronologique, d’un graphique ou encore d’une carte avec une fonction interactive. A l’inverse de l’animation, l’illustration est composée d’une seule image disposant de zones définies auxquelles le concepteur a donné une action.

Les zones actives sont des formes (rectangle, ellipse, polygone, etc.) de recouvrement de l’image. Elles prennent différentes formes (textes, bulles, boutons, lignes, icônes, etc.) et peuvent être visibles directement sur l’image, délimitées par un contour, mises en transparence et/ou discernables uniquement en passant la souris sur l’emplacement actif. Elles sont programmées pour effectuer une action sur l’image (changer de couleur, afficher

140 Mayer, R.E. (2005). Op cit.

141 Tassini, S., Bétrancourt, M. (2003). Le contrôle sur l’animation influence-t-elle le niveau d’efficacité cognitive de l’animation. Communication à la Neuvième journée JETCSIC, Dijon, 21 juin 2003.

142 Hegarty, M, Waller, D. (2005). Individual differences in spatial abilities. The Cambridge handbook of

visuospatial thinking. 121–169.

143 Bétrancourt, M. (2005). The animation and interactivity principle in multimedia learning. In R. E. Mayer (Ed.), The Cambridge handbook of multimedia learning (pp. 287-296). Cambridge : Cambridge UniversityPress.

144 Bétrancourt, M., Tversky, B. (2000). Effect of computer animation on user’s performance: a review. Le travail

70 des informations textuelles, des images, etc.), ouvrir de nouvelles ressources (images, vidéos, audio, etc.) dans une autre fenêtre, amener vers une page du manuel numérique ou encore ouvrir une page internet.

Il n’y a pas de mouvement fluide dans le temps, ni de déplacement, mais une superposition de calques représentant plusieurs images, impliquant un changement bref de l’image lors d’une action donnée par l’utilisateur. L’illustration interactive est à scénarii paramétrables par l’utilisateur. En fonction de sa demande, les zones activées laissent apparaître le contenu demandé, se superposent aux autres zones (actives ou inactives) ou s’ouvrent dans une autre fenêtre.

Image 13 : Frise chronologique interactive. Manuel numérique d’histoire de T. L/ES de Bordas.

C. Kohls et T. Windbrake (2006145, 2007146) étudient les modèles d’interaction employés dans les illustrations interactives comme les zones actives, l’activator, les NO-GO-AREAS et le Sandbox que nous allons résumer.

145

Kohls, C., Windbrake, T. (2006). Towards a Pattern Language for Interactive Information Graphics. Pattern Languages of Programming Design 2006. Portland, Oregon: Hillside Group.

71 Les zones actives (active areas) affichent des étiquettes, des informations ou des états de l’objet en fonction du contexte spatial ou de l’arrière-plan. Elles représentent une forme géométrique (rectangle, ellipse, polygone, etc.) active et généralement transparente. Certaines zones actives définissent les propriétés de l’objet qui glisse sur l’image du fond. La figure ci-dessous montre un drapeau (objet glissant) qui change son aspect visuel lorsqu’il est déplacé sur un autre pays (la zone active). Nous apercevons trois zones actives (les trois pays) et un objet transformable (morphable object) qui peut se déplacer avec la souris. Les zones actives restent généralement fixes.

Image 14 : Carte interactive

Les objets morphables peuvent changer leur apparence le plus souvent :  en une nouvelle image pour montrer un autre état de l’illustration ;  en utilisant un autre texte pour marquer la zone ;

 en changeant de couleur, de forme ou d’opacité de l’objet.

L’activator active l’image ou un objet visuel sur demande. A l’inverse de l’objet transformable, l’activator fait évoluer la zone de l’arrière-plan. L’illustration ci-dessous montre une image d’un inspecteur qui peut se déplacer au-dessus de chaque personne et afficher le squelette.

Image 15 : Inspecteur d’image (Kohls et Windbrake, 2007)

146 Kohls, C., Windbrake, T. (2007). Where to go and what to show: more patterns for a pattern language of interactive information graphics. Proceedings of the 2007 conference on Pattern languages of programs. Champaign-Urbana, IL: ACM.

72 Lorsque l’activator entre dans l’objet transformable, ce dernier peut changer d’apparence (couleur, couleur de fond, opacité, zoom, etc.), se déplacer ou s’activer. En général, lorsque l’activator sort de l’objet transformable, celui-ci devient inactif et reprend son apparence par défaut. L’activator peut activer plusieurs objets transformables. L’activation est déclenchée par un point chaud (hot spot), une intersection ou une inclusion. L’activator se comporte comme le pointeur d’une souris. A l’inverse du survol (rollover) qui active temporairement l’image, l’activator peut activer un objet de manière permanente. Il peut être plus grand que le pointeur de la souris, de toute forme et fournit des informations supplémentaires sur le type d’activation et de transformation. Certaines illustrations interactives contenant plusieurs activateurs multiplient le nombre de pointeurs.

Image 16 : Activateurs simultanés

La figure ci-dessus montre une illustration contenant deux pointeurs pouvant être glissés sur deux icônes pour les sélectionner. Une fois activés, les pointeurs restent sur les icônes et le pointeur de la souris peut continuer à se déplacer.

La NO-GO-AREA est une restriction d’une zone dans laquelle l’utilisateur ne peut faire glisser son objet. La figure ci-dessous montre un objet déplacé par la souris et ne pouvant entrer dans la zone interdite. En dehors de la zone, l’objet peut se déplacer sans restriction.

73 Si l’utilisateur fait glisser l’objet dans la zone interdite, le vecteur de mouvement est tronqué. L’objet s’arrête et ne peut rentrer dans la zone. Une NO-GO-ZONE est définie par une forme (rectangle, ellipse, polygone, etc.). Il est possible d’intégrer dans une NO-GO-ZONE une Drop Limitation pour autoriser certains objets à rentrer dans la zone. Certains objets peuvent y rentrer mais une fois lâchés par la souris, ils sont poussés automatiquement hors de la zone.

Un autre modèle employé lors de la réalisation d’une illustration interactive est le sandbox. Il détermine la seule zone d’accès autorisée aux objets. Il est défini également par une forme (rectangle, ellipse, polygone, etc.). Les objets peuvent se déplacer sans restriction dans la zone mais ne peuvent pas la quitter. Le vecteur de mouvement se tronque si l’utilisateur essaye de glisser l’objet hors de la zone.

Image 18 : Un Sandbox

La lecture d’une illustration interactive combine ainsi l’action et la lecture. Elle se rapproche de la navigation sur internet qui mobilise l’action corporelle dans des modalités interactives147. M. Lavigne148 dresse une typologie des activités gestuelles liées à l’usage de la souris qui s’adaptent également aux usages des illustrations interactives :

 Le positionnement-repérage est un repérage spatial basé sur la coordination de l’œil et de la main. L’utilisateur explore visuellement et gestuellement la page. Les actions disponibles sont dévoilées par le passage de la souris qui transforme le pointeur pour indiquer les hyperliens.

 La pression du bouton de la souris par l’utilisateur déclenche des actions et active les hyperliens.

147 Lavigne, M. (2010). Internet, la mémoire et le corps, in MEI 32. Paris : L'Harmattan.

74  Le positionnement-action est le déclenchement d’une action liée au

positionnement de la souris comme des réactions au survol ou encore des contrôles d’animations.

 La pression-positionnement (drag and drop) gère des actions lorsque le bouton de la souris reste enfoncé comme le déplacement d’objets ou la saisie.

A l’inverse d’une illustration sans interactivité où le rôle du lecteur est fondamentalement passif149, l’illustration interactive nécessite la participation du lecteur. Ce dernier doit activer les zones pour obtenir le contenu de chacune. Dans leur étude consacrée au développement d’une illustration interactive, J. Beall, A. Doppelt et J.F. Hughes définissent ce qu’est une illustration interactive :

« We consider an illustration “interactive” if the reader, to obtain the content, must do something more than invoke the mechanisms that present the illustration150 ».

L’utilisateur doit lancer les mécanismes de l’illustration pour regarder le contenu de la ressource. Les auteurs151 ajoutent que ce sentiment de contrôle de l’illustration et la capacité de répondre à la question « Qu’est-ce qui se passerait si… ? » font de la lecture d’une illustration interactive une expérience enrichissante. Les utilisateurs peuvent utiliser l’illustration à leur rythme ou encore expérimenter et la tester jusqu’à ce qu’ils comprennent le sujet. Elle se révèle être un outil d’apprentissage efficace en raison de sa capacité à présenter le contenu dans un cadre d’interaction guidé. Les illustrations interactives se prêtent aisément à l’ajout d’indices, de symboles et motifs visuels permettant de supporter plus facilement leurs explorations interactives. Il peut s’agir de flèches directionnelles, de messages verbaux, de lignes ou encore d’icônes.

Par ailleurs, une illustration interactive est considérée comme dynamique si elle dispose d’une dimension temporelle. Antoni et ses collaborateurs152 indiquent que « si entre un temps

t et un temps t+1, une représentation cartographique change – d’une manière interactive ou automatique – dans la sélection des informations représentées, dans la forme ou la localisation de ces informations », la carte est alors dynamique. Il en est de même pour une

149 Beall, J., Doppelt, A., Hughes, J.F. (1996). Developing an Interactive Illustration : Using Java and the Web to Make It Worthwhile. In Computer Graphics – Proceedings of 3D and Multimedia on the Internet, WWW and Networks, Bradford, UK.

150 Idem, p.1.

151 Idem, p.2

152 Antoni, J.P., Klein, O., Moisy, S. (2004). Cartographie interactive et multimédia : vers une aide à la réflexion géographique. Cybergeo : European Journal of Geography [En ligne], Systèmes, Modélisation, Géostatistiques, document 288, mis en ligne le 21 octobre 2004. https://cybergeo.revues.org/2621

75 image ou une frise chronologique. C. Kohls153 souligne que les illustrations interactives peuvent être manipulées de manière dynamique pour montrer les relations de cause à effet, les détails en surbrillance, pour changer l’objet ou pour illustrer les mouvements de l’objet. Elles sont utilisées de manière exploratoire pour en apprendre davantage sur le sujet ou dans les présentations pour mieux visualiser le problème.

Qu’elles soient classiques, animées ou interactives, les illustrations sont régulièrement utilisées dans l’enseignement scolaire. Elles enrichissent également le manuel numérique que nous allons maintenant présenter.

153

Kohls, C. (2010). A pattern collection for interactive information graphics. In M. Weiss, & P. Avgeriou (Eds.), EuroPLoP 2010. Proceedings of the 15th European Conference on Pattern Languages of Programs.

76