Création d'ILEIS

Les consignes pour cet exercice sont de réaliser une série d'icones de fonction. Une série comprennant entre 4 et 6 icones, correspondant à une famille de fonctions préalablement identifée (en utilisant le logiciel que l'on veut).

Le but de cet exercice est de faire la preuve de notre capacité

à faire la distinction entre icones de marquage et icones de fonction;
à analyser sémantiquement des fonctions indispensables aux environnements graphiques créés;
à créer, dans les contraintes de format qui sont celles des icones standard, nos propres icones correspondant aux fonctions choisies;
à faire preuve d'originalité et d'imagination;
à faire preuve de cohérence entre l'analyse et les réalisations.

Icones de fonctions

Il y avait longtemps que je caressais l'idée de réaliser quelque chose comme ça: lorsque l'utilisateur passe le curseur au dessus de l'icone, cette dernière se met en mouvement et apporte des informations supplémentaires.

Présentation des icones

La base de chacune de ces 5 icones est identique: il s'agit de la représentation d'une feuille de papier (format plus ou moins A4). Chacune de ces représentations ressemble à l'apperçu avant impression que l'on peut observer dans un traitement de texte, par exemple Word (avec un affichage de 20% de la taille réelle).

Chaque feuille se compose d'un titre (première barre horizontale en gras), de deux sections (les 2 barres verticales en dessous, légèrement plus fines). Le "texte" à l'intérieure de chaque "feuille" se compose de lignes fines et grises. Remarquons encore que chacune des feuilles porte en bas un point, censé représenter une numérotation de page. On trouve deux pages dans les deux premières icones car il ne s'agit pas ici de navigation "intra-feuille".

Retourner à la page précédente	Aller à la page suivante	Retourner en haut de la page	Aller à la section suivante	Aller à la section précédente

Explications conceptuellles

La couleur rouge est utilisée ici pour désigner l'arrivée, le but d'une action. Cela peut paraître paradoxal puisque le rouge est culturellement reconnu pour représenter une interdiction. La raison de ce choix est relativement simple: j'avais peur qu'une autre couleur, moins vive, contraste moins avec le noir et le blanc qui l'entoure.

Le curseur est un triangle qui pointe dans la direction du mouvement, et par analogie, dans le sens de l'effet de l'icone de fonction. Lorsque le curseur se déplace dans la zone du but, celle-ci devient de la couleur du curseur, pour deux raisons: renforcement de l'effet visuel lors du mouvement et augmentation du nombre d'informations fournies par l'icone à l'arrêt. Remarquons que le point de départ de l'icone retourner en haut de la page est le seul à ne pas être rouge. Ceci est du au fait que le lecteur peut se rendre en haut de la page courrante quel que soit son point de départ, alors que les autres icones représentent un mouvement qui est relatif à un endroit (pour se rendre, à partir de là, à un autre endroit).

Dans le cas des sauts de section, les sous-titres (dé)rougissent, alors que pour les sauts de page, c'est le cadre représentant le bord de la feuille qui rougit progressivement.

Il faut remarquer que ces icones ne peuvent être utilisées que dans le cas d'un texte qui a un ordre précis, fixe, avec des pages avant et après la page courante. De même, la présentation de chaque page doit également se subdiviser en sections, afin de pouvoir exploiter les deux icones de navigation entre les sections.

Il n'y a pas de représentation du click, il faudrait donc dire explicitement à l'utilisateur qu'il s'agit d'icones de fonctions et qu'en cliquant dessus, quelque chose se passera. J'avais pensé ajouté une espèce d'étoile jaune au début du mouvement du petit curseur rouge pour simuler un click, mais cela risquait de surcharger la représentation graphique et induire en erreur l'utilisateur quant à la signification de cette étoile. Il aurait fallu un manuel pour expliquer le fonctionnement des icones ;)

Précisions techniques

Le principe est relativement simple: ces icones sont des liens, dont la propriété OnMouseOver active le rechargement de l'image, donc l'exécution du gif animé.

