Staf14 - Ex. 1

Rapport sur mes réalisations :

1. Page personnelle
• a. Aspects conceptuels
• b. Démarche personnelle
• c. Aspects technique
• a. Autocritique
• a. Prolongements
2. Page travaux
3. Personnage et bureaux MOO

Page personnelle

1a. Aspects conceptuels

Avant d'entreprendre la 'construction' d'un site, d'une home page ou de toute autre ressource Web, il est judicieux d'examiner certains critères ergonomiques relatifs à la présentation et à l'organisation des informations sur ces documents, ceci afin d'optimiser les conditions de travail (au sens cognitif du terme) entre l'utilisateur et la machine. Bien qu'il n'y ait aucune règle stricte quant à la manière de concevoir un document, le concepteur devrait se fixer comme principal objectif une réalisation qui tende à l'économie du fonctionnement cognitif. Nous retrouvons ici les notions fonctionnalistes de charge mentale (Mental Workload) et d'attention, lesquelles sont centrales à cette problématique.

En d'autres termes, il faudrait éviter à tous les niveaux une surcharge d'informations tant dans le contenu textuel et dans la présentation graphique de la web page que dans l'organisation spatiale de l'information. Par exemple, la structure du document devrait être ordonnée de façon à ce que l'information essentielle soit placée en tête et que les détails se répartissent harmonieusement dans ce qui suit, afin que l'utilisateur puisse prendre rapidement connaissance du contenu du document, quitte à s'informer des détails par la suite. De longues pages sont également à éviter, puisqu'elles demandent à l'utilisateur un grand travail de mémorisation au niveau de sa structure et une coûteuse localisation de l'information. Cependant, il est dans certains cas difficile d'éviter ce biais.

Comme je l'ai sous-entendu plus haut, une certaine sobriété devrait être de mise : éviter les pages trop colorées, surchargées d'images, d'ornements, de 'fonts' différentes et ne pas abuser de la hiérarchisation des titres et des sous-titres, etc. Bien entendu, la présence d'images, d'icônes ou de boutons peuvent parfois agrémenter le texte et rendre la page attractive, mais il ne faut toutefois pas en abuser.

D'autres exemples pourraient être donnés, mais le but n'est pas de tous les énumérer.

Etant donné que l'on parle d'un environnement hypertexte, il ne faudrait selon moi pas tomber dans le piège du texte en deux dimensions : l'hypertexte est là pour nous donner la possibilité de 'switcher' d'une page à une autre, les 'liens' nous permettant de relier les différentes pages en un réseau; il faut donc exploiter cette fonctionnalité et ne pas se borner à écrire de longues pages sans lien ('dead-end'). Pour nous permettre ce 'switch', il est conseillé de créer des aides à la navigation, lesquelles doivent être 'intelligibles' pour l'utilisateur : ceci lui permet d'éviter le défilement (scroll) des pages trop longues et l'autorise à se rendre directement aux topics qui l'intéressent. De ce fait, il est judicieux que les icônes utilisées soient compréhensibles, c'est-à-dire qu'elles relèvent d'un concenssus d'emploi, comme par exemple l'icône 'home' (symbolisée par une petite maison) qui permet le retour à la page source.

L'utilisateur devrait être également informé des endroits où il peut se rendre, ceci afin de lui faciliter la navigation; ainsi, chaque page web devrait contenir au moins un lien sur une page locale, afin que le 'netsurfer' n'ait pas à utiliser le bouton 'back' de son browser, ce qui est ressenti comme frustrant par certains. Ceci implique la notion de continuité (et de prévisibilité) du point de vue de la structure des pages créées : il est profitable à l'utilisateur de savoir à n'importe quel moment où se trouvent les boutons de navigation (par exemple, dans une barre qui est toujours située dans la zone supérieure de l'écran, comme je l'ai fait sur toutes mes pages). D'un point de vue plus global, cette cohérence devrait se retrouver tant au niveau du graphisme (couleurs, fonts, titres, etc.) qu'au niveau du fonctionnement des pages Web, puisque l'individu qui pénètre dans un site se fait une image mentale de la première page qu'il rencontre et a des attentes quant à la suite des documents, ceci relativement à l'organisation spatiale des informations (qui y sont contenues) et aux critères graphiques; si la continuité structurelle et graphique n'est pas respectée, l'utilisateur devra entreprendre une recherche d'information afin de se retrouver à l'intérieur d'une nouvelle page, ce qui représente un 'coût' pour l'utilisateur.

Un autre point à constater: le Web nous ouvre une fenêtre vers d'autres horizons et brise les frontières; l'autre doit pouvoir nous contacter, ou peut vouloir connaître quand notre page Web a été créée ou modifiée; ainsi, l'adresse email du concepteur devrait figurer au niveau du code source html et/ou sur la page elle-même.

