Visualisation de l'information dans le portail STAF18 Dajana Kapusova http://tecfa.unige.ch/perso/staf/kapusova Dajana.Kapusova@unige.ch 05.07.2004 07.07.2004 visualisation de l'information, classification, portail staf18 Le volume d'information qui est généré et stocké devient de plus en plus difficile à explorer et à analyser. La visualisation de l'information propose différentes techniques pour visualiser de grands ensembles de données. Dans notre travail, nous avons d'abord étudié la classification des techniques selon Keim. Puis nous avons exploré le portail Staf18 et nous nous sommes demandés quelle(s) information(s) peuvent être représentée(s) visuellement. Enfin, nous avons réalisé un dispositif développé en langage SVG en utilisant une technique de visualisation appropriée pour ce type d'information.

La quantité d’informations disponible aujourd'hui est plus grande que jamais. Les utilisateurs deviennent surchargés par la masse et la complexité de l’information, et son exploration et analyse deviennent de plus en plus difficile. Ainsi, il y a un besoin de trouver des moyens pour représenter l'information visuellement afin de permettre aux utilisateurs d'obtenir l'information d’une manière efficace et de la comprendre.

Pourquoi visualiser l'information

La visualisation de l'information permet aux utilisateurs de traiter toute cette information grâce à nos possibilités visuelles innées de perception. Les applications de visualisation de l'information se basent sur le système perceptif de l’être-humain : couleur, taille, forme, proximité et mouvement. Par conséquent, les applications de visualisation de l'information nous permettent de comprendre mieux des systèmes complexes, de prendre de meilleures décisions et de découvrir l'information qui pourrait autrement rester inconnue.

Qu'est-ce que la visualisation de l'information

La visualisation de l'information ("InfoVis") combine des aspects de la visualisation scientifique, des interfaces humain-ordinateur (human-computer interfaces), de l'exploitation de données (data mining), de l’imagerie et des graphiques. Elle se focalise sur l’information qui est souvent abstraite. Le problème principal des recherches est alors de découvrir de nouvelles métaphores visuelles pour représenter l'information et de comprendre quelles sont les tâches analytiques qu’elles peuvent supporter.

La visualisation est la présentation graphique de l'information. Son but est de fournir à l’utilisateur une compréhension qualitative du contenu de l'information. L'information peuvent être des données, des processus, des relations ou des concepts. La présentation graphique peut nécessiter la manipulation des entités graphiques (points, lignes, formes, images, texte, surface) et des attributs (couleur, intensité, taille, position, forme, mouvement).

C’est plus que de jolis images. Pour créer une visualisation, on doit retracer l'information dans un espace physique qui représentera les liens entre les informations. Ce processus de transformation commence par des données brutes qui sont collectées avec un processus automatique et qui n’ont pas été encore manipulées. L’utilisateur extrait un sous-ensemble de données intéressantes organisées d’une manière plus structurée, en général maintenu dans une base de données relationnelle. La forme plus structurée peut alors être associée à une structure visuelle par association d’attributs de données aux attributs visuels. Finalement, la représentation visuelle peut être manipulée interactivement par l'utilisateur en obtenant de différentes vues de la même visualisation. Il ne s'agit pas juste de créer une super demo, une visualisation doit supporter des tâches spécifiques, la découverte, la prise de décision, l'explication.

L'exploration visuelle de données suit habituellement une étape de trois processus: vue d'ensemble d'abord, zoom et filtrage, et après détails à la demande (Overview first, zoom and filter, and then details-on-demand); ce que Shneiderman [4] appelle "Information Seeking Mantra". D'abord, l'utilisateur doit obtenir une vue d'ensemble des données. Il identifie des structures intéressantes et il se focalise sur une ou plusieurs d’entre elles. Pour analyser les structures, l'utilisateur a besoin d’accéder aux détails des données.

Les différentes techniques de visualisation

Il y a un grand nombre de techniques de visualisation de l'information qui ont été développées pendant la dernière décennie pour permettre l'exploration de grands ensembles de données. Actuellement, seulement quelques taxonomies ont été développée par des spécialistes en visualisation de l'information (Shneiderman, 1992, Chi, 2000, North, 1996, Reed et Heller, 1997).

Keim [1] propose une classification selon trois critères (figure 1) :
  1. les données à visualiser
  2. la technique de visualisation
  3. la technique d'interaction et de déformation utilisée
Classification des techniques de visualisation de l'information

Figure 1 : Classification des techniques de visualisation de l'information

Données à visualiser

Les types de données à visualiser peuvent être :

Technique de visualisation

La technique de visualisation utilisée peut être classifiée dans :

Technique d'interaction et de déformation utilisée

Ces techniques sont classifiées dans :

