Du regard à la caresse

Evolution du design interactif des hyperliens sur le web, allant d’une symbolisation visuelle à une actualisation gestuelle

Albi Octobre 2002

Vincent Mabillot

Au détour d’un cours, j’interrogeais mes étudiants sur les indices qui leur permettaient de repérer un hyperlien. Une étudiante répondit qu’elle identifiait un lien parce que le pointeur se transformait en petite main. Bien que cette remarque eût dû me paraître anodine au regard de l’intérêt que je porte à la mise en scène des usages interactifs, j’eus néanmoins un retour d’âge. Je percevais que j’étais un vieux briscard du web qui se référait à d’anciennes logiques de navigation basées sur le soupçon d’un lien à son aspect. Je percevais pourtant que les évolutions du langage HTML entraînaient de plus en plus souvent un constat de faiblesse de cette logique d’usage. Les possibilités de personnalisation de l’apparence des contenus permettaient un enrichissement de l’esthétique au prix d’une perte de la normalisation des codes sémiotiques de la fonctionnalité. Si la remarque de mon étudiante me prenait à contre-pied dans un premier temps, dans un second, elle m’offrait sur un plateau une piste de compréhension qui par-dessus le marché illustrait à merveille une théorie de la perméabilité sémiotique dans les dispositifs interactifs.

En revenant sur cette anecdote, elle traduit le passage d’une lecture visuelle de la page à une lecture à tâtons, un « palpage » dans l’espace symbolique devenu le lieu d’un faire.

Ce tâtonnement renvoie bel et bien une perméabilité sémiotique où le signe devient chose. Le geste dans le champ de l’expérience prend sens dans le champ symbolique.

Il m’a semblé alors pertinent d’étudier comment cette perméabilité s’était installée dans nos usages. Manifestement, la perception que j’avais jusque là de l’interprétation de l’interactivité d’une page web était confrontée à de nouveaux usages.

Au point où j’en étais dans mon cours, nous étions en 1999, j’allais inviter mes étudiants à constater que l’on soupçonnait des liens à la vérification d’une cohérence esthétique et fonctionnelle : la spécificité de l’apparence d’un élément de contenu renvoie à la potentialité d’une action hypertextuelle. Cette remarque s’attachait à montrer que l’évolution du langage HTML permettait de personnaliser les hyperliens, ce qui n’était pas le cas quelques années avant.

C’est sur cette base de l’évolution du langage HTML qu’il me semble pertinent de rendre compte de l’évolution de l’usage et des acteurs du web.

Sans revenir à l’origine historique du langage dans les laboratoires du CERN à Genève en 1991, je distingue trois périodes que l’on peut dater à partir des spécifications définies par le W3C [1] .

Je considérerai alors une période marquée par la visibilité de la fonctionnalité correspondant à la spécification HTML 2.0 (1995-1996), un e période d’esthétisation liée à HTML 3.2 (1996-1998) et une période de gestualisation d’une pensée exploratoire s’installant dans l’usage avec HTML 4.0 à partir de 1998.

HTML 2.0 La visibilité de l’hypertextualité

Nous débutons avec HTML 2.0 dans la mesure où à cette époque se diffuse depuis les laboratoires du NCSA, le premier logiciel client (Mosaic) permettant de visualiser graphiquement des documents HTML. Jusque là, le HTML est avant tout une reformulation simplifiée du langage SGML permettant d’interroger des bases de données reliées.

Revenons un instant sur le fonctionnement du Web. Je n’entrerais pas dans la technique informatique à proprement parler, mais j’imagerai son fonctionnement afin de resituer l’importance du langage HTML.