J'ai parlé plus haut de charge mentale humaine, j'aborderai maintenant un autre problème qui est celui de la charge mentale du... réseau :) Il faut éviter de demander au browser d'afficher des images trop grosses ou dont les dimensions n'ont pas été paramétrées dans le code source, ce qui ralentit considérablement le chargement. Ainsi, mieux vaut compresser les images (.gif interlaced ou decreased color), afin de laisser la possibilité au browser de charger le reste de la page tout en laissant les images en 'standby'.

Documentation supplémentaire : Yale C/AIM Web Style Guide

1b. Démarche personnelle

Après avoir recueilli les informations ci-dessus, j'ai tracé sur papier une ébauche de la structure que je voulais donner à ma 'Home Page'. Malheureusement, force est de constater que le passage du schéma à la réalisation a été un dur chemin de croix... J'ai finalement abandonné le schéma-papier et repensé à une structure plus réalisable, plus concrète, laissant quelquefois la place à l'improvisation.

Mes objectifs étaient les suivants :

1. J'ai voulu donner à ma 'home page' une petite note psychédélique et esthétique; j'adore l'abstrait, l'irréel, l'imaginaire et d'autre part, je suis issu de la 'génération TV'. J'ai donc décidé de concilier ces deux perspectives qui me définissent particulièrement bien en plaçant ma photo (retouchée de manière 'psychédélique') sur un tableau au 'background' gris et orné de boutons de navigation : la télévision. Selon moi, la dimension graphique et esthétique est importante, à condition qu'elle ne soit pas coûteuse en terme de 'chargement' et de charge mentale; elle peut également constituer une variable motivationnelle en excitant la curiosité du websurfer. Qui plus est, j'ai souhaité donner au texte une touche d'humour en la présentant comme 'la page de DocFreud' (mon pseudonyme). La page 'CV' permet de faire le contraste avec la page 'racine' (welcome.html) puisqu'elle permet à l'utilisateur de se procurer des informations sérieuses me concernant; la page CV est conçue de manière sobre et informative : elle ne contient qu'une image non retouchée et le texte est structuré de manière à faciliter la lecture. L'absence d'un 'background' coloré contribue à cette sobriété.
2. J'ai souhaité marier la dimension esthétique (évoquée ci-dessus) avec la dimension pratique, c'est-à-dire offrir à l'utilisateur des boutons de navigation; en chargeant ma home page, il accède à un court texte contenu dans le tableau-TV (présentant le terrible personnage qu'est DocFreud), sur ma photo psychédélique et sur les boutons de navigation. Il peut soit se rendre directement dans une de mes pages 'rubrique' (CV, Links, Galerie, Pics Expo, Staf Work), soit scroller et tomber sur des pointeurs dont les cibles (targets) sont les mêmes que les 'boutons-TV', à la différence qu'ils sont insérés dans des phrases décrivant plus précisément que les boutons vers quelle page ils pointent.
3. J'ai tenté de conserver la mentalité hypertexte : je n'ai donc pas créé une home page (welcome.html) unique avec des ancrages internes au document, mais une page 'source' pourvue de liens ciblant des documents séparés (CV, Links, etc.) Dans chaque page créée, des outils de navigation (textuels) permettent à l'utilisateur de revenir à la page source ou de se rendre directement dans les différentes rubriques. Ceci m'a permis de faire l'économie d'icônes ou autres boutons qui peuvent retarder le chargement, mon optique générale étant de rendre mes documents html les moins 'lourds' possible. Il est à noter que je souhaitais initialement créer des outils de navigation sous forme de frames, mais j'ai vite constaté le coût (en terme de chargement) de ce procédé, ce qui m'a amené à opter pour une barre de navigation textuelle.
4. Afin d'éviter une surcharge de couleur, la palette de couleurs de ma photo 'psyché' s'aligne avec la couleur du texte, des pointeurs 'sélectionnés' et non 'sélectionnés' (couleurs par défaut) : un dégradé de noir à bleu en passant par le pourpre.
5. Il m'a semblé important de m'attarder sur le contenu 'informatif' de ma home page. Ainsi, ma page de 'sites à visiter' (DocFreud's Links) ne se borne pas à un listing d'adresses internet, mais propose à l'utilisateur quelques conseils vécus sur l'achat de disques. Cette dimension 'vécue' m'a semblé intéressante à exploiter, puisqu'elle constitue une ressource unique et personnelle.

1c. Aspects techniques

Etant donné que la majeure partie de ma page web a été créée à domicile et que je dispose d'une connection très lente, je n'ai pas pu exploiter les éditeurs du genre Emacs, bien que je maîtrise ses bases d'utilisation. Ainsi, j'ai utilisé de petits éditeurs de texte puis j'ai ensuite placé mes fichiers html à l'aide d'un client FTP.
Ma photo 'psychédélique' a été réalisée à partir d'un scan d'une photo passeport. J'ai ensuite créé un background coloré en utilisant certains filtres de PhotoShop ('Twirl', en particulier), pour ensuite placer mon faciès sur le background. J'ai ensuite compressé le tout en format JPG, tout en m'efforçant d'en conserver la qualité. Quant à ma photo 'CV', elle a été réalisée à l'aide d'une webcam mise à ma disposition par David Ott. Tous les éléments publiés dans mes pages (photos, boutons) sont originaux; j'ai réalisé moi-même mes boutons de navigation (dans welcome.html) à l'aide de PSP3.
J'ai constaté certains problèmes quant à la mise en page du code source html lorsqu'il est vu par Netscape; il est probable qu'en les plaçant sur le réseau depuis mon domicile, la mise en page ait été modifiée. Souvent, tout le code source se retrouve disposé en une seule ligne !

1d. Autocritique

Dans les longs documents (comme celui-ci), je n'ai pas pris la peine de placer des boutons 'top of the page' à chaque section. Je suis conscient de leur aspect pratique et 'structurant', mais je trouve que cela surcharge la présentation. Je pars du principe que si l'utilisateur est intéressé par ma réalisation, il en fera une impression sur papier : lire un texte démesuré sur l'écran est une travail de concentration fastidieux. Bien entendu, cette remarque est discutable et j'attends un feed-back de mes lecteur !
Les boutons de navigation qui figurent dans ma page source (welcome.html) ne sont pas identiques à ceux que l'on peut trouver dans tous mes autres documents, ce qui va à l'encontre des aspects conceptuels évoqués dans la première partie de ce texte. J'aurais pu réutiliser ces boutons afin d'établir une continuité stricte à travers toutes les pages 'subordonnées'. Cependant, ces boutons graphiques n'ont été utilisés que dans un seul but : contribuer à l'esthétisme de ma 'télévision'. En dehors de ma home page, ils n'avaient donc plus raison d'être.
Certaines figures de style ('background' dans les cellules de tableaux, etc.) ne pourront pas être vues par des browser du type 'Internet Explorer', puisque j'ai utilisé des codes html qui ne sont propres qu'à Netscape; c'est de l'egocentrisme, me direz-vous ;)