N'importe laquelle de ces techniques de visualisation peut être utilisée en même temps que n'importe laquelle de ces techniques d'interaction aussi bien que n'importe laquelle des techniques de déformation pour n'importe quel type de donnée.

Informations dans le portail Staf18

Tout au long de la sixième période de staf, il nous est demandé à travers des activités du cours staf 18 d'avoir une certaine "productivité" minimale. Les activités touchent les outils suivants du portail Staf18:En même temps, en regardant le portail à travers des yeux de l'utilisateur, je me suis posée la question "Quelles informations sont-elles intéressantes à visualiser?" On attend des étudiants qui forment une communauté d'apprentissage d'être proactif et donc j'ai décidé de prendre en considération pour mon dispositif comme information à visualiser les commentaires des articles des étudiants de la vollée Jolan.

Plus précisèment, il s'agit d'utiliser les données sur les commentaires suivants:Les données sont stockées dans la base de données Staf18 du serveur tecfaseed dans la table "nuke_comments":

Réalisation du dispositif

Métaphore

Dans le dispositif (figure 2), il s'agit de visualiser l'acitivité des étudiants de la vollée Jolan au niveau des commentaires des articles. L'espace du dispositif en forme d'un carré représente la communauté d'apprentissage des Jolans avec un "centre" au milieu du dispositif et graphiquement représenté par une croix. Chaque étudiant prend dans cet espace la forme d'un circle, on peut en compter neuf: aristide, boucheri, claude, court, diego, genet, hocquet, kapusova, vuilleum.

dispositif
Figure 2: Dispositif - commentaires des Jolans

De quelle manière les trois informations que j'ai choisies de visualiser, s'insèrent-elles dans la métaphore?

Nombre de commentaires

Le nombre total de commentaires faits par l'étudiant se traduit dans le dispositif par la taille du circle, c'est-à-dire par son rayon. P.ex. si l'étudiant a produit cinq commentaires, le rayon du circle par lequel il est représenté est de r=5 (sur un écran il s'agit de 5 pixels). Donc plus le circle est grand, plus l'étudiant contribue en commentant.

Nombre de commentaires commentés

Le portail permet, comme c'est le cas dans un forum, de répondre aux commentaires. En règle générale, cette réponse est signalée dans le sujet du commentaire par "Re:" pour "reply". Dans le dispositif, cette information se traduit par la distance du circle par rapport au centre du dispositif. Ca signifie que plus l'étudiant est proche du centre, plus il répond aux commentaires.

Date du dernier commentaire

Les circles peuvent prendre trois couleurs différentes selon la date du dernier commentaire fait par l'étudiant:Donc, plus la couleur du circle est claire, plus le commentaire est récent.

En survolant les circles avec la souris (figure 3), toutes les informations relatives à l'étudiants sont affichées en forme textuelle:dispositif
Figure 3: Dispositif - événement onmouseover

Test utilisateur

Après sa réalisation, le dispositif a été testé par un utilisateur afin de ressortir des obstacles liés au dipsositif et d'identifier les modifications qui devraient été apportées. Le but n'était donc pas de juger le graphisme, mais l'efficacité du dispositif.

Etant donné que certains étudiants sont plus proactifs que d'autres, il ressortent dans le dispositif très clairement avec un circle de très grande taille. Cela pourrait donc être interprété par certains utilisateurs de la manière suivante: "Regardez, c'est moi, je commente beaucoup!".

Après réflexion, j'ai décidé d'intégrer également dans le dispositif l'enseignant et l'assistante qui s'occupent du cours staf 18 (figure 4). La nouvelle version du dispositf intègre une autre modification qui affiche une ligne reliant chaque utilisateur avec le centre du dispositif.
nouveau dispositif
Figure 4: Dispositif - nouvelle version

Développement technique

Le dispositif a été réalisé en SVG. Afin de travailler avec les vraies données du portail, la programmation en langage php avec des requêtes SQL vers la base de données du portail était nécessaire.

Php et SQL

Avant de commencer à dessiner les objets en SVG, les données devaient être recupérées de la base de données "Staf18" du serveur tecfaseed.unige.ch. En plus, certaines données devaient subir une transformation soit directement en utilisant une requête SQL, soit en utilisant des opérations mathématiques. Toute la difficulté du dispositif consistait en application de mathématiques, puisque certaines propriétés des objets doivent être calculées, comme p.ex. le rayon du circle qui correspond au nombre de commentaires.

SVG

L'objet central dans le dispositif est celui représenant l'utilisateur, càd l'objet graphique circle. Sans entrer dans les détails, cet objet (pour un étudiant X) a été réalisé de la manière suivante:Le code source des fichiers php pour la version 1 et la version 2 du dispositif sont accessibles sur le serveur de tecfassed.

Difficultés