Mon explication fétiche de l’époque était de considérer que le web était une variation du courrier électronique. Je m’appuyais en cela de ma première expérience qui consistait à parcourir le web à l’aide du courrier électronique. Si le mail permet de s’adresser à une personne pour avoir une réponse personnalisée, il est possible que selon l’information que cette personne diffuse, elle soit amener à se répéter. Prenons l’exemple d’un météorologue à qui on demanderait une prévision. Il finit par mettre en place une sorte de répondeur qui renvoie la liste des bulletins disponible. On reçoit alors la liste des bulletins et on renvoie une commande précisant le bulletin qui nous intéresse. A l’époque ou je découvrais le « web », il fallait donc renvoyer son message au répondeur en modifiant le sujet ou en ajoutant un signe sélectif dans le corps de la réponse pour obtenir la page suivante. Il n’était pas vraiment question de parler de surfer. Mais nous avions le principe de base un serveur qui recevait des commandes des clients et qui pouvait ainsi affiner la demande. La particularité du langage HTML devient alors de normaliser ses commandes et non plus de passer par le mail mais par un logiciel spécialisé qui va analyser le fichier reçu pour traduire les commandes sous une forme visuelle et activable. Il va ainsi situer traduire des mises en formes esthétiques et surtout simplifier les commandes de requêtes (de demande du fichier suivant) en une zone activable d’un clic de souris. Cliquer reviendra à dire « je voudrais recevoir la suite de ce qui est proposé là ». Ces indications sont véhiculées par un fichier de « texte » que l’on nomme le fichier source. Ce fichier est interprété et mis en forme sur la machine du destinataire à l’aide d’un logiciel dit client (que l’on appellera dans le cas du web, un navigateur ou explorer ou butineur).

La spécification HTML 2.0 est produite par un consortium l’IETF [2] . Elle normalise la structure d’un document HTML, la syntaxe des balises qui définissent l’apparence, la localisation et l’opérationnalité des éléments qui le constituent. Il est alors possible d’affecter des caractéristiques de présentation au texte (gras, italique…) contenu dans le document, d’associer et d’afficher des images à ce dernier.

L’opérationnalité hypertextuelle est gérée par l’indication de localisation , dans un balisage spécifique, du fichier de destination.. Le lien est spécifié dans le texte par le marquage en bleu souligné des signes alphanumériques ou mots qui contextualisent l’origine du lien. Les images peuvent, elles aussi, être des origines de liens, elles utilisent le même balisage mais apparaissent bordées de bleu.

Lors de la consultation des documents dans Mosaic, les liens visités (destinations préalablement consultées) sont marqués en violet et non plus en bleu.

On distingue alors deux types d’images : illustratives et fonctionnelles (sachant que les fonctionnelles sont aussi illustratives, peut-être serait-il alors plus adapté de distinguer « fonctionnelles » et « non-fonctionnelles », mais je préférerai rester sur la première appellation pour distinguer plus fortement les deux).

La création de ces documents se fait alors à l’aide d’éditeurs de texte à l’intérieur desquels les rédacteurs incluent eux-mêmes les balises. Rapidement quelques petits utilitaires prennent en charge la conversion de documents issus de formats texte bureautique vers HTML. A charge pour le rédacteur de les rééditer pour y inclure les balises hypertextuelles.

Auteurs et utilisateurs appartiennent à la communauté Internet de l’époque, essentiellement composée d’universitaires, de chercheurs, quelques employés d’entreprises et des particuliers épris par passion ou nécessité de télématique.