1d. Prolongements

Je suis en train de créer une page pour promouvoir un petit café, "la Galerie" (sans but lucratif). Les annonces de spectacles ou autres festivités seront annoncé au public par le biai de cette page. J'estime que la réalisation d'une telle page sera un bon exercice de style, tout en me faisant un peu de publicité, puisque les utilisateurs se rendant sur cette page pourront lire mon CV ou autres informations me concernant, par le biai des boutons de navigation.

Page travaux

J'ai tenté de respecter les consignes imposées par cet exercice : sobriété d'une part, et structure de l'autre. Je n'ai toutefois pas résisté à la tentation de mettre un 'background' dans les cellules des tableaux, afin de me passer des bordures. L'objectif visé était d'optimiser l'accès aux exercices, tout en soignant la présentation : ce n'est pas parce que c'est une page 'travaux' qu'il faut qu'elle ait un aspect macabre :)

Personnage et bureaux Moo

Initié au Moo par Cyril Roiron, j'ai construit mon premier bureau Moo au début de l'année 1996. On m'appelait déjà DocFreud à cette époque. 'DocFreud's Surgery' est donc le bureau d'un savant fou. J'y ai inséré un plan de mon bureau, en modifiant la 'description' se rattachant à cette pièce. Les objects figurant dans cette pièce ont plus une fonction décorative qu'une valeur fonctionnelle.
Afin de me remettre à flot dans le domaine de la programmation Moo (j'avais oublié certaines commandes), j'ai construit une pièce annexe, 'Brainstorming Room', laquelle constitue un endroit privilégié pour la discussion sous forme de 'generic classroom'. Trois chaises en bois permettent aux invités de s'asseoir, pendant que DocFreud siège à son bureau personnel. Une grande table joue le rôle de séparateur physique entre Docfreud et les autres 'characters' présents dans la pièce.
Une critique peut-être faite quant à mon utilisation de dessins 'ascii' : les environnements Moo sont des lieux fréquentés par des aveugles, lesquels utilisent des synthétiseurs vocaux pour transcrire le texte affiché à l'écran. Si un aveugle s'introduit dans 'DocFreud's Surgery', il risque d'être assez surpris...
J'ai utilisé Emacs pour le Moo (RMoo) en tant qu'outil de travail. Il est fort agréable d'utiliser Emacs dans ce type d'environnement, car l'ouverture d'un buffer d'édition permet à l'utilisateur de programmer, sans mélanger son code avec des messages de conversation.