• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web
 

La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web

on

  • 4,351 views

La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web - Thèse professionnelle - document complet

La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web - Thèse professionnelle - document complet

Statistics

Views

Total Views
4,351
Views on SlideShare
4,297
Embed Views
54

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 54

http://www.scoop.it 51
http://www.linkedin.com 2
http://www.lmodules.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web La compétence numérique, cadre de travail évolutif pour le design d'interfaces Web Document Transcript

    • LA COMPETENCE NUMERIQUE C ADRE DE TRAVAIL EVOLUTIF POUR LE DESIGN D ’ INTERFACES W EB Vincent Beneche Octobre 2009 M AST E R E SP E CI A LI S E E N I N G EN I ERI E D ES M ED I A S N U M ERI Q U ES
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. R EMERCIEMENTS Je remercie mes parents qui ont eu la bonne idée de m’interdire la télévision pour que j’apprenne l’informatique dès le plus jeune âge. Je remercie également tous les gens qui m’ont aidé à réaliser cette étude et tout particulièrement : Laurent Robert (Directeur de Création – Smile – Paris), qui m’a donné un regard critique et pointu sur le design graphique pour le Web. Laurent Breyton (Directeur adjoint ESIEE-Paris), qui s’est porté volontaire pour suivre mon travail. Mais également : Dr. Antoinette Fennell de l’université Trinity Haus à Dublin Ellen de Vries, Directrice de la communication Philips R&D Pr. Yoram Eshet-Alkalai, Directeur de la spécialisation en études techniques à l’université ouverte d’Israël Leif M. Hokstad de l’université norvégienne des sciences et technologies Ainsi que mes amis et le reste de ma famille qui m’ont apporté leur soutien moral. 2
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. T ABLE DES MATIERES Remerciements ....................................................................................................................................... 2 Table des matières .................................................................................................................................. 3 Introduction............................................................................................................................................. 5 Chapitre 1 Fractures et compétences numériques ................................................................................ 6 I. Fractures numériques ou la disparité d’accès aux NTIC................................................................... 6 A. Considérations géopolitiques ...................................................................................................... 6 1. les pays du nord ...................................................................................................................... 7 2. Les pays en voie de développement et le reste du monde .................................................. 14 B. Considérations sociales ............................................................................................................. 19 II. « Digital Literacy » ou Compétence numérique ................................................................................ 26 A. Traduction et définition............................................................................................................. 26 B. Acquisition ................................................................................................................................. 31 Phase 1 L’apparition du « personal computing » à la fin des années 70 .................................. 31 Les machines et les nouveaux codes ..................................................................................... 31 Jeux vidéos et Disques compacts .......................................................................................... 34 Phase 2 L’avènement de l’hypermédia et de la communication dans les années 90 ............... 39 L’hypermédia ......................................................................................................................... 39 L a communication en ligne................................................................................................... 40 Phase 3 L’économie d’information répartie des années 2000.................................................. 44 L’échange de fichiers ............................................................................................................. 45 Les blogs ................................................................................................................................ 47 Les réseaux sociaux numériques ........................................................................................... 49 Le commerce électronique .................................................................................................... 50 Chapitre 2 : Le design Web dans ce contexte ...................................................................................... 54 Qu’est ce que le design ?....................................................................................................... 54 I. Le Design pour le Web, un écosystème de contraintes ............................................................ 56 A. Contraintes marketing ....................................................................................................... 57 B. Contraintes informatiques ................................................................................................ 58 3
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C. Contraintes imposées par les disciplines de l’IHM ............................................................ 61 II. La compétence numérique comme catalyseur et contrainte du design Web .......................... 62 A. Composition du site et habitudes de navigation................................................................... 63 B. Conventions et affordances : reconnaître et utiliser des symboles ..................................... 71 C. La sémiotique Web ................................................................................................................ 77 Conclusion ............................................................................................................................................. 81 Table des illustrations............................................................................................................................ 83 Bibliographie.......................................................................................................................................... 85 4
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. I NTRODUCTION Depuis la nuit des temps, des savoirs ont été transmis de génération en génération, évoluant au fil du temps et des nouvelles découvertes. Ces savoirs ont différé, dès les premiers âges humains, en fonction des conditions climatiques et géographiques puis politiques et culturelles des lieux de vie. Aujourd’hui, dans les pays occidentaux, une nouvelle culture a fait son apparition. Il s’agit de la culture numérique. Celle, liée à l’utilisation quotidienne des médias numériques. Ce terme regroupe des moyens d’accès à l’information aussi bien matériels (téléphone, PDA, baladeur numérique, ordinateur, télévision, NeoObjects, systèmes domotiques) qu’immatériels (Internet, logiciel, système opérationnel et de communication). En adoptant ces technologies, nous nous sommes familiarisés avec leurs codes, leurs modes de fonctionnement, leurs astuces et leurs pièges. Parmi ces médias, le web omniprésent et virtuel à la fois est l’interface entre l’homme et les données du réseau. Le Web est consulté chaque jour par plus d’un milliard d’êtres humains, qui en font des usages autant personnels que professionnels. Il nous assiste, nous permet de travailler de façon collaborative sur de gros projets, de nous divertir et de communiquer. Les téléphones portables et autres baladeurs MP3 sont également devenus des interfaces matérielles d’accès à la toile, permettant à tout citoyen numérique de se connecter au réseau quand il le souhaite. Internet évolue constamment. De nouvelles fonctionnalités apparaissent, de nouvelles interfaces logicielles sont conçues, de nouvelles façons de trouver l’information se démocratisent. La culture liée au média et à ses modes d’utilisation, évolue simultanément. Dans ce monde où l’instantanéité de l’information prend tout son sens, la présentation graphique des données a une importance capitale, tant pour la compréhension, que la trouvabilité1 de l’information. Il est ainsi important de montrer comment se développe la présentation graphique de l’information. C’est ce que nous tenterons de faire grâce à une approche du design graphique sur le Web, passant par la considération de tous les facteurs qui l’influence et notamment la compétence numérique ; terme que nous définirons. Nous montrerons dans quelle mesure la compétence numérique constitue un cadre de travail pour les designers de par les contraintes qu’elle impose mais également comment ses frontières sont repoussées par les concepteurs. Pour ce faire, nous analyserons d’abord le contexte de fracture numérique dans lequel le monde se trouve, puis, nous prendrons des exemples précis et nous livrerons à des analyses sémiologiques et historiques concises, des symboles du Web. 1 La trouvabilité, d’après l’inventeur du concept Peter Morville, réfère à la qualité d’être à la fois visible, localisé et accessible. On peut évaluer a quel degrés un objet est facile à trouver ou à découvrir. 5
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C HAPITRE 1 F RACTURES ET COMPETEN CES NUMERIQUES I. F RACTURES NUMERIQUES OU LA DISPARIT E D ’ ACCES AUX NTIC A. C O N SI D E R AT I O N S G E O P O LI T I Q U E S Aujourd’hui, la population connectée à Internet est évaluée à 1.668.870.408 utilisateurs2 répartis de façon inégale sur le globe. Depuis l’apparition de l’Internet grand public dès le début des années 90, le nombre de connectés n’a pas cessé d’augmenter. F IGURE 1 - E VOLUTION DU NOMBRE D ' UTILISATEURS D 'I NTERNET POUR 100 HABITANTS SUR LA P ERIODE 1997-2007. 2 http://www.Internetworldstats.com/stats.htm 6
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. 1. L E S P A Y S D U N O R D En 1996, alors qu’en France le Minitel subsistait comme le service télématique le plus populaire, aux Etats-Unis, Bill Clinton exhortait les bibliothèques et écoles à s’équiper d’une connexion Internet3 pour les usagers du lieu et ce pour permettre un accès plus démocratique à l’information. Alors qu’aux Etats-Unis, de plus en plus de particuliers avaient accès à Internet, Bill Gates exhortait, lui, la France à sortir de l’ère du Minitel, pour embrasser celle d’Internet. Si aux Etats-Unis, l’adoption du réseau mondial était en avance, c’était principalement grâce aux efforts des opérateurs de télécoms qui mettaient en place des forfaits d’appels locaux illimités. Les ordinateurs pour accéder au réseau, « appelaient » le numéro local de leur fournisseur d’accès et bénéficiaient ainsi d’une connexion illimitée à coûts maîtrisés. Le Japon et les pays scandinaves, également Le Minitel est une technologie de « early-adopters », entrèrent à leur tour dans le communication télématique développée par grand monde virtuel, nouveau terrain de jeu pour la Direction générale des télécommunications française (Ministère les particuliers qui découvraient le « chat » des Postes et Télécommunications) et (messagerie instantanée) grâce au protocole IRC, utilisée en France, essentiellement dans les les newsgroups, la boîte mail évidemment et années 1980 et 1990, avant d'être supplantée par Internet. surtout le Web. Il s’agissait là, d’un nouveau Toutefois, en février 2009, selon le Groupe monde à coloniser et à explorer. Mais à quel prix ? France Telecom, le réseau de Minitel enregistre encore 10 millions de connexions Internet en 1996 était une technologie encore très mensuelles sur 4 000 codes de services contraignante. Le réseau était lent dû aux Vidéotex, dont 1 million sur le 3611 infrastructures jeunes et au matériel informatique (annuaire électronique). Selon la Tribune, France Telecom n'entend pas fermer le d’une génération aujourd’hui dépassé, ce qui service, qui a généré environ 100 millions rendait la navigation sur les pages Web, d'euros de chiffre d'affaires en 2007, avant insupportable. L’accès au réseau utilisant la ligne la fin 2011. téléphonique, présentait encore un coût En 1977, la remise à Valéry Giscard d'Estaing, Président de la République, du décourageant pour les ménages. rapport sur l'informatisation de la société, rédigé par Simon Nora et Alain Minc, va Si les grandes compagnies du monde avaient déjà entraîner une révolution technologique adopté des systèmes de gestion télématique, le baptisée par les auteurs du néologisme « traitement de texte, et parfois le courrier télématique » défini comme la connexion de électronique depuis le milieu des années 80, la terminaux permettant la visualisation de données informatiques stockées dans des grande majorité des entreprises a adopté le réseau ordinateurs à travers les réseaux de dans les années 90, voyant en Internet, un moyen télécommunication. de fluidifier leurs échanges internes et externes, L'année suivante, en 1978, la France décide de lancer un réseau vidéotex accessible par leurs archives, et leurs données. Elles se 3 Clinton, Bill. 1996. Between Hope and History. 1996. 7
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. trouvaient alors face à d’extraordinaires défis de un terminal peu onéreux. Cette décision sera rendue publique par Gérard Théry conversion numérique, puisqu’il s’agissait alors de (directeur de la DGT) à l'Intercom 79 de sortir de l’ère quatre fois centenaire de l’imprimé, Dallas (Texas) qui réunit le gratin mondial pour embrasser une technologie dont la fiabilité, la des télécommunications. Il y annonce avec rapidité, l’intérêt, le coût et la longévité, ne une certaine emphase le déclin de l'ère du papier. semblaient pas toujours convaincre. Il fallait Aujourd'hui le programme Télétel (nom du également former les employés à utiliser le média, réseau des terminaux appelés Minitel) est ce qui présentait un coût élevé et provoquait des reconnu dans le monde entier comme le premier réseau télématique grand public et réticences de la part des intéressés. comme un succès commercial. Ces faiblesses du média avaient besoin d’un coup Le Minitel (Programme Télétel) revint à plus de 8 milliards de francs en équipements de de pouce des secteurs privés et publics de chaque terminaux avec une durée de vie estimée de pays pour moderniser les infrastructures de 8 ans pour les Minitels. communication, réduire les coûts téléphoniques, Pendant le même laps de temps, le chiffre d'affaire des services télématiques atteint et faire baisser le prix du matériel informatique. les 3,5 milliards de francs et les économies Ces mesures étaient indispensables à l’adoption de papier atteignirent 500 millions de francs du Web pour les particuliers. par an. En 1985 on a dépassé le million de Minitels En effet si depuis le début des années 80 se en service en France ainsi que le million développe le « personnal computing » (dont nous d'heures de communications de services par mois. En 2000, le Minitel était utilisé par parlerons dans la partie suivante) touchant les près de 25 millions de personnes (sur 60 catégories socioprofessionnelles les plus hautes, millions d'habitants) avec un parc de près de c’est à la fin des années 90 qu’eut lieu la grande 9 millions de terminaux. révolution informatique personnelle qui permit à Il dépassait de loin le nombre d'utilisateurs du réseau CompuServe, qui offrait en un public bien plus large d’accéder à l’ordinateur Amérique du Nord des services semblables. et à Internet. Le futur vice-président Al Gore envoya un jeune homme talentueux David Lytel, De 1997 à 2000, le marketing des produits et enquêter, non sur les techniques utilisées, services numériques est devenu très agressif, le mais sur les contenus des services offerts. téléphone portable a fait une entrée triomphante Ce rapport fut à la source du discours sur « Les autoroutes de l'information » parmi le grand public devenant le premier maillon prononcé par Al Gore en juillet 1994, et de la nouvelle société d’instantanéité dans laquelle coup d'envoi de l'Internet dans le monde. nous plongions. Les prix du matériel informatique Les utilisateurs habitués au Minitel peuvent avoir des difficultés à passer à Internet : ont chuté. Le besoin d’un ordinateur familial avait été créé par la publicité et la presse, éblouissant  Inconvénients d'Internet par rapport au Minitel les consommateurs de leurs nouveaux atouts. o Plus grand volume L’ordinateur devenait le « compagnon » de toute d'information à transférer, ce la famille, permettant aux enfants comme aux qui implique soit de disposer d'une ligne à haut débit soit adultes de se divertir, de se cultiver (grâce au CD- de subir la lenteur d'affichage ROM), et d’accomplir des tâches pratiques comme (à relativiser au vu de la 8
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. le classement de données, le traitement de texte, lenteur d'affichage du Minitel) o Pas de structure normalisée, l’impression de documents, la copie de ni d'annuaire officiel. CÉDÉROM... Logiquement, la population o Nécessite d'avoir un européenne a suivi les Etats-Unis en adoptant ordinateur (ou une console de progressivement l’ordinateur pendant cette jeu communicante branchée sur la télévision) et d'attendre période ; outil dit « multimédia », passerelle qu'il ait démarré. Cependant, omnipotente vers les loisirs, la culture, le travail et des terminaux légers existent, surtout Internet. les Webphones, qui sont opérationnels dès leur mise En 2000, la machine Internet est en route pour de sous tension, exactement bon, en Europe, les réseaux câblés et ADSL se comme un Minitel. Malheureusement, ils ne sont démocratisent dans les villes, permettant des généralement pas capables de connexions 10 à 100 fois plus rapides faire fonctionner les nouveaux qu’auparavant. Des centaines d’entreprises (start- services dits « Web 2.0 ». o Pas de sécurisation par défaut up) voient le jour en Europe comme aux Etats- de la transmission des paquets Unis, proposant des services basés sur le réseau. sur le réseau, alors que le Internet est enfin perçu comme un média de Minitel passe par un réseau masse par les entreprises de tous bords qui y « sécurisé » qui est Transpac  Avantages d'Internet par rapport au voient un moyen de plus pour communiquer des Minitel informations sur leur marque et pour vendre leurs o Images produits. Un moyen autrement moins cher que les o Système ouvert o Ergonomique (polices médias traditionnels (TV, presse et radio) puisque typographiques, par essence, contributif. Internet devient le personnalisation du terrain de jeu du publicitaire, les bénéfices retirés navigateur) des campagnes Web deviennent très intéressants o Pas de surfacturation de certains sites à la vue des faibles coûts de développement. De o Beaucoup plus d'informations nombreuses marques intègrent à leurs campagnes disponibles de communication traditionnelles, des actions sur o Pas de monopole d'un opérateur unique et ouverture le réseau telles que la mise en place de bannières du réseau. animées, des newsletters et de sites éphémères En tout état de cause, certains experts car promotionnels ou événementiels… s'accordent à dire qu'avec la sortie et le Par ailleurs, les états mettent en place des déploiement du Minitel, la France avait de nombreuses années d'avance en matière politiques d’enseignement de l’informatique pour d’échanges électroniques, mais que cela a permettre au plus grand nombre d’y avoir accès et considérablement freiné le développement les grandes surfaces bradent les ordinateurs, trois d'Internet en France qui, par la suite, accusait alors des années de retard à quatre fois moins cher que deux ans avant. Il paraît toutefois incontestable que Les réseaux de communication permettant l’accès l'Annuaire Electronique (AE) dit le 11 puis Internet, évoluent pour couvrir en 2001, la 3611 a familiarisé des millions de Français 9
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. majeure partie des grandes villes occidentales. Et avec l'interrogation d'un moteur de c’est précisément à ce moment que se développe recherche. En 2006 le taux d'équipement à ce que nous nommerons la fracture numérique. l'Internet à haut débit, à la 13e place mondiale entre le Japon et le Luxembourg, Au sein d’un même pays, voire d’une même semble peu impacté par le minitel. région, les populations font face à une situation d’inégalité en termes d’accès à l’information et à la communication. Cette fracture numérique dans les pays du nord peut être considérée à différentes échelles. En 2001, les zones couvertes par l’ADSL et le Câble sont en pleine expansion mais restent limitées aux grandes villes, au sein desquelles, certains arrondissements, rues ou pâtés de maison n’en bénéficient pas. Par ailleurs, si le matériel informatique a alors vu ses prix chuter drastiquement, il n’en devient pas pour autant la priorité des ménages modestes qui y voit un appareil superflu et source de problèmes. Il en est de même pour les abonnements aux fournisseurs d’accès qui représentent également un budget non négligeable pour un foyer. L’accès au réseau et à ses services est ainsi variable au sein même d’une ville. au plan national, la fracture est encore plus nette, les zones les plus reculées ne sont pas couvertes. On note que de multiples consultations gouvernementales ont alors lieu pour palier au problème d’équipement et de prix dans ces zones. Au niveau Européen, les infrastructures réseau des pays, sont le principal frein ou catalyseur de l’accès à Internet de la population. On retrouve un clivage entre pays les plus riches et les plus pauvres. Et ce clivage ne se remarque pas seulement en ce qui concerne les accès Internet mais également les taux de pénétration de tous les nouveaux médias numériques (3G, MP3, PVR, TNT…). Depuis 2001, les infrastructures réseaux ne cessent de se moderniser dans les pays du nord. Comme nous le montre le tableau suivant, le nombre d’utilisateurs ne cesse de grimper (282% d’augmentation en 9 ans). Les fournisseurs d’accès se sont également diversifiés et proposent aux utilisateurs, un nombre de services croissants. Leur mise en concurrence a permit de faire baisser les coûts des abonnements Internet, rendant le réseau bien plus accessible. 10
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. 3ème trim. 1er trim. 3ème 1er trim. 3ème 1er trim. 4ème 2001 2002 trim. 2003 trim. 2004 trim. 2002 2003 2004 Haut débit Coût moyen d'un abonnement 33,33€ 27,23€ 28,85€ 22,39€ 20,4€ 22,04€ 22,00€ haut débit (€/mois) Bas débit Coût moyen d'un abonnement 11,08€ 9,30€ 8,04€ 7,17€ 6,38€ 6,31€ 6,3€ bas débit (€/mois) T ABLEAU 1 - E VOLUTION DU COUT DE L ' ACCES A I NTERNET EN F RANCE En effet, dès Octobre 2002, en France, le fournisseur d’accès Free propose sa première offre de Triple Play, permettant à l’utilisateur de ne payer qu’un seul abonnement pour Internet, le téléphone fixe et la télévision. Cela révolutionne radicalement le budget alloué aux télécoms dans les foyers et permet un accroissement non négligeable du nombre d’internautes dans les zones dites dégroupées. La concurrence s’organise et l’on voit fleurir de nombreuses offres de Triple play, directement inspirées du modèle américain et rendu possible grâce aux technologies d’IPTV, VOIP, et ADSL. L’accès au réseau est également de plus en plus attractif car il devient une extension virtuelle de la société humaine. On y trouve de plus en plus d’informations et de services, et la navigation devient plus agréable grâce aux vitesses de connexions permises par l’ADSL et le Câble. Les médias traditionnels affirment également leur présence sur le Web, devenu leur relais de communication mais également un prolongement de leur programmation. De plus en plus de connectés s’y « retrouvent » sur des forums d’échange et des salons de discussion (chat-room). De nombreux appareils mobiles possèdent également une connectivité au réseau mondial via les réseaux GPRS, EDGE, 3G et Wifi. Ce dernier constitue une véritable révolution puisqu’il permet une connexion sans fil à partir de points d’accès émetteurs. Cela permet aux utilisateurs de rester connectés pendant des phases de mobilité. Si les réseaux GPRS, EDGE et 3G appartiennent aux opérateurs de téléphonie et sont donc très coûteux à l’étranger (roaming), le Wifi n’appartient qu’à celui qui met en place l’émetteur et ce service est de plus en plus répandu, que ce soit dans les bars, les hôtels, les lieux publics et depuis peu, grâce à un maillage national d’utilisateurs en France (Free Wifi et FON). Ces système, mis en place simultanément par les fournisseurs d’accès Free d’une part 11
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. et Neuf Telecom/SFR de l’autre, constituent une sorte de WAN4 gratuit, autorisé par les abonnés de ces réseaux, et autorisant des connexions entrantes sans fil (de terminaux mobiles par exemple). Aujourd’hui, dans les pays du nord, Internet est accessible via des terminaux de différentes natures et via des réseaux en constante expansion. Cela permet une utilisation du réseau à des fins personnelles comme professionnelles à tout moment de la journée, au bureau, à la maison et en transit. Part de la Nombre Taux de Evolution Part des Population population d’utilisateurs Pénétration (2000- utilisateurs (Juin 2009) mondiale d’Internet (% Pop.) 2009) mondiaux Europe 803.850.858 11,9 % 402.380.474 50,1 % 282,9 % 24,1 % Amérique 340.831.831 5,0 % 251.735.500 73,9 % 132,9 % 15,1 % du Nord Japon 127.078.679 1.9% 94.000.000 74,0 % 99,7 % 13,4 % Norvège 4.660.539 0.06% 3.993.400 85,7% 80% 1% TOTAL 6.767.805.208 100,0 % 1.668.870.408 24,7 % 362,3 % 100,0 % Mondial T ABLEAU 2: I NTERNET USAGE ( SOURCE I NTERNET W ORLD S TATS – J UIN 2009) Analysons le tableau ci-dessus pour présenter la fréquentation d’Internet dans quelques pays du nord. Si l’on se concentre tout d’abord sur la Norvège, pays scandinave au meilleur indice de développement humain5 en 2005, on constate qu’il présente également le plus fort taux de pénétration d’Internet (des pays comparés mais également du monde), et le plus faible taux 4 Wide Area Network 5 L'Indicateur de Développement Humain, ou I.D.H., a comme objectif d'essayer de mesurer le niveau de développement des pays, sans en rester simplement à leur poids économique mesuré par le P.I.B. ou le P.I.B. par habitant. Il intègre donc des données plus qualitatives. C'est un indicateur qui fait la synthèse (on l'appelle indicateur composite ou synthétique) de trois séries de données :  L’espérance de vie à la naissance (qui donne une idée de l'état sanitaire de la population du pays)  le niveau d'instruction mesuré par la durée moyenne de scolarisation et le taux d'alphabétisation  le P.I.B. réel (c'est-à-dire corrigé de l'inflation) par habitant, calculé en parité de pouvoir d'achat (PPA - c'est-à-dire en montant assurant le même pouvoir d'achat dans tous les pays) le P.I.B. par habitant donne une indication sur le niveau de vie moyen du pays. L'I.D.H. est calculé par le Programme des Nations Unies pour le Développement (P.N.U.D.). Il se présente comme un nombre sans unité compris entre 0 et 1. Plus l'I.D.H. se rapproche de 1, plus le niveau de développement du pays est élevé. Le calcul de l'I.D.H. permet l'établissement d'un classement annuel des pays. L'I.D.H., s'il est sans doute un meilleur indicateur du niveau de développement d'un pays que le P.I.B. par habitant, n'est cependant pas exempt de faiblesses, en particulier parce qu'il inclut celui-ci et on sait que la mesure du P.I.B. pose de nombreux problèmes. D'autre part, il faudrait sans doute prendre en compte davantage de critères qualitatifs, en particulier en ce qui concerne les inégalités. La Norvège et l’Islande sont les deux pays les plus fréquemment en tête du classement. 12
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. d’accroissement sur la période 2000-2009. Le taux d’accroissement est dû à l’excellente qualité des infrastructures de télécoms qui offraient, bien avant 2001, des accès haut débit aux particuliers, aux entreprises et aux facultés. On ne manquera pas de remarquer que si la Norvège représente 0.06% de la population mondiale, elle représente 1% des internautes ! Les chiffres de l’Europe requièrent une explication, car si c’est aujourd’hui le second continent le plus connecté après l’Amérique du Nord, il connaît de très grandes disparités d’indice de développement humain, entre les pays qui le composent. Ce qui cause des taux de pénétration d’Internet très variables entre les pays, passant de 85.7% en Norvège à 15.9% en Albanie. Si l’on se concentre sur le Japon, on remarque que la population d’internautes a doublé en 9 ans. Ce résultat pourrait paraître impressionnant, si l’on ne considérait pas que la France a, elle un taux d’accroissement de près de 400 % sur la même période. La progression la plus impressionnante étant celle d’Andorre où 83.5 % de la population est connectée, ce qui constitue une augmentation de 1300% en neuf ans. Ces statistiques impressionnantes sont également dues à une population peu nombreuse de 84 000 habitants. Si globalement, Internet, a changé les notions de temps et de distance dans les pays du nord, ce qui est pour nous une réalité doit être nuancé. En 1999, la moitié de la population mondiale n’avait jamais passé un coup de fil6 et encore moins, eu accès à Internet. Les technologies de l’information et de la communication (TIC) devenues des outils d’usage quotidien dans nos pays, nous permettent un gain de productivité et une amélioration des paramètres temporels et spatiaux de nos vies. Si la technologie a toujours été un moteur de la société nous permettant de résoudre de plus en plus de problèmes et de parvenir à de nouveaux buts elle a aussi été de tout temps inégalement répartie. La fracture numérique est ainsi un des challenges apparus avec le développement des TIC. L’OECD défini ce terme comme le gap entre les individus, les foyers, les entreprises et les zones géographiques à différents niveaux socio-économiques, en fonction de leur opportunité d’accès aux NTIC et en particulier, à leur utilisation d’Internet. 6 OECD (1999) Organisation for economic co-operation and development – http://www.oecd.org, « The economic and social impact of electronic commerce : Preliminary findings and research agenda » 13
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. 2. L E S P A Y S E N V O I E D E D E V E L O P P E M E N T E T L E R E ST E D U MO N D E Comme nous venons de le voir, au sein même de l’Europe, des pays sont bien plus connectés que d’autres. À l’échelle du monde, ces disparités sont encore plus flagrantes car si l’Albanie fait figure de mauvais élève de l’Europe avec un taux de pénétration de 15,9%, La Birmanie, la Corée du Nord et Cuba, n’ont tout simplement pas de connexion Internet à disposition du grand public. Au Sierra Leone, au Niger, au Liberia, en Ethiopie et au Congo, il y a en moyenne, moins d’un accès à Internet pour 200 habitants. Plusieurs facteurs sont directement responsables de ces chiffres. Il y a tout d’abord des décisions politiques qui entrent en jeu, les gouvernements autoritaires voire liberticides de pays comme la Corée du Nord et la Birmanie, ne souhaitent pas que leur population ait accès aux informations du réseau. Le but de ces dictatures étant souvent de maintenir les populations dans l’ignorance, mais surtout d’éviter des prises de conscience, et les conspirations qui pourraient être initiées sur le réseau. En effet, le réseau donne aux populations un nouvel espace de vie privée, constitué entre autres, d’une boite de réception de courrier électronique. Cet espace de vie privée, quasi-incontrôlable par les gouvernements, n’est évidemment pas souhaité par les dictateurs. En Chine, où le nombre d’internautes est passé de 21 à 210 millions de 2001 à 20077, le gouvernement exerce un contrôle permanent de la toile, à tel point que l’Internet chinois fonctionne comme un intranet connecté au reste de la toile. Ce fonctionnement permet aux autorités d’auditer ce qui entre et sors de leur réseau national. Devant l’accroissement du nombre d’internautes, le gouvernement chinois a lancé en 2005, le « Golden Shield », un projet de 800M$ visant à contrôler automatiquement les actions sur le réseau. Cet incroyable firewall filtre jusqu’au moindre mot tapé sur un clavier. Le principe qui sous-tend à ce système est le suivant « Quand la vertu avance d’un pas, le vice avance de dix ». Internet permet ainsi aux autorités chinoises d’accroître leur contrôle sur la population. La chine est également le seul pays au monde ayant instauré le statut de « cybercriminel politique » qui permet d’emprisonner quiconque publierait sur Internet, un article à l’encontre du gouvernement en place. Un des épisodes le plus marquant de cette répression étant probablement l’arrestation et l’exécution des internautes, pratiquant le Falun Gong, groupe sectaire controversé, déclaré illégal en 1999 après une manifestation pacifiste8. Le plus étonnant étant peut-être que les systèmes de protection réseau de la Chine ont été mis en place par les géants américains du réseau (Cisco, Nortel, Sun Microsystems9). Ces mesures ont 7 http://www.marianne2.fr/Comment-les-dictateurs-chinois-maitrisent-le-Web_a89275.html 8 Amnesty International, Falun Gong Persecution Factsheet 9 De nombreuses sources le confirment comme http://www.businessweek.com/magazine/content/06_38/b4001067.htm 14
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. finalement donné au gouvernement une grande satisfaction car elles sont bien plus efficaces pour repérer des dissidents que les méthodes d’infiltration traditionnelles utilisées avant l’ère numérique. En Chine, à l’inverse de ce qu’écrit Eric Besson dans « La République numérique » (Besson, 2008), Internet n’est pas un moyen d’émancipation, ne représente pas une utopie (ou e-topie comme il l’écrit) et à peine une évolution des libertés. Internet y est devenu un outil de contrôle de la population par le gouvernement. Aux Emirats Arabes Unis, véritable pôle économique du Moyen-Orient, des systèmes de filtrages existent également, interdisant l’accès à certaines informations sur Internet, tels que des sites pornographiques et des réseaux sociaux. Flickr par exemple, service de publication de photographies numériques en ligne y est banni car il expose potentiellement ses visiteurs à des images de nudité partielle ou complète. La liste des états qui filtrent les informations disponibles à leurs internautes est assez étendue10 et les restrictions varient en fonction des états. Le Maroc par exemple a interdit l’accès à Google Earth™ car le logiciel permet à tous de voir les jardins du palais royal. Mais globalement les interdictions concernent des sites jugés politiquement ou moralement incorrects ou exposant les utilisateurs à des informations potentiellement choquantes ou dissidentes telles que celles qui sont publiées sur les plateformes de Blog et de partage vidéo ou d’images. Le site Global Voices Online11 détaille les restrictions par pays et met en lumière les tensions politiques sous-jacentes aux interdictions d’accès comme c’est le cas pour la Syrie qui bloque tout accès aux sites hébergés en Israël. Les pays en voie de développement font également face à de fortes contraintes économiques nuisant à la distribution du réseau. On constate qu’il existe une corrélation directe entre le développement économique et social et l'accès aux TIC. L'accès aux nouvelles technologies de communication progresse beaucoup plus rapidement dans les nations situées au nord de la planète que dans celles situées au sud, et l'on trouve beaucoup plus de serveurs Web en Amérique du Nord et en Europe que sur les autres continents. Les accords entre les gouvernements pour faire passer des câbles sous-marins12 entre les continents sont également garants des connexions mondiales. Plus les connexions physiques sont nombreuses et plus la bande passante permise est élevée. Prenons pour exemple l’île de la Réunion, territoire français de l’océan indien. L’île est reliée au reste du monde par un seul et unique câble13 sous-marin reliant la Malaisie à l’Afrique du sud. Son exploitation est ainsi très coûteuse ce qui force les réunionnais à payer leur connexion à des tarifs élevés. France télécom palie actuellement à ce 10 http://advocacy.globalvoicesonline.org/projects/maps/ 11 http://advocacy.globalvoicesonline.org 12 http://image.guardian.co.uk/sys-images/Technology/Pix/pictures/2008/02/01/SeaCableHi.jpg 13 http://fr.wikipedia.org/wiki/SAFE 15
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. problème en installant le câble LION14 (Lower Indian Ocean Network) reliant Madagascar à l’île Maurice en passant par la Réunion. Les deux îles françaises seront ainsi privilégiées par rapport aux autres pays de la zone en termes de bande passante, si France Telecom parvient à négocier avec les autorités malgaches. La connexion au réseau dépendant donc de la présence physique de câbles entre les pays et les continents est ainsi extrêmement variable. Elle dépend également des accords entre les sociétés privées et les pays d’une part et des actions diplomatiques d’autre part. L’Afrique est le meilleur exemple de retard de développement en termes de connexion au Réseau. Les niveaux de vie y sont parmi les plus bas de la planète, les espaces sont vastes et les services bien moins développés que dans le reste du monde. Les conditions climatiques ont également leur importance puisqu’elles nuisent à l’élaboration de vastes chantiers de télécommunication terrestres. F IGURE 2 - T AUX DE PENETRATION D 'I NTERNET EN A FRIQUE Q2- 2009 F IGURE 3 – P ART D ' INTERNAUTES A FRICAINS Q2-2009 14 http://fr.wikipedia.org/wiki/LION 16
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Cas du Botswana (l’un des pays les plus développés d’Afrique sub saharienne15 ): IDH : 0.664 (126/179) 2,400 120% Population sous le seuil de pauvreté : 30.3% Age moyen : 21.7 ans Total mobile SIMs (thousands) 2,000 100% Espérance de vie : 48.9 ans Mobile SIM penetration Population : 1 990 876 individus 1,600 80% Climat semi-aride 1,200 60% Alors que moins de 8 % de la population a accès à une ligne de téléphone fixe, la croissance de la 800 40% téléphonie mobile s’est faite à un rythme très 400 20% soutenu depuis 1998 comme le montre le graphique ci-dessous pour atteindre en 2008 0 0% 1998 2000 2002 2004 2006 2008 2010 2012 2014 près de 98 % de la population. Ce chiffre est un des plus élevé de la région. Le Total SIMs faible taux d’équipement en ligne fixe est un des SIM penetration (Analysys Mason) SIM penetration (WCIS forecast) principaux facteurs du retard de l’Internet au Botswana. F IGURE 4 - P ENETRATION DU TELEPHONE PORTABLE AU B OTSWANA Les autres facteurs sont les suivants :  Prix de l’informatique élevé  Prix du service élevé (et non correlé au prix de revient pour l’opérateur).  Manque de législation et de régulation de la concurrence.  Pas ou peu de culture numérique  Pas de contenu Web local  Mauvaises liaisons électriques.  Qualité de service très faible En Septembre 2008, le nombre d’accès ADSL est estimé à 6000 sur tout le pays. Le coût moyen d’un abonnement Internet bas débit est de 74$ pour 10 heures de connexion alors que le revenu moyen par habitant est estimé à 18$/jour (l’un des plus haut d’afrique). Malheureusement, le réseau 3G n’est pas encore disponible au Botswana, ce qui permettrait aux massifs utilisateurs de portable de découvrir Internet. La carte suivante présente le DOI (Digital opportunity index ou indice d’opportunité de connexion) des pays d’Afrique et l’on voit que le Botswana se situe dans la moyenne. 15 http://fr.wikipedia.org/wiki/%C3%89conomie_du_Botswana 17
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 5 - L' OPPORTUNITE NUMERIQU E EN A FRIQUE (2006) 18
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. B. C O N SI D E R A T I O N S SO CI AL E S Comme nous l’avons vu précédemment, la disparité des accès à Internet s’explique par des facteurs géographiques, politiques et économiques multiples. Un autre facteur est le facteur culturel ou social. Certains sociogroupes sont plus enclins à utiliser le réseau que d’autres. Avant le milieu des années 90, Internet n’était disponible que dans certaines universités, et pour des chercheurs, informaticiens, quelques rares documentalistes et une poignée de passionnés près à dépenser beaucoup pour accéder au réseau. Ces pionniers définirent les bases du plus grand réseau mondial, sa philosophie, ses premiers codes, son étique (appelée « netiquette »). Par ailleurs, les pionniers du réseau ayant été les Américains, la majorité du contenu disponible sur Internet avant les années 2000 était en anglais, ce qui créait également une fracture, défavorisant les non-anglophones. Le réseau a très rapidement permit à tous de participer à son élaboration. Les échanges de courrier électronique, la publication de pages utilisant l’hypertexte sur le Web et le transfert de fichier, constituaient de nouveaux services dans un espace virtuel de non-droit puisque très peu réglementé. La société virtuelle d’alors était autogérée par ses citoyens, reflétant les codes moraux de la société réelle, avec en plus, une volonté d’abolir toute censure. On y vit apparaître des cyber-délinquants, des cyber-justiciers comme des créateurs de contenu et des utilisateurs exploitant simplement les ressources mises à leur disposition. Apparurent également un vocabulaire, des abréviations, et même un art cybernétique constitué d’une signalétique, d’un graphisme (propre aux interfaces informatiques de ce temps), et même d’un style littéraire cybernétique, développé dès le début des années 80 par les hackers, et autres groupes réactionnaires du réseau16. Dans tous les cas, la société virtuelle et ses acteurs, utilisaient de nouveaux modes de communication et de partage dans un environnement très libertaire puisqu’à la fois anonyme et peu surveillé. Les principes de liberté d’expression et de gratuité de l’information devinrent les piliers de la société virtuelle. Ces principes, ces modes de vie virtuels étaient viables tant qu’Internet était une société récente et peu peuplée. Lorsque le grand public commença à y accéder également, le besoin d’une réglementation des échanges et des publications se fit sentir. Chacun y transposait ses habitudes de vie réelle, respectant ou non les codes établis. Imaginons qu’un Ferry de touristes débarque sur l’île déserte de Robinson Crusoë. Le pauvre homme irait alors se réfugier dans une caverne pour ne pas avoir à supporter la cacophonie et l’indiscipline des nouveaux arrivants. C’est à peu près ce qu’il s’est produit sur Internet au milieu des années 90. Or la masse de nouveaux arrivants était telle qu’elle a réussi à changer les codes du « lieu » et à faire évoluer les pratiques. Les anciens du réseau se barricadaient en créant des groupes de discussion 16 (Buread, et al., 2002) 19
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. secrets et des réseaux d’échanges privés, rapidement réunis sous le nom d’underground et ce dans le but de perpétrer la liberté dont ils avaient disposé jusque-là. Les nouveaux arrivants ont tout de même dû apprendre le réseau, son fonctionnement, sa logique et l’utilisation des différents services pouvant les intéresser. Cette phase d’apprentissage était plus ou moins délicate en fonction de la connaissance informatique des utilisateurs et nous y reviendrons. Internet offrait alors un immense terrain d’expérimentation pour les informaticiens. Ces derniers créant des logiciels et sites Web utilisant des technologies de programmation réticulaires de plus en plus poussées. Ces nouvelles créations constituaient autant de services utilisables par les nouveaux arrivants. Les néophytes de cette époque ont changé la donne. Des services phares de l’Internet d’avant 1995, ont progressivement disparu au profit de nouveaux acteurs. C’est notamment les cas du moteur de recherche Altavista ou du logiciel de navigation Netscape, balayés respectivement par Google et Internet Explorer. En effet, les nouveaux connectés faisant partie de sociogroupes bien plus divers que les « ancêtres ». Ces sociogroupes avaient de nouvelles attentes en termes de service et fonctionnalités et ont fait triompher les entreprises innovantes répondant à leurs besoins. Par ailleurs, en 1999, lorsqu’est créé Napster, logiciel révolutionnaire dont nous parlerons dans la seconde partie de ce chapitre, le public s’étonne de voir que son inventeur, Shawn Fanning, n’a que 19 ans ! Comme nous le voyions dans l’introduction, le nombre de connectés n’a cessé de croître depuis 1995 dans le monde. Chaque fois qu’un individu se connecte à Internet pour la première fois, il apprend comment l’utiliser. Or l’utilisation du réseau, du fait de la diversité croissante des services, est en constante évolution. Ce simple fait, est tout à fait remarquable aujourd’hui. En observant les habitudes des internautes et leur culture globale du réseau, on peut quasiment deviner à quelle époque ils se sont connectés pour la première fois. Un jeune internaute d’aujourd’hui, n’a aucune raison d’utiliser un autre moteur de recherche que Google par exemple, alors qu’un scientifique de 50 ans, ayant connu les balbutiements du réseau aura d’autres habitudes de recherches, utilisant des annuaires de sites, des requêtes booléennes et des acteurs du net, plus anciens mais également fiables comme Yahoo! ou Dogpile. Cet exemple est valable pour tous les services en ligne. Ces différences d’utilisation sont quasiment aussi nombreuses qu’il y a d’utilisateurs sur le réseau. Et cela est aussi un facteur de fracture numérique puisque deux utilisateurs d’âge, de catégorie socioprofessionnelle, de sexes différents peuvent avoir des habitudes de navigation très différentes. 20
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Ces derniers facteurs sont les principaux responsables de la fracture numérique dans les pays du nord. Prenons comme exemple la France où l’observatoire des inégalités et le CREDOC17 les ont analysé : En tenant compte de tous les types de connexions possibles à Internet, on constate que 63 % de la population fréquentent aujourd’hui le Web, qu’il s’agisse de liaisons chez soi, au travail, à l’école, dans les cybercafés, dans les bibliothèques, à l’aide de son ordinateur portable grâce à une connexion Wifi, ou à l’aide de son téléphone mobile. Cela représente près de 33 millions de personnes. *…+ L’âge, le diplôme, mais aussi le niveau des revenus ou le lieu de résidence, sont à l’origine d’écarts quelquefois très sensibles :  L’âge joue un rôle de premier plan : Alors qu’on recense 98% d’internautes chez les 12-17 ans, seuls 12 % des 70 ans et plus se classent dans cette catégorie. Avant 40 ans, la probabilité d’utiliser Internet est d’au moins 20 points supérieure à la moyenne ; Au-delà de 60 ans, elle est au moins divisée par deux ! Par rapport à l’an dernier, les écarts se sont plutôt creusés : Les progressions les plus importantes sont à porter au crédit des plus jeunes des enquêtés.  Le diplôme génère des différences au moins aussi sensibles : Moins d’un quart des non- diplômés sont des internautes, alors que c’est le cas de 9 diplômés du supérieur sur 10 (89 % exactement).  La corrélation avec le montant des revenus est forte : Plus les revenus du foyer sont élevés et plus on a de chances de se connecter. On passe ainsi de 38 % d’internautes pour ceux qui perçoivent moins de 900€ par mois (taux en baisse de 4 points par rapport à l’an dernier) à 89% chez les titulaires de revenus supérieurs à 3.100€ (+ 2 points en un an). Les écarts se sont donc creusés en un an.  La profession - catégorie sociale, parce qu’elle traduit des effets d’âge, de diplôme et de revenus, aboutit à des écarts très sensibles. Alors que 24 % seulement des retraités se connectent, la quasi totalité des cadres supérieurs le font (95%).  Enfin, les écarts sont plus réduits en fonction du lieu de résidence : Habiter Paris et son agglomération ou une grande ville de province accroît légèrement la probabilité d’être un internaute (69-70%, contre 63 % en moyenne). 17 Centre de recherche pour l’étude des conditions de vies. 21
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Les fractures numériques ainsi observées à plusieurs niveaux sont très contrastées entre les pays du nord et le reste du monde. L’importance de ces fractures est capitale car elles divisent aujourd’hui le monde en 2 catégories d’individus : Les connectés qui ont un accès facilité à l’information, à la culture et à de nombreux services ; ont plus d’opportunités de trouver un travail, d’établir des échanges et ainsi de s’enrichir tant pécuniairement que culturellement. Cela améliore leur qualité de vie. De l’autre côté, les non connectés qui ne font pas partie du « village global18 » et qui sont tributaires des contraintes temporelles et spatiales du monde réel. Le monde virtuel, ne possédant pas de frontières physiques ou politiques implique également une culture numérique, partagée aussi bien par le trader de Chicago que par l’étudiante Taïwanaise. C’est une des premières cultures de notre histoire dont la diffusion pourrait être globalement adoptée. En 2004 Liff & Shepard, montrent que les hommes sont plus enclins à utiliser l’informatique et particulièrement Internet car le contenu qui s’y trouve a été conçu par des hommes dans la plupart des cas. Et en 2006 Joël Cooper met en évidence la défavorisation des femmes par rapport aux hommes, face aux nouvelles technologies. Il observe qu’elles sont plus souvent sujettes à l’anxiété et à la sensation de perte de temps face à la machine. Par ailleurs, Graff démontrait déjà en 1995 que de tous temps, les hommes avaient été plus rapidement séduits et avaient donc adopté plus promptement les technologies naissantes comme ce fut le cas pour la Télévision. Une récente étude du UCLA World Internet Project19 suggère que la « fracture numérique par genre » subsiste mais avantageant tantôt les hommes et tantôt les femmes en fonction des pays. Leur analyse montre même que plus de femmes utilisent Internet à leur bureau, ceci expliqué par leur prédominance dans les métiers du tertiaire, de support et d’administration. Depuis 2002, les femmes sont devenues des cibles marketing à part entière sur Internet et de nombreux sites, et services se sont développés pour elles. Le graphique illustré de Dave Mc Candles (Figure 8 – parts d’hommes et de femmes sur les réseaux sociaux numériques en 2009) montre même qu’elles sont majoritaires sur la plupart des réseaux sociaux numériques en 2009. Les fractures numériques doivent donc être combattues sur les plans économiques et éducationnels. En universalisant l’accès au réseau et en créant une force de travail compétente sur le réseau, la 18 Traduit de l’anglais « Global Village », ce terme a été utilisé pour la première fois en 1962 par Marshall McLuhan qui explique que le monde humain est devenu un village créé par les technologies électriques permettant à l’information de circuler instantanément d’un point à un autre du globe. La vitesse électrique (proche de la vitesse de la lumière) aurait ainsi élevé la conscience humaine. Aujourd’hui ce terme est une métaphore de l’Internet, où la distance physique entre deux utilisateurs ou serveurs de données n’a aucune importance, ce qui tend à accroître drastiquement les sphères sociales puisque chacun peut interagir avec n’importe quel autre connecté ou communauté de connectés. McLuhan explique également que ce concept créé de nouvelles structures sociologiques basées sur la culture et la conscience collective. 19 http://international.ucla.edu/research/article.asp?parentid=7488 22
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. révolution digitale que les pays du nord traversent, pourrait s’étendre aux autres zones géographiques et socio-économiques et deviendrait garante d’une nouvelle croissance économique mondiale. La révolution numérique, déterminée par l’accès au réseau et par les compétences de ses utilisateurs, doit être encouragée par les gouvernements et les entreprises privées car elle peut révolutionner l’humanité entière, de la médecine aux gouvernements et du commerce à la culture. 20 Néanmoins, une question posée sur le forum Ubiquity, proposé par l’ACM21 et les réponses qui y sont données par les contributeurs, relativisent la réflexion sur la fracture numérique (traduit de l’anglais) : Question : « Que devrait-on faire pour la fracture numérique ? » « […] A-t-on déjà montré qu’il existait une fracture numérique, plus qu’une fracture automobile, une fracture vidéo, ou une fracture de la vaccination ? Aujourd’hui, on n’a pas encore entendu parler d’action de lobbying pour envoyer à chaque personne sous le seuil de pauvreté, un téléviseur Sony ou une Cadillac neuve. Qu’est-ce qui est le plus important à votre avis, pour les populations des pays en voie de développement ou sous-développés ? Avoir de l’eau potable ou pouvoir commander des sous-vêtements Victoria’s Secret 24 heures sur 24 ? Il est évident qu’une fracture numérique est une campagne marketing plus glamour que les sujets traditionnels de l’alimentation, la médecine ou l’éducation, mais c’est certainement moins important pour les gens qui se couchent tous les soirs le ventre vide. […] » – Pete Capelli. « Il y aura une fracture numérique aussi longtemps qu’il y aura des gens pauvres et ignorants sur la planète. Un homme qui passe douze heures par jour à labourer un champ pour un salaire de misère et sa femme qui s’occupe de leurs six enfants, n’ont pas la volonté ou le temps de suivre des enchères sur Ebay, quelque soit le type d’ordinateur ou de connexion Internet que vous leur offrez. En fait, je suspecte la fracture numérique d’être tellement corrélée avec le statut socio-économique, qu’elle ne mérite pas d’en être considérée séparément, elle constitue juste une nouvelle facette de la pauvreté. » *…+- Dan Covill 20 Pr. Shahram Amiri, Stetson University, Florida – Blueprint for social-economic growth in developing nations. 21 Association for Computing Machinery 23
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Mise en relation du taux de pénétration d’Internet par continent et de l’IDH : F IGURE 6 – T AUX DE PENETRATION D ’I NTERNET DANS LE MOND E F IGURE 7 – I NDICE DE DEVELOPPEMENT HUMAIN DANS LE MO NDE 24
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 8 – PARTS D ’ HOMMES ET DE FEMMES SUR LES RESEAUX SOCIAUX NUMERIQUES E N 2009 25
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. II. « Digital Literacy » ou Compétence numérique A. T RADUCTION ET D EFINITION « Digital » en anglais signifie « numérique » en français. Le numérique, s’oppose à l’analogique. La différenciation entre « numérique » et « analogique » correspond au moyen de saisie des données, à leur stockage et au transfert des informations, le fonctionnement interne de l’appareil ou encore au type d’affichage ou de restitution des signaux. Les appareils technologiques que nous utilisons en 2009 sont le plus souvent de type numérique. Le terme numérique regroupe par métonymie tous les medias numériques allant du téléphone portable à la télévision (TNT ou DVB-T), mais aussi, des systèmes virtuels d’information et de communication qui sont une hybridation de produit logiciel, de service, de réseau et de personne, tels que les services de messagerie, d’échange de données, d’agrégation de flux, et même Internet lui-même22. Le terme « Digital Literacy » pose des problèmes de traduction en français. « Literacy » renvoie à « illiterate » que se traduit par « illettré » en français. Mais peut-on être « lettré numérique », ou cela frise-t-il l’oxymore ? « Literacy » est un terme qui renvoie à la culture du manuscrit et de l’imprimé, il n’a pas en français d’équivalent exact. On peut également le traduire par « alphabétisation », mais il recouvre uniquement le « savoir-lire » et le « savoir écrire » ; le « savoir compter » s’exprimant par un mot anglais différent : « numeracy ». (Doueihi, 2007) « Literacy » définit traditionnellement la maîtrise de la lecture et de l’écriture. Tyner 23 observe que cette notion a, de tout temps, été très connectée à la technologie de l’époque. Par conséquent cette notion ne peut être perçue comme donnée ou statique. Elle montre également que dans toute culture, l’apprentissage d’un « savoir-lire », est garant d’un accès à la culture et à l’information, ce qui a d’évidentes répercutions sociales et économiques pour la population d’un territoire géographique ou politique donné. Selon Tyner, le terme « literacy » a une nature rétrospective et conservatrice. Selon Freire, « literacy » est la capacité, la possibilité à « lire le Monde », lire un monde en constante évolution et a fortiori depuis les trente dernières années, ce qui suggère un apprentissage également, en constante évolution. Traduit de l’anglais (Hokstad, et al., 2008) 22 Certains disent qu’Internet n’est pas un média mais une solution technologique d’accès à des médias qui sont le texte – et plus exactement l’hypertexte – le son, les images et la vidéo. D’autres affirment qu’il est un média par essence et plus encore. (Lire à ce propos, l’excellent article de Daniel Bo sur le sujet : http://www.tech.youvox.fr/Internet-le-media-logiciel.html) 23 (Tyner, 1998) 26
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Mais “literacy” c’est autre chose, selon Francis Pisani sur son blog, où il propose une discussion sur le terme « Digital Literacy »24. Outre lire et écrire, cela inclut comprendre, interpréter, créer, communiquer… comme l’indique cette définition tirée de l’UNESCO et trouvée sur Wikipedia25 : “Literacy is the ability to identify, understand, interpret, create, communicate and compute, using printed and written materials associated with varying contexts. Literacy involves a continuum of learning to enable an individual to achieve his or her goals, to develop his or her knowledge and potential, and to participate fully in the wider society.” Francis Pisani propose comme traduction « Cultures et pratiques digitales ». Des lecteurs suggèrent « maîtrise numérique » ou encore « agilité numérique ». Yoram Eshet-Alkalai propose une explication au concept de Digital Literacy26 (traduit de l’anglais) : « Digital literacy » implique plus que la capacité à utiliser un logiciel ou un appareil numérique, cela inclus une grande variété de compétences cognitives, motrices, sociales et émotionnelles dont l’utilisateur a besoin pour fonctionner efficacement dans un environnement numérique. Les tâches impliquées par ce contexte sont variées et telles que « lire » des instructions sur un écran et une interface graphique, utiliser du matériel numérique pour créer du contenu faisant sens, construire une réflexion en utilisant des informations obtenues de façon non-linéaire, évaluer la qualité ou la véracité d’une information, et avoir une compréhension des « règles qui prévalent » dans le cyberespace. » YEA présente ainsi ces compétences « permettant de survivre dans l’ère numérique » :  La compétence photo-visuelle : L’art de lire des représentations graphiques de données en les interprétants à partir de codes connusLa pensée non-linéaire ou la culture de l’hypermédia : La capacité à comprendre, agréger et lier de l’information répartie.  L’appréhension de l’information ou l’art du scepticisme : Capacité à juger la véracité de l’information présentée en fonction de son contexte et de son mode de présentation.  La compétence socio-émotionnelle : C’est la plus exigeante et la plus compliquée à décrire. Avec l’évolution des ICT, de nombreux pièges et arnaques (ex : phishing…) sont apparus. Les utilisateurs possédant cette compétence, peuvent grâce à une analyse de contexte, du fond et de la forme du message et une analyse critique de celui-ci, définir si l’information a un intérêt ou pas.  La compétence de création à partir de matériel existant (ndlr : ceci n’inclut pas forcément la notion de créativité qui, si elle peut être induite, ne peut pas être considérée comme une matière enseignable). Ceci inclut la compréhension des outils permettant de collecter de 24 http://pisani.blog.lemonde.fr/2007/08/29/digital-literacy-quen-pensez-vous/ 25 http://en.wikipedia.org/wiki/Literacy - 29 août 2007 26 Yoram Eshet-Alkalai - http://www.openu.ac.il/Personal_sites/download/Digital-literacy2004-JEMH.pdf 27
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. l’information, de la modifier, de la rediffuser et cela peut également inclure la connaissance du cadre légal qui régit ces pratiques. Pour achever sa réflexion, YEA explique que cette segmentation de la compétence numérique permet aux concepteurs de mieux cibler leur approche du public en comprenant leurs besoins et leurs faiblesses. Si « literacy » est donc une culture globale du monde qui nous entoure en un moment donné, il semble évident qu’aujourd’hui, en occident, la notion de « Literacy » devrait prendre en compte la « Digital Literacy. Or, la disparité d’accès aux médias numériques sur le globe et particulièrement à Internet est très forte27. C’est pourquoi on est encore obligé de considérer la notion de « digital literacy » comme un nouveau greffon sur l’immensité de la culture globale mondiale et une évolution logique du concept de « Technology literacy 28». Richard A. Lanham écrit en 1995 dans Scientific American : « Le mot Literacy qui représente la capacité à lire et à écrire, a graduellement étendu sa signification dans l’ère numérique pour signifier la capacité à comprendre une information quelque soit son support de présentation. » (Traduit de l’anglais). Une définition qui semble accorder tout le monde est la combinaison de celles-ci :  La capacité à utiliser la technologie numérique, les outils de communication et les réseaux pour trouver, évaluer, utiliser et créer de l’information.29  La capacité à comprendre et utiliser de l’information dans plusieurs formats et provenant de sources variées, lorsqu’elle est présenté via une interface homme-machine (IHM) numérique. (Paul Gilster)  La capacité d’accomplir une tâche dans un environnement numérique. (Barbara R. Jones-Kavalier et Suzanne L. Flannigan) Cela implique une connaissance de la technologie et une compréhension de ce pour quoi elle peut être utilisée. Les populations dites « Digitally Literate » peuvent communiquer de façon plus efficace, particulièrement avec celles qui possèdent cette même connaissance de la même façon que deux personnes parlant le même langage sont plus à même de communiquer entre elles. Il s’agit en effet d’une forme de culture spécifique possédant ses codes, sa signalétique, son éthique, sa logique, ses inspirations, ses spécialistes et ses débutants. Par commodité dans la suite de cette étude, nous nommerons la notion « Digital Literacy », « Compétence Numérique », car le terme français « compétence30 », nous semble le plus approprié. 27 Alors que 73% des nord-américains sont connectés (Internet World Stats Q4 - 2008), seulement 5,4% des africains le sont. 28 Capacité à utiliser les outils technologiques récents. 29 http://www.digitalstrategy.govt.nz/Resources/Glossary-of-Key-Terms/ 30 Définition Larousse : « capacité reconnue en telle ou telle matière et qui donne le droit d’en juger » 28
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Conscient que la compétence numérique est garante de nombreux facteurs de développements humains et économiques, Microsoft a lancé un portail Web dédié à son évaluation et son apprentissage. Les cours proposés par Microsoft31 incluent les sujets suivants :  Introduction aux ordinateurs  Terminologie informatique courante  Internet et le Web  Le courrier électronique  Le traitement de texte  Le tableur  La sécurité et la confidentialité  L’éthique informatique  Des introductions à la photo et la vidéo numérique Ces connaissances pouvant être testées et évaluées, on peut définir un niveau de compétence numérique par utilisateur. En effet l’apprentissage des fonctionnalités de l’ordinateur est graduel et prends du temps. En général, un utilisateur expérimenté est avant tout un utilisateur qui a passé plusieurs centaines d’heures à découvrir les fonctionnalités de son ordinateur à travers des interfaces logicielles. Le graphique ci- contre, est éloquent. F IGURE 9 - A CQUISITION DE COMPETENCES INFORMATIQUES 31 http://www.microsoft.com/about/corporatecitizenship/citizenship/giving/programs/up/digitalliteracy/defaul t.mspx Programme complet en Annexe 29
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Nous proposons ici un tableau synthétisant les différents niveaux de compétence numérique : Niveau 1 - Niveau 2 - Initié Niveau 3 - Confirmé Niveau 4 - Concepteur Débutant - S’approprie - Effectue un nombre de - Effectue un nombre de tâche Il s’agit là d’un métier, l’outil matériel tâches limitées mais a illimité puisqu’il a compris la et donc d’une (clavier, compris le chemin logique logique des interfaces et des compétence souris…). entre elles et comment les modes de fonctionnement permettant de créer à répéter. informatiques. destination des tous les - Compare ce autres utilisateurs. qu’il voit sur -Repère des similitudes - Il comprend la logique de tout l’écran avec le dans les codes utilisés par logiciel (non spécifique à un Le concepteur doit monde réel. les interfaces (le bouton en métier). forme de disquette placée - Connaître les codes - Découvre en haut à gauche de la -Il est capable de télécharger un sémiotiques du média certains codes fenêtre sert à enregistrer le logiciel, de l’utiliser, de le pour lequel il travaille, récurrents et document sur plusieurs supprimer si besoin est, tant pour les réutiliser les mémorise logiciels différents). d’installer un périphérique que pour en créer de sans forcément informatique et de l’utiliser, de nouveaux. en comprendre - Capacité à interagir publier de l’information sur la logique (ex : intelligemment avec la Internet. - Doit pouvoir inventer Simple-clic, machine. Optimisation de ou du moins utiliser des double clic, Clic certaines actions. - Il est capable d’analyser ce qui codes composites de droit) s’affiche à l’écran et les actions codes connus. -Utilisation multimédia qu’il doit entreprendre, (pictogrammes…) - Découvre basique d’effectuer des choix conscients l’interface de de leurs conséquences. - Adapter la conception son système -Deux voies s’offrent à au type d’utilisateur d’exploitation l’utilisateur à ce stade : -En plus de l’utilisation ciblé. et le traitement traditionnelle de l’outil, La protection : L’utilisateur l’utilisateur connaît des - Doit intégrer à la de texte. se cantonne aux tâches qu’il conception, des raccourcis et plusieurs méthodes -L’utilisateur connaît et ne se risque pas à permettant d’arriver au même contraintes peut avoir deux tenter de nouvelles résultat. d’ergonomie de réactions : utilisations de son outil. l’utilisation et -L’utilisateur a conscience des d’architecture de Le rejet de L’initiative : limites de l’ordinateur. l’information tout en se l’outil Par des déductions logiques, souciant des informatique, qui témoignent de la -L’utilisateur parvient à deviner contraintes techniques, auquel cas, il compréhension de quel va être la conséquence à la fois de la plate- arrête toute l’architecture de d’une action interactive. forme de utilisation. présentation de développement mais l’information, l’utilisateur -Connaissance avancée du vocabulaire des services et outils aussi du poste client. L’envie de tente d’utiliser des fonctions mieux maîtriser inhabituelles, essayant utilisés. (Taxonomie) - Doit être capable de l’outil, qui le également de comprendre La plupart des utilisateurs comprendre la pousse au comment revenir en arrière n’évoluent pas pus loin que ce structure intrinsèque niveau suivant. après une mauvaise stade, qui permet déjà un niveau de ce qui est manipulation. Cette d’utilisation satisfaisant. On représenté à l’écran en attitude permet à considère qu’un an d’utilisation termes de code et de l’utilisateur (à force de quotidienne d’un ordinateur est logique interne. (T. beaucoup de temps et nécessaire à l’obtention d’un tel Dobson, 2005) d’expérimentations) de niveau. passer au niveau suivant. 30
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Les concepteurs professionnels d’interfaces logicielles ou Web font partie du groupe le plus avancé en termes de compétence numérique. Leur métier consiste à utiliser les codes connus par les utilisateurs pour les amener à utiliser les fonctions de leurs interfaces. Non seulement doivent-ils connaître parfaitement les codes visuels, mais également les contraintes du média sur lequel ils travaillent. Nous verrons au deuxième chapitre comment la culture numérique des concepteurs évolue également, et comment ils peuvent être amenés à faire eux-mêmes, évoluer la culture numérique globale. B. A CQUISITION La Compétence numérique se place dans la continuité de l’évolution de la culture de l’imprimé en reprenant beaucoup de ses codes. Les lettres à empattements qui s’affichent sur nos écrans, amenées là par du code binaire, sont les témoins de la culture typographique passée et elles sont indémodables. La CN aussi présente un aspect plus démocratique que la culture de l’imprimé puisque, si tout le monde ne peut pas écrire un livre, tout le monde peut aujourd’hui publier ce qu’il souhaite sur le réseau. Mais la CN, ce n’est pas que la culture d’Internet. La CN regroupe un grand nombre de compétences plus ou moins imbriquées, que nous synthétiserons dans un schéma à la fin du chapitre. Pour mieux comprendre comment la compétence numérique globale a été diffusée et adoptée, il convient d’expliquer ses trois principales phases d’expansion et les symboles qui ont été créés pendant ces phases. Nous verrons dans la partie suivante que ces symboles constituent les bases de la compétence numérique PHASE 1 L’ A P P A R I T I O N D U « P E R SO N A L C O M P U T I N G » A L A F I N D E S A N N E E S 70 Les machines et les nouveaux codes Avant les années 70, un ordinateur était une machine inaccessible au grand public tant de par sa taille et son prix que par son utilisation qui requérait des connaissances pointues en programmation. Sans entrer dans un historique exhaustif des évolutions informatiques depuis 40 ans, le premier événement notable qui toucha réellement le grand public fut l’apparition à la fin des années 70 de l’informatique personnelle rendue possible grâce à des machines de taille réduite, elles-mêmes fabriquées à partir des microprocesseurs, technologie alors jeune. 31
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 10- W ANG 1200 - P REMIER TRAITEMENT DE TEXTE F IGURE 11 - 1977 - A PPLE II - P ROCESSEUR M OTOROLA PERSONNEL (30 K $ EN 1978) 6502@1MH Z - J USQU ' A 16 COULEURS @ 40 X 48 PX F IGURE 12 - 1981 - T HE ORIGINAL IBM PC (M ODEL 5150) F IGURE 13 - 1994 - B ROTHER WP-1400 – T RAITEMENT DE TEXTE – P ROCESSEUR I NTEL 8088 @ 4.77MH Z – R AM 16K O – « MODERNE » 2 LECTEURS 5¼ 160K O Cette révolution fut portée par le traitement de texte remplaçant la machine à écrire. Ces machines hybrides composées d’un écran, d’un clavier, d’une imprimante intégrée et parfois d’un lecteur de disquettes, ouvraient la voie à une nouvelle ère de l’écriture, moins laborieuse et plus efficace, et ce grâce entre autres aux fonctions d’édition et de révision des documents. Parallèlement IBM inventait le concept d’ordinateur personnel (PC), composé d’un écran, d’une unité centrale et d’un clavier. Les lecteurs étaient nommés par des lettres A:, B:, et le disque dur principal de l’ordinateur, C:. Ce nommage est devenu une convention aujourd’hui, même si les lecteurs de disquettes sont devenus obsolètes, la mémoire principale d’un ordinateur est souvent appelé C:. Si les ordinateurs récents, n’ont plus grand-chose en commun avec ces machines, ils sont globalement construits sur la même architecture matérielle. Même l’emplacement des touches sur le clavier n’a pas été révolutionné depuis cette époque. Le système d’exploitation de cette machine, le MS-DOS n’a été réellement abandonné qu’à partir de 1995 soit 15 ans plus tard. Si des surcouches applicatives graphiques (également appelées interfaces graphiques ou GUI), ont vu le jour entre 32
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. temps, les utilisateurs ont été longtemps habitués à une interface textuelle monochrome ne permettant que la saisie des commandes au clavier. De son côté Apple orientait la perception de l’informatique par le grand public vers un futur plus beau et non vers une déshumanisation de la société. Cette vision, leitmotiv de la société dès 198432 avec la sortie du Macintosh, est encore aujourd’hui, le fer-de-lance de la compagnie qui est devenue l’une des mieux perçue du secteur. Le Logo de la pomme s’il a évolué, est aujourd’hui, une image d’Epinal. La firme eut la bonne idée d’en faire une touche du clavier, devenant, en plus d’un logo institutionnel, un code visuel numérique. Associée à une autre touche du clavier, la frappe de la touche pomme servait de raccourci pour accéder aux fonctions de l’ordinateur. La pomme symbolisa alors, le raccourci, la facilité et cela contribua à améliorer l’image d’Apple en tant que fabricant d’ordinateurs simple à utiliser. Le logo d’Atari, s’il ne constituait pas un raccourci clavier, a tellement marqué les joueurs sur bornes d’arcade, qu’il est également devenu un symbole générationnel dont s’inspire par exemple, la jeune marque de street-wear WESC. Intel, fabricant de micro-processeurs, a également adopté une dénomination plus humaine pour ses produits en 1995, passant du 486 au Pentium. Le second nom reprenait la racine grecque penta qui signifie 5 (évolution logique du 486, après les 386, 286 et autres 8086) et lui adjoignait le suffixe –ium, souvent retrouvé dans les éléments chimiques nécessaires au développement de la vie (magnésium, potassium…). Cette appellation rendit l’informatique bien plus vendable, plus marketable, avec un visage plus vivant, plus philanthrope, n’effrayant plus les novices qui auparavant, restaient désemparées face aux noms de codes des composants. Ces machines d’un autre temps sont aujourd’hui des objets de collection pour la plupart, elles sont les madeleines de Proust d’un temps révolu. Les utilisateurs de ces machines en sont parfois nostalgiques. La présentation de l’information avec des caractères « bruts » non lissés, en monochrome, est même devenue un traitement graphique « à la mode ». De nombreux créateurs les utilisent aujourd’hui, tant dans la mode, que dans l’art urbain. Il s’agit d’ailleurs d’un lien très intéressant, puisqu’une inspiration venue du monde numérique et de ces anciens codes, a influence le monde réel et les pratiques créatives sur des F IGURE 14- T IME MAGAZINE - J ANVIER 1983 médias physiques. En effet, l’affichage des informations sur l’écran des années 80 ainsi que les très jeunes capacités des 32 La mythique Publicité Apple diffusé lors du SuperBowl de 1984 : http://www.dailymotion.com/video/x1fnal_apple-1984_ads Apple veut casser l’image de l’informatique qui exploite l’humain, véhiculée dans le livre culte de Georges Orwell, 1984 33
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. circuits graphiques ont permis à l’homme de se familiariser avec le pixel. Plus petit point de couleur affichable. Or ce point, sur les écrans de l’époque était jusqu’à 9 fois plus gros que sur nos écrans actuels. Jeux vidéos et disques compacts Les applications graphiques et les jeux de l’époque, très imparfaits puisque très grossiers en raison de la taille d’un pixel, ont tout de même marqué plus qu’une génération qui les acceptait comme un nouveau standard d’affichage des images sur une interface télématique. En acceptant cette qualité graphique propre à l’informatique, le joueur se concentrait plus vivement sur la narration et le « Gameplay » (le plaisir dégagé par le jeu ou l’expérience utilisateur). C’est ainsi que des jeux graphiquement très pauvres sont devenus cultes comme Pong, Arkanoid ou Space Invaders. Les jeux vidéo constituent un facteur majeur de l’évolution de la compétence numérique, habituant les utilisateurs non seulement à des codes graphiques mais également à des actions cognitives et interactives. Les jeux vidéo ont cette particularité d’avoir été mis à disposition du grand public dans les bars et les salles de jeu, touchant un public alors bien plus large que les utilisateurs d’ordinateurs dès le milieu des années 70. F IGURE 15 – A TARI P ONG F IGURE 16 – 1976 – A TARI B REAKOUT – F IGURE 17 - S PACE I NVADERS ( BORNE D ’ ARCADE EN 1973 - LE PREMIER « CASSE - BRIQUES » ( BORNE D ’ ARCADE EN 1978 - VERSION FAMILIALE EN 1975) VERSION FAMILIALE EN 1985) F IGURE 18 - C OMPARAISON ENTRE L ’ ILLUSTRATION DE L ’ EMBALLAGE DU JEU P RINCE OF P ERSIA SUR A MSTRAD ET LE GRAPHISME REEL DU JEU . 34
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 19 - C OMPARAISON SIMILAIRE POUR LE JEU B ARBARIAN SORTI EN 1986. O N NOTE EGALEMENT QUE LE MARKETING DU JEU VIDEO EST ORIENTE VERS LE PUBLIC MASCULI N , UTILISANT LES CODES DES FILMS D ’ ACTION TEL QUE C ONAN LE BARBARE ET LES BANDES DESSINEES DE J EAN -C LAUDE F OREST . Cet accès globalisé aux jeux vidéo permit à des générations entières d’enfants et de jeunes adultes, d’apprendre leurs codes visuels, leur philosophie et leur vocabulaire, très souvent anglais. C’est ainsi qu’ont été gravé dans la tête de millions d’adolescents, de 1975 à nos jours, les mots suivants « Game Over », « Life Up », « Insert Coin » ou encore « You lose ! » et bien d’autres. Pour souligner à quel point les jeux vidéo touchaient, et touchent encore un large public on citera l’anecdote de la borne d’arcade « Space Invaders », qui provoqua une pénurie de pièces de monnaie au Japon forçant le gouvernement à quadrupler la production. Les concepteurs de jeux de cette époque, rivalisaient d’adresse pour créer des éléments de jeux porteurs de sens, comme des décorations, des particularités graphiques, avec des contraintes d’affichages drastiques. Il est d’ailleurs amusant de comparer l’emballage d’un jeu vidéo de l’époque et l’illustration qui y figure, avec les réelles qualités graphiques du jeu. L’illustration étant, elle, imprimée à l’aide d’une technologie mature, sur un support papier traditionnel, est d’une qualité graphique incomparable avec le graphisme du jeu. D’une manière générale, le nouveau visage de l’information, du texte tapé sur un clavier, des visuels générés par du code informatique, imprégna la société occidentale et active des années 80 a un point que l’on n’imaginait pas, devenant l’emblème de cette décennie. 35
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 20 - T- SHIRT V INTAGE A TARI - 2003 F IGURE 22 - C OUVERTURES DE LIVRES AU MOTIF P IXEL A RT - 2005 F IGURE 21 - L OGO WESC 1999 33 F IGURE 24 - S AC A MAIN REALISE A PARTIR DE TOUCHES DE F IGURE 23 - L E CELEBRE PROJET S PACE I NVADERS , LES 34 CLAVIER - 2005. PERSONNAGES DU JEU V IDEO MYTHIQUE SONT REPRODUITS SUR LES MURS DU MOND E ENTIER EN MOSAÏQUE TRADITIONNELLE . 33 http://www.space-invaders.com/som.html 34 http://www.joaosabino.pt/ 36
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C’est en voyant ces objets que l’on comprend comment le monde numérique a influencé l’esthétique entière d’une époque pour devenir une référence artistique, un style à part entière. La reconnaissance des symboles présents sur ces objets, témoigne d’une culture du monde numérique des années 80, et fait ainsi partie de la notion de Compétence numérique. Pendant cette phase d’apparition de l’informatique, en 1985, Philips dévoile un nouveau support audio, le Compact Disc. Celui-ci enregistré numériquement et non plus analogiquement comme les Cassettes Compactes (ou cassettes audio), vient les supplanter. La qualité d’enregistrement et de restitution du son est meilleure et les contraintes mécaniques du support comme le changement de face (déjà connu depuis le disque vinyle) changent. Si le disque n’a plus besoin d’être retourné ou rembobiné puisque l’accès aux chansons est séquentiel, il possède d’autres contraintes comme sa sensibilité aux rayures. Les lecteurs ne supportent pas les soubresauts pendant la lecture ce qui en fait un média fixe et non mobile comme la cassette était devenue grâce au baladeur. Ce problème sera résolu dans les années 90 par les systèmes antichocs. Contrairement à la cassette, les Compact disc ne pouvaient être enregistrés par les utilisateurs. Les lecteurs de disques compacts utilisaient également de nouveaux codes visuels. En reprenant les codes issus des platines cassettes et des baladeurs, ils évoluent légèrement pour s’adapter aux nouvelles fonctionnalités du média. L’utilisation de ces disques numériques restera réservée au cadre d’écoute de musique jusqu’au début des années 90 où ils devinrent le support stockage opto-numérique que l’on a ensuite nommé CD-Rom. Ce dernier deviendra l’un des médias matériels les plus utilisés dans la seconde moitié des années 90. D’abord utilisé comme support de présentation d’information, et support de stockage pour les jeux et applications logiciels, leur consommation explosa littéralement lorsqu’en 1999, les graveurs de CD permettant de les copier, de s’en servir comme support de sauvegarde et de réaliser ses compilations audio, verront leurs prix chuter et seront livrés en standard sur les nouveaux ordinateurs. Il mutera en DVD puis blu-ray Disc au cours des années 2000 pour devenir un support dédié principalement à la vidéo et à ses nouvelles exigences en termes de qualité d’image et de son mais aussi aux jeux vidéo sur les consoles de salon de dernière génération. D’une certaine façon, l’histoire de ces médias audio vidéo fait aussi partie de la culture numérique. 37
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. 35 F IGURE 25 - C OMPARAISON DES CONTR OLES DES LECTEURS CA SSETTES ET D ISQUES COMPACT - I L EST INTERESSANT DE CONSTATER QUE CES SYMBOLES VIEUX DE 50 ANS , SONT TOUJOURS UTILISES POUR CONTROLER LA LECTURE DE MEDIAS AUDIO ET VIDEOS , TANT DANS LE MONDE REEL , SUR DES APPAREILS PHYSIQUES , QUE SUR DES INTERFAC ES INFORMATIQUES ET / OU W EB . 35 Ces pictogrammes ont vu le jour avec l’apparition de la casette audio au début des années 60. Leur besoin s’est fait sentir lorsque les appareils de lectures et d’enregistrement se sont exportés et qu’ils ne pouvaient pas être libellés en anglais du fait de la, seulement moyenne, diffusion de la langue. Ils ne pouvaient également pas être libellés dans toutes les langues ni dans la langue du pays importateur ce qui aurait coûté trop cher à l’industrialisation. Le bureau des standards européens, ainsi qu’un consortium de constructeurs se mirent d’accord sur 200 pictogrammes, dont la forme générale devait rester reconnaissable. Ces symboles sont aujourd’hui recensés par l’international Electrotechnical Commission, dans la base IEC 60417. 38
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. PHASE 2 L’ A V E N E M E N T D E L ’ H Y P E R M E D I A E T D E L A C O M MU N I C A T I O N D A N S L E S A N N E E S 90 L’hypermédia En 1945, Vannevar Bush écrit dans un article visionnaire du Atlantic Monthly, que l’un des plus pressants combats de l’humanité était de mettre en œuvre des solutions pour naviguer et distribuer les connaissances et l’information en générale. Quinze ans plus tard, Douglas Engelbart propose une solution pour relier entre eux des paquets d’information stockées dans de la mémoire informatique, grâce à des concepts associatifs. Le rapport qu’il a écrit constitue la première définition de l’hypermédia dans le contexte de l’informatique moderne. Or le concept de lier des informations connexes remonte au XVIIe siècle avec le dessin de Nicolas Grolier de Servière, d’une « roue de lecture », une invention permettant de lire plusieurs textes sur une large roue, sans quitter sa place. Le terme d’hypertexte apparut dans les années 60 avec le philosophe Theodore Nelson, qui s’interrogeait sur les utilisations de l’ordinateur pour le travail d’écriture. Ce n’est qu’en 1987 qu’Apple introduit le logiciel Hypercard™, qui permettait aux utilisateurs de machines, même -isolées d’un réseau, de créer des cartes », des nœuds pouvant contenir du texte et des images. On pouvait alors lier les cartes ensemble de façon séquentielle ou associative pour créer un « réseau d’informations textuelles et F IGURE 26- L A ROUE DE LECTURE DE N ICOLAS G ROLLIER DE visuelles ». S ERVIERE L’HTML36 sera inventé deux ans plus tard pour pouvoir écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Il est utilisé comme standard sur le « Web » annoncé par Tim Berners-Lee en 1991. Les premiers éléments du langage HTML comprennent le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La navigation se fait grâce à un ensemble de 36 Hypertext markup language 39
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. liens hypertextes permettant de passer d'un document textuel ou visuel à un autre au moyen d'un simple clic de souris. Les liens sont traditionnellement colorés en bleu (#0000ff) et soulignés. C’est en 1993 qu’est introduite la balise IMG dans l’HTML permettant d’incorporer des images dans les pages Web (GIF et XBM seulement au début) et enfin les balises de formulaire, rendant la page Web interactive et autorisant des applications de commerce électronique. Le concept même d’hyper-textualité est très novateur car il étend notre notion et notre perception du texte lui-même. La compréhension de celui-ci est différente car elle requière un travail cognitif nouveau. La narration n’est plus forcément linéaire et l’on constate que tout le monde n’est pas à l’aise avec cette hiérarchie d’information dans laquelle on se perd aisément. En l’absence de plan du réseau d’information, l’utilisateur devra lui-même faire un chemin cognitif entre les informations auxquelles il accède. À ce propos, J.P Balpe, professeur à L’Université de Paris 8, écrit ceci dans son article « Technologies numériques et construction du savoir » de 1997: « Si la lecture d'un document sur un cédérom (ndr : et sur Internet) peut différer de la lecture du même document sur le médium livre, ce n'est pas parce que le médium est différent, mais parce que les possibilités offertes à la lecture ne sont pas les mêmes. Dans la lecture numérique d'un document par la nature même de son affichage qui n'est que la réalisation momentanément visible et relativement instable d'un empilement de codages, sont inscrites, liées à la dynamicité, des possibilités nouvelles qui ne demandent qu'à être exploitées : impression, extraction de fragments, constitutions temporaires de sous-ensembles, interactions diverses, constructions de parcours analogiques, lectures hypertextuelles. La différence fondamentale entre une encyclopédie électronique et une encyclopédie imprimée, comme entre une leçon de mathématique sur un livre et la même sur un cédérom est là. Acquérir des informations sur un médium numérique conduit naturellement l'utilisateur à les construire. La démarche n'est plus une démarche de mémorisation et de consommation, mais une démarche de réflexion et de construction. » L a communication en ligne Parallèlement à l’introduction de l’hypermédia dans le monde de l’informatique personnel et de réseau, se fait sentir le besoin de communiquer entres utilisateurs ce qui est rendu possible dès la fin des années 70 par le courrier électronique. Son évolution logique l’a mené à 5 modes de communication sur le réseau définis par Baron en 1998 et que j’ai jugé bon de compléter avec les dernières évolutions technologiques apparues depuis.  Dialogue 1-à-1 : c’est le cas de l’e-mail et du SMS  Dialogue 1-à-1 en temps réel : Si quelques tentatives onéreuses et peu fiables avaient été osées par Commodore, c’est dans la seconde moitié des années 90 que des solutions 40
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. baptisées ICQ, MSN et AOL IM firent une apparition fracassante. Le « Chat » (« conversation » en anglais) a très vite conquit une population d’adolescents qui y voyait une raison suffisante de s’abonner à Internet. Dans le monde du mobile, la réduction du prix des SMS et leur utilisation massive par les publics adolescents du monde entier, tendent à orienter leur interface d’émission-réception vers une présentation de type messagerie instantanée et non plus sous forme de liste comme c’était le cas lors de l’apparition des premiers appareils mobiles. Notons que la marque BlackBerry™ propose aujourd’hui un service de messagerie gratuite entre tous les utilisateurs de ses terminaux mobiles, remplaçant dans une certaine mesure le SMS.  Dialogue 1-à-plusieurs : Cas de l’e-mail a plusieurs destinataires, et des newsletters. Egalement un mode de communication mis en œuvre sur les forums de discussion, et les newsgroups.  Dialogue 1-à-plusieurs en temps réel : Certains clients de messagerie instantanée permettent des discussions sous forme de salons de discussion privées, où plusieurs utilisateurs discutent en même temps. C’est également le mode de fonctionnement de l’IRC (Internet relay chat).  Publication sur Internet : Il s’agit de la méthode traditionnelle de publication d’un document sur Internet qui consiste à placer un document numérique sous forme de fichier, sur un serveur Web ; ce document a ainsi une adresse sur le réseau, adresse que l’on peut ensuite communiquer pour donner accès au document sur le réseau. Ce type de communication n’est pas un dialogue car il s’agit souvent de documents finis, mis à disposition d’un public.  Publication collaborative : Cette notion est plus récente sur le réseau, elle a été introduite à la fin des années 90, quand les journalistes mettaient en place des systèmes d’automatisation de la correction, du suivi et de la révision de documents. Les nouveaux langages de programmation orientés Web (PHP/Java/Asp…) ont rendu possible le travail collaboratif sur des documents à travers des interfaces Web. En dehors du cadre de travail des journalistes, les années 2000 ont vu l’apparition des Wikis, ces sites communautaires où chacun pouvait contribuer à une connaissance globale sur un sujet. Le plus connu de ces sites étant évidemment l’encyclopédie Wikipedia, devenu l’un des sites les plus visités au monde et permettant à chacun de publier un article sur un sujet qu’il maitrise, et d’amender l’article d’autres contributeurs.  Publication en temps réel : Cette notion, également popularisé après les années 2000 à prit tout son sens avec les blogs, ces sites personnels dynamiques, où un utilisateur publie un contenu, via une interface Web d’administration et ce contenu est immédiatement présent sur le site, donnant la possibilité aux visiteurs du site de commenter, et partager le contenu de l’article publié. Egalement popularisés après les années 2000 grâce à l’avènement de 41
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. l’XML37, les flux RSS38 et Atom qui permettent de publier automatiquement le nouveau contenu d’un site dans un fichier XML à la demande. Un lecteur de flux pouvant s’abonner à ce fichier (c'est-à-dire, demander son actualisation à intervalles réguliers) pour détecter de nouvelles publications et les afficher. Google Reader39, aujourd’hui, l’un des grands acteurs de ce secteur, permet de s’abonner à un nombre de flux illimités, actualisés en temps réel et d’en repartager des morceaux choisis ou la totalité via un second flux personnalisé. Très importante également, la technologie Ajax40 qui permet d’afficher des informations dans une page Web de façon dynamique, c'est-à-dire sans que la page se recharge, a permis de fluidifier la publication d’information en ligne. Nous distinguons les applications temps-réel de celles qui ne le sont pas. En ce qui concerne le mail, quand nous ne le classons pas dans les applications temps réel, ce n’est pas à cause de sa rapidité de transmission qui est aujourd’hui quasiment instantanée (en fonction de la taille des pièces jointes), mais à cause de son mode de consultation qui ne force pas l’utilisateur à rester à son poste informatique. Cette utilisation est entrée dans les mœurs, et un utilisateur qui envoie un email n’attend pas de réponse instantanée, auquel cas il passerait un coup de téléphone. Cela dit, l’ergonomie des clients mails et la rapidité du réseau permettent aujourd’hui d’utiliser sa boîte mail, et ceux particulièrement dans le cadre professionnel, comme un système de messagerie instantanée. L’utilisation du mail en temps réel, devrait se populariser dans un futur proche avec l’arrivée imminente de Google Wave™, service de messagerie mélangeant les fonctions de mail, de messagerie instantanée et de partage de documents. Chacun de ces médiums de communication a amené ses utilisateurs à développer des codes sémiologiques distincts. Licklider & Vezza en 1978, mettent en évidence que les habitudes de correspondances manuscrites et électroniques n’obéissent pas aux mêmes règles. Dans le cas des correspondances électroniques, on constate que l’orthographe, et la typographie sont laissées de coté au profit de la concision, et ce même quand il s’agit de courriers destinés à des supérieurs hiérarchiques ou à des inconnus. Ces négligences ont été attribuées à la rapidité de la transmission de l’information qui poussait les utilisateurs à l’utiliser comme un téléphone. À ce propos, on pourra lire l’article d’Olga Volckaert-Legrier de l’Université de Poitiers-CNRS qui se demande si le courrier électronique constitue un nouveau registre de la langue française ? Le SMS a également développé ses propres conventions d’écriture, contraignant les utilisateurs à ne pas dépasser les 140 caractères. Les adolescents, fervents consommateurs de ce mode de communication ont utilisés des abréviations alphanumériques couplées à des raccourcis phonétiques pour créer le langage SMS, propre à chaque langue mais dont on retrouve les traces dans chaque 37 Cross-markup-language 38 Really Simple Syndication 39 http://reader.google.com 40 Asynchronous Javascript with XML 42
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. pays du monde. Aujourd’hui, si le prix des SMS a chuté, les habitudes sont restées les mêmes et l’utilisation de ce langage permet à l’utilisateur d’exploiter pleinement l’instantanéité de la communication qu’il effectue. Le Chat ou dialogue 1-à-1 en temps réel, service massivement utilisé sur le réseau a également connu des évolutions majeures en termes d’utilisation. S’il permet à des connaissances de discuter en ligne, il est également très utilisé pour la rencontre en ligne. Lors d’une conversation de ce type avec un interlocuteur inconnu, il convient de « faire la discussion ». Et pour ce faire, des raccourcis ont été créés comme par exemple le Smiley41 composé de 3 caractères « :-) ». Beaucoup plus important qu’il n’y parait, ce dernier contribue à donner un ton à la conversation qui en est intrinsèquement dénuée puisque via écrans et claviers interposés. Mais également des abréviations comme « LOL » (Laughing out Loud) ou encore « ASL ? » (Age ? Sex ? Location ?). Très rapidement, les utilisateurs comprennent que ce mode de communication leur impose une certaine façon de communiquer, suffisamment explicite pour que le récepteur du message en comprenne le sens et pour que la discussion ne soit pas interrompue par de longs moments d’attente entre des messages qui prendraient trop de temps à taper. En dehors de la forme, le fond du message est également différent dans le cadre d’une communication avec un interlocuteur inconnu, car, si d’une part on peut y laisser transparaître, seulement ce que l’on choisi, on peut également être berné par l’interlocuteur qui peut aisément se faire passer pour quelqu’un qu’il n’est pas. Après que de médiatiques affaires de mœurs42 eurent lieu suite à des usurpations d’identité de la sorte, les internautes utilisant les services de messageries instantanées avec des interlocuteurs inconnus devinrent plus prudents dans les informations qu’ils étaient susceptibles de transmettre à leur interlocuteur. Il est étonnant de constater que les pratiques d’écritures pour le dialogue sur le réseau, ont influencé les pratiques d’écriture traditionnelles et ce particulièrement chez les jeunes qui apprennent aujourd’hui, à se servir d’un ordinateur pendant la période où ils apprenaient jadis à lire et écrire. C’est ainsi que l’arobase43 « @ » par exemple, symbolisant une unité de mesure dans la péninsule ibérique (et donc issu de la culture imprimée), a été popularisé par les adresses email qu’il caractérise en partie, séparant le nom d’utilisateur du nom de son serveur de courrier électronique. Les jeunes l’utilisent ainsi fréquemment, plus seulement dans les adresses email mais dans tout corps de texte, numérique, manuscrit ou imprimé, ou il signifie le plus souvent la traduction du mot anglais « at » (« chez » ou « à » en français). Aujourd’hui, le réseau social Twitter l’utilise pour indiquer le destinataire d’un message, son signifié anglais n’y est plus « at » mais « to ». 41 A ce propos on pourra lire son histoire sur http://fr.wikipedia.org/wiki/Smiley et découvrir qu’il vient de la culture imprimé, inventé en 1967 et popularisé dans les années 70 sous la forme de d’autocollants dont les américains raffolaient. 42 The Foley Scandal : http://www.washingtonpost.com/wp- dyn/content/article/2006/09/30/AR2006093001028.html 43 http://fr.wikipedia.org/wiki/Arrobase 43
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. À propos de la confidentialité sur le réseau, on note également que dès les premières heures du réseau, les utilisateurs ont choisi des pseudonymes pour communiquer, préservant ainsi leur personne réelle. En effet, Internet permet des dialogues où chacun peut rester anonyme et cela induit forcément une sorte de méfiance car on ignore souvent qui l’on a « en face de soi ». Aujourd’hui, c’est encore le cas sur la plupart des forums et sur l’IRC44. On note que c’est sur les médiums de communication les plus anciens que la pratique du pseudonyme subsiste. L’avènement des réseaux sociaux depuis deux ans, tend à modifier la tradition du pseudonyme pour afficher non plus une identité numérique masquée, mais son identité réelle, et ainsi ses noms, prénoms et de nombreuses autres informations. Si tous les réseaux sociaux permettent aujourd’hui d’interdire ou d’autoriser l’accès aux informations publiées, de nombreux utilisateurs débutants, commettent des erreurs dans la configuration de ces permissions et se mettent en danger en publiant des informations sensibles sans les protéger. Cela arrive surtout aux utilisateurs les plus novices d’Internet, qui ne maîtrisent pas ou ne perçoivent pas immédiatement les possibilités offertes à ce niveau ou ne perçoivent pas l’ampleur. À l’inverse, certains utilisateurs, même débutants, font preuve de zèle pour protéger au maximum leurs données personnelles frôlant parfois la paranoïa. Il n’y a pas de juste milieu à cette pratique, chacun étant libre de publier ce qu’il souhaite sur le réseau, assouvissant un désir d’exhibitionnisme, mais chacun doit en assumer les conséquences. Ces modes de communication sont également déterminées par leur synchronicité45. Contrairement au monde réel ou en général les différents participants d’une discussion, même téléphonique, se répondent tour à tour ; Lors de conversations numériques, les participants ne sont pas obligés d’attendre que les autres aient répondus pour envoyer d’autres messages. Cela est dû au fait que le temps de lecture d’un message est plus court que le temps nécessaire pour le taper. C. et A. Luke proposent en 2001, d’introduire dans les enseignements, un courant visant à former les élèves aux différentes formes de dialogues non seulement du monde réel mais également celles du monde virtuel et de leur instantanéité ou pas. PHASE 3 L’ E C O N O M I E D ’ I N F O R M A T I O N R E P A R T I E D E S A N N E E S 2000 Grace aux nombreuses améliorations apportées aux langages de programmation Web dans les années 90 et au début des années 2000, le potentiel de l’hypermédia a pu être poussé à son maximum. Une large population s’étant familiarisé avec son mode de fonctionnement et les jeunes le comprenant vite, il permit à Internet d’évoluer pour devenir le réseau d’information gigantesque que l’on connaît, comportant aujourd’hui près de 170 millions de sites46. Depuis les années 2000, de nombreuses micro-révolutions ont eu lieu dans le monde virtuel et elles ont eu des répercutions sur 44 Internet Relay Chat - http://en.wikipedia.org/wiki/IRC 45 La synchronicité est l'occurrence simultanée d'au moins deux événements qui ne présentent pas de lien de causalité, mais dont l'association prend un sens pour la personne qui les perçoit. 46 er Estimation Google au 1 janvier 2009 44
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. le monde réel. L’information répartie qualifie la possibilité d’accéder ou de diffuser des flux d’informations provenant de plusieurs sources ou serveurs. L’échange de fichiers Si dans les années 80 et 90 étaient nés des BBS47, les newsgroups et autres File Transfer protocole, c’est au début des années 2000 qu’eut lieu la révolution du Peer-to-peer (littéralement « personne-à- personne »), permettant d’échanger des fichiers sur la toile via des clients lourds. Ces logiciels furent rapidement adoptés par une population jeune et connectée fervente de médias audio et vidéo. Ils devinrent des plateformes d’échanges massifs de morceaux de musique et de films numérisés, inaugurant ainsi plus que jamais, l’ère du Gratuit sur le réseau. Les logiciels de peer-to-peer, rapidement perçus comme un fléau par les maisons de disques, et les professionnels des médias, furent mis à mal à de nombreuses reprises, essuyant procès et attaques variés, mais subsistent encore. Les utilisateurs téléchargeant ainsi gratuitement, musique et films, changèrent la perception des œuvres, les dévaluant et les collectionnant comme jamais auparavant. Ceci eut plusieurs effets notoires :  Les plus grands disquaires ont commencé à proposer leur catalogue en téléchargement numérique légal et payant.  Les plus petits disquaires n’eurent d’autre choix que de fermer leurs portes.  Si la vente de disques chutait, la fréquentation des concerts explosait, chaque internaute susceptible de connaître un nombre exponentiel d’artistes.  De nombreuses marques se lancèrent dans la commercialisation de baladeurs numériques capables de lire les formats audio et vidéo disponible sur Internet. Le marché explosa suite au lancement de l’iPod® d’Apple en 2001 qui démocratisa leur utilisation.  Les besoins en stockage mémoire augmentèrent tant chez les particuliers ainsi que dans les centres hébergeant des serveurs de données, faisant chuter le prix de la mémoire F IGURE 27 –1999 - I NTERFACE DE NAPSTER , PREMIER LOGICIEL DE P EER -T O -P EER , UNE SIMPLE RECHERCHE DE informatique. TITRE D ’ ARTISTE OU DE MORCEA U , RENVOYAIT A DES  Le public le plus consommateur de Disques CENTAINES DE RESULTATS TELECHARGEABLES D ’ UN compacts ne fut pas touché immédiatement par DOUBLE - CLIQUE . 47 Bulletin-Board System : serveur télématique qui offre des services de messagerie et de transfert de fichiers. Son accès était gratuit mais impliquait l’usage d’un modem, l’utilisateur payant ainsi son temps de connexion à son opérateur téléphonique. 45
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. l’utilisation des services et logiciels de peer-to-peer, permettant au marché de ne pas s’effondrer trop rapidement.  Si les CD et cassettes garantissaient une conservation des informations audio, la musique numérique est par nature, plus volatile, plus aisément altérée, puisque recopiée de nombreuses fois, sujettes à la mécanique et aux interactions électromagnétiques complexes des disques durs.  Les utilisateurs découvrant de plus en plus d’artistes grâce au peer-to-peer, deviennent acheteurs potentiels de médias physiques ou numériques bien plus élevé qu’auparavant.  Si la numérisation de la musique permettait une écoute correcte au format compressé MP3, les mélomanes ne furent pas séduits par les faiblesses du format qui dénature la bande passante du morceau, étant basé sur un algorithme de compression dynamique du spectre audio.  De la même façon, les cinéphiles équipés ne purent qu’être déçus par la qualité des enregistrements vidéo numérisés et compressés alors que se développaient le DVD puis le Blu-ray Disc. F IGURE 28- C LIENT FTP – S I LE LOGICIEL PRESENT E ICI Ce dernier paramètre a évolué avec les dernières LES FICHIER DU CLIENT ET CEUX DU SERVEUR EN FACE A FACE , PERMETTANT A L ’ UTILISATEUR CONNECTE DE évolutions technologiques, permettant à la vidéo de TRANSFERER DES FICHIERS DE L ’ UN A L ’ AUTRE , AU DEBUT conserver une qualité optimale au détriment de DES ANNEES 90, CES TRANSFERTS SE FA ISAIENT EN l’espace mémoire occupé. Soucis mineur étant donné TAPANT DES COMMA NDES AU CLAVIER . le prix dérisoire du stockage informatique aujourd’hui. Combattu par les états eux-mêmes, le téléchargement illégal est entré dans les mœurs de beaucoup de jeunes (et moins jeunes) internautes. Cet état de fait a été un catalyseur pour les technologies de la première décennie du XXIe siècle, les plaçant sous le signe du partage. F IGURE 29 - HTTP :// DEADLINE . AEGIS - CORP . ORG / MAIN . PHP D EADLINE PROPOSE UNE INTERFACE W EB SIMULANT UN BBS, DISPARUS DEPUIS PRES DE 20 ANS . 46
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Les blogs Le blogging, ou la tendance à pousser les internautes à raconter leur vie et leurs passions sur un site éditorial personnel. Alors que chaque internaute peut créer un site personnel et gratuit depuis 1996, les plateformes de blog simplifient largement le processus en permettant même aux néophytes de publier ce qu’ils souhaitent dans un gabarit de blog personnalisable (dans une certaine mesure). Le phénomène prend une amplitude considérable jusqu’en 2008 où se développent non seulement les blogs de particuliers, mais également les blogs d’entreprise, les rapprochant de leurs clients et les blogs thématiques écrits par des experts. Le rapport établi par Technorati48 en 2008 est éloquent : +37 millions de blogs tracés en mai 2006 +70 millions de blogs tracés en mars 2007 +133 millions de blogs tracés en septembre 2008 Soit une croissance de près de 400% en 28 mois Ces nouveaux types de sites Web ont introduis F IGURE 31 - R EPARTITION DES BLOGS PAR TYPES F IGURE 30 - R EPARTITION DES BLOGUEURS PAR CONTINENT des pratiques nouvelles rendues populaires par les CMS, ces interfaces Web qui permettent à n’importe qui d’administrer un blog. Ces nouvelles pratiques sont représentées par de nouvelles fonctions telles que :  Le BlogRoll : liste de liens affichée sur un blog, pointant vers d’autres blogs, elle peut être définie par le blogueur lui-même ou dynamiquement via les votes des lecteurs.  Les linkbacks (ou trackbacks) signalent au lecteur du blog, quel autre blog à fait un lien vers l’article qu’il consulte. 48 http://technorati.com/ 47
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web.  Les tags qui qualifient par des mots clefs, les articles du blog pour permettre ensuite une recherche par tags au lecteur, mais également pour créer un « nuage de tags » présentant graphiquement tous les thèmes du blog. Cette fonction est probablement l’un des principaux catalyseurs du futur Web 3.0 dit sémantique (et avant cela, du très jeune Web² dont parle Fréderic Cavazza sur son blog49). F IGURE 32 - N UAGE DE TAGS  Les Flux Rss qui permettent de suivre l’actualité du blog sans le consulter et ce via un agrégateur de flux.  Le partage, symbolisé par des icônes variées en fonction des plate-formes de partages disponibles, ils permettent au lecteur de publier le contenu de l’article qu’il lit sur un réseau social, de l’imprimer ou de l’envoyer par courrier électronique à un ami.  Les commentaires. Et c’est là l’une des grandes nouveautés du blog, il permet à tout lecteur de publier un commentaire sur ce qu’il vient de lire. La modération de ce commentaire peut se faire à priori ou a postériori. Les blogs habituent également leurs utilisateurs à des fonctions telles que la consultation des derniers commentaires, mais aussi à des types de présentation de l’informatique rappelant souvent la couverture d’un journal papier. On y lit les grands titres accompagnés du début de l’article et d’une photo, un lien hypertexte permettant d’accéder au reste de l’article. Le grand public se familiarise avec ce type de présentation et de fonctions et se les approprie pour en faire l’usage qui lui convient. En plus de constituer une révolution pour la liberté et la facilité d’expression, le blog est une révolution sur Internet car il ouvre la voie d’une nouvelle ère où le contenu des sites est créé par les utilisateurs et non plus seulement par les annonceurs. Il s’agit de ce que l’on appelle le Web participatif ou 2.0. Si le flux RSS est une fonctionnalité manuelle qui permet de s’abonner a un contenu pour l’afficher ailleurs sous une autre forme, la logique interne du système permet d’étendre le principe à tout type d’information publiée dynamiquement. Aujourd’hui, une vision du réseau peut-être celle d’un flux constant d’informations récupérées et envoyées automatiquement d’une machine à une autre et formatées pour être présenté telle que les concepteurs de l’interface de réception l’auront choisi. 49 http://www.fredcavazza.net « Web²» (ou Web squared), transition vers le 3.0 ou nouveau paradigme ? 24 Juillet 2009 48
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Le service Yahoo ! Pipes50, destiné à des utilisateurs avancés, illustre parfaitement ce principe, permettant à ses utilisateurs de jongler entre différences sources d’informations, de les trier, les filtrer et de les rediffuser sous la forme d’un flux unique. Les réseaux sociaux numériques51 Ceux-ci voient le jour dès 2002 avec le lancement de Friendster, et ne sont à priori que des sites vides, qui sans utilisateurs ne seraient qu’un amas de fonctionnalités sans but. Pour mieux comprendre le principe de ces sites qui s’appuient sur la notion sociologique de Réseau social, nous nous proposons d’étudier le réseau social Facebook qui connaît des chiffres de croissance impressionnant en séduisant un public en constante expansion (300 Millions d’utilisateurs dans le monde en Aout 2009 soit le 6e pays du monde en termes de population). Facebook est une plate-forme permettant à chacun de créer gratuitement une fiche le décrivant et d’ajouter des « amis », c'est-à-dire des connaissances connectées à Facebook également. Si la plate- forme lancée en 2006 a connu un tel succès, c’est grâce à ses nombreuses possibilités d’échanges horizontaux. C'est-à-dire que le site, ne sert quasiment que de plate-forme de mise en relation d’un utilisateur avec un autre. Ces deux utilisateurs pourront ensuite s’envoyer des messages rendus publics ou non. La plate-forme développée par M. Zuckerberg est rapidement perçue comme un vaste terrain de jeux, pour le développeurs d’une part qui peuvent y contribuer en proposant des applications ludiques et pour les utilisateurs d’autre part qui y voient le moyen de rester en contact avec leurs connaissances, de retrouver des anciens contacts perdus de vue, de s’exhiber et de s’informer sur la vie des autres. Il est difficile de parler de Facebook sans rentrer dans les débats qui agitent la scène internationale à son propos. La plate-forme possède une mine d’informations personnelles gigantesque qui rend jalouse les services secrets de tous les pays du monde, et ne s’en sert pour l’instant que pour proposer à ses utilisateurs, de la publicité ciblée en fonction de leurs goûts, leurs habitudes, leur lieu de vie etc. En dehors des débats philosophiques et sociaux qui gravitent autour de ce nouveau « média dans le média » (d’ailleurs fascinants), il est intéressant de constater que Facebook a apporté des fonctions inconnues jusqu’alors sur le réseau comme le « poke », une méthode d’attirer l’attention d’un autre utilisateur (inspirée par les « flash » déjà popularisés par les sites de rencontre en ligne). Mais aussi l’actualisation instantanée (et donc asynchrone en AJAX) de la page principale, également appelée le « Feed » et où tous les agissements des « amis » connectés sont visibles. Les utilisateurs peuvent également publier un message de statut limité à 900 caractères ce qui en fait quasiment une fonction de micro-blogging, qui en plus d’être commentables par les autres utilisateurs, sont « likeable », ce qui signifie qu’un utilisateur pourra simplement manifester, d’un simple clic, un soutien ou une approbation du message de statut affiché. Le succès de Facebook s’explique aussi par le choix d’une interface extrêmement épurée donc parfaitement consensuelle et utilisable, parfaitement étudiée 50 http://pipes.yahoo.com 51 Voir document en annexe : The history and evolution of Social Media 49
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. pour présenter un contenu multimédia dynamique, puisqu’en plus de simples messages, les utilisateurs peuvent s’échanger des vidéos, des photos et des liens. Facebook introduit également une fonction qui fera sa renommée, il s’agit du « Tag » de photo. Tout comme sur un blog, on peut qualifier un article avec un mot ou un groupe de mots (taxonomie), on peut indiquer à Facebook, le nom d’une personne figurant sur une photo publiée. Ceci aura pour effet d’avertir tous les amis de cette personne qu’elle figure dorénavant sur cette nouvelle publication52, elle-même commentable et « likeable ». Encore une fois, ces fonctionnalités utilisées par des millions d’internautes chaque jour ont pu entrer dans une sorte de culture du Web, et par conséquent dans la compétence numérique. Nous verrons au chapitre prochain, en quoi la reconnaissance des nouveaux codes des sites Web est une partie primordiale de la compétence numérique. Le commerce électronique De 2000 à 2008 le commerce en ligne à multiplier ses revenus par 50, passant de 800 millions de livres en 2000 à 43,8 milliards l’année dernière. Dans ce climat porteur, le secteur du e-marketing s’est également développé. Internet est devenu une formidable plate-forme de communication commerciale. Si à la fin des années 90, la publicité en ligne consistait en l’échange de bannières, entre sites partenaires, les moyens mis en œuvre pour atteindre des cibles marketing sur le Web se sont décuplés jusqu’à aujourd’hui. Dans les années 90, les sites les plus visités comportaient généralement une à deux bannières publicitaires réparties sur la page, aujourd’hui les sites désirant tirer profit de leur espace publicitaire ont adopté des techniques bien plus agressives. Grace à l’utilisation de Flash™53, les bannières ont pu devenir interactives, proposant des jeux rapides aux internautes pour les attirer vers un site défini. Les bannières composées d’éléments graphiques, de texte et de zones cliquables, ont rapidement été considérées elles-mêmes comme des flux d’informations. Aujourd’hui, les bannières en plus d’être interactives, affichent parfois des informations personnalisées ou actualisées en temps réel. En fonction des tarifs payés par les annonceurs, les bannières sont diffusées cycliquement sur des dizaines de sites, avec des coefficients d’apparition par heure de la journée. Elles sont très souvent hébergées sur des serveurs répartis, différents du site sur lesquels elles s’affichent. Des techniques extrêmement élaborées sont utilisées pour analyser le retour sur investissement de chaque bannière et le nombre de clics générés par une campagne sur une période donnée. En 2009, la publicité sur Internet est omniprésente et se présente sous des formes variées telles que des bannières, mais aussi des macarons venant parfois cacher une partie du site Web consulté. Si la frontière est très mince entre la publicité et le « Spam », les utilisateurs qui ont assisté à la jeune évolution de la publicité en ligne, se sont 52 Expliqué comme ceci on peut très vite se rendre compte des dérives possibles en terme de divulgation de la vie privée. Or Facebook a mit en place de nombreuses options de configuration permettant à l’utilisateur de protéger les informations publiées le concernant en masquant par exemple ses photos de week-end à ses collègues de travail. 53 http://www.adobe.com - Technologie permettant l’animation et l’interaction d’éléments graphiques au sein des pages et permise le plug-in développé par Macromedia® puis racheté par Adobe®. 50
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. également habitués à ses codes et savent qu’un macaron occultant une partie du site doit comporter un bouton permettant de le masquer. Aujourd’hui, de nombreux pièges existent sur Internet, des entreprises malveillantes utilisent justement des bannières et encarts commerciaux possédant des codes visuels connus de l’utilisateur, à des fins détournées. En effet lorsque l’utilisateur clique sur le bouton « Annuler » ou « fermer » pour se débarrasser de l’élément gênant, c’est alors qu’il met en marche le mécanisme de réponse à l’offre. Ces mécanismes numériques vicieux visent la plupart du temps à installer des logiciels espions sur l’ordinateur de l’hôte, mais parfois aussi à forcer la visite d’un site défini. Ces processus vont à l’encontre des règles d’éthique du réseau. C’est un exemple flagrant d’utilisation de la compétence numérique des utilisateurs pour les berner. Il est rare que des utilisateurs avancés se laissent prendre à ces pratiques, car si les messages frauduleux sont visuellement conçus pour berner l’utilisateur lambda, le message qu’il véhicule est souvent peu approprié au contexte dans lequel il est présenté. Des dizaines d’autres modes de publicité sont aujourd’hui utilisés sur Internet comme les Advergame54, Widgets55, Newsletters, écrans d’attente et même des sites Web dédiés à un événement promotionnel particulier. La tendance est à la personnalisation du message publicitaire en fonction des recherches effectuées par l’internaute sur le réseau comme le fait Facebook dont nous parlions plus haut, en proposant à ses annonceurs, des campagnes de publicité ciblée. F IGURE 33 - S UR CE SITE , UN MESSAGE APPARAIT EN BAS A DROITE DE LA PAGE , REPRENANT LE TYPE D ' AFFICHAGE DES NOUVEA UX MESSAGES SUR CERTAINS LOGICIELS DE MESSAGERIE INSTANTANEE . CE MESSAGE EST CELUI D ' UNE CHARMANTE JEUNE FEMME INCONNUE , QUI AGUICHE L ’ INTERNAUTE NAÏF . UN CLIC SUR CE MESSAG E PEUT AVOIR DES CON SEQUENCES INDESIRABLES POUR L ’ UTILISATEUR . P OURTANT LE CONTENANT DU MESSAGE COMPORTE UN BOUTON PERMETTANT APPAREMMENT DE LE MA SQUER . IL N ’ EST QUE SIMULE . F IGURE 34 - C ETTE BANNIERE - CI EST UN DOUBLE PIEGE . I L S ' AGIT REELLEMENT D ' UNE BANNIERE PUBLICITAIRE HONNETE . OR LE DESIGN CHOISI EST CELUI DES BOITES DE DI ALOGUES DU S YSTEME D ' EXPLOITATION W INDOWS ( OU Y RESSEMBLE FORTEMEN T ). G ENERALEMENT , LES PIRATES SE SERVE NT DE CE GENRE DE CODES VISUELS POUR BER NER LES UTILISATEURS DEBUTANTS QUI PENSENT Y VOIR UN MESSAGE IMPORTANT DE LEUR SYSTEME D ’ EXPLOITATION . L ES UTILISATEURS AVERTIS , SAVENT QUE CE TYPE DE BOITE DE 54 Jeux vidéo simples et amusants, souvent réalisés en Flash ou en Ajax, mettant en avant un ou plusieurs annonceurs publicitaires. 200 Millions de personnes jouent à au moins un Advergame par mois. La cible favorite des publicitaires utilisant ce média est certes les jeunes, suivis de près par la ménagère de moins de cinquante ans des métropoles urbaines. 55 Venus du Monde MacOS, il s’agit d’applications logicielles légères offrant des services online ou offline à l’utilisateur. Leur déploiement à but commercial (exemple SFR Pro Widget) est souvent intégré dans une campagne de communication Web pluri-vecteurs. 51
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. DIALOGUE N ’ APPARAIT PAS SUR UNE PAGE W EB ET L ’ IGNORENT . C ECI A POUR EFFET , D ’ ATTIRER VERS L ’ ANNONCE , UNE POPULATION NEOPHYTE EN INFORMATIQUE . ( IL S ’ AGIT D ’ UNE OFFRE D ’ EMPLOI )… Pour conclure sur ce chapitre sur la compétence numérique et sa répartition, nous proposons ce schéma qui regroupe les différentes compétences et leurs champs d’application dans le monde réel et le monde virtuel. F IGURE 35 - « L ITERACIES » (C OMPETENCES ) C OMME NOUS L ’ EXPLIQUIONS DANS LA DEFINITION DE LA COMPETENCE NUM ERIQUE , IL EST ENVISAGEABLE , QU ’ ELLE SOIT UN JOUR , PARTIE INTEGRANTE DE LA C OMPETENCE TRADITIONNELLE . 52
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Sans avoir dressé un portrait exhaustif des codes de la culture imprimée et de la culture numérique, on comprend comme ils s’interpénètrent et s’alimentent mutuellement. Si l’on associe les évolutions informatiques sur la période 1980-2009, avec les chiffres de l’évolution de l’adoption des TIC dans le monde, on constate que des utilisateurs de plus en plus nombreux ont eu accès à de plus en plus de technologies pour s’informer, communiquer, travailler et se cultiver. Nous avons vu dans la première partie de ce chapitre que nombreux pays sont encore loin d’avoir la compétence numérique du monde occidental. Or dans ce monde où s’interpénètrent cultures imprimées et numériques, et où s’opposent, surconsommation de médias d’une part et ignorance de l’autre, les concepteurs ont un rôle clé que nous allons étudier dans le chapitre suivant. Nous étudierons en particulier le rôle des concepteurs graphiques mais évoquerons les autres professions avec lesquels ils travaillent de concert pour créer des expériences utilisateurs satisfaisantes ; et dans quelles mesures ils sont à la fois contraints par la compétence numérique globale et sont les « chevaliers de son expansion ». 53
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C HAPITRE 2 : L E DESIGN W EB DANS CE CONTEXTE Qu’est ce que le design ? Le design est une discipline visant à représenter, une pensée, un concept ou une intention en tenant compte d'une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives56. Pour les Anglo-Saxons, le design est davantage une conception, une idée, une intention ou un projet. En français, c'est une recherche d'harmonie entre les formes et les fonctions de l'objet. Dans les deux cas, sa concrétisation passe par une phase de recherche et de création. Les contraintes qui régissent le design d’un objet ou d’un visuel différencient la discipline de l’Art où seuls comptent la sensibilité et le moyen d’expression de l’auteur. Un artiste peut se permettre de créer une toile abstraite en utilisant les couleurs, les formes et les matières qu’il souhaite, alors qu’un designer créé une « œuvre » dans un champ contraignant donné. Ces contraintes peuvent être de différentes natures :  La contrainte d’image : Lorsqu’une entreprise commande la conception/création d’un objet ou d’un visuel, ce dernier doit être en accord avec les codes de la marque. Cette contrainte prend tout son sens lorsque la marque a une histoire ancienne ou complexe. Chaque nouveau design de la marque doit s’inscrire dans une ligne de conduite et d’image (aussi chaotique soit-elle !). Celle-ci est garante d’un style propre à la marque, la rendant reconnaissable et appréciable. Un site Web est une vitrine pour la marque, il doit donc être créé en accord avec les codes de sa charte (aussi chaotiques soient-ils).  La contrainte de cible : Probablement l’élément le plus important du Design, sa cible ! Un design réussit est un design qui génère non pas l’intérêt général, mais l’intérêt du public auquel il est destiné. Le design n’a pas vocation à être universel, un produit ou un visuel doit être conçu pour toucher un public donné. Le design grand public est un cas à part mais pourtant essentiel. Il s’agit du design pour les masses, du design dit consensuel, d’un design politiquement correct, et s’inscrivant esthétiquement dans la tendance globale du moment. Le Web est un média qui permet la consultation de sites orientés vers le grand public comme de sites très ciblés vers un corps de métier, un hobby, ou une communauté particulière. Le design des sites Web est ainsi orienté vers la cible visée.  La contrainte de retour sur investissement : Un produit tout comme un visuel a des coûts de création, de réalisation, d’impression, de diffusion. Si ces frais sont engagés, c’est, la plupart du temps, dans le but d’obtenir un retour sur investissement et des bénéfices. Le produit ou visuel doit donc être réalisable avec des moyens techniques et budgétaires définis. 56 Définition Wikipédia 54
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web.  L’expérience utilisateur : Plus qu’une contrainte, c’est l’essence même d’un design. C’est l’élément garant de l’adhésion à un design. Le produit ou visuel doit être efficace et agréable à utiliser ou consulter. Il est évident que les notions d’efficace et d’agréable dépendent largement du public visé par l’œuvre. Une des composantes principales du design et probablement celle qui le rapproche le plus de l’art dans l’esprit des utilisateurs, est la recherche d’esthétique. Le design d’un objet comme d’une interface est décidé à un moment précis du temps. Le produit fini devant plaire aux consommateurs ciblés, il se doit également de les séduire visuellement. C’est ainsi que le design est indissociable d’une époque, de ses tendances graphiques, d’une marque et d’une structure créative. Dans ce chapitre, nous traiterons essentiellement du design graphique d’interfaces Web grand public, car elles sont les plus révélatrices de l’utilisation et de l’expansion de la compétence numérique globale, et non de compétences numériques spécialisées, propres aux utilisateurs d’interfaces dites « métiers » (progiciels, systèmes propriétaires…) ou très spécialisées. Il sera toutefois intéressant de montrer l’état de l’art sur des sites dédiés aux concepteurs et de le comparer avec ce que l’on trouve sur les sites grand public. 55
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. I. L E D ESIGN POUR LE W EB , UN ECOS YSTEME DE CON TRAINTES Comme nous l’avons vu précédemment, le Web n’est qu’un concept hybride entre réseau et technologie logicielle. On peut le définir comme un système informatique public reliant de l’information entre elle par des liens hypertextes, fonctionnant sur le réseau Internet. L’information y est présentée sous la forme de pages Web regroupées au sein de sites Web accessibles grâce à un logiciel de navigation Web. Si l’on considère le design Web comme la conception (au sens anglo-saxon du terme) d’un projet Web, alors cela regroupe une grande quantité de professions. Lorsque nous parlerons de design Web, nous considérerons plus précisément la dimension créative et artistique du projet, elle-même influencée par toutes les autres disciplines et corps de métiers. 56
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Le design sur le Web a pour but de rendre une interface plus adaptée à son utilisateur. Et ce, en stylisant des éléments, qui peuvent être informatifs, décoratifs ou affordants. Nous allons survoler ici les disciplines qui contraignent le travail des designers Web. Nous mettrons également évidence la manière dont ses disciplines se contraignent également mutuellement dans certains cas. Il faut toutefois noter, que certaines des contraintes, particulièrement, celles imposées par le marketing et les IHM, constituent parfois des cadres de travail guidant la création. A. C O N T R A I N T E S M A R K E T I N G Comme nous l’avons vu précédemment, le marketing est souvent l’instigateur du projet, définissant dans un document appelé « plan marketing », ce que doit refléter le site, comment il doit s’adresser aux utilisateurs, sur quel ton, quelles devront être ses fonctionnalités pour séduire le public visé. L’instigateur du projet a également un budget, celui-ci permet d’affecter un nombre précis d’hommes, pendant un temps donné, sur le projet. Ces contraintes imposent aux designers, une limite dans leur cadre de réflexion. Cette limite est nécessaire et établit le périmètre du projet. Elle permet dans un premier temps aux designers de proposer des pistes graphiques, dans une tendance ou un thème choisis, pouvant esthétiquement plaire à la cible marketing définie. Sur le Web, de nombreux sites comme les moteurs de recherche, certains sites de e-commerce et des sites institutionnels, ont des cibles très vastes, dites « grand public ». Si dans le cas, d’un site gouvernemental, la cible se limite (globalement) aux ressortissants d’un pays, dans le cas de moteurs de recherche internationaux, la cible visée est universelle. Le marketing de ces sites est alors contraint par la compétence numérique des utilisateurs ciblés. En effet, plus la cible est large, et plus le site doit satisfaire des utilisateurs possédant des compétences numériques différentes mais nous y reviendrons. Esthétiquement, Le design pour le grand public doit être consensuel, ne pas risquer de choquer, il doit rester politiquement correct car ces valeurs sont les dénominateurs communs des goûts populaires. Lorsque nous parlons ici de goûts populaires, il faut replacer cela dans le contexte d’Internet et de la fracture numérique que cela suppose. Le design populaire trouve un pendant sur Internet depuis que son utilisation s’est universalisée. Par ailleurs le marketing définit la quantité et la qualité du contenu visible sur le site. Le design graphique devra s’adapter à leurs variations en proposant des maquettes graphiques dites « scalable » c’est dire extensible en fonction de l’importance du contenu de la page. Le marketing, en définissant un ton de communication, un esprit pour le site, va également guider les créatifs dans leur travail. Le ton est directement lié à l’image de marque mais peut varier d’une 57
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. campagne à une autre. Son choix influencera le style graphique. Dans le cadre de sites grand public, le ton est généralement consensuel et peut se permettre d’être jovial, accueillant. Enfin, le marketing a pour but d’obtenir le meilleur retour sur investissement (ROI) sur le projet. Ce dernier doit séduire les clients, les amener à cliquer, acheter, ou autre. Le site Web devra rapporter à l’entreprise qui l’a commandé, plus qu’il n’a couté. Il est donc évident que le service marketing (qui se voit lui-même allouer un budget), devra choisir son prestataire de design, en fonction de son rapport qualité-prix. Le budget alloué peut faire varier des paramètres contraignant le design, comme le nombre de jours de tournage pour un film Web, le nombre de jour de création graphique, faisant varier tantôt la qualité de création ou le délai global de réalisation. Il est une phrase célèbre de la gestion de projet qui résume ceci : « Meilleure qualité, meilleur prix, meilleur délais, rayez la mention inutile. » Le budget marketing global, impacte, cela étant, toutes les autres disciplines engagées dans le processus de création du projet. B. C O N T R A I N T E S I N F O R M A T I Q U E S Les contraintes informatiques s’exerçant autour d’un projet Web sont globalement de 3 natures différentes : Celles qui touchent au développement du site à proprement parler : En fonction du budget et des besoins du client, le site sera conçu soit à partir d’un CMS soit de façon spécifique, c'est-à-dire « à partir d’une feuille blanche ». Les CMS, imposent un cadre de travail aux designers qui créent alors des « templates », c'est-à-dire, des éléments graphiques à insérer dans des « cases » prévues à cet effet. Les CMS sont très en vogue car ils permettent : - De réduire les coûts de développement, puisqu’ils sont pour la plupart en distribution Open-Source de faciliter la mise à jour du site via une interface d’administration des contenus - D’ajouter de nouvelles fonctions au site (Modules complémentaires) - De créer des sites dynamiques simples avec peu de compétences en développement. Mais ils posent également quelques difficultés : - La migration - La mise à jour (parfois simple, parfois, très contraignante) - La personnalisation (la création de Template adapté au CMS n’est pas forcément aisée et une documentation s’impose) - L’ajout de nouvelles fonctions (en l’absence de module complémentaire adéquat). 58
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Dans le cadre d’un site créé de toutes pièces, sans l’aide d’un CMS, une technologie est choisie en fonction des besoins exprimés et le travail des développeurs est maximisé. L’avantage de la méthode étant d’avoir un champ d’action, maximum. Dans le cas d’un développement spécifique, soit les développeurs sont extrêmement qualifiés et peuvent créer n’importe quelle fonctionnalité et dans ce cas, ce sont les designers, les IHM et le marketing qui contraignent le service informatique à se repousser ses limites. Dans le second cas et le plus courant, les développeurs, ne sont pas si nombreux, et ne maîtrisent pas toutes les technologies existantes. Dans ce cas, ils peuvent agir comme freins à la créativité des designers, et comme facteur limitant du développement de l’interaction. Heureusement, dans la plupart des cas, des « frameworks » préexistant, aident les développeurs à inclure de nouvelles fonctions sur les sites. La limite à cette pratique étant sans doute, la complexité et l’hétérogénéité du code généré qui pourra poser des problèmes en termes d’exploitation du site et d’accessibilité. On se doit de rappeler que tout site Internet est créé en langage HTML, soit directement écrit, soit généré par des langages serveurs (JEE, PHP, ASP, PERL…).On peut lui adjoindre d’autres langages comme le JavaScript et le CSS et son design est régit, quoi qu’il arrive, par les limites des ces langages. Si aujourd’hui ces limites ont été repoussées assez loin, nous verrons dans les parties suivantes qu’il n’en a pas toujours été de même et que les évolutions mêmes de ces langages ont contribué à faire évoluer le design graphique Web. Celles qui touchent au travail du designer Le designer Web utilise aujourd’hui comme outil, l’ordinateur et des logiciels dédiés au design graphique. Les ordinateurs sont ainsi des outils, et leur évolution en termes de puissance est primordiale pour l’utilisation de logiciels toujours plus gourmands en termes de ressources. Chaque version d’un logiciel apporte également de nouvelles fonctions, permettant au designer de créer avec de moins en moins de limites, de plus en plus aisément. Les logiciels intègrent également de plus en plus de fonctions permettant d’optimiser le design pour le Web. Le designer, possède grâce aux outils modernes, toute une palette d’outils lui permettant de formaliser sur un écran la moindre de ses idées. Cela étant, la création d’images pour le Web obéit à certaines contraintes historiques comme le poids des images, leur taille, et le format de fichier choisi pour l’enregistrement. Si avant 2000, une page Web était conçue grâce à un tableau invisible servant à placer des éléments dans une grille, Aujourd’hui les feuilles de style CSS permettent des positionnements d’objets relatifs et absolus, ainsi qu’une variété quasi infinie de méthodes pour styliser les éléments graphiques ou textuels des sites. Les designers graphiques se doivent ainsi de connaître les possibilités permises par ce langage de mise en page, pour en tirer partie au mieux. Si le travail de mise en page du site en CSS est souvent celui des monteurs XHTML, les designers doivent en connaître les contraintes pour créer des éléments de design, « intégrables ». Par ailleurs 59
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. on notera que les polices d’écriture, utilisables sur une page Web, doivent se trouver sur le poste client, ce qui force les designers à en utiliser qu’une liste réduite, assurant la compatibilité avec le poste de consultation57. De la même façon, le langage JavaScript, permettant certaines interactions entre l’utilisateur et l’interface, a vu ses capacités décupler depuis trois ans avec des fonctions lui permettant de modifier les données affichées sur la page en temps réel. Sans rentrer dans les détails, ce type de technologie doit également être connu des designers graphiques et d’interaction qui pourront s’en servir pour agrémenter leurs designs en fluidifiant l’accès à l’information, améliorant ainsi l’expérience utilisateur. Pour résumer, le designer doit connaître son outil du mieux possible ainsi que les contraintes basiques des métiers connexes, pour fluidifier les échanges avec les départements informatiques chargés du montage et du développement du site. Dans certaines entreprises, les directeurs de création ou artistiques, définissent des pistes graphiques de travail adaptées au brief et confient la réalisation technique aux designers qui sont chargés de réaliser des maquettes au graphisme exploitable par les monteurs et développeurs. Celles qui touchent à l’hébergement et à la publication du site. Le serveur informatique qui va servir à publier un site en ligne est avant tout un serveur de stockage secondé par un serveur applicatif. Dans le cadre de projets Web de grandes envergures, dédiés à être utilisés par des millions d’individus, les serveurs peuvent être dupliqués pour permettre l’accès à l’information même en cas de requêtes massives. Dans le cadre de sites comme Facebook ou Google, les serveurs, en plus d’être répartis (architecture 3-tiers), bénéficient également d’une répartition de charge leur permettant de délivrer l’information même dans le cas où l’un des serveurs tomberait en panne. Généralement, plus le site est visité pour son contenu et plus son habillage graphique est épuré. Un design épuré « pèse moins lourd » que des amoncellements d’images. Il est donc plus facilement distribuable en tenant compte de la bande passante allouée au transfert de l’information, tant côté serveur, que côté client. Lorsque le site est en production, il est indexé par les moteurs de recherche qui analysent son contenu. Les moteurs de recherche utilisent des techniques d’indexation précises (mais aux algorithmes secrets), cherchant certaines données précises dans un site (son nom, son titre, ses liens…). D’une certaine manière le design du site peut également favoriser (ou pas) l’indexation des données du site, mais cela reste généralement plus du ressort des développeurs et intégrateurs. 57 Des techniques existent pour utiliser n’importe quelle police de type TrueType sur une page, mais cela pose d’autres problèmes, particulièrement en ce qui concerne l’accessibilité. 60
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C. C O N T R A I N T E S I M P O SE E S P A R L E S D I SC I P L I N E S D E L ’ IHM Le design d’interfaces Hommes-machine s’est développé dès le début des années 80 lors de l’avènement de l’informatique personnelle pendant lequel, les exigences ergonomiques des systèmes informatiques furent revues à la hausse par le flot massif de nouveaux utilisateurs. L’étude de l’interaction Homme-machine (IHM) a permit de faire évoluer le design des systèmes informatiques, pour les rendre « utilisables », c'est-à-dire, faciles à apprendre et à utiliser58 (toujours pour un public ciblé). L’IHM est analysée en amont du design graphique et en aval du marketing traduisant ses besoins en schémas conceptuels permettant :  d’optimiser l’ergonomie et ainsi faciliter la tâche à l’utilisateur, en le guidant et en lui permettant de trouver ce qu’il cherche (ou ce que l’on veut lui faire découvrir), le plus efficacement possible.  un design d’interaction reliant les besoins fonctionnels exprimés par le marketing et leur perception (trouvabilité, affordance perçue59) par l’utilisateur. Le design d’interaction est une discipline transverse entre le design graphique et les IHM. Les designers d’interaction considèrent toutes les solutions existantes pour permettre à l’utilisateur de prévoir la répercussion d’une de ses actions sur l’interface. Le grand défi, pour les designers d’interaction, étant de créer des schémas de conception adaptés aux nouvelles fonctionnalités permises par les évolutions informatiques et par l’évolution supposé de la compétence numérique du public.  D’organiser l’information à publier et de proposer des optimisations. L’information étant la plupart du temps dynamique aujourd’hui, l’organisation des champs d’affichage de l’information, impactera forcément aussi sur le design graphique. Le plan du site aura également des répercutions graphiques, imposant des menus à plusieurs niveaux dans certains cas, et autres éléments comme le fil d’Ariane (« breadcrumbs ») que nous évoquerons dans la partie suivante. L’architecte d’information à un rôle clé dans le conseil au marketing et leurs décisions impacteront aussi la conception informatique du projet. Ces schémas conceptuels seront les bases de travail des designers qui s’en serviront pour définir des éléments compatibles avec l’information accessible et avec les fonctionnalités de l’interface. Parmi les disciplines de l’IHM, on citera également, l’accessibilité, qui est la discipline la plus liée à l’informatique. Elle vise à rendre le site Web compatible avec son affichage sur un ou plusieurs terminaux numériques donnés (considérant leur aspect matériel comme logiciel). Parmi ces 58 Human-Computer Interaction – John M. Carroll 59 Nous reviendrons sur ce concept dan la partie suivante. 61
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. terminaux il est important de considérer également les lecteurs d’écrans et autres interfaces permettant aux déficients visuels ou moteurs d’accéder à l’information du réseau. Cette discipline impacte également sur le design graphique car nous verrons que les éléments graphiques des interfaces Web ne sont pas compatibles avec tous les terminaux. L’accessibilité, est également très liée au « code » de la page, qui, s’il est correctement écrit (respectant des standards et conventions définis), permettra au site d’être ensuite plus facilement référencé par les moteurs de recherche. Cela augmentera donc sa trouvabilité et ainsi le retour sur investissement. Toutes ces disciplines ont pour but d’améliorer l’Expérience Utilisateur. C’est l’un des facteurs les plus importants (si ce n’est le plus important) du succès de l’interface et ainsi, dans la plupart des cas, d’un retour sur investissement positif. Mais l’expérience utilisateur a besoin du design graphique pour être satisfaisante. C’est d’autant plus le cas dans le cas de projet dont la cible est vaste. Si une application-métier se doit d’être avant tout utilisable, une interface grand public doit séduire par son esthétique. L’IHM est le domaine le plus impacté par la compétence numérique car il doit compter dans sa réflexion avec ce que l’utilisateur « sait ». Les schémas de conception s’inspirent souvent d’interfaces réputées utilisables en utilisant des conventions graphiques connues. Dès lors qu’une interface présente une ambigüité d’utilisation pour l’utilisateur, les professions de l’IHM doivent travailler avec les designers graphiques pour « faire comprendre » à l’utilisateur, comment parvenir à son but en utilisant sa propre compétence numérique. II. LA COMPETENCE NUMERIQ UE COMME CATALYSEUR ET CONTRAINTE DU DESIGN W EB La question que tous les acteurs de la conception se posent (ou devraient se poser) lorsqu’un besoin fonctionnel exprimé est inhabituel est : « Comment vais-je faire comprendre cela à mon utilisateur ? » Intervient alors une synergie de travail entre les disciplines des IHM, du design graphique et de l’informatique, pour résoudre le problème, entre ce que les uns et les autres peuvent, coder, conceptualiser ou représenter. La deuxième question que l’on se pose est : « Une fois qu’il aura compris, va-t-il apprécier l’utilisation de la fonction, s’en souvenir, la réutiliser ou la recommander ? » c’est là toute la problématique de l’Expérience utilisateur. Pour répondre à ces questions, les concepteurs se questionnent sur la compétence numérique de l’utilisateur ciblé. Il s’agit de connaître ses habitudes numériques, les systèmes qu’il a déjà utilisé (s’il y en a) et la connaissance de la signalétique numérique qui en découle. 62
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Dans cette étude nous nous attarderons surtout sur le concept de « Compétence photo-visuelle » sous-ensemble de la compétence numérique d’après Y. Eshet-Alkalai. Il s’agit de la compétence développée par les utilisateurs suite à la reconnaissance visuelle d’éléments graphiques et signalétiques. C’est le domaine le plus impactant sur le design graphique d’un projet Web. Parmi les éléments graphiques et signalétiques utilisés dans les sites Web, outres les pictogrammes, icônes et symboles qui sont pour la plupart des conventions, la mise en page même d’un site peut, également induire du sens ainsi que sa typographie. Si les IHM ont évolué pour simplifier la tâche de l’utilisateur dans la plupart des cas, les utilisateurs ont également fait un travail progressif d’adaptation aux évolutions des interfaces et des technologies comme nous le voyions dans la partie concernant l’adoption de la Compétence numérique. Résumons, avant de nous lancer dans ce sujet, les facteurs déjà présentés qui ont permis un essor du Design sur le Web :  Amélioration des Infrastructure réseau (amélioration donc des vitesses de connexion autorisant la diffusion d’un contenu graphique plus riche et varié)  Les possibilités offertes par l’informatique (évolutions des langages Web, des possibilités de stockage…)  L’évolution du nombre de connectés (plus le réseau est dense, plus les entités ont besoin d’êtres vues et reconnues et plus elles font appel au design) A. C O MP O SI T I O N DU SI T E ET HA BI T U DE S DE N AV I GA T I O N Au fur et à mesure de l’évolution des possibilités offertes par les langages Web, la composition générale des sites a changée. Il serait bien trop long de se lancer dans un historique exhaustif des évolutions en question, mais nous en soulignerons deux. Dès les premières heures de l’HTML, lorsque la balise <Table> fut inventée, (initialement pour permettre aux concepteurs de créer des tableaux comme sur un logiciel de tableur), elle fut utilisée pour positionner des éléments dans une page Web. Alors que les concepteurs graphiques ont de tout temps utilisé des « grilles » pour positionner leurs éléments et ainsi réussir leurs compositions graphiques, le tableau HTML s’en rapprochait beaucoup. La plupart des concepteurs Web aujourd’hui, ont commencé à travailler à partir de tableaux pour créer des pages Web. Un autre mécanisme du HTML fut très prisé dans les années 90, il s’agissait des cadres permis par la balise <frame>. Ceux-ci offraient la possibilité de naviguer dans l’information à partir d’une page constituant un menu horizontal ou vertical fixe. Les pages de navigations et de présentation de 63
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. l’information étaient alors distinctes et regroupées par un « frameset », page agrégeant les 2 (ou plus) cadres. Ces pratiques, très fréquentes, orientaient le design des pages vers une apparence donnée. Les tableaux laissant au début apparaître, leurs bordures grises par défaut, et rendant le texte qu’ils contenaient, difficilement copiable car présenté dans une structure non-linéaire. Leur formatage, leurs imbrications et l’ajout de cases, pouvait dans certains cas, s’avérer complexe. Les cadres quant à eux, habituaient les utilisateurs à séparer une page en deux parties, dont une était fixe et permettait de naviguer dans les informations présentées dans la seconde. Ceci engendrait également des problèmes de navigation comme l’ouverture de pages externes au site, dans l’un des cadres, rendant l’autre inutilisable. Progressivement, HTML évolua, les navigateurs également. Les cases de tableaux furent remplacées par des « divisions » permises par la balise <div> elle-même inspirée de la balise <layer> reprenant le concept existant en design graphique, de calques d’éléments. Parallèlement à ces évolutions, apparurent les feuilles de styles CSS60 qui permettaient d’attribuer un style graphique aux éléments du site. Si placer des éléments textuels et graphiques dans des divisions était plus compliqué pour les concepteurs que l’utilisation classique de tableaux, cela permettait une bien plus grande liberté quand aux possibilités graphiques61. Les divisions pouvaient alors bénéficier d’attributs très variés, ouvrant un champ d’exploration graphique immense aux designers (ex : superposition d’images, répétition contrôlée de motifs, espacement, visibilité…). Avec cette évolution, les codes visuels d’Internet changèrent progressivement. La possibilité d’afficher ou de masquer une division rendit caduque le système de frame. Dès 2000, un site construit sur des cadres, n’inspirait plus confiance à l’utilisateur, étant synonyme de navigation mal conçue. Par ailleurs, la « défillabilité62 » des cadres, les rendait inutilisables. F IGURE 36 - P AGE D ' ACCUEIL DE W EB D ESIGNERS D EPOT (2009)– UN SAVANST MELANGE DE SUPERPOSITION D ’ IMAGES POUR HABILLER UNE STRUCTURE W EB EN DIVISIONS , TOUT EN BASANT LA CONSTRUCTION DU SITE SUR UNE GRILLE . 60 « Cascading style sheet » : feuille de style en cascade, appelée ainsi car en plus de séparer le contenu de sa mise en forme, La « cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. 61 On note toutefois que des techniques assez élaborées de découpe d’images furent inventées pour optimiser la compression de celles-ci et leur placement dans des cases de tableaux. Cette façon de procéder est aujourd’hui obsolète, mais les techniques d’optimisation sont toujours d’actualité. 62 « Scrollability » en anglais : la possibilité de faire défiler le contenu d’une division, d’un cadre ou d’une fenêtre) 64
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Suite à ces évolutions, les designers s’intéressèrent à la façon d’optimiser l’affichage de la page, or si de nouvelles possibilités étaient offertes par le code, il n’était pas interprété de la même façon par tous les terminaux. Des modèles de conception s’imposèrent alors, tels que des sites sur 2 ou 3 colonnes intégrant une « entête » et un « pied-de-page »63. Si nous avons décidé de nous arrêter particulièrement sur ces deux évolutions du Web, c’est tout simplement car elles ont défini les bases de la navigation Web et de la structure des pages. Les formulaires existaient également et s’ils sont le sujet de plusieurs ouvrages fascinants destinés aux concepteurs, nous n’en parlerons pas ici car ils ont vu le jour dans les interfaces informatiques bien avant le Web. De 1995 à 1999, lorsque le grand public américain a découvert Internet, il a appris à naviguer avec les hyperliens bien sur mais également avec les cadres. Les concepteurs ont gardé la logique des menus horizontaux et verticaux permis par ceux-ci mais ont révolutionné leur interactivité et leur diversité grâce aux divisions. Les habitudes de navigation des internautes ont donc également suivi ces évolutions, cherchant toujours, à l’affichage d’une page Web, une structure leur permettant de naviguer, que ce soit à l’aide de barres de défilement ou de boutons d’actions. Aujourd’hui des études d’eye-tracking64 permettent de savoir où se place le regard de l’utilisateur et ainsi d’optimiser la structure de la page pour lui faire comprendre comment accéder à l’information qu’il recherche. Ces études permettent également de déterminer si une publicité en ligne est vue ou si un bouton d’action, attire suffisamment l’attention. La conception de la structure du site est sauvent le travail des designers alliés aux architectes d’informations et ergonomes. Elle implique un travail de design cognitif, en se mettant à la place de l’utilisateur et en anticipant ses réflexes. (Le meilleur moyen d’effectuer cette étude est de tester une interface maquettée sur un utilisateur externe au projet). Une structure de site mal pensée mènera l’utilisateur à la désorientation, la distraction, la non-compréhension du message, et à des actions paradoxales ou illogiques. Si dans les années 90, les concepteurs étaient conseillés de ne pas créer des pages Web trop longues (ou « hautes ») pour réduire le besoin de « faire défiler » l’information, aujourd’hui, le défilement (vertical) d’une page ne pose plus de problème à personne, et cela a été d’autant plus démocratisé par l’apparition de la molette de défilement sur les souris. Si ces contraintes ont amené les designers à créer des interfaces navigables, elles ont également poussé les designers à innover à la fois sur le fond et la forme des modèles. Cela est particulièrement 63 Ces appellations sont directement issues de la culture imprimée puisqu’elles désignent également les parties hautes et basses de lettres, courriers, ouvrage… 64 Suivi du regard. 65
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. valable sur des sites réalisés en Flash™65, où aucune contrainte HTML66 ne régit le travail du designer. Nous verrons dans la prochaine partie, que, quelque soit la liberté offerte au designer par Flash™, il doit exploiter les codes sémiologiques du Web pour créer une interface réellement utilisable. Flash™ est une technologie aujourd’hui extrêmement répandue (Adobe® clame que son plugin équipe aujourd’hui 99,7 % des ordinateurs personnels). Les internautes se sont familiarisés avec depuis 1996 et l’ont également vu évoluer. Aujourd’hui Flash™ est une technologie extrêmement puissante et particulièrement utilisée pour réaliser des sites événementiels au graphisme élaboré. Elle est aussi massivement utilisée pour la diffusion de vidéo sur le Web, permettant même aujourd’hui des interactions avec la vidéo en temps réel. On notera que si Flash™ a beaucoup apporté à la libération du graphisme sur le Web, cette technologie est encore utilisée avec parcimonie sur les sites grand-public67 en raison des temps de chargement parfois long qu’elle impose, du plugin nécessaire à sa mise en œuvre et de son manque de compatibilité avec certains terminaux (l’accessibilité de Flash™ constitue sa faiblesse et un sujet clef du Web). 66 Ces contraintes sont remplacées par des obligations quand au poids des images utilisées, à la transparence de l’animation ensuite importée dans une page HTML, et d’autres paramètres tels que l’affichage plein écran, l’optimisation pour différentes résolutions et bandes passantes… 67 Cela n’est évidement pas valable pour les sites grand-public spécialisés dans le partage de médias (ex : Youtube™ utilise un « container » Flash pour diffuser ses vidéos). 66
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Etude de cas : Moteur de recherche Yahoo! F IGURE 37 - Y AHOO . COM (O CTOBRE 1996) F IGURE 38 - Y AHOO . COM (O CTOBRE 1999) F IGURE 39 - Y AHOO . COM ( MAI 2004) F IGURE 40 - Y AHOO . COM (O CTOBRE 2009) Sur la figure 29, le site Yahoo.com présente déjà certaines particularités qui constituent en quelque sorte, son ADN, base à partir de laquelle il va muter. Les éléments de la page ne sont pas encore placés dans des tableaux, la balise <table> étant trop récente pour être utilisée par un site grand public. (SI un site grand public l’utilise, cela suggère que la grande majorité des terminaux peuvent l’interpréter). Les éléments sont donc rangés en liste, tel un annuaire. Le logo est placé en haut, très imposant et la fonction principale, le champ de recherche, est placé en dessous, suivis d’un simple bouton d’action « Rechercher ». On note la 67
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. présence d’une bannière publicitaire entre le logo et le champ de recherche, bannière en l’occurrence pour un service dont Yahoo! est propriétaire. Les liens hypertexte sont en bleu et soulignés, style standardisé pour ces derniers en 1996. Le design graphique, en dehors de la bannière d’entête est inexistant. En 1999, l’information disponible sur la page d’accueil du site, s’est étoffée et est présenté dans un tableau aux bordures invisibles. Les cases des tableaux peuvent être colorées de façon unie. Cette nouvelle colonne qui apparaît sur la gauche invite l’utilisateur à cliquer sur des informations remontées dynamiquement. Il s’agit d’un des premiers systèmes d’information dynamique sur le Web, c'est-à-dire, dépendante d’un contexte. Chaque case de cette nouvelle colonne est dotée d’un lien « more… » permettant à l’utilisateur d’accéder à une page lui offrant plus de contenu dynamique. Cette fonction est aujourd’hui utilisée sur un très grand nombre de sites, permettant de mettre en avant un élément sur la page d’accueil et d’accéder au contenu entier sur une page intérieure, à la façon d’un journal papier traditionnel. Le design du bouton « more » a une importance non négligeable. Il doit à la fois être discret et trouvable, et doit également ressembler à un lien pour indiquer à l’utilisateur, quel genre d’action il va entreprendre en cliquant. La structure de la page en tableau, permet au contenu d’être centré sur la page quelque soit la résolution d’écran de l’utilisateur final. C’est une technique encore largement utilisée, à laquelle on préférera les modèles élastiques « elastic templates » qui ont la capacité de s’adapter à une largeur d’écran. Quatre icônes aux libellés suivants entourent désormais le logo de la marque, « what’s new », « check e-mail », « personnalize » et « help ». Il s’agit d’un accès rapide aux informations les plus fréquemment demandées. Ils constituent quasiment les seuls éléments graphiques de la page. On notera également qu’il s’agit d’image très légères, au format GIF68, permettant un chargement de la page rapide quelque soit la vitesse de connexion. En 2004, la composition du site est plus variée, proposant plusieurs blocs aux mises en page différentes, permettant à l’utilisateur de trouver ce qu’il cherche en passant visuellement d’un bloc à un autre. Le champ de recherche est mis en exergue, des onglets aident à la séparation visuelle des blocs et les icônes apparus de part et d’autre du logo sont alors dotés de libellés bleus et soulignés, augmentant leur affordance au clic, notion dont nous parlerons plus en détail dans la partie suivante. 68 Graphic Interexchange Format – Format introduit par Compuserve en 1987 et supporté dès 1993 par le navigateur Mosaic, autorise une transparence dans les images (1bit). 68
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Par soucis de compatibilité, l’information est toujours organisée dans des tableaux, mais ceux-ci sont stylisés de façon à attirer l’utilisateur vers l’information remontée. Les liens constitués par ces remontées d’informations, amènent l’utilisateur sur des pages où il sera soumis à des bannières publicitaires, Yahoo! en tirant alors profit. Le bouton Help, qui est une fonction insubordonnée à l’architecture du site, ne fais plus partie des 6 principaux, mais reste en haut à droite dans un minuscule cartouche. Ce qui compte n’est plus sa visibilité, mais le simple fait qu’il soit positionné comme il l’a été depuis 6 ans. Les utilisateurs savent où le trouver, même s’il n’est plus du même style que les 6 autres. Si l’on s’appuie sur la loi de Fitts69, le site de 2004, ne hiérarchise pas assez les éléments cliquables à première vue. Certains blocs sont saturés de liens de même taille, et donc de même affordance. Sur la capture d’écran effectuée sur le site Yahoo.com aujourd’hui, on constate de nombreux changements. Tout d’abord le logo n’est plus centré mais il reste dans la partie haute et il est plus petit. Si l’utilisateur a toujours besoin d’identifier le site sur lequel il est, Yahoo! est d’autres sont devenus de tels monstres en terme de fréquentation que leur logo est subsidiaire. Cela dit, la partie, en haut à gauche de l’écran est la zone la plus vue par les utilisateurs. Placer le logo à cet endroit, permet ainsi, même s’il est plus petit, d’être vu, appris, et reconnu comme symbole sur le Web, il s’agit donc d’une opération autant liée au marketing de la marque qu’à l’architecture de l’information. Le design de la page témoigne d’une grande recherche en termes d’ergonomie, de design et de technique. Les éléments graphiques de structuration, sont très peu marqués et permettent une délimitation des blocs assez douce à l’œil tout comme le fond de page en subtil dégradé de bleu. La barre de recherche est maintenant placée au même niveau que le logo de la marque et sa structure en onglet indique à l’utilisateur qu’il peut réaliser une recherche selon un type de média défini. Les onglets ont été démocratisés par les systèmes d’exploitation (et avant cela par les cahiers- répertoires), les utilisateurs les reconnaissent donc, mais leur apparition sur Internet (dans leur forme actuelle) est assez récente, puisque permise par des techniques de programmation dynamique (avant cela, un clic sur un onglet aurait rechargé l’intégralité de la page). Lors du clic sur le type de média sélectionné, le champ de recherche et son bouton, dorénavant très contrastés, changent également d’aspect, donnant toujours plus d’indications d’usage, en temps réel, à l’utilisateur. La page est dorénavant dotée d’un menu horizontal complètement interactif qui permet également à l’utilisateur d’être informé sur ce qu’il va trouver « derrière le lien ». Les éléments de ce menu sont réactifs au survol de la souris et affichent, non plus des arborescences de sous-menus, mais des 69 Le temps mis pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve ainsi qu’à sa taille. Une cible est ainsi d’autant plus rapide à atteindre qu’elle est proche et grande. 69
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. calques graphiques à part entière, présentant des images, des sous-menus, des zones multimédias et des champs de saisie variés. Au milieu de la page, se trouve une zone d’informations, également interactive, qui réagit au passage de la souris sur des titres. Cela permet de présenter plusieurs informations dans une même zone du site, ne saturant pas la page et autorisant des images de tailles correctes. On comprend alors comment toutes ces trouvailles sont les fruits de discussions entre ergonomes, designers et développeurs, pour améliorer l’expérience utilisateur. Ce dernier reste plus de temps, sur une seule page, dotée d’un contenu dit « riche ». D’un point de vue mercantile, c’est une très bonne opération. L’utilisateur passant plus de temps sur une seule page, est plus à même d’avoir l’œil attiré par un message publicitaire. Une grande part des utilisateurs de moteurs de recherche dont Yahoo! fait partie, ne souhaite pas s’embarrasser de publicité et d’information pré-agrégée. Leur motivation principale est de trouver une information au plus vite. Les moteurs de recherche, aussi élaborées soient-ils, tant techniquement que graphiquement, doivent être avant tout efficaces. Yahoo! ne déroge pas à la règle. La page de 2009 contient des éléments graphiques sobres et légers qui sont assez vite téléchargés par les terminaux et une grande part de la « cosmétique » du site est assurée par du code CSS, également interprété dans l’instant grâce aux connexions haut-débit et aux navigateurs récents. Le temps de chargement de la page est ainsi tout à fait acceptable. Les utilisateurs vraiment pressés préféreront utiliser Google™ et son interface minimaliste voire pauvre. Là encore, on constate une microfracture numérique entre les utilisateurs de Yahoo! plus sensible à un design chaleureux et à des suggestions de recherche et les utilisateurs de Google, visant à l’efficacité absolue. F IGURE 41 - P AGE D ' ACCUEIL DU MOTEUR DE RECHERCHE G OOGLE 70
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. B. C O N V EN T I O N S ET AF FO R D AN C ES : RE CO N N AI T RE ET UT I LI S E R D E S S Y M BO LE S En informatique comme dans toute discipline du monde réel, il y a des conventions et des affordances. Ce second terme a été inventé par le psychologue de la perception, Gibson70 à propos de ce que l’on nomme aujourd’hui « affordances perçues ». Elles désignent les propriétés actionnables entre le monde et un individu. Tout comme un robinet a une forme qui suggère à l’utilisateur qu’il peut être actionné soit par une pression, soit par une rotation d’une pièce mécanique par rapport à une autre. Un bouton paraissant en relief sur une interface graphique, donnera l’impression qu’il peut être « enfoncé ». L’utilisateur de l’interface perçoit visuellement le relief grâce à un effet d’ombre et de lumière sur l’élément graphique qui constitue le bouton. Si cet élément possède également un libellé (ex : « Rechercher »), l’utilisateur comprend qu’en actionnant le bouton, il va lancer l’action qui y est décrite. Et si ce libellé est accompagné par un pictogramme, à force d’utilisation, l’utilisateur n’a plus besoin du libellé, ayant assimilé l’iconographie à la fonction.71 Nous ne parlerons ici que des affordances visuelles utilisées dans les interfaces Web. Il existe en informatique, des affordances physiques comme les formes des prises et des ports, les formes des lecteurs (une cassette DAT ne rentrera pas dans un lecteur CD-ROM), les touches d’un clavier qui suggèrent qu’elles peuvent être enfoncées… Les affordances réelles, sont celles du monde réel, comme l’exemple du robinet le montrait. Les affordances perçues sont celles qui sont interprétées par nos cerveaux à l’aide de notre connaissance des codes. Ces codes, dans un domaine comme l’informatique, sont pour la plupart des conventions comme le sont les symboles du code de la route par exemple. Sur la page suivante, on peut voir une frise de l’évolution des icônes du système d’exploitation de Microsoft72 depuis 1985 jusqu’à 2007. Ces icônes sont des pictogrammes qui comme nous le voyons, sont nés d’une volonté de reproduire des objets connus du monde réel sur un affichage d’ordinateur et ont évolués. On constate que globalement les symboles utilisés n’ont pas évolué dans leur fond mais dans leur forme. Le fond se doit de rappeler, surtout à l’utilisateur novice, à quoi correspond le programme qu’il lancerait en cliquant sur l’icône, en l’occurrence, une calculatrice, un calepin, une enveloppe. La forme a quand a elle évolué vers des effets visuels plus élaborées et ce grâce à l’apparition de nouveaux formats graphiques permettant une meilleure profondeur de couleur et de transparence qu’auparavant… 70 Gibson, J. J. “The Theory of Affordances.” In R. E. Shaw & J. Bransford (eds.), Perceiving, Acting, and Knowing. Lawrence Erlbaum Associates, Hillsdale, NJ, 1977. Gibson, J. J. The Ecological Approach to Visual Perception. Houghton Mifflin, Boston, 1979. 71 Pour une meilleure compréhension des différences entre conventions et affordances, lire (« Affordances, Conventions and Design », 1999) 72 Le système d’exploitation Windows® the Microsoft™ est le plus utilisé de la planète, il équipe 91% des ordinateurs personnels en Janvier 2008. (Source Clubic) 71
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 42 - E VOLUTIONS DES ICONES DU SYSTEME D ' EXPLOITATION M ICROSOFT ™ W INDOWS ® …(format PNG73). On notera que les évolutions des logiciels graphiques y sont également pour beaucoup, mais cela constitue le sujet d’une autre étude. Les conventions sont les codes liés en l’occurrence, au design d’interfaces comme le curseur qui se transforme en main au passage sur un lien. Lorsque l’utilisateur perçoit ce message, il perçoit un changement, puis il se demande à quoi est dû ce changement et ce que cela suppose. Or nous savons – parce que nous l’avons appris – que lorsque le curseur se transforme en main cela nous donne la possibilité de cliquer pour accéder au contenu de ce lien. Le curseur transformé en main, reste, dans l’absolu, une convention graphique d’usage mais devient pour l’utilisateur, une affordance perçue. Les interfaces Web, qu’elles soient sur Internet, intranet ou extranet utilisent les mêmes conventions graphiques, venues du monde des interfaces des systèmes d’exploitation et des logiciels et avant 73 Portable network Graphic – Format d’image matricielle autorisant une transparence sur 8 bits (256 niveaux d’opacité). 72
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. cela, du monde réel, mais pas seulement. Certaines conventions sont également nées avec Internet, avec les nouveaux services et sites qui s’y sont développés.  Les designers graphiques, doivent évidemment connaître et exploiter le maximum de symboles, mais plus que leur utilisation, ce qui compte, c’est leur utilisation à bon escient. Par ailleurs il faut également déterminer ce qui est une convention et ce qui n’en est pas. Jakob Nielsen différencieLes standards : plus de 80% utilisent le principe  Les conventions : 50 à 79 % des sites utilisent le principe. Autrement dit, lorsque les internautes voient quelque chose sur plus de la moitié des sites Web, ils s’attendent à retrouver le même modèle ailleurs, et l’intègrent à leur compétence numérique comme un modèle utilisable. Nous nommerons ici les standards, des conventions. On notera que Windows étant utilisé par 91 % des utilisateurs d’ordinateurs de la planète, les icônes présentées dans le tableau ci-dessus, deviennent des conventions. Les modèles de mise en page dont nous parlions au chapitre précédent, tendent également à devenir des conventions mais celle qui nous intéressent ici, seront plutôt celles constituées par les éléments graphiques et pictogrammes. On note que sur le Web, il existe encore d’autres conventions, celles de langages par exemple (taxonomie), auquel les internautes sont habitués et qu’il est périlleux de transgresser (la page d’accueil s’appellera « Home », ou « Accueil », éventuellement « Sommaire » ou « Index », mais pas « Ecurie » ou « Chaumière »). Nous en présenterons ici quelques éléments visuels faisant sens aujourd’hui sur le Web, et tenterons d’expliquer leur histoire, leur provenance et leur intégration par les internautes. Et nous touchons ici au principal intérêt de notre étude puisqu’il s’agit de comprendre comment ces conventions influencent le travail des designers. Etude cas n°1 : Les flux RSS Comme abordé au chapitre précédent, les flux RSS sont une des multiples fonctions apparues juste avant l’avènement du Web participatif et qui y ont contribué. (On parle de Web 1.5). Ils permettent d’agréger de l’information provenant de sources variées et paramétrables. Les utilisateurs apprécient de retrouver le contenu qui les intéresse, présenté sous différentes formes (en fonction des agrégateurs). Lorsque la fonction apparue vers 2003, elle était orienté vers les utilisateurs les plus chevronnés, possédant une compétence numérique suffisante pour comprendre le principe même de l’agrégation de flux. Les liens permettant de les ajouter à un agrégateur, s’ils devenaient de plus en plus courants sur les sites dynamiques (de par leur simplicité de mise en œuvre), occupaient souvent un espace ridiculement petit, en bas de la page ou tout en haut. Ces liens étaient soient textuels soit représentés par le pictogramme ci-dessous. 73
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 43 - BOUTON PERMETTANT D ' AJOUTER LE FLUX RSS D ' UN SITE A UN AGREGATEUR (2004) La couleur orange du pictogramme imprégna les esprits, et lorsqu’en 2006, le RSS 2.0 fut introduit (permettant l’agrégation de médias audio et vidéo en plus des photos), l’icône fut progressivement remplacée par celle-ci : F IGURE 44 - B OUTON RSS 2.0 L’icône est encore très souvent suivie du libellé « RSS », « Syndicate » en anglais ou « fil d’info. » sur les sites les plus grand-publics. Elle reprend la couleur orange originale et intègre un symbole graphique. Sur Smashing Magazine74, site dédié au design, le symbole RSS prend une toute autre forme : F IGURE 45 - B OUTON RSS SUR S MASHING M AGAZINE En plus prendre une place bien plus grande que sur la majorité des sites grand-publics, l’icône est détournée, et est accompagné d’une information sur le nombre d’abonnés au flux. Un néophyte ne comprendrait probablement pas de quoi il s’agit mais le site étant dédié aux concepteurs, il peut se permettre d’utiliser un symbole détourné. Un concepteur (mais également un utilisateur chevronné) est à même de reconnaître la fonctionnalité RSS grâce à la couleur majoritaire du symbole et surtout grâce à la « forme d’onde émise » constituant le pictogramme. Aujourd’hui, encore la fonctionnalité de syndication offerte par la majorité des sites dynamiques, n’est utilisée que par 5 à 10 % d’internautes75 et rares sont les sites qui la mettent en avant. Ce que cela implique pour les designers :  Prioriser ou pas la visibilité de l’icône ou du lien en fonction du site et de l’intérêt relatif de la fonction. 74 Un des sites les plus influents dans le design Web (http://www.smashingmagazine.com) 75 Le chiffrage de cette donnée est très approximatif, étant donné que certains les utilisent sans le savoir dans des interfaces telles que iGoogle™, My Yahoo!®, NetVibes®… 74
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web.  Respecter les codes visuels connus associés à la fonction : si certains s’affranchissent de la couleur, d’autres d’affranchissent de la forme d’onde. F IGURE 46 - C ERTAIOS SITEXS PROPOSENT DES ICON ES AU COULEURS POUVA NT D ' ADAPTER A DES CHARTES DE COULEURS VARIEES , CELA NE NUIT PAS A LA LISIBILITE TANT QU E LA FORME D ' ONDE EST UTILISEE .  L’augmentation douce mais constante du nombre d’utilisateurs de ces flux d’information, peut impliquer également que les designers conçoivent un contenu de page agrégeable mais dans la plupart des cas, le contenu est reformaté avant d’être chargé par l’agrégateur puis reformaté par celui-ci, ce qui implique plus souvent des contraintes informatiques que graphiques au niveau de la mise en œuvre du procédé. On est ici dans le cas d’un symbole exclusivement rencontré sur le Web dont la base est une forme d’onde, elle-même déjà connue avant l’ère numérique. Etude de Cas n°2 : Les flèches F IGURE 47 - F LECHE F IGURE 48 - F LECHE F IGURE 49 - F LECHE F IGURE 50 - F LECHE DE F IGURE 51 - F LECHE VERS L '" AVANT " ARRONDIE - I NTRODUITE DIRECTIONNELLE RETOUR - E LLE EST DE T ELECHARGEMENT ( NOTION RELATIVE AVEC LES NAVIGATEURS MULTIPLE - S I SA DIRIGEE A L ' OPPOSE DU – S A FORME ORIENTEE EN ORIENT ET EN W EB , LA FONCTION D ' UN FORME RAPPELLE SENS DE LECTURE ET SA VERS LE BAS , RAPPELLE OCCIDENT ), STYLISEE TEL BOUTON ETAIT DE UNE ROSE DES VENTS FORME SUGGERE UNE EN ANGLAIS LE MOT COMME UN RECHARGER LA PAGE ET TRADITIONNELLE , TRAJECTOIRE DE RETOUR « DOWN », BASE DU BOUTON , AVEC UN DONC L ' INFORMATION . SI ELLE FAIT PARTIE DES EN ARRIERE . L E RETOUR MOT « DOWNLOAD » CERTAIN RELIEF , ELLE ELLE RESTE UTILISEE DANS PREMIERS CODES DES EN ARRIERE EST UNE (T ELECHARGEMENT ). APPELLE LES NAVIGATEURS , ELLE EST IHM ET INDIQUE A ACTION CLEF DU W EB , ELLE EST , LA PLUPART L ’ UTILISATEUR A TRES PRISEE AUJOURD ’ HUI L ’ UTILISATEUR QU ’ IL QUI A ETE PRESENTE DE DU TEMPS EFFECTUER UNE SUR LE W EB POUR METTRE PEUT DEPLACER UNE TOUS TEMPS SUR LES ACCOMPAGNE DU ACTION . SA A JOUR EN 1 CLIC , ELEMENT NAVIGATEURS . SA LIBELLE DE L ’ ITEM COULEUR VERTE , A L ’ INFORMATION D ’ UNE D ’ INTERFACE . COULEUR PEUT TELECHARGEABLE , EGALEMENT UN PAGE . ( SA COULEUR EST ACCROITRE SA VISIBIL ITE MAIS PERMET DE LE SIGNIFIE POSITIF . PLUS GENERALEMENT ET AINSI SA LOCALISER SUR UNE VERTE ) TROUVABILITE . PAGE . Si les flèches sont quasiment les symboles les plus ancestraux qu’il soit, elles sont largement utilisées sur tous types d’IHM. Elles sont particulièrement utiles pour indiquer une direction mais peuvent également constituer des boutons d’actions auquel cas, elles bénéficient d’une stylisation, mixant le code de la forme « flèche » au code informatique des « boutons d’action ». C’est ainsi qu’il existe des milliers de types de flèches sur nos interfaces, certaines cliquables d’autres non. En fonction de 75
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. leurs tailles, de leurs formes, de leur couleur, elles peuvent avoir des signifiés très différents. Observons-en quelques une : Le Widget Youtube® de iGoogle™, affiche sur un total de 16 éléments graphiques, 5 flèches, au design différents et ayant toute une utilité différente. De haut en bas :  Accès au paramétrage du Widget : flèche vers le bas dans la barre de titre.  Flèche d’ouverture d’une boite de liste (code informatique très connu)  Flèche, détournée du pictogramme triangulaire Play des médias audio et vidéo réels.  Flèche de défilement du contenu. En l’occurrence, une séparation avec l’item de contenu pourrait indiquer plus précisément à l’utilisateur que cette flèche appartient à l’interface et non au contenu même. F IGURE 52 - W IDGET Y OUTUBE  Doubles chevrons utilisés comme flèche pour accéder à plus d’information. Dans le « Giga Menu » de Yahoo!, chaque onglet et accompagné d’une flèche chevron horizontale et discrète. Elle indique à l’utilisateur la possibilité d’une interaction. Lorsque le menu s’ouvre, l’onglet est coloré et la flèche reste apparente pour souligner l’interaction en cours. F IGURE 53 – G IGA - MENU YAHOO ! Dans le champ de statut de Facebook™, une flèche orientée vers le bas donne accès à plus d’options de partage. Elle est également surmontée d’un libellé qui n’apparaît que lorsque la souris la survole. F IGURE 54- "M ORE B UTTON " DE FACEBOOK On pourrait probablement écrire une thèse entière sur l’utilisation de flèches dans les IHM, mais nous observons déjà qu’elles sont nombreuses et omniprésentes sur les interfaces Web. Tout comme un humain interagit avec de nombreux objets et apprend/intègre/utilise des codes sémiologiques et des affordances dans le monde réel, un internaute, cherche également des affordances et la flèche a toujours symbolisé une indication. Son utilisation massive passe désormais inaperçue sur les interfaces, tellement elle est commune. Mais comme nous le disions plus haut, l’utilisation d’une flèche de mauvaise couleur ou de mauvaise forme, peut induire l’utilisateur en 76
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. erreur, ne l’amenant pas là ou il le souhaite et réduisant la qualité de son « Experience ». Là encore il s’agit d’une contrainte de la compétence numérique sur le design. Cela n’empêche pas les designers d’inventer toujours de nouvelles flèches, aux couleurs et formes différentes et donc aux affordances différentes, se mariant avec les interfaces graphiques aussi diversifiées qu’il existe de sites Web. Nous pourrions faire des études de cas très poussées sur l’utilisation des pictogrammes Web, mais ce qui compte le plus est de montrer que comme tous les symboles, issus de n’importe quel code, ceux du Web ont leurs signifiés et s’apprennent. Leur apprentissage est progressif, au fil des consultations de sites par les internautes et au fur et à mesure des évolutions informatiques. La difficulté dans la conception de symboles pour l’informatique et particulièrement le Web, vient de leur besoin d’universalité. Les symboles et les couleurs n’ont pas les mêmes signifiés en fonction des cultures. On remarque cependant, qu’en dehors de la Chine, la majorité des pays ont adopté les codes Web basés sur une culture occidentale. Il existe tout de même des particularités, notamment au Japon, en Israël et dans de nombreux pays musulmans où le sens de lecture traditionnel est inversé. Dans certaines campagnes de publicité, dont les publics sont internationaux, des détails sont changés pour adapter la communication aux codes connus ou acceptés de la population. C’est le cas d’une campagne, Air France-KLM : sur l'affiche européenne, une jeune femme est assise sur un ponton, écharpe rouge au vent et pieds nus. En Chine, on a pris soin de lui rajouter des ballerines discrètes pour ménager la pudeur des clients : montrer ses pieds dénudés y est obscène. Les problèmes posés par le respect des codes culturels sont monnaie courante sur le Web et comme nous le voyons au premier chapitre, ces codes sont parfois des raisons suffisantes pour bloquer l’accès à certains sites à une population. Pour une efficacité optimale sur le Web, les designers doivent adapter leur contenu aux conventions culturelles et linguistiques de leurs utilisateurs. C. L A S E MI O T I Q U E WEB Dès les années 2000, Smart, Rice et Wood évoquent le terme de sémiotique Web et parlent du Web comme un média majeur auquel il manque encore des conventions et des standards pour satisfaire le grand public. La sémiologie est l’étude des « signes » ou « textes » (incluent, mots, images, sons, gestes et objets) et l’étude de la façon dont nous créons du sens à partir des « signes » qui nous entourent. La sémiotique implique l’étude de la sémantique (la signification des signes), la syntaxe (les relations entre les signes) et de la pragmatique (l’interprétation faite de l’usage d’un signe). 77
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Les signes du Web que nous avons abordés dans cette étude sont la composition des pages d’une part et l’utilisation de pictogrammes d’autre part. Il s’agit de symboles visuels exclusivement et l’on aurait également pu aborder la typographie qui tire largement ses signifiés de la culture imprimée mais qui possède des règles et limites d’utilisation sur le Web. Son utilisation pourra être faite de façon à améliorer la transmission d’un message à l’utilisateur, elle constitue donc à part entière un code que les designers doivent utiliser de façon optimale. De récentes techniques basées sur du JavaScript et parfois Flash™ permettent de s’affranchir de certaines limites typographiques imposées par le Web mais nuisent à l’accessibilité de l’information sur une page. Comme nous venons de le voir, le Web est parsemé de symboles (et donc de signes visuels) que les utilisateurs apprennent et reconnaissent comme tous les symboles du monde réel. Les symboles visuels et textuels (taxonomies) que nous sommes en mesure de reconnaître sur le Web, forment un champ sémiotique à part entière. Comme tout champ sémiotique, il évolue avec le temps et avec le domaine auquel il est lié, grâce à la largeur de sa diffusion et à l’inventivité de ses concepteurs. Si le marketing, l’informatique et l’IHM imposent leurs contraintes aux designers, il faut bien comprendre également ceci. Lorsqu’un designer créé pour un site très grand public, il se doit d’utiliser des signes connus, des standards même, MAIS il peut se permettre d’introduire un symbole peu connu pour représenter une fonction particulière sur son interface. Les milliers ou millions de visiteurs quotidiens l’adopteront forcément (avec plus ou moins de difficulté). L’apparition d’un symbole rare sur un site possédant un public très large, a toutes les chances de devenir une convention. C’est le cas du pictogramme « like » de Facebook : F IGURE 55 - P ICTOGRAMME DE LA FONCTION "L IKE " SUR F ACEBOOK Cette fonction n’est pas apparue dès le lancement du site. Elle permet à un utilisateur de montrer son approbation à ce qu’un de ses contacts publie. Il reprend la forme de la main bien connue en plongée sous-marine, dans le langage des signes et reconnue comme une convention mondiale qui signifie « tout va bien ». C’est un symbole très positif. Dès son apparition sur le site, les utilisateurs l’ont utilisé sans mode d’emploi, d’abord curieux puis saisissant le principe de la fonction. On note que sur certains sites (dont beaucoup de blogs grand public), ce type de fonction existe depuis longtemps mais n’a jamais été stylisé de la sorte (le style dessin simpliste bleu, « appartenant » à Facebook). Avec ses 300 millions d’utilisateurs ce pictogramme est en passe de devenir une convention, même s’il n’est présent que sur un seul site Web (Le 2e en termes de fréquentation après Google en Octobre 2009 – Source Stratégies/Alexa). De la même manière, les logotypes des sites de partage d’information sont devenus des icones Web, présents sur de nombreux sites tierces, 78
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. permettant de partager l’information lue, en temps réel, vers l’un de ce réseau. Aucun internaute ne les connais tous car personne n’est inscrit sur tous les sites de partage (dont les fonctionnalités se recoupent souvent), mais tous les internautes seront à même de reconnaitre les sites qu’ils fréquentent et ainsi de comprendre comment l’information sera partagée (ou sauvegardée ou agrégée) lorsqu’ils cliqueront sur un des icones. F IGURE 56 - L IENS SOCIAUX SUR LE PORTAIL A UFEMININ . COM Par ailleurs, la non-connaissance de ces signes n’empêche pas l’utilisateur de lire, comprendre, imprimer, copier, envoyer par mail, l’information présentée sur le site. Tous ces signes sont autant d’éléments dont l’utilisation constitue la compétence numérique. Si le marketing, l’informatique et l’IHM ont été présentés comme un cadre de travail, il en va donc de même pour la compétence numérique qui contraint les designers à créer des interfaces dont les signes seront compris par les utilisateurs. Si le marketing, l’informatique et l’IHM ont des spécialistes garants de leur évolution, la compétence numérique et la compétence photo-visuelle en particulier, n’ont pas de moteur en dehors de ce qui est nouvellement créé et diffusé sur le Web76. C’est pour cette raison que nous qualifions précédemment les designers Web de « chevaliers de l’expansion » de cette compétence, tout en soulignant que leur travail est rendu possible par les contraintes et évolutions des autres domaines. C’est grâce à leur action que les codes du Web nous imprègnent et comme le dit Y. Eshet-Alkalaï : « nous permettent de survivre à l’ère du Numérique ». 76 Et évidemment en dehors de cours spécialisés. 79
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. F IGURE 57 - L E DESIGN GRAPHIQUE ET LA COMPETENCE NUMERIQUE , QUELLES INTERACTIONS ? 80
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. C ONCLUSION Lorsque nous nous sommes proposé d’étudier la compétence numérique comme cadre de travail pour le Web, certains n’en voyait pas l’intérêt jugeant que le design Web allait vers une standardisation forcée par des principes d’ergonomie, des obligations marketing et des théories informatiques. Or nous avons démontré que c’est au contraire, ces métiers qui cadrent le travail des designers et évoluent en même temps. Nous avons également montré que la compétence numérique assortie de sa fracture numérique était les seuls freins à des évolutions trop rapides des interfaces. Cependant la croissance prometteuse du nombre de connectés dans le monde et les perspectives offertes par les évolutions informatiques, laissent présager que de plus en plus d’utilisateurs apprendront les codes d’Internet et en deviendront ainsi des utilisateurs avancés ou des concepteurs. Les sites grand public utilisent des conventions et des standards et ils continueront tant que leur cible restera la même. Cela étant, ces pictogrammes seront amenés à évoluer avec les tendances graphiques et avec la compétence numérique elle-même. On pourrait ainsi imaginer le site Yahoo! en 2025, surchargé de pictogrammes aujourd’hui inconnus mais dont tous les internautes connaîtront alors, la fonction. Nous avons expliqué comment les concepteurs ont le pouvoir de repousser les limites de la compétence numérique. Le nombre de concepteurs diplômés ou autodidactes augmente d’années en années. Ils forment une armée à même de faire évoluer les codes, les signifiées et les tendances en créant toujours de nouveaux sites. En effet, Internet, symbole absolu du partage d’information et plate-forme publicitaire prometteuse, ne peut aujourd’hui, qu’accroître sa portée et ainsi favoriser l’adoption de la compétence numérique pour qu’un jour, elle ne soit plus, effectivement, qu’une simple facette de notre compétence d’Homme. Nous avons démontré comment, d’une certaine façon la compétence numérique (photo-visuelle) et le design d’interfaces Web sont deux disciplines interdépendantes. Dans cette étude nous avons surtout abordé la compétence numérique Web, et particulièrement celle qui touche aux sites et aux pages Web. Il aurait été malheureusement trop long de lier cette compétence Web à l’immensité de la compétence informatique et technologique qui la sous-tend. Nous n’avons qu’effleuré l’immense monde des Interfaces homme-machines (numériques), omniprésentes, de la télévision au téléphone portable en passant par n’importe quel réveil matin ou four à micro-ondes. Mais nous avons mis en lumière le passage de certains signes d’une interface à 81
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. l’autre (du navigateur à la page Web pour la flèche arrondie « reload »), de la culture « imprimée » à la culture numérique (l’utilisation de typographies traditionnelles sur le Web) et même de la culture numérique à la culture traditionnelle (mosaïques « Space Invaders » dans les rues des métropoles). Nous aurions également pu nous étendre sur l’adoption des autres compétences dont parle, Y. Eshet-Alkalai comme l’appréhension de l’information numérique ou la compétence socio- émotionnelle numérique et leurs disparités d’adoptions mais nous nous serions éloignés du design graphique. En ce qui concerne le design graphique a proprement parlé, nous avons choisi de l’aborder grâce à des exemples de symboles et de modèles précis car la discipline possède un champ d’expression, seulement limité par la créativité humaine. En aucun cas, tous les types de briefs et toutes les réponses créatives possibles, ne peuvent être étudiés. C’est également la raison pour laquelle il existe peu d’études sur le design graphique. C’est une discipline qui ne présente quasiment que des cas particuliers, entièrement dépendants d’une époque, d’une marque, d’un designer, d’un pays, d’un budget… ! Cette étude a mis en relation, le design graphique Web, avec le fait social qu’est la compétence numérique. Or nous avons vu que le design graphique Web est très lié aux métiers de l’informatique, des IHM et du marketing. Il serait intéressant de pousser cette étude pour décrypter de quelle façon la compétence numérique influe également sur ces autres métiers. Il est probable que nous trouvions des résultats semblables ou se rapprochant de ceux de cette étude car la compétence numérique limite les autres disciplines également et se nourrit également de leurs inventions. Par ailleurs, si nous avons dit que les designers Web étaient les chevaliers de l’expansion de la compétence numérique, il faut reconnaître que les formateurs en informatiques, les prescripteurs et les états, jouent un rôle clé dans la constante diffusion de la compétence numérique. En effet, si l’expansion de cette dernière est garantie par la horde de concepteurs (graphistes et développeurs) en termes de qualité et de quantité, les principaux vecteurs de son expansion géographique et sociale restent les actions étatiques entreprises comme les programmes d’e- Learning à grande échelle et d’expansion des structures réticulaires, permettant l’accès au réseau par une population toujours plus grande. 82
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. T ABLE DES ILLUSTRATIO NS Figure 1 - Evolution du nombre d'utilisateurs d'Internet pour 100 habitants sur la période 1997-2007. ................................................................................................................................................................. 6 Figure 2 - Taux de pénétration d'Internet en Afrique Q2-2009 ............................................................ 16 Figure 3 – Part d'internautes Africains Q2-2009 .................................................................................. 16 Figure 4 - Pénétration du téléphone portable au Botswana................................................................. 17 Figure 5 - L'opportunité numérique en Afrique (2006) ......................................................................... 18 Figure 6 – Taux de pénétration d’Internet dans le monde ................................................................... 24 Figure 7 – Indice de développement humain dans le monde ............................................................... 24 Figure 8 – parts d’hommes et de femmes sur les réseaux sociaux numériques en 2009 .................... 25 Figure 9 - Acquisition de compétences informatiques.......................................................................... 29 Figure 10- Wang 1200 - Premier traitement de texte personnel (30k$ en 1978)................................. 32 Figure 11 - 1977 - Apple II - Processeur Motorola 6502@1MHz - Jusqu'à 16 couleurs @ 40x48px ..... 32 Figure 12 - 1981 - The original IBM PC (Model 5150) – Processeur Intel 8088 @ 4.77MHz – Ram 16Ko – 2 lecteurs 5¼ 160Ko............................................................................................................................ 32 Figure 13 - 1994 - Brother WP-1400 – Traitement de texte « moderne » ............................................ 32 Figure 14- Time magazine- Janvier 1983 ............................................................................................... 33 Figure 15 – Atari Pong (borne d’arcade en 1973 - version familiale en 1975) .................................... 34 Figure 16 – 1976 – Atari Breakout – le premier « casse-briques » ....................................................... 34 Figure 17 - Space Invaders (borne d’arcade en 1978 - version familiale en 1985) .............................. 34 Figure 18 - Comparaison entre l’illustration de l’emballage du jeu Prince of Persia sur Amstrad et le graphisme réel du jeu. ........................................................................................................................... 34 Figure 19 - Comparaison similaire pour le jeu Barbarian sorti en 1986. On note également que le marketing du jeu vidéo est orienté vers le public masculin, utilisant les codes des films d’action tel que Conan le barbare et les bandes dessinées de Jean-Claude Forest................................................. 35 Figure 20 - T-shirt Vintage Atari - 2003 ................................................................................................. 36 Figure 21 - Logo WESC 1999 .................................................................................................................. 36 Figure 22 - Couvertures de livres au motif Pixel Art - 2005 .................................................................. 36 Figure 23 - Le célèbre projet Space Invaders, les personnages du jeu vidéo mythique sont reproduits sur les murs du monde entier en mosaïque traditionnelle. .................................................................. 36 Figure 24 - Sac à main réalisé à partir de touches de clavier - 2005. .................................................... 36 Figure 25 - Comparaison des contrôles des lecteurs cassettes et Disques compact - Il est intéressant de constater que ces symboles vieux de 50 ans, sont toujours utilisés pour contrôler la lecture de medias audio et vidéos, tant dans le monde réel, sur des appareils physiques, que sur des interfaces informatiques et/ou Web...................................................................................................................... 38 83
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Figure 26- La roue de lecture de Nicolas Grollier de Servière ............................................................... 39 Figure 27 –1999 - Interface de napster, premier logiciel de Peer-To-Peer, une simple recherche de titre d’artiste ou de morceau, renvoyait à des centaines de résultats téléchargeables d’un double- clique. .................................................................................................................................................... 45 Figure 28- Client FTP – Si le logiciel présente ici les fichier du client et ceux du serveur en face à face, permettant à l’utilisateur connecté de transférer des fichiers de l’un à l’autre, au début des années 90, ces transferts se faisaient en tapant des commandes au clavier. ................................................... 46 Figure 29 - http://deadline.aegis-corp.org/main.php Deadline propose une interface Web simulant un BBS, disparus depuis près de 20 ans. ............................................................................................... 46 Figure 30 - Répartition des blogueurs par continent ............................................................................ 47 Figure 31 - Répartition des blogs par types........................................................................................... 47 Figure 32 - Nuage de tags ...................................................................................................................... 48 Figure 33 - Sur ce site, un message apparait en bas à droite de la page, reprenant le type d'affichage des nouveaux messages sur certains logiciels de messagerie instantanée. Ce message est celui d'une charmante jeune femme inconnue, qui aguiche l’internaute naïf. Un clic sur ce message peut avoir des conséquences indésirables pour l’utilisateur. Pourtant le contenant du message comporte un bouton permettant apparemment de le masquer. Il n’est que simulé. .............................................. 51 Figure 34 - Cette bannière-ci est un double piège. Il s'agit réellement d'une bannière publicitaire honnête. Or le design choisi est celui des boites de dialogues du Système d'exploitation Windows (ou y ressemble fortement). Généralement, les pirates se servent de ce genre de codes visuels pour berner les utilisateurs débutants qui pensent y voir un message important de leur système d’exploitation. Les utilisateurs avertis, savent que ce type de boite de dialogue n’apparait pas sur une page Web et l’ignorent. Ceci a pour effet, d’attirer vers l’annonce, une population néophyte en informatique. (il s’agit d’une offre d’emploi)… ..................................................................................... 51 Figure 35 - « Literacies » (Compétences) Comme nous l’expliquions dans la définition de la compétence numérique, il est envisageable, qu’elle soit un jour, partie intégrante de la Compétence traditionnelle. ........................................................................................................................................ 52 Figure 36 - Page d'accueil de Web Designers Depot (2009)– Un savanst mélange de superposition d’images pour habiller une structure Web en divisions, tout en basant la construction du site sur une grille. ...................................................................................................................................................... 64 Figure 37 - Yahoo.com (Octobre 1996) ................................................................................................. 67 Figure 38 - Yahoo.com (Octobre 1999) ................................................................................................. 67 Figure 39 - Yahoo.com (mai 2004) ........................................................................................................ 67 Figure 40 - Yahoo.com (Octobre 2009) ................................................................................................. 67 Figure 41 - Page d'accueil du moteur de recherche Google ................................................................ 70 Figure 42 - Evolutions des icones du système d'exploitation Microsoft™ Windows® .......................... 72 Figure 43 - bouton permettant d'ajouter le flux RSS d'un site à un agrégateur (2004) ........................ 74 Figure 44 - Bouton RSS 2.0 .................................................................................................................... 74 84
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Figure 45 - Bouton RSS sur Smashing Magazine ................................................................................... 74 Figure 46 - Certaiôs sitexs proposent des icones au couleurs pouvant d'adapter à des chartes de couleurs variées, cela ne nuit pas à la lisibilité tant que la forme d'onde est utilisée. ......................... 75 Figure 47 - Flèche vers l'"avant" (notion relative en orient et en occident), stylisée comme un bouton, avec un certain relief, elle appelle l’utilisateur à effectuer une action. Sa couleur verte, a également un signifié positif. .................................................................................................................................. 75 Figure 48 - Fleche arrondie - Introduite avec les navigateurs Web, la fonction d'un tel bouton était de recharger la page et donc l'information. Si elle reste utilisée dans les navigateurs, elle est très prisée aujourd’hui sur le Web pour mettre à jour en 1 clic, l’information d’une page. (sa couleur est plus généralement verte).............................................................................................................................. 75 Figure 49 - Fleche directionnelle multiple - Si sa forme rappelle une rose des vents traditionnelle, elle fait partie des premiers codes des IHM et indique à l’utilisateur qu’il peut déplacer une élément d’interface. ............................................................................................................................................ 75 Figure 50 - Flèche de retour - Elle est dirigée à l'opposé du sens de lecture et sa forme suggère une trajectoire de retour en arrière. Le retour en arrière est une action clef du Web, qui a été présente de tous temps sur les navigateurs. sa couleur peut accroitre sa visibilité et ainsi sa trouvabilité. ..... 75 Figure 51 - Flèche de Téléchargement – Sa forme orientée vers le bas, rappelle en anglais le mot « down », base du mot « download » (Téléchargement). elle est, la plupart du temps accompagné du libellé de l’item téléchargeable, mais permet de le localiser sur une page. ......................................... 75 Figure 52 - Widget Youtube................................................................................................................... 76 Figure 53 – Giga-menu yahoo! .............................................................................................................. 76 Figure 54- "More Button" de facebook ................................................................................................. 76 Figure 55 - Pictogramme de la fonction "Like" sur Facebook ............................................................... 78 Figure 56 - Liens sociaux sur le portail Aufeminin.com ......................................................................... 79 Figure 57 - Le design graphique et la compétence numérique, quelles interactions ? ........................ 80 B IBLIOGRAPHIE « Affordances, Conventions and Design ». A.Norman, Donald. 1999. 1999. Amiri, Pr. Sharam. 2008. Blueprint for social-economic growth in developing nations. Deland, FL : Stetson University, 2008. Besson, Eric. 2008. La république numérique. Paris : Grasset & Fasquelle, 2008. 978-2-246-74801-4. Bigot, Régis et Croutte, Patricia. 2008. La diffusion des technologies de l'information et de la communication dans la société française. Paris : s.n., 2008. Rapport réalisé à la demande du Conseil 85
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Général des Technologies de l’Information (Ministère de l’Economie, des Finances et de l’Emploi) et de l’Autorité de Régulation des Communications Electroniques et des Postes. Bo, Daniel. 2006. Internet, le media logiciel. [En ligne] 30 Novembre 2006. http://www.tech.youvox.fr/Internet-le-media-logiciel.html. Boucher, Amélie. 2009. Ergonomie Web : Pour des sites Web efficaces. Paris : Eyrolles, 2009. 978-2- 212-12479-8. Buread, Annick et Magnan, Nathalie. 2002. Connexions art réseaux média. Paris : Ecole nationale supérieure des beaux-arts, 2002. 2-84056-079-8. Bush, Vannevat. 1945. As we may think. The Atlantic Monthly. 1945, 176, pp. 101-108. http://www.theatlantic.com/unbound/flashbks/computer/bushf.htm. Chapman, Camerno. 2009. The history and evolution of social media. Web Designer depot. [En ligne] 7 Octobre 2009. http://www.webdesignerdepot.com/2009/10/the-history-and-evolution-of-social- media/. Clinton, Bill. 1996. Between Hope and History. 1996. Cooper, Joel. 2006. The digital divide: The special case of gender. Journal of Computer Assisted Learning. 2006. Doueihi, Milad. 2007. La grande conversion numérique. Paris : Librairie du XXIe siècle - Seuil, 2007. Englebart, Douglas. 1962. A conceptual framework for the augmentation of man’s intellect. *auteur du livre] P.W. Hawerton et D.C. Weeks. Vistas in information handling, Volume I: The augmentation of man’s intellect by machine. Washington DC : Spartan Books, 1962. http://www.bootstrap.org/augment/AUGMENT/133182-0.html. Eshet-Alkalai, Yoram. 2004. Digital Literacy: A Conceptual Framework for Survival. Open University Israel. [En ligne] 2004. http://www.openu.ac.il/Personal_sites/download/Digital-literacy2004- JEMH.pdf. Gibson, J. J. 1979. The Ecological Approach to Visual Perception. Boston : Houghton Mifflin, 1979. —. 1977. The Theory of Affordances.”. *auteur du livre+ R. E. Shaw & J. Bransford. Perceiving, Acting, and Knowing. Hillsdale, NJ : Lawrence Erlbaum Associates, 1977. Gilster, Paul. 1997. Digital Literacy. New York : Wiley and Computer Publishing, 1997. Governement Of New Zealand. 2008. Digital Strategy Glossary of Key Terms. Digital Strategy - Governement Of New Zealand. [En ligne] 2008. http://www.digitalstrategy.govt.nz/Media- Centre/Glossary-of-Key-Terms/. Graff, H. 1995. The labyrinths of literacy. Pittsburgh : University of Pittsburgh Press, 1995. 86
    • La compétence numérique, cadre de travail évolutif pour le design d’interfaces Web. Hokstad, Leif M. et Dons, Carl F. 2008. Digital literacy – towards a re description of literacy. Austria : s.n., 2008. Paper presented at the Conference Interactive Computer Aided. Jones-Kavalier, Barbara R. et Kannigan, Suzanne L. 2006. Connecting the Digital Dots: Literacy of the 21st Century. Educause Quarterly. [En ligne] 2 November 2006. http://connect.educause.edu/Library/EDUCAUSE+Quarterly/ConnectingtheDigitalDotsL/39969. Karl L. Smart, Judy Cossel Rice, Larry E. Wood. 2000. Meeting the needs of users: toward a semiotics of the web. Piscataway, NJ : IEEE Educational Activities Department, 2000. ISBN:0-7803-6431-7 . Krug, Steve. 2006. Don't make me think : A common sense approach to Web usablity. s.l. : New Riders Publishing, 2006. 2744020303 . Licklider, J.C.R. & Vezza, A. 1978. Applications of Information Networks. Proceedings of the IEEE. 1978. Liff, S. & Shepherd, A.. 2004. An evolving gender digital divide? Oxford Internet Institute Issue Brief. 2004, 2. Luke, A. & Luke, C. A. 2001. dolescence lost/childhood regained: On early intervention and the emergence of the techno-subject. Journal of early childhood literacy. 2001, 1, pp. 91-120. Martin, Allan et Grudziecki, Jan. 2007. DigEuLit : Concepts and tools for digital literacy development. 2007. Scott, Bill et Neil, Theresa. 2009. Designing Web Interfaces. Sebastopol, CA : O'Reilly, 2009. 978-0- 596-51625-3. Tyner, Kathleen. 1998. Literacy in a Digital World: Teaching and Learning in the Age of Information. New Jersey : s.n., 1998. Volckaert-Legrier, Olga et Bernicot, Josie. 2006. Le courrier électronique : un nouveau registre de la langue française ? Poitiers : CNRS, 2006. 87