Limitations:

Les images sont de relativement gros fichiers (de 18 à 66 ko pour le plus gros). Donc, comme vous pourrez le constater dans un exemple d'utilisation, le chargement de la page est relativement lent. De plus il peut être agréable de posséder une bonne connexion et un bon ordinateur.
Le concepteur (votre serviteur en l'occurence) ne maîtrise pas de manière précise les gif animés: par exemple, il est impossible d'éviter que les images se chargent une fois au début, avec la page entière. Autrement dit, l'utilisateur, du moins au début, aura l'impression que tout bouge, tout clignotte, et cela ne facilite pas la mise en place d'invariants structurés.
Dans le même ordre d'idée, il faut remarquer que chacune des icones se compose de 40 à 80 images... Je me permet donc d'illustrer la sagesse populaire qui dit que le mieux est souvent l'enemi du bien. En effet, GifConstructionSet, le petit programme qui permet de faire des gif animés, n'a pas l'air de supporter un découpage aussi fin du mouvement: il y a trop de dessins, en n'insérant aucun délai entre l'affichage des différentes images composant un gif animé, il est trop rapide, et en ne mettant qu'un centième de seconde de délai, le gif animé devient trop lent.
résoluPour l'instant, il y a une limitation de plus au niveau technique: deux gifs identiques ne peuvent se trouver sur la même page, il a fallu les dupliquer pour donner des noms différents à des images animées identiques. Autrement dit, pour une icone donnée, il faudra en charger plusieurs. Dans le fichier d'exemples la base des tableaux, il y a deux fois l'image prevpage.gif, une fois en haut et une fois à la fin de la page.

Utilisation

Vous pouvez voir les icones en contexte, mais attention, notez bien qu'il s'agit surtout d'un exercice, autrement dit, le contenu n'est pas pertinent, en l'occurence l'exemple est partiellement fictif. En effet, cet exemple permet surtout au lecteur de se faire une idée de la disposition spatiale des icones ainsi que de leur utilisation.

Conclusion

L'idée n'est pas mauvaise en soi, mais relativement mal exploitée en l'occurence. En effet, ajouter de l'information visuelle lorsque le curseur passe au dessus de l'icones est une bonne idée, mais les images utilisées ici sont beaucoup trop grosses, gourmandes en ressources et ralentissent énormément le chargement de la page. Il aurait certainement été plus efficace d'utiliser des icones plus petite (dans un format standard 32x32) et composées d'un plus petit nombre d'images. Par exemple, j'aurais pu utiliser quelque chose comme:

Cet exemple est petit (5 images, pour un total de 2.4 ko) et peut donc s'insérer aisément dans un fichier. Toutefois, la fleche est déjà en elle même porteuse d'information: direction, amplitude, ... Information redondante avec le mouvement.
Mais comment l'utilisateur aurait pu savoir qu'il s'agit d'icones de fonctions ? Soit en le lui disant simplement, soit en représentant le click de la souris:

Le seul intéret qu'apporte ici le gif animé est l'espèce d'étoile qui symbolise le click de la souris (encore faut-il que l'utilisateur comprenne ce message).
De plus, en imaginant une série d'icones de ce type, qu'est-ce qui représenterait le saut à une section (en tant que sous-partie d'une page) ? La flèche ne montre qu'une direction, pas un but. Il aurait donc fallu modifier l'icone, et soit on a alors de problèmes de taille (cf ma série d'icones) soit on a des problèmes de lisibilité. Il s'agit en effet ici d'une question de trade-off. Autre possibilité, il eût été possible de représenter le mouvement inter-section (intra-page) d'une autre manière que rectiligne, par exemple en l'arrondissant:

En l'occurence, le mouvement d'arrondi "masque" l'élévation du curseur, mais avec quelques réglages, et quelques heures de boulot en plus, on doit pouvoir obtenir une série d'icones de fonction tout à fait acceptables. Tout compte fait, j'aurais peut-être du me diriger dans cette direction...