La simplicité du langage, le maillage documentaire et la convivialité de la consultation contribuent rapidement à la diffusion de ce système de publication qui deviendra l’emblème spectaculaire de l’émergence d’Internet. En quelques mois il supplante le système « gopher » qui liait transversalement des index de serveurs sans intégrer la visualisation des documents (si ce n’est par des associations avec une multiplicité de visionneuses empêchant par-là même la consultation assemblée de document « texte et image » - Principe que l'on retrouvera partiellement plus tard avec les plugins [3] ).

Même si l’esthétique des pages faisait preuve d’une grande sobriété un tantinet austère les contenus scientifiques se sont multipliés Cependant les contraintes de la mise en forme posent rapidement une frustration esthétique qui n’est pas seulement artistique et ludique, mais avant tout identitaire. L’uniformisation du style conduit à une perte de repérage de l’origine des sources documentaires.

On retient de cette période qu’elle ouvre un nouvel espace de publication télématique. Si cette publication ne requiert pas des compétences techniques avancées pour produire des documents, elle nécessite quand même une connaissance d’un langage de conception dégagé de l’apparence du document final. Toutefois la pratique d’Internet à l’époque nécessite souvent de la part de ses usagers un minimum de culture informatique de base qui leur rend accessible ce mode de publication. A cette relative facilité de conception, il faut ajouter l’enrichissement des fonctions hypertextuelles qui positionnent ce nouveau mode de publication dans l’esprit de l’idéologie d’un Internet comme espace d’information partagée globalement. Cette hypertextualité ouvre alors vers une logique de parcours par requêtes associatives. On poursuit l’information par association d’idée. Toutefois la mise en forme marque fortement les éléments hypertextuels pour bien faire contraster la dimension fonctionnelle de la dimension informationnelle. La dimension multimédia des documents valorise le document électronique en lui donnant une identité de support, notamment par rapport aux supports papiers. Même parallèlement cette possibilité crée à la fois un désir esthétique et un besoin identitaire pour distinguer les différences de sources d’informations.

S’en suit alors une période où l’IETF perd l’initiative du développement du HTML. Les nouveaux concurrents de Mosaic et les concepteurs de serveurs introduisent leurs propres spécifications.

Toutefois une nouvelle instance de normalisation va s’organise, réunissant chercheurs, développeurs et nouveaux professionnels de l’Internet : le World Wide web Consortium (W3C).

HTML3.2 : L’esthétisation identitaire

Sous l’impulsion du W3C, une nouvelle référence apparaît en mai 1993. Les nouvelles spécifications apportent notamment l’inclusion d’attributs aux balises d’origine. Parmi les principales innovations, la possibilité de paver le fond du document avec une image, de définir des couleurs statutaires des liens pour la page, le réglage de la bordure des images « liantes ».

Ses modifications vont être utilisées par les auteurs au sein d’un web monotone de grisaille et d’indistinction visuelle.

L’accroissement des contenus hyperliés avec une apparence similaire pose des questions d’identification et d’authentification des sources documentaires qui sont amplifiées par la continuité des parcours de lecture. Seule une lecture de l’adresse (la localisation http:// ) du document permet d’en situer le serveur où il est déposé.

L’introduction de personnalisation esthétique des va offrir, aux éditeurs, la possibilité d’une distinction esthétique des documents.

Fleurit alors un engouement pour ces nouvelles attributions qui font du web un environnement kitsch et bigarré où les « promus » webmasters en herbe s’improvisent designers de document. Cette expressivité est manifeste concernant les fonds de pages où se multiplient des motifs récurrents, des textures imitant des supports papiers, marbrés, boisés… Le tout est rehaussé d’effets visuels « infographisants » comme l’utilisation du flou, de la colorisation, la polarisation…

Parallèlement une société comme Jasc profite, avec son logiciel d’infographie PaintShopPro, de cette explosion du web et du graphisme pour rentabiliser le modèle économique du shareware [4] . Ce logiciel inclus des fonctionnalités simplifiées pour le non-infographiste pour traiter l’image avec des effets, des redimensionnements et des conversions de format.

En dehors des fonds, le statut esthétique des autres images évolue. La définition d’un attribut bordure permet désormais de supprimer l’encadré des images hyperliens en calant l’épaisseur de la bordure à zéro. Si esthétiquement les webdesigners se débarrassent d’un liseré parfois disgracieux, les utilisateurs perdent un critère de distinction entre l’illustration et l’image « bouton ».

Sur cette métaphore du bouton, qui ouvre sur un autre document, des modes stylistiques de désignation vont redonner, à l’opérationnalité, de la visibilité. A l’aide des logiciels d’infographie, les images activantes vont prendre du relief en trompe l’œil : encadrements boutonnés, jeux d’ombrages et de perspectives. Toutefois cette monstration de la fonctionnalité repose sur le partage culturel de la signifiance opérationnelle.

Or cette esthétisation à géométrie variable ne repose pas sur des consensus universels de désignation. De plus dans la vague d’engouement infographique des webdesigners, l’utilisation des logiciels dédiés et de leurs effets de mises en volume servent aussi des démarches de mise en valeur des illustrations non activantes.

L’ancien marquage continue d’être présent au travers d’anciennes mises en page non-actualisées ou pour maintenir stratégiquement la visibilité explicite des liens. Nous repérons notamment deux stratégies :

-         résistance à une dérégulation des normes consensuelles

-         incitation à aller découvrir le contenu de destination

La résistance ne tient pas beaucoup et il est désormais rare de trouver des pages web avec le design « première époque ». D’autant qu’avec cette seconde période, les éditeurs de pages intègrent des fonctions pour gérer la définition des liens sans faire appel à une connaissance du codage hexadécimal des couleurs, mais en les « piquant » dans une palette.

Les logiciels sont de plus en plus orientés vers des concepteurs ne connaissant pas l’encodage des fichiers source. A l’image d’un logiciel comme AOL Press, se développent de plus en plus d’outils qui prennent en charge la production des paramètres techniques de la page HTML.

L’époque HTML 3.2 est marquée par tâtonnement conceptuel et esthétique qui ouvre la possibilité aux auteurs de se distinguer par un design enrichi et personnalisé. Il s’inscrit alors dans une période de popularisation de ce mode d’édition. Il confronte les documents à des lecteurs et auteurs « opérationnellement normalisés » par la génération précédente, des « newbies » [5] . Entre les deux, un public frontière s’enthousiasme pour une publication fortement identitaire qui est aussi en quête d’une stylistique interactive faisant valoir à l’intérieur du design une croyance dans l’intuitivité du visuel. Elle déplace l’appropriation du code informatique vers des logiques et des concepts infographiques. C’est une période notamment marquée par une orientation vers des webmasters en provenance de l’infographie alors que la période précédente était marquée par des webmasters provenant d’une culture du code informatique ou textuel. Ce changement de culture est par ailleurs fortement inscrite au sein des organisations qui investissent le web. Le site web qui relevait alors essentiellement des services informatiques (ou de volontaires passionnés), passe du côté des service « communications », jusqu’à être transmis à des agences ayant la charge de la communication visuelle de l’entreprise. Les « web-agency » d’origine se fondent avec les sociétés de communication traditionnelle (qui n’ont généralement pas encore à cette époque une culture de l’interactivité, même si elles utilisent des outils informatiques de PAO).

Néanmoins ce web au design confus se retrouve à l’étroit dans un langage de mise en page qui privilégie l’esthétisme auteur sans réelle prise en compte de l’usager.

HTML 4.0 : La gestualisation d’une pensée exploratoire

Dans cette période, le HTML 3.2 apporte à la production de contenu l’intérêt une mise à disposition planétaire pour  une audience potentielle de 30 millions d’internautes avec des coûts économiquement faibles. S’y ajoute la notoriété d’une visibilité de plus en plus emblématique d’Internet. Il devient possible de montrer Internet à la télévision ou dans les journaux..

Parallèlement, il devient de plus en plus complexe pour les concepteurs de produire des contenus intégrant une lisibilité technique, cognitive et culturelle partagée.

Du point de vue technique, le parc machine et la connexion au réseau créent des inégalités de consultation considérables. A ces contraintes « hardwares » des clients, s’ajoutent des contraintes « softwares ». La concurrence sévère entre les deux principaux éditeurs de navigateurs (Microsoft Internet Explorer et Netscape Navigator) est marquée par de légères mais suffisantes différences d’interprétation du code qui contraignent certains auteurs à optimiser leur site pour l’un ou l’autre, ou à créer plusieurs version d’un même site. Et les dernières versions de ces navigateurs ne représentent malgré tout que 60% du parc, laissant 40% des visites à des navigateurs hétéroclites ou vieillissants.

Les aspects cognitifs et culturels se manifestent au travers de la multiplication des compétences de lecture et d’interprétation des codes de présentation.

En 1998, le saut majeur, effectué avec la norme HTML 4.0, passe par l’intégration d’une plus grande interactivité des contenus au travers de grandes innovations : l’intégration de langages dynamiques, la possibilité d’inclure dans les documents de nouveaux documents non normés et le stockage chez le client de données individualisées.

Il serait un peu rapide de dire que la dynamisation du web attend HTML 4.0. Il existait déjà des moyens d’envoyer des données personnalisées ou contextualisées via des formulaires en direction de script cgi-bin. Ceux-ci pouvaient alors exécuter des actions interactives d’écriture et de transmission de données en lien avec d’autres protocoles ou avec des bases de données. Toutefois, cette technologie restait réservée à une minorité de webmasters connaissant des langages de programmation plus complexes et ayants des droits de paramétrages privilégiés sur les serveurs. A cette technologie serveur, le langage intègre des technologies clientes (c'est à dire actives à partir du poste et du logiciel de l'utilisateur) à l'aide notamment des plugins qui permettent depuis une page web d'exécuter des contenus "non-web". Si ces technologies permettent d'offrir une plus grande richesse d'interactivité et de présentation, je ne les aborderai pas ici, dans la mesure notamment où elle nécessite une installation après coup par l'utilisateur lorsqu'il y arrive et si déjà son navigateur et son environnement prennent en charge la portabilité de celles-ci.

Parallèlement, Sun a proposé un langage orienté objet intégrable aux pages web et interprétable, le javascript.  Le HTML a introduit une syntaxe permettant d’intégrer les langages de script.

Ces langages ont tout d’abord permis de relativiser l’affichage à son contexte de lecture client. Il prend aussi en compte le comportement de l’utilisateur sur la page, notamment au travers de l’interprétation des mouvements du curseur : Lors du survol de certains objets (comme les liens et les images), il permet de modifier leur apparence et leur destination.

Rapidement, en dehors de pratique purement ludique, de nombreux auteurs vont se servir de ces langages dynamiques pour revaloriser les images activantes en créant des « roll-over  [6] ». Cette technique permet de créer des « soupçons d’opérationnalité » par analogie avec la dynamique du mouvement reproduit. Elle réduit ainsi l’incertitude fonctionnelle indépendamment des trompes l’œil esthétiques. On constatera alors une diminution de ceux-ci au profit d’un graphisme « aplati ».

Si pour des raisons de sécurité et protection des données,  ces langages sont limités dans leur champ d’action informatique chez le client, ils peuvent toutefois stocker sur la machine de l’utilisateur des informations relatives à sa visite. Ces données inscrites dans des « cookies » servent à personnaliser les visites ultérieures du site. Du simple prénom de l’internaute en passant par le choix d’une langue, il va alors être possible de générer et de sélectionner des contenus individualisés.

Il appartient désormais au visiteur de découvrir un contenu qui prend en charge ses spécificités : Si certaines interactions sont automatisées (détection de l’environnement matériel et logiciel), d’autres relèvent désormais de son exploration de la page à la pointe du curseur. Palper la page devient alors une pratique révélatrice de contenus ou de fonctionnalités masquées pour des raisons esthétiques (démarquages des images et liens texte) et ergonomiques (gestion de menus ou contenus enchâssés).

Elle opère, dans le décryptage du lecteur, un passage à une reconnaissance analogique des propriétés topographiques des contenus. La pensée est spatialisée un peu comme dans les méthodes d’organisation de la pensée en topos, dans la rhétorique classique. De telles dynamiques conduisent l’utilisateur à se projeter dans l’espace de la page, à faire corps avec elle, opérant ainsi par perméabilité sémiotique une interpénétration entre le réel et le symbolique.

Il y a de la part du lecteur une bascule cognitive. Il quitte une lecture hypothético-déductive, devenue pseudo intuitive, pour entrer dans des logiques abductives. Il doit passer par un comportement de découverte alliant à la fois une réflexion sur ce qui peut à la lecture être interactif nécessitant une validation par l’acte. Un acte qui engage corporellement l’utilisateur, qui l’incite à faire corps avec l’univers du document pour participer à la révélation de sa potentialité.

De la part des auteurs, il convient alors de mettre en place un dispositif ouvert aux implications potentielles du lecteur. Formes d’implications qui se révèlent nombreuses et amènent à une écriture interactive qui ne se basent plus sur ce que l’auteur veut montrer, mais sur ce que l’utilisateur va chercher et en allant un peu plus loin, sur ce qu’il va apporter comme connaissances et contenus supplémentaires au lieu de publication. Dans cet esprit de l’analyse de ses parcours à son ajout de contenu, le visiteur de site web participe à sa définition, son enrichissement et l’organisation de sa structure.

Ainsi on note de plus en plus que les sites web passent d’espace d’exposition à des espaces de collaboration comme le montre la multiplication des forums et des espaces de publications partagés qui font la richesse et la vie des sites de dernière génération.

Cette évolution du web, que je n’ai relaté que partiellement, me paraît refléter plus que l’histoire de d’évolution d’une technologie. Cette transformation, d’une consultation documentaire à une contiguïté corporelle, marque une intégration de cet objet communicationnel dans nos quotidiens. Cette évolution intègre dans nos pratiques la confrontation à un paradigme de l’incertitude où le sens est à éprouver.

Il semblerait que la réussite d’un site web corresponde aujourd’hui à sa capacité de créer un climat, un lieu de référence où les utilisateurs vont pouvoir se frayer, construire, composer un chemin dans l’information sans se sentir dans un milieu étranger confus.

Le web se définit de moins en moins par ses contenus et de plus en plus comme un espace de convergence de multiples pratiques communicationnelles et interactives.

On trouvera à la fois une information créditée par les auteurs « officiels » du site (au travers d’articles, de documents finalisés…) et des espaces de participations, d’implications des utilisateurs au travers de forums, chat permettant de répondre à une information qui n’a pas encore été produite ou trouvée… L’art de la mise en scène des sites web, en impliquant corporellement les visiteurs est de les rendre plus proche et plus présent dans le processus communicationnel, à la fois pour se rapprocher d’eux, pour faire de leur présence une valeur vivifiante de l’espace susceptible d’en faire un lieu d’échange, avec tous les intérêts que peuvent y trouver des acteurs commerciaux comme des acteurs de pratiques collaboratives.

Nul doute que les évolutions actuelles autour du XML ou de langages de script puissants, comme le PHP ou l’ASP, marquent l’ouverture d’un web qui ne soit plus seulement un lieu de consultation individualisée. Elles facilitent le déploiement d’un environnement contributif.

Bien sûr on pourra faire valoir la présence en  masse des éditeurs commerciaux de contenus. Mais la perméabilité du web à des pratiques interactives et collectives en fait une zone médiatique originale dont les volumes et investissements individuels dépassent ceux jamais réalisés avec les médias traditionnels.

Du modèle « one to many » d’une consultation standardisée, le web a permis d’incarner,  par la caresse, le passage à une multiplicité de modèles communicationnels auxquels ouvrent les dispositifs de médiation interactifs.

© Vincent Mabillot 2002 http:/www.mabillot.net
Mail: vincent@mabillot.net


[1] W3C World Wide web Consortium: instance coordination et d'harmonisation du web (http://www.w3c.org/Consortium/)

[2] IETF : Internet Engeneering Task Force : Organisation non commerciale qui discute et valide la normalisation des protocoles sur Internet. Elle est composée de volontaires bénévoles réunis en groupes de travail et au sein desquels ils mettent  leurs compétences au service de l’organisation. Elle émerge et est reconnue par les autres groupes de travail sur l’évolution d’Internet en 1986.

[3] Plugin: logiciel qui se "branche" sur un logiciel principal et lui ajoute des fonctionnalités n'existant pas par défaut.

[4] Shareware ou partagiciel: logiciel fonctionnel que l'utilisateur peut utiliser pour l'évaluer et décider d'acheter s'il est satisfait en envoyant sa contribution pécuniaire à la société éditrice ou l'auteur. A la différence des démos, les "vrais" shareware continuent d'être utilisables même si on ne s'acquitte pas d'une licence.

[5] Les newbies sont de nouveaux utilisateurs qui ne sont pas au courant des règles consensuelles de la netiquette.

[6] Remplacement de l’image par une autre lorsque le curseur est au-dessus.