Les difficultés que j'ai rencontrées au cours de la réalisation du dispositif se situent à trois niveaux:
  1. techniques de visualisation à utiliser
  2. métaphore de navigation
  3. développement en SVG et php avec SQL

Avant de commencer la programmation en elle-même, il fallait étudier les différentes techniques de visualisation et d'en utiliser les plus appropriées pour un dispositif qui visaisait à représenter graphiquement la production des utilisateurs du portail Staf18. D'autant plus que la réalisation devait être faite en SVG que je ne maitrîsais pas et cela en un laps de temps. Il fallait donc imaginer un dispositif simple et faisable. Je ne manquais pas de choix parmi les nombreuses techniques de visualisation et en plus il fallait prendre une décision quant à l'information que je voulais visualiser. Le choix que j'ai fait, càd la visualisation des commentaires des Jolans peut être discutable vu que les contributions de chaque étudiant ne sont pas nombreuses et cette communauté n'est pas orientée internet. Il s'agissait tout de même d'une variable pertinente en comparaison avec d'autres, comme p.ex. le nombre d'articles poubliés (pour l'activité, nous étions demandés d'en produire deux), la fréquence d'utilisation du blog (la quantité, est-elle vraiment un bon indicateur?), l'activité dans les forums (nombreux sont ceux qui n'utilisent pas le forum).

Toutefois, la plus grande difficultés que l'on peut rencontrer dans la réalisation d'un tel dispositif est certainement liée à sa programmation. Le langage SVG demande pour la construction des différents objets leur position sur l'axe des X et Y ce qui pourrait être résolu par la génération des objets par des boucles en php et des calculs. Dans mon cas, le manque de temps ne permettait pas de générer tout automatiquement, mais cela est tout à fait possible.

Il serait envisageable d'améliorer le dispositif par exemple par le fait de positionner aléatoirement les étudiants représentés par les cercles, le positionnement du texte qui affiche les détails sur les utilisateurs pourrait être calculé au lieu de le définir et bien d'autres amélioration au niveau de réalisation technique à faire. On peut constater que la place réservée au dispositif est petite et se prête assez facilement à la visualisation d'un petit nombre d'utilisateurs. Si un utilisateur contribue activement aux commentaires, le circle devient de plus en plus grand et va prendre toute la place du dispositif (puisque le rayon est égale aux nombre de commentaires). Il faudra donc calculer le rayon en proportionnant son rayon par rapport à la surface du dispositif. Un autre problème représente la distance des circles à partir du centre du dispositif (elle dépend du nombre de commentaires commentés). Si plusieurs utilisateurs ne répondent pas aux commentaires et d'autres le font très activement, cela va ressembler à la situation dans la deuxième version de mon dispositif: tous les utilisateurs sont positionner au bord extérieur du dispositif et un autre très près de son centre. Quant à la "fraîcheur" des commentaire que l'on peut identifier par la couleur des circles, elle pourrait être adaptée à la fréquence des contributions dans le portail. Dans le cas de mon dispositif, il s'agit d'un intervalle de 7, 14 jours et plus. Dans ce cas, si l'enseignant nous demande à travers une activité de contibuer aux commentaires, les cirles deviennent tous de la même couleur.

Les différentes techniques de visualisation permettent une meilleure visualisation de l'information. Son but est de permettre une exploration plus rapide, meilleure et plus adapté des ensembles de données. Ces techniques doivent également être intégrées au dispositif qui l'utilise. Grâce à ce travail, j'ai pu me rendre compte à quel point la décision de visualiser telle ou telle information peut devenir cruciale et le choix d'une technique devrait être fait avec beaucoup de précautions. Enfin, il est tout à fait possible qu'en changeant l'étendu de l'ensemble de l'information, l'utilisateur n'arrive plus à analyser correctement l'information (p.ex. après avoir introduit l'enseignant dans le dispositif, l'information "le nombre de commentaires commentés" représentée par la distance par rapport au centre du dispositif, ne peut plus être intérprétée correctement ou pas du tout.

Une autre difficulté était le langage SVG qui lui, à son tour, m'a posé certaines limites. La programmation des objets peut demander énormément de calculs mathématiques où la donnée "brute" va être transformée afin qu'elle puisse être utilisée (p.ex. calculer la distance en pixels par rapport au centre du dispositif). Mais le langage donne beaucoup de possibilités à condition de le maitrîser.

 [1] Daniel A. Keim, Information Visualization and Visual Data Mining, IEEE Transactions on Visualization and Computer Graphics, Vol. 7, No. 1, January-march 2002 [2] Nahurn Gershon, Stephen G. Eick, Information Visualization, IEEE Computer Graphics and Applications, July 1997 [3] Gary Geisler, Making information more accessible: A survey of information visualization applications and techniques [4] Ben Shneiderman, The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, 1996 IEEE Visual Languages [5] Newsgroup crowds and authorlines