Antoine BRISSET

Master 1, Mention ICD (Spcialit : Sciences de lInformation et du Document)

mem_00430584, version 1 - 9 Nov 2009

MEMOIRE DE STAGE Mission effectue du 14 avril au 19 juin 2009

au Muse de lhtel Sandelin Saint-Omer

Mise en place dun site dynamique pour optimiser la communication web dun tablissement musal

Sous la direction de : Mme S. VALLIN M. L. BARBE

Soutenu le 29 juin 2009 lUFR I.D.I.S.T. Universit Charles de Gaulle, Lille 3 (Campus Pont de Bois) BP 60 149, 59653 Villeneuve dAscq Cedex

Anne universitaire 2008/2009

Remerciements

Avant dentamer la rdaction de ce mmoire, je tiens remercier lensemble du personnel du muse de lhtel Sandelin, pour son accueil et son aimable participation ce projet. En particulier, Delphine Adams, Dany Clairet, Laura Levque et Margaretta RenauxPot, pour laide et le soutien quelles mont fournis, Jean-Pierre Duwiquet, pour sa bonne humeur, et Gisle Lenne pour son savoureux caf.

Je remercie le service informatique de la ville de Saint-Omer pour mavoir guid dans les aspects techniques de la mise en ligne du site. mem_00430584, version 1 - 9 Nov 2009

Mon attention se tourne galement vers M. Barbe, qui a suivi le projet en tant que tuteur universitaire, et vers Mme Vallin, tutrice de stage, qui a fait preuve dcoute et de disponibilit.

Mes remerciements sadressent enfin mes proches, qui ont uvr pour que ce mmoire soit rdig dans les meilleures conditions.

TABLE DES MATIERES Introduction p. 5

1. Etat des lieux et dfinition de la mission

1.1. Le muse de lhtel Sandelin : entre intimit et ouverture sur lextrieur
1.1.1. Le silence des collections et le va-et-vient des amnagements 1.1.2. Activits, vnements et services proposs au public 1.1.3. Personnel et stratgie de communication 1.1.3.1. Le personnel du muse 1.1.3.2. Les partenaires du muse 1.1.3.3. Le muse lre de lInternet grand public

p. 7
p. 7
p. 7 p. 10 p. 13 p. 13 p. 14 p. 15

mem_00430584, version 1 - 9 Nov 2009

1.2. Lexpression des besoins : un site vitrine, dynamique et attractif

1.2.1. Nature du site et fonctionnalits attendues 1.2.2. Les objectifs du site 1.2.2.1. Promotion de ltablissement et gains de notorit 1.2.2.2. Valorisation du fond et ouverture au public 1.2.2.3. Fidlisation des utilisateurs et prennit du site 1.2.3. Identification de la cible : un site tout public

p. 16
p. 17 p. 19 p. 19 p. 19 p. 20 p. 20

1.3. Le plan projet, ou comment rpondre aux besoins

1.3.1. Exigences et choix de loutil : la solution Joomla 1.3.2. Les contraintes de mise en uvre du projet 1.3.2.1. Dlais et budget 1.3.2.2. Les contraintes techniques 1.3.2.3. Les contraintes juridiques 1.3.3. Estimation des charges complmentaires

p. 22
p. 22 p. 24 p. 24 p. 24 p. 25 p. 26

2. Une conception oriente usagers : vers lutilisabilit du site

2.1. Lergonomie cognitive : optimiser linterface homme/machine
2.1.1. Les fondements de cette science 2.1.2. Une conception centre utilisateur 2.1.3. Les critres ergonomiques

p. 28
p. 28
p. 28 p. 29 p. 29

2.2. Un systme de navigation intuitif

2.2.1. Arborescence du site et trame des pages 2.2.2. Les lments de navigation : menu, liens et boutons 2.2.2.1. Le menu 2.2.2.2. Les liens 2.2.2.3. Les boutons 2.2.3. Orienter lutilisateur : plan de site et chemin de progression

p. 30
p. 31 p. 35 p. 35 p. 36 p. 38 p. 38

2.3. Lapparence visuelle du site : sobrit et lisibilit

2.3.1. La charte graphique 2.3.2. Images et animations 2.3.3. La mise en forme du contenu 2.3.3.1. La lisibilit visuelle

p. 39
p. 39 p. 41 p. 42 p. 42 p. 43

mem_00430584, version 1 - 9 Nov 2009

2.3.3.2. La lisibilit cognitive

3. Optimiser la communication web : les spcificits du muse

3.1. Une mdiation culturelle pour tous : vers laccessibilit du site
3.1.1. Laccessibilit : une obligation lgale 3.1.2. Laccessibilit visuelle 3.1.3. Laccessibilit technique

p. 45
p. 45
p. 45 p. 46 p. 47

3.2. Sduire les visiteurs : pour une page web attractive

3.2.1. Lesthtique du site : pour se dmarquer 3.2.2. Un site interactif : faire participer linternaute 3.2.3. Fidliser les utilisateurs : optimiser la gestion de contenus

p. 50
p. 50 p. 51 p. 53

3.3. Rfrencer et promouvoir le site : pour une meilleure visibilit sur le web
3.3.1. Etre identifiable sur le web 3.3.2. Renseigner les balises meta et optimiser les pages 3.3.3. Promouvoir le site : une stratgie marketing

p. 54
p. 54 p. 55 p. 57

Conclusion Bibliographie Annexes

p. 59 p. 60 p. 62

Introduction
Afin de mettre en pratique les connaissances accumules lors de la premire anne de Master ICD1 luniversit de Lille3 Charles de Gaulle, il nous a t demand deffectuer un stage en entreprise, dune dure de six semaines au minimum. Cette immersion dans la vie active avait pour objectif de faire dcouvrir aux tudiants le cadre dans lequel ils seront amens travailler et de les aiguiser la conduite dun projet, en situation dautonomie plus ou moins prononce. LUFR IDIST2, dans laquelle est dispense cette formation, a en effet pour vocation de faciliter linsertion des futurs diplms dans la sphre professionnelle, en loccurrence dans le secteur de linfo-doc. Etant donn le caractre stratgique de la matrise de linformation lheure actuelle, la recherche de stage ne sest pas borne une branche mem_00430584, version 1 - 9 Nov 2009 professionnelle en particulier.

Ainsi, jai t accueilli en tant que stagiaire au muse de lhtel Sandelin de SaintOmer, du 14 avril au 20 juin 2009. Mon volume horaire tait de trente-cinq heures par semaine. La mission qui ma t confie a t de mettre en ligne un nouveau site Internet, afin de combler le vide laiss par la suppression de lancien site, abandonn a u dbut de lanne 2008. Le souhait du personnel tait de disposer dun site vitrine, dynamique, stable, simple mettre jour et engendrant un plus fort trafic que son prdcesseur. Lintention du muse tait galement de rompre avec limage poussireuse que les organisations musales vhiculent parfois et ainsi de donner envie diffrents profils dinternautes de se rendre rgulirement sur le site. Par ailleurs, il sagissait de donner au site web lenvergure dun vritable outil de communication, accessible au grand public et support de la diffusion des actualits de lorganisation. Mon projet, en somme, se rsumait au dveloppement dun site web, depuis sa conception jusqu son hbergement et sa mise en ligne, en veillant le rendre attractif et ergonomique.

Pour mener bien ce projet, il a donc t ncessaire de sinterroger sur la stratgie de communication mettre en place afin de rencontrer le public vis. Aujourdhui, un projet Internet russi se mesure la prennit du site mis en ligne, qui dcoule directement de sa
1 2

ICD : Information Communication Documentation IDIST : Information Communication Documentation Information Scientifique et Technique

frquentation. Notre dmarche sera donc danalyser quels sont les paramtres prendre en compte pour optimiser la communication web du muse. En dautres termes, comment dvelopper le site dans le sens dun change avec le public et dans le respect des objectifs actuels de dmocratisation du savoir? Comment le rendre dynamique et attractif? Par ailleurs, quelles sont les exigences respecter en matire daccessibilit?

Pour y rpondre, il conviendra tout dabord de dresser un bref tat des lieux et de dfinir plus prcisment la mission du stage. Lanalyse des besoins et le cahier des charges seront ainsi voqus dans cette partie. Puis, nous verrons comment a t faonne lergonomie du site, cest--dire la navigation lintrieur de celui-ci et les choix oprs en matire de design. Enfin, nous analyserons de plus prs les stratgies mises en uvre afin de mem_00430584, version 1 - 9 Nov 2009 dynamiser limpact communicationnel du muse sur la toile, au travers notamment du rfrencement.

1. Etat des lieux et dfinition de la mission

Tout dabord, il convient de prsenter lorganisme dans lequel ce stage sest droul : le muse de lhtel Sandelin de Saint-Omer.

1.1. Le muse de lhtel Sandelin : entre intimit et ouverture sur lextrieur

Voyons ici ce qui fait la singularit du muse, au travers dune prsentation de ldifice et des collections quil recle. Revenons galement sur la politique damnagement du muse depuis son ouverture. mem_00430584, version 1 - 9 Nov 2009

1.1.1. Le silence des collections et le va-et-vient des amnagements

Le muse de lhtel Sandelin se situe dans le centre-ville de Saint-Omer. Cest lun des deux muses que compte la ville, avec le muse Henri Dupuis, actuellement en rnovation . Il accueille chaque anne entre dix mille et douze mille visiteurs et est class muse de France. Le muse Sandelin a t amnag dans lancienne rsidence de la comtesse de Fruges , Marie-Josphe Sandelin, qui y rsidait sous le rgne de Louis XVI. Il compte parmi les plus beaux tmoignages architecturaux du XVIIIme sicle du nord de la France. En effet, le btiment a t construit entre cour et jardin, dans lesprit des htels parisiens, alors en vogue. Il se compose dun pavillon central, orn de pavs, et de deux ailes alentours. Le jeu des courbes et des contre-courbes, accentu par le galbe des balcons et par les pots feu qui trnent sur le portail dentre, suggre le raffinement de lpoque de Louis XV, et tranche donc avec le style Louis XVI.

La fondation du muse date de 1829, elle revient la Socit dagriculture de SaintOmer. Sil avait dabord vocation faire office de museum, ltablissement musal a rapidement chang de cap , notamment suite la destruction de labbaye de Saint-Bertin, lorsque les ruines de ldifice sont entres dans les collections du muse. Puis, diffrentes fouilles archologiques ont aliment le fonds : vestiges dabbatiales, dglises et de cathdrales, provenant de Saint-Omer ou des alentours, armes anciennes, monnaies,

cramiques grecques, etc. Des donations et des legs sont galement venus complter cet ensemble, comme, par exemple, les pipes de Louis Eugne dHerbcourt, dernier fabricant de pipes de la rgion audomaroise, ou encore les collections de faence et de porcelaine dHenri Dupuis, grand lgataire du muse. Pour faire face cet accroissement, le muse, alors install dans lancien baillage de la ville, a du changer demplacement. Cest dans cette perspective que lhtel Sandelin a t achet par la ville en 1899. Le muse a alors ouvert ses portes aux visiteurs en 1904.

Le muse a fait lobjet damnagements et de chantiers de restauration successifs. Tout dabord en 1925, puis en 1950 et 1960 o des travaux ont vis sparer clairement les deux muses de la ville : au muse Henri Dupuis revenaient les collections doiseaux mem_00430584, version 1 - 9 Nov 2009 naturaliss et tout ce qui se rattachait lhistoire naturelle ; au muse de lhtel Sandelin revenaient les objets dart, le mobilier et les faences. Le dernier chantier en date sest achev en 2004, aprs 5 ans de travail. Ce chantier a t financ par le Ministre de la Culture, la Direction rgionale des affaires culturelles du Nord - Pas-de-Calais, le Conseil rgional Nord - Pas-de-Calais, la Communaut d'Agglomration de Saint-Omer, et la Ville de Saint-Omer, pour un budget qui reprsente 4 150 000 euros. Le travail de restauration a port essentiellement sur la faade de lhtel et sur les boiseries des trois salons, classs Monuments Historiques. Lintrieur a galement t refait neuf : hall dentre, salles dexpositions. Un nouveau parquet a t install et les espaces intrieurs ont t rorganiss pour en permettre laccs aux personnes handicapes. Par ailleurs, les collections ont elles aussi bnfici dune restauration, le traitement constituant essentiellement en une dsinsectisation. Au terme de tous ces efforts, une nouvelle musographie sest mise en place, servie par ltablissement de trois parcours de visite, sur trois niveaux : beaux-arts, cramique et histoire. Chaque salle a t agrmente de panneaux et de fiches explicatives, facilitant ainsi lappropriation des uvres par les visiteurs. De plus, une slection duvres qui tait jusqualors en rserve a t transfre dans les salles dexpositions.

Le parcours beaux-arts est consacr aux chefs duvres de la peinture europenne des XVIme, XVIIme et XVIIIme sicles. Ces tableaux de matres sont entreposs dans des salons dapparat et des cabinets damateurs, entrant ainsi en rsonnance avec la vocation premire du lieu. Des meubles flamands viennent complter le dcor. Le parcours

cramique rassemble une impressionnante collection de cramiques, lune des plus rputes parmi les muses franais. Elle comprend quatre mille objets de faence et de porcelaine europenne, quatre cent porcelaines dExtrme-Orient et deux cent cinquante grs et terres vernisss. Enfin, le parcours histoire est un hymne la richesse du pass architectural et religieux de la cit audomaroise. Le visiteur peut en effet y dcouvrir des vestiges de labbaye de Saint Bertin, de la collgiale Notre Dame, et des glises de la ville. Il sagit en outre de lapidaires mdivaux, de chapiteaux, de mosaques, de monnaies, de sceaux ou encore de mdailles. De plus, dans les caves du muse, on peut admirer les armes destoc et les armes feu, retrouves par hasard dans le canal de lAa ou dans les fortifications, ou encore lgues par des contributeurs audomarois. Enfin, il nest pas inutile de citer les pipes en terres cuites, issues des anciennes manufactures Dumril-Leurs et Fiolet, qui illustrent le mem_00430584, version 1 - 9 Nov 2009 pass industriel de la cit audomaroise.

Les collections du muse tmoignent donc dune richesse remarquable. Plus de trois mille uvres sont exposes, dispatches entre les trois parcours de visite et rparties dans vingt et une salles de visite, auxquelles il faut ajouter une salle dexposition temporaire . Lensemble couvrant une surface de mille mtres carr. Les collections se distinguent par leur grande diversit: cramique, albtre, objets archologiques, lapidaire mdival, poterie mdivale, sceaux et mdailles, orfvrerie, ferronnerie, armement, etc. Le fleuron de la collection est constitu par les tableaux, qui couvrent un segment temporel allant du XVme sicle au XIXme sicle. Citons comme uvres majeures Lexcision de la pierre de Folie de Pieter Bruegel (voir figure 1) ou encore Les Sirnes de Lon Belly, qui est expose au niveau de lescalier dhonneur du muse. Ct art religieux, citons le remarquable Pied de Croix de Saint Bertin.

fig1. Lexcision de la pierre de Folie

Par ailleurs, il est noter que certaines uvres parcourent le monde, par le biais du systme de prt duvres . Ainsi, lheure actuelle, le Concert Improvis de LouisLopold Boilly se trouve au muse dpartemental de l'abbaye de Saint-Riquier (80), dans le

cadre de lexposition voir la musique . De mme, les Quatre Aptres en albtre seront exposs au Louvre lors de lexposition Les premiers retables , du 8 avril au 7 juillet 2009.

1.2.2. Activits, vnements et services proposs au public

Le muse est ouvert aux visiteurs du mercredi au dimanche, de 10h 12h et de 14h 18h. Il est ferm le lundi, le mardi et pendant les jours fris. Le muse offre aux visiteurs diffrentes occasions de dcouvrir les collections. La typologie des visites est en effet assez large, pour sadapter aux gots et aux envies de chacun.

Tout dabord, ce sont les visites thmatiques du dimanche. L encore, plusieurs mem_00430584, version 1 - 9 Nov 2009 formules de visite existent :

Visites accompagnes : ce sont des visites qui permettent dchanger, dapporter un regard critique sur les collections, en prsence dun guide. Visites contes : elles permettent dclairer les collections au travers de rcits historiques, dispenss par un guide la manire dun conte. Visites illustres : elles permettent dclairer sous un jour nouveau la richesse des collections du muse au travers de dmonstrations et de projections. Visites patrimoines et muse : elles sont organises avec le soutien du service Ville dArts et dHistoire et sattachent mettre en valeur le patrimoine audomarois.

Par ailleurs, le muse organise des matines-musique et des rencontres autour dune uvre . Les matines-musique ont lieu le samedi et donnent loccasion au visiteur de dcrypter les uvres dans une ambiance musicale. Les rencontres autour dune uvre sont des rendez-vous mensuels qui mettent laccent sur les uvres ayant fait lobjet dun prt ou dune exposition temporaire hors les murs. Elles permettent donc dapprofondir la relation du public une uvre particulire. De plus, des confrences pour les adultes sont organises par les Amis du muse, une association qui travaille en collaboration avec le muse de lhtel Sandelin et qui est active dans lanimation culturelle de la ville. Ces confrences se tiennent dans une salle en dehors du muse, et traitent de sujets rattachs aux expositions qui se droulent en France et dans le Nord-Pas-de-Calais.

10

Pour les enfants, les activits ne manquent pas. Au travers dactivits ludiques, de cration ou de sculpture, ils se confrontent aux collections du muse. Deux rendez-vous leur sont exclusivement consacrs :

Les ateliers : ils sont organiss le mercredi, le jeudi ou le vendredi et sont rservs aux 6-12 ans. Chaque atelier est centr sur un thme particulier, comme les blasons, les sceaux, etc. Par exemple pour le mois davril, les ateliers sintitulaient De dos, de face et Sasseoiroui mais sur quoi? . Ces ateliers visent dvelopper la sensibilit des plus petits aux uvres du muse, en les confrontant la pratique artistique.

mem_00430584, version 1 - 9 Nov 2009

Contes et comtesse : il sagit de visites costumes qui ont lieu un samedi par mois. Elles sont accessibles aux enfants partir de six ans. Ces visites se dclinent selon deux prestations : La visite au conte : il sagit de prsenter aux enfants quelques uvres choisies et, au travers de celles-ci, de glisser des petites histoires dans la trame de la grande Histoire, afin de les captiver davantage. Les rendez-vous de la comtesse : une guide-confrencire, dguise en comtesse, reoit les enfants lheure du goter et sentretient avec eux du pass des lieux et des transformations actuelles de la socit.

Voici un tableau rcapitulatif de la programmation du muse de lhtel Sandelin.

Automne-Hiver 2008/2009 Public Adulte/enfant Type d'activit visites thmatiques Crneau dimanche 15h30 mercredi, jeudi, vendredi toute la journe (10h-12h et 14h - 16h) Tarifs 2 / 1 + droit d'entre 14 / journe

Enfants 6/12 ans

ateliers

Adulte

confrences

11

Printemps-Et 2009 Public Adulte/enfant Adulte/enfant Adulte/enfant

enfants 6/12 ans

Type d'activit visites thmatiques rencontre autour d'une uvre matines-musique ateliers

Remarques gnrales dimanche 15h30 (1h15) ; tous les dimanches jeudi 18h30 (1h15) ; environ 1 jeudi / mois samedi 11h (1h15) mercredi, jeudi, vendredi toute la journe (10h-12h et 14h-16h) ; 2h
samedi 14h30 (1h15); environ 1 fois / 2 mois samedi 14h30 (1h15); environ 1 fois / 2 mois

Tarifs 2 / 1 + droit d'entre

gratuit 7 ou 5 / journe
gratuit gratuit

enfants ds 6 ans enfants ds 6 ans

rendez-vous de la comtesse la visite au conte

mem_00430584, version 1 - 9 Nov 2009

Enfin, le muse organise diffrents vnements et rendez-vous ; pour la saison printemps/t 2009, la programmation incluait :

Les journes Eurorgionales des Villes fortifies : cest une manifestation nationale qui a eu lieu les samedi 25 et dimanche 26 avril. Au muse Sandelin, ces journes ont permis de mettre en avant le pass de place forte de la ville de Saint-Omer, et ainsi de mettre lhonneur la collection darmes blanches et feu du XIIme au XVIIIme sicle, exposes au sous-sol du muse.

La nuit des muses : il sagit dun vnement national qui a eu lieu le 16 mai, de 19h 23h. En ce qui concerne le muse Sandelin, le thme de la soire tait Nocturnes et clairs de lune . Au fil de la soire, les visiteurs ont ainsi pu dcouvrir gratuitement les collections, entre deux interludes musicaux. Des joueurs de flte traversire, de violon et de guitare, du Conservatoire Rayonnement Dpartemental de Saint-Omer, taient prsents pour donner un cho tantt baroque, tantt contemporain, aux uvres du muse. Par ailleurs, un guide-confrencier dambulait

12

dans les salles et tait la disposition des visiteurs dsireux dobtenir un clairage sur certaines uvres.

Rendez-vous aux jardins : cest un vnement national soutenu par le Ministre de la Culture. Au muse de lhtel Sandelin, il a t organis en collaboration avec lIME de Longuenesse et la classe de CP de lcole Michelet. Il sest droul dans le jardin du muse, les 6 et 7 juin. Des lves de Saint-Omer et de Longuenesse ont cr un parcours des sens au sein du jardin en sinspirant des peintures prsentes dans les salles, et notamment des natures mortes. Ce projet, intitul Jardin des cinq sens , sest prolong le dimanche par une visite illustre, permettant de passer en revue les uvres et les artistes emblmatiques de ce genre pictural.

mem_00430584, version 1 - 9 Nov 2009

Ct cour ; ct jardin : il sagit dun concert qui aura lieu le samedi 29 aot. Pour ce rendez-vous annuel, cest un pianiste de renomme internationale, Jean-Michel Dayez, qui se produira dans la cour dhonneur du muse, en compagnie de la rcitante Valeria Becerra. Les salles du muse seront galement accessibles aux visiteurs et un cocktail sera servi dans le jardin.

On le voit, la programmation du muse est assez riche et diversifie. Pour coordonner lensemble de ces activits et les diffuser auprs du public, le muse dispose dune quipe et dune stratgie de communication quil convient dsormais de dvelopper plus en avant.

1.1.3. Personnel et stratgie de communication

1.1.3.1. Le personnel du muse

Au niveau du muse, le personnel est compos de cinq agents titulaires travaillant dans les muses de Saint-Omer, de deux contrats aids dure dtermine et temps partiel, affects laccueil des visiteurs, auxquels il faut ajouter une quipe de vacataires qui sont guides-confrenciers et animateurs plasticiens.

Voici, dans le dtail, lorganigramme du muse Sandelin :

13

- Sarah Vallin, responsable des muses - Laura Levque et Margaretta Renaux-Pot, agents daccueil - Carole Samez, charge des projets ducatifs - Delphine Adams, charge de communication - Dany Clairet, secrtaire - Yves Kerhello et Jean-Pierre Duwiquet, gardiens - Gisle Lenne et Christiane Deleforterie, femmes de mnage.

1.1.3.2. Les partenaires du muse

Le muse est entour de prcieux partenaires, qui mnent de concert des actions de mem_00430584, version 1 - 9 Nov 2009 promotion du patrimoine culturel de la ville de Saint-Omer.

lassociation des Amis des muses de Saint-Omer : elle met en uvre des projets pdagogiques afin de faire dcouvrir le muse et ses collections. Elle soutient les animations des muses, contribue lacquisition ou la restauration duvres, organise des confrences ou des sorties culturelles. Par ailleurs, elle dispose de son propre site Internet, disponible ladresse suivante : http://www.amis-museesstomer.fr/. Celui-ci est largement tourn vers la promotion du muse Sandelin.

la Socit des Antiquaires de la Morinie : elle agit pour la conservation des monuments historiques de la ville. Elle publie rgulirement des bulletins synthtisant ses travaux de recherche sur le patrimoine. Ses membres ont largement contribu lenrichissement des collections des muses.

lEcole des Beaux-arts de Saint-Omer, avec qui le muse organise diffrentes activits culturelles destines aux plus jeunes.

14

1.1.3.3. Le muse lre de lInternet

La politique de communication du muse se limite lheure actuelle la presse et aux radios locales, aux relais Internet, aux envois postaux et de-mails, ainsi quaux affiches et flyers produits lors dvnements spciaux.

Ainsi, la visibilit du muse sur Internet est nulle, puisque le site web a t ferm au dbut de lanne 2008. Le muse ne dispose donc daucun dispositif de communication sur le web : pas de site, ni de blog, ou de profil social orient web 2.03. Or, comme le dit Estrela Rojas dans son article Le web 2.0 et les muses des sciences : quel accs la culture scientifique ?, les muses se positionnent comme diffuseurs lgitimes sur le rseau 4. Un mem_00430584, version 1 - 9 Nov 2009 outil comme Internet est en effet lespace idal pour remplir la mission de d mocratisation du savoir. Cest ainsi quon assiste un remarquable accroissement des sites internet musaux, considrs comme un moyen de relever des scores de frquentation en baisse et de sadapter aux nouveaux usages du public, en termes de consommation dinformations. En parallle des actions de promotion telles que la Nuit des muses, les Journes du patrimoine ou le Printemps des muses mais aussi de la mise en place de tarifs prfrentiels pour certaines catgories dusagers (jeune public notamment), la prsence sur Internet est donc devenue un passage oblig pour conqurir de nouveaux publics. Un enjeu si important que lors de la confrence Communicating the Museum de 2007, un rendez-vous annuel des responsables europens des muses, le thme tait celui des nouveaux mdias, Internet en tte. Cependant, en France plus quailleurs, lintroduction des technologies chapotes par le web 2.0 savre difficile du fait de l aura qui entoure encore les structures musales. Mis part le Louvre, qui fait office de pionnier en la matire, la plupart des muses proposent un contenu statique leurs visiteurs. En France, les tablissements musaux sont ainsi rputs pour tre des temples du savoir 5, peu enclins au partage tout va sur des supports de diffusion on-line.

3 4

Web 2.0 : technologies du web allant dans le sens dune interaction croissante des usagers Estrela, ROJAS, Le web 2.0 et le muse des sciences, quel accs la culture scientifique ?. Disponible en ligne ladresse suivante : http://ftp.informatik.rwth-aachen.de/Publications/CEUR-WS/Vol-398/S2_RojasEtAl.pdf 5 La communication musale lheure du 2.0 : renouveler les canaux, multiplier les supports de diffusion . Article post sur le blog de Palpitt, disponible ladresse suivante : http://www.palpitt.fr/blog/index.php?post/2009/02/01/La-communication-mus%C3%A9ale-%C3%A0-l-heuredu-2.0-%3A-renouveler-les-canaux%2C-multiplier-les-supports#blognav

15

La mise en ligne du site du muse Sandelin permettra donc ce dernier dinvestir un nouveau canal de diffusion, susceptible de drainer un large public. Elle permettra galement de contrler les informations qui circulent son sujet. Voyons en effet quelles sont les informations que linternaute peut obtenir en saisissant la requte muse Sandelin dans un moteur de recherche comme Google. En premier rsultat, on trouve lURL dun site personnel : http://chti.gris.free.fr/page15.html, peu fourni en termes de contenu, dont la mise jour semble avoir t abandonne (il affiche lancienne URL du site Internet du muse). En deuxime lien dans la liste des rsultats, on retrouve un site touristique, Jaime la Cte dOpale , disponible cette adresse http://www.cote-dopale.com/culture/lemusee-sandelin-saint-omer-62. Il prsente des informations quon peut qualifier de statiques sur le muse : un bref historique et un rapide focus sur les collections. Enfin, en mem_00430584, version 1 - 9 Nov 2009 troisime lien, un site auquel on peut accorder davantage de crdit puisquil sagit du portail Culture.fr, produit par le Ministre de la Culture. Cependant, la page semble ne plus tre actualise, puisquon y trouve nouveau un renvoi vers une URL invalide.

Le muse est donc peu mis en valeur sur le mdium Internet : informations errones, contenu statique. Si la cration dun blog avait au dpart retenu lattention du muse afin de combler ce manque, cest vers la mise en ligne dun site Internet que lon sest tourn, car long terme, il rpondra mieux aux besoins de ltablissement.

1.2. Lexpression des besoins : un site vitrine, dynamique et attractif

Le muse souhaite donc crer un site Internet de quelques pages afin de rpondre un besoin spcifique. La premire tape, cruciale, consiste recueillir ces besoins, autrement dit dfinir prcisment les objectifs atteindre et les fonctionnalits envisages. Comme le dit Claude Salzmann, cest la base de toute dmarche 6. Pour cela, un cahier des charges a t rdig. Voyons en dabord le premier aspect, cest--dire la nature du site et ses caractristiques fonctionnelles.

C. SALZMANN, Dvelopper un projet internet, nouvelles logiques et pratiques prouves, Dunod, Paris, 2001, pages 59 62.

16

1.2.1. Nature du site et fonctionnalits attendues

Il existe une certaine typologie de sites web, dcrite avec prcision dans louvrage dOlivier Abou et Olivier Andrieu7 :

le site plaquette : il est aussi appel site vitrine ou site institutionnel . Il rpond la volont simple dtre prsent sur internet, afin de mettre en valeur lactivit dune socit, ses produits ou ses services. Il est assez lger en termes de contenu (quelques pages) et donc peu gourmand en termes de budget. Il existe deux variantes : le site plaquette simple , qui contient un descriptif sommaire de lactivit de la socit, et le site plaquette catalogue qui fournit un catalogue

mem_00430584, version 1 - 9 Nov 2009

complet des produits, des services et des prix, ainsi que les applications ddies (moteur de recherche, calcul de devis, etc). le site marchand : cest un site de commerce en ligne qui offre la possibilit aux internautes de commander des produits ou des services et de les payer directement en ligne. Le site de contenu thmatique : aussi appel portail thmatique, cest un site qui ne traite quun domaine spcifique. Il met disposition des internautes toutes les informations relatives ce sujet : actualit, dossiers, bibliographie, liens, interviews, etc. Cest le cas, par exemple, du site Le portail du cinma, disponible cette adresse : http://www.portail-du-cinema.com/.

Pour le muse de lhtel Sandelin, il sagit de raliser un site vitrine , mi-chemin entre le site plaquette simple et le site plaquette catalogue , afin de prsenter les collections musales et dinformer lutilisateur sur les activits quil propose. Par ailleurs, le site doit tre un support de communication pour diffuser lactualit de linstitution. En effet, le muse souhaite pouvoir mettre jour le site en fonction des vnements quil organise, des projets dans lesquels il sinvestit, des rendez-vous quil met en place et des expositions temporaires quil accueille. Cest pourquoi le site doit tre conu comme un site dynamique et non comme un site statique. Un site dynamique est un site dont le contenu de certaines

O. ABOU et O.ANDRIEU, Imaginer son site web, Microsoft Press, 2001, pages 43 65.

17

pages a t cr automatiquement sur le serveur en recourant diffrents mcanismes : requtes sur une base de donnes, rcupration dinformation, envoi de formulaire .8

Aprs avoir dfini la nature du site, il convient dnoncer les fonctionnalits auxquelles le futur internaute aura accs. Cest un lment-cl de tout projet web, quil ne faut pas ngliger. Dans un premier temps, ces fonctionnalits ont t dfinies avec la tutrice de stage et rpertories comme suit, de manire hirarchique :

Donner des informations sur les collections : il sagit de mettre disposition de linternaute un ensemble dinformations sur les collections que le muse recle. Autrement dit, prsenter les uvres du muse, en mettant en valeur les chefs

mem_00430584, version 1 - 9 Nov 2009

duvre. Afficher de la documentation : le site doit permettre aux visiteurs de tlcharger de la documentation : agenda, programme culturel, brochures, etc. Ces documents seront au format PDF. Rechercher des informations : le site doit contenir un moteur de recherche afin de permettre linternaute daccder directement au contenu qui lintresse. Sinscrire aux activits du muse : le site doit tre capable de grer les rservations concernant diverses activits du muse : ateliers, rencontres autour dune uvre, vnements. Contacter le muse : le site doit permettre dentrer en contact avec le muse , pour satisfaire les ventuelles demandes de renseignement. Les modalits de contact doivent tre claires. Etablir des statistiques de visite : le site doit comptabiliser les visites des internautes pour mesurer la popularit du site et les ventuelles modifications y apporter.

Pour sassurer que lon tait en adquation avec les attentes du public mais aussi pour recevoir des suggestions sur le dveloppement du site, nous avons rdig une enqute, sous forme de questionnaire9. Celui-ci a t tir soixante exemplaires et distribu la fin des visites. Dautre part, il a t envoy un chantillon dindividus et dorganismes publics
8 9

N. CHU, Russir un projet de site web, Editions Eyrolles, Paris, 2006, page 13. Annexe page 64

18

ou privs, comprenant : des partenaires du muse, des enseignants, des conservateurs de muse et des relais presse. Malgr un taux de rponse relativement bas, cette tude qualitative a permis de relever certains besoins qui nous avaient chapp, et donc de complter le cahier des charges fonctionnel. Voici quelles sont les fonctionnalits qui ont t demandes :

Afficher une galerie photos, avec quelques uvres phares du muse. Faire figurer des liens externes, notamment vers les sites des activits touristiques locales et des partenaires du muse.

Par contre, lide avance de mettre en place un systme de newsletter na pas mem_00430584, version 1 - 9 Nov 2009 retenu lattention des personnes interroges. De plus, cela ncessite un travail considrable, trop contraignant pour le personnel du muse. Enfin, les personnes sondes nont pas manifest denthousiasme vis--vis de lventuelle possibilit de dposer des commentaires en-dessous des articles publis. Cette fonctionnalit a donc t carte.

Une fois la nature et les fonctionnalits du site dfinies, il est ncessaire dtudier le pourquoi , cest--dire de fixer les objectifs poursuivis par le site web.

1.2.2. Les objectifs du site

1.2.2.1. Promotion de ltablissement et gains de notorit

Le site doit permettre de promouvoir ltablissement musal sur le mdium internet. Il doit donc vhiculer une certaine image de marque et se conformer lesprit du muse Sandelin. Quels en sont les lments cls ? Un certain prestige, d la richesse des collections et la valeur historique du btiment, et un remarquable dynamisme, d son insertion dans les activits culturelles de la rgion audomaroise. Le site doit donner envie aux internautes, aprs leur visite, daller un peu plus loin , cest--dire, terme, de se rendre sur le site physique du muse. Par ailleurs, le site doit gnrer davantage de trafic que le prcdent. En effet, celui-ci souffrait dune daudience relativement faible, peut-tre

19

due un mauvais rfrencement ou un manque dattractivit. Cest pourquoi lapparence visuelle du site devra tre soigne et les stratgies de rfrencement optimises.

Le souhait du muse est galement de souvrir au plus grand nombre. En t ant quorganisme public, sa mission est de mettre la culture porte du plus grand nombre.

1.2.2.2. Valorisation du fond et ouverture au public

Le muse attache beaucoup dimportance son ouverture sur lextrieur. En effet, il souhaite que les uvres quil possde soient davantage connues du grand public. Pour cela, quel meilleur vecteur quInternet ? En effet, aujourdhui, un foyer sur deux est connect au mem_00430584, version 1 - 9 Nov 2009 net, soient 13,5 millions de Franais qui peuvent avoir accs en un clic linformation numrique. Cest un mode de communication de plus en plus pris dans la socit actuelle, cest pourquoi le muse souhaite saligner en dveloppant son propre outil de communication sur le web. Le site Internet devra donc afficher un contenu qui permette linternaute dobtenir des informations sur les collections prsentes mais il d evra aussi donner des indications complmentaires pour ceux qui souhaitent davantage : prsentation dtaille dune uvre, liens utiles, etc. en apprendre

Par ailleurs, le muse entrepose des pices tout--fait uniques comme le Pied de Croix de Saint-Bertin (vers 1180) ou le tableau de NicolasBernard Lpici, Le lever de Fanchon (voir figur 2), quil est ncessaire de montrer au grand public. Linterface web jouera ainsi un rle de vitrine du patrimoine culturel audomarois, et permettra de supprimer les barrires qui freinent encore aujourdhui laccs la culture.
fig2. Le Lever de Fanchon

1.2.2.3. Fidlisation des utilisateurs et prennit du site

Le site Internet doit tre conu dans loptique dune fidlisation des utilisateurs. Pour cela, il est ncessaire de crer des rendez-vous rguliers, dajouter des lments

20

dinteractivit et de le rendre attractif. Le site doit servir de support la diffusion des actualits musales au grand public qui pourrait ainsi suivre, sans se dplacer, les temps forts de la vie du muse et y ragir. Cest en effet au travers de la diffusion en temps rel de lactualit musale que le site va gagner en popularit. Cest pourquoi nous avons opt pour un site dynamique. Ce type de site autorise des mises jour rgulires, rejetant ainsi limpression fige que linternaute a parfois en consultant une page web. Un site dynamique est plus performant en terme de dure de vie, car des modifications peuvent tre facilement apportes : ajout de pages, nouveaux choix graphiques, nouvelles fonctionnalits, etc. A long terme, le choix du site dynamique est donc plus judicieux. Un site web russi est aussi et avant tout un site accessible au plus grand nombre, cest justement une des priorits du muse. mem_00430584, version 1 - 9 Nov 2009

1.2.3. Identification de la cible : un site tout public Toujours dans une vise clairement tablie de dmocratisation du savoir, le site devra tre accessible tout internaute, quel quil soit. Il faut rappeler ici que la question de la dmocratisation culturelle est au cur des politiques franaises actuelles. Lide dfendue est que lmotion artistique est universelle et quelle ne doit pas rester lapanage dune lite bien pensante. Il est ncessaire de servir lintrt gnral. Dans ce contexte, le 1er avril dernier, une mesure du gouvernement a vu la mise en place de la gratuit dans les muses nationaux et les monuments historiques pour les jeunes de moins de 26 ans et pour leurs enseignants. Lobjectif tant de faire des muses des lieux de frquentation courante. Exprimente au premier semestre, cette mesure avait rvl une forte mobilisation des jeunes, entrainant une hausse de frquentation de 52%. Le muse de lhtel Sandelin sinscrit directement dans cette perspective. La volont de la conservatrice est de dpoussirer limage du muse et dy attirer diffrents profils, diffrents groupes sociaux, sans restriction. Cest pourquoi, concernant le site, le public vis ne se restreint aucune catgorie sociale particulire. La terminologie employe dans les articles sera donc, de fait, simplifie.

21

Par ailleurs, le muse souhaite souvrir aux personnes handicapes. Tout dabord, il est entirement accessible aux personnes mobilit rduite, les salles ont t amnages selon cette exigence et des ascenseurs ont t installs. Ensuite, des visites destines aux sourds, aux malvoyants et aux aveugles sont organises. Par le contact tactile avec les objets et laide de textes en brailles, ces personnes, assistes de guides, peuvent dcouvrir leur faon les collections musales. Le site Internet devra donc prendre en compte ce type de public.

Enfin, le site devra tre un outil ludique pour les enfants et les adolescents. La programmation du muse inclut de nombreuses activits qui leur sont concernes, cest pourquoi, au niveau du site, un espace doit leur tre entirement consacr. mem_00430584, version 1 - 9 Nov 2009

On vient de le voir, le cahier des charges a permis de fixer une ligne directrice au projet de cration du site Internet du muse de lhtel Sandelin. Lensemble de ces consignes a ensuite t traduit dans un plan projet, quil convient de dvelopper.

1.3. Le plan projet, ou comment rpondre aux besoins

Le plan projet indique la manire dont va tre men le projet de cration du site web, il permet dtudier la faisabilit du projet et de prsenter les solutions retenues. Tout dabord, voyons vers quelle solution logicielle lon sest tourn.

1.3.1. Exigences et choix de loutil : la solution Joomla

Pour choisir loutil qui a t utilis afin de concevoir le site, il a fallu cerner au mieux les besoins du muse et les moyens dont il dispose. Aprs analyse approfondie, il en est ressorti un ensemble de critres mentionner ici. Tout dabord, le site contiendra une dizaine de pages au total. Sagissant dun site vitrine, il nest pas ncessaire de multiplier les pages de contenu. Par ailleurs, le personnel du muse nest pas form au dveloppement web, il a donc fallu opter pour un outil facile manipuler, nexigeant pas de connaissances en langage de programmation. Cet outil devait galement offrir la possibilit plusieurs

22

personnes dintervenir sur le site, pour effectuer la maintenance et les mises jour rgulires. Enfin, cet outil devait permettre de crer des formulaires dinscription et de grer des tlchargements de documents.

Pour toutes ces raisons, un site dynamique dit grce un CMS (Content Management System) semble le plus adapt. Le CMS, ou systme de gestion de contenu, est un logiciel de gestion et de publication de contenu sur le web. La plupart des CMS sont des outils open source10, libres, et gratuits. Ils prsentent de nombreux avantages. On peut y diter du contenu et effectuer des mises jour de manire collaborative : plusieurs personnes peuvent travailler sur le document et le modifier tout moment, mais un administrateur en contrle lentre et la sortie. Les oprations de mise en forme et de mem_00430584, version 1 - 9 Nov 2009 rdaction du contenu sont bien spares. De plus, on na pas intervenir direct ement dans le code source, puisquil suffit de manipuler un diteur WYSIWYG11 : il sagit dune interface de mise en forme intuitive, semblable celle dun traitement de texte. Cela ne ncessite donc aucune comptence technique particulire. Enfin, les CMS produisent un code source qui permet une bonne indexation par les moteurs de recherche, et donc un rfrencement correct du site.

La gamme de systmes de gestion de contenus est aujourdhui trs tendue : XOOPS, Drupal, Typo3, Ez publish, Wordpress, Joomla, Spip, etc. Nous avons donc men une tude de ces logiciels afin de dterminer lequel tait le plus mme de rpondre aux attentes du muse. Pour choisir au mieux le CMS, nous avons mis plat lensemble des critres requis pour le projet :

Evolution du site : le site ayant t conu pour tre utilis sur le long terme, il faut que le systme soit bas sur les normes et les standards les plus rcents, notamment les langages HTML et CSS.

Cot de cration : loutil doit tre peu coteux en termes de comptences humaines. Cot de possession : le CMS ne doit pas exiger un hbergement trop lourd.

10 11

Se dit dun logiciel dont la licence autorise la libre redistribution, laccs au code source et sa modification WYSIWYG : What You See Is What You Get

23

Niveau de personnalisation : il faut un CMS qui propose des extensions ajouter, en vue des besoins futurs.

Respect des normes : le CMS doit tre le plus possible en conformit avec les normes du W3C, en particulier pour tout ce qui relve de laccessibilit. Communaut dutilisateurs : la taille de la communaut dutilisateurs est un indice permettant de sassurer de la bonne tenue des mises jour du logiciel. Type de contenu grer : il sagira essentiellement de billets sur lactualit du muse, et de photos des uvres.

Au vu de lensemble de ces critres et aprs avoir test les CMS les mieux cts (Etomote, Drupal, Joomla, e107) sur le site http://www.opensourcecms.com/, jai choisi mem_00430584, version 1 - 9 Nov 2009 Joomla et plus prcisment la version 1.0.13, cense tre plus stable que la version 1.5. Joomla est un des CMS les plus rpandus lheure actuelle, il dispose dune communaut active de dveloppeurs et savre, de plus, tre un outil open source et gratuit. Par ailleurs, il offre une gamme de templates12 trs tendue.

Malgr ltonnante modularit de Joomla, la conception du site sest heurte certaines contraintes, quil est ncessaire de rappeler.

1.3.2. Les contraintes de mise en uvre du projet

1.3.2.1. Dlais et budget

Pour mener bien ce projet, nous disposons de dix semaines au total, ce qui parait assez court. Cest dailleurs une des nouvelles logiques constates aujourdhui dans le milieu du web. Comme lexplique Claude Salzmann 13 , dans la Net-conomie, il est impensable dattendre un ou deux ans avant de pouvoir fournir un service. [] Cela constitue un changement important des habitudes de travail et des outils mis en uvre . Lauteur y

12 13

Template : patron de mise en page C. SALZMANN, Dvelopper un projet internet, nouvelles logiques et pratiques prouves, Paris, Dunod, 2001, pages 27 29.

24

voit deux consquences : lutilisation gnralise de progiciels, et le dveloppement de systmes plus modulaires , moins contraignants. Ce stage illustre bien cette tendance, puisque le CMS Joomla a t employ pour raliser le site. Un planning14 a cependant t dfini, permettant de dcouper le projet en tapes, et fixant une marche suivre.

Enfin, concernant le budget, le muse dispose dune marge de manuvre assez troite. En effet, toutes les dpenses doivent tre justifies la ville de Saint-Omer. Par ailleurs, les cots de maintenance et dhbergement du prcdent site ont, en partie, conduit son abandon. Cest pourquoi le forfait de lhbergement devra tre considr avec attention.

mem_00430584, version 1 - 9 Nov 2009

1.3.2.2. Les contraintes techniques

Au cours du premier et du second semestre, nous avons reus quelques cours thoriques sur les systmes de gestion de contenu. Cependant, lenseignement pratique a t plus restreint, il a donc fallu apprendre manipuler Joomla, y greffer des composants (ajouts dune galerie photos, dune liste de diffusion) et des modules (flux RSS, menu droulant, etc). Le site officiel (http://www.joomla.fr/) ainsi que le forum franais Joomla (http://forum.joomla.fr/), ont largement t utiliss cet effet.

En ce qui concerne le matriel informatique du muse, il est apparu peu adapt des travaux de cration de site Internet. En effet, nous avons observ une totale incompatibilit de certaines applications avec lenvironnement informatique Mac. De fait, linstallation dun serveur Apache15 et dune base de donnes MySql16 (avec le logiciel Wamp par exemple) est impossible sur le systme dexploitation Mac du muse. Il a donc fallu envisa ger de travailler en local, sur un PC fonctionnant sous Windows.
1.3.2.3. Les contraintes juridiques

Un aspect important dans la conception dun site internet est li la question de la proprit intellectuelle. En effet, sur Internet, les rgles du droit dauteur et du droit moral
14 15

Annexe page 67 Apache : logiciel de serveur http trs populaire 16 MySql : systme de gestion de base de donnes le plus utilis au monde

25

sappliquent tout autant. Il est donc interdit de reproduire, voire de modifier une photographie, par exemple, sans avoir reu laccord pralable de lauteur. A ce titre, jai dcid de nutiliser que des images appartenant au muse, ou jai moi-mme pris des photographies. De mme, le site doit respecter le droit limage, cest--dire quavant la diffusion dune photographie reprsentant une personne, il faut obtenir son autorisation. Cest pourquoi, lorsque des photographies o figuraient des enfants ou toute autre personne ont t choisies pour tre publies sur le site, nous avons prt attention ce que ces individus ne soient pas identifiables. Enfin, le site devra inclure des mentions lgales.

Par ailleurs, le muse sera amen collecter des donnes personnelles sur les internautes par le biais des formulaires : il faut donc prvoir une dclaration auprs de la mem_00430584, version 1 - 9 Nov 2009 CNIL17, et avertir les utilisateurs de lexistence de ce traitement de donnes. Enfin, pour viter tout autre problme juridique, on utilisera dans la barre de menu des icnes publies sous licence Creative Commons18, laquelle permet de reproduire, de distribuer et de communiquer des crations au public, voire de les modifier. La seule obligation qui incombe lutilisateur est de respecter les conditions de lauteur : paternit, pas de modification, pas de contexte commercial, partage des conditions initiales lidentique.

Pour tre le plus complet possible, il convient de terminer le plan projet par une numration des charges complmentaires qui viendront assurer la pleine matrise du projet.

1.3.3. Estimation des charges complmentaires Tout dabord, une tude de lexistant 19 , cest--dire de la version du site web prcdent, est prvoir. Il sagit dviter de reproduire laspect de ce site, qui se prsentait sous la forme dun site/base de donnes, avec lensemble des uvres disponibles sous
17 18

CNIL : Commission Nationale de lInformatique et des Liberts Creative Commons : signifie biens communs cratifs (logo : http://creativecommons.org/) 19 Annexe page 68

26

forme de notices. De plus, le site souffrait dune navigation lourde , dun design peu labor et dune densit textuelle trop importante.

Cette tude doit galement tre double dune tude concurrentielle : il faudra se rendre sur quelques sites musaux afin den dgager des conclusions quant lidentit visuelle, la navigation, le choix des rubriques, le contenu, etc. Cette tude doit permettre de donner des pistes de rflexion mais galement dadopter un jugement critique et de relever les erreurs ne pas commettre. Olivier Abou et Olivier Andrieu parlent ainsi de veille concurrentielle et indiquent que lors de cette phase, il est ncessaire de se mettre dans la peau de nos futurs visiteurs.20 Les autres requis sont le choix dun nom de domaine et dun hbergeur. Le muse a dj dpos un nom de domaine : musees-ville-saint-omer.com, mais celui-ci nest pas trs efficace en termes de rfrencement, puisquil ne comporte pas le nom de ltablissement. Enfin, il est prvoir la rdaction dun petit guide lattention des personnes qui vont alimenter le site, en particulier la charge de communication. Ce guide devra expliquer le fonctionnement de Joomla, les principales commandes et la manire dorganiser le contenu.

mem_00430584, version 1 - 9 Nov 2009

Ces recommandations prliminaires ayant t formules, il convient daborder la conception du site en elle-mme. Pour se faire, je me suis plac du ct utilisateur, et jai approfondi la notion dutilisabilit du site. Comment rendre linterface du site ergonomique afin que linformation soit aisment accessible ?

20

O. ABOU et O.ANDRIEU, Imaginer son site web, Microsoft Press, 2001, page 28

27

2. Une conception oriente usagers : vers lutilisabilit du site

Lutilisabilit est un domaine en pleine effervescence lheure actuelle. Cest la mesure de la facilit avec laquelle les utilisateurs peuvent interagir avec un outil informatique 21. Dans lunivers non-linaire du web, il sagit dassister au mieux lusager dans sa qute dinformations. Internet est en effet un mdia la porte de tous, y compris des novices, cest pourquoi les applications web doivent tre faciles utiliser. Une discipline sintresse de prs ces questions : lergonomie cognitive.

2.1. Lergonomie cognitive : optimiser linterface homme/machine

mem_00430584, version 1 - 9 Nov 2009 2.1.1. Les fondements de cette science

Applique au web, lergonomie cognitive (ou logicielle) se propose damliorer la navigation dun site afin dviter aux internautes de se perdre dans le flux informationnel de la toile. En effet, la tendance est certes daccrotre la frquentation des sites internet mais lobjectif final est de fidliser les utilisateurs. Comment procder ? Cest l quentre en jeu lergonomie cognitive. Cest une science apparue dans les annes 1980, ayant pour objet lamlioration du dialogue entre lhomme et la machine. Elle tudie les activits de traitement de linformation et de reprsentations mentales chez ltre humain, afin de les rendre compatibles avec le fonctionnement des systmes automatiss. Cette science trouve son origine dans la psychologie cognitive. En effet, elle sintresse aux processus cognitifs qui se manifestent lorsquun individu reoit et traite une information :

La perception : cest le processus par lequel on slectionne et structure les donnes sensorielles pour leur donner un sens. Lattention : cest la capacit slectionner une partie des stimuli prsents dans notre environnement et ngliger les autres.

La rtention : cest tout ce qui a trait la mise en mmoire (mmoire smantique, mmoire de travail, mmoire long terme).

21

C. SALZMANN, Dvelopper un projet internet, nouvelles logiques et pratiques prouves, Paris, Dunod, 2001, page 39

28

Par consquent, lors de la phase de conception du site du muse de lhtel Sandelin, nous avons port une attention particulire linterface homme/systme (prsentation des liens, messages derreur, clart des textes, etc) et ce, de manire orienter et guider linternaute. Approfondir cette science est donc un pr -requis indispensable pour optimiser lutilisabilit du site.

2.1.2. Une conception centre utilisateur

Lapparition de cette science est contigu dun mouvement qui tend se gnraliser : il sagit de prendre en compte les utilisateurs finaux et leurs besoins lors de la conception, de mem_00430584, version 1 - 9 Nov 2009 la cration et de la diffusion dun site internet. Si un internaute a facilement trouv ce quil cherchait sur le site, il reviendra. Do une corrlation directe avec la frquentation. Le concept dutilisateur final renvoie deux types de cible : Les utilisateurs finaux rels dont nous sommes certains quils utiliseront lapplication ddie. Les utilisateurs finaux potentiels, susceptibles dutiliser lapplication.

Cest dans cette optique quun questionnaire a t labor. En effet, lInternet tant devenu un mdia de masse, il est difficile de dcrypter les envies des internautes. Il est donc ncessaire de mettre en uvre des mthodes danalyse afin de recueillir les besoins du public cible. Cette analyse a ainsi permis de gnrer des ides de fonctionnalits et den carter dautres. Il est clair que ce travail doit se faire en amont mais lutilisabilit est un travail quotidien quil ne faut pas ngliger, au risque de voir apparatre un dcalage entre lunivers conceptuel et la ralit des pratiques.

2.1.3. Les critres ergonomiques

Comme nous lavons vu, les sites raliss de nos jours sont centrs sur lusager et respectent des principes dergonomie. Cela signifie que les informations sont prsentes de

29

manire non linaire mais en aucun cas de manire non structure. La logique hypertextuelle du web provoque chez une grande proportion dusagers un sentiment de dpassement. Pour cette raison, il convient, comme nous le verrons ultrieurement, de structurer linformation et de crer des parcours logiques de navigation, afin de combler le besoin dinformation de lusager. Le site web mis en place doit alors obir certains critres dits ergonomiques . Les critres ergonomiques les plus cits sont ceux de Christian Bastien et de Dominique Scapin. Ces deux chercheurs ont entrepris en 1997 un travail de synthse de 900 recommandations aboutissant une liste de 18 critres, rpartis en huit champs : mem_00430584, version 1 - 9 Nov 2009

Guidage Charge de travail Contrle explicite Adaptabilit Gestion des erreurs Homognit/cohrence Signifiance des codes et dnominations Compatibilit

Lavantage de cette liste 22 est dnoncer des critres aisment comprhensibles et applicables par des non-spcialistes. De plus, ils ont t expriments et valids par une norme AFNOR, ce qui confirme leur relle efficacit.

Voyons donc concrtement comment lergonomie a t prise en compte dans la phase de conception du site web du muse. Le premier aspect a trait la navigation.

2.2. Un systme de navigation intuitif

Pour rendre le systme ergonomique du point de vue de la navigation, il convient tout dabord de se pencher sur larchitecture de linformation , qui dsigne la structure dorganisation sous-jacente un systme de contenu 23.
22

Annexe page 74

30

2.2.1. Arborescence du site et trame des pages

Larborescence du site a t conue de faon ce que linternaute qui cherche une information sache immdiatement o la trouver. Il sagit donc dorganiser le contenu du site de manire assembler les informations de manire cohrente. Comme le dit Jean-Franois Nogier dans son ouvrage Ergonomie du logiciel et design web, paru aux ditions Dunod en 2003, il est conseill dorganiser les menus en largeur, plutt quen profondeur. La largeur correspond au nombre maximum de sous-rubriques accessibles depuis une rubrique ou depuis la page daccueil du site tandis que la profondeur est le nombre maximum de rubriques par lesquelles il faut passer avant datteindre une page terminale du site 24. Pour le muse, nous avons donc choisi de regrouper au maximum les informations afin de ne pas mem_00430584, version 1 - 9 Nov 2009 dpasser trois quatre niveaux de profondeur. Cela permet lutilisateur de mmoriser facilement le chemin par lequel il faut passer pour trouver une information.

Le choix des rubriques mettre sur le site a t une tape importante. Il a fallu associer les contenus qui prsentaient une certaine homognit. Aprs plusieurs essais, nous nous sommes arrts sur six rubriques. En effet, au-del de huit rubriques, le risque est de dsorienter lutilisateur. Ctait le cas sur lancien site du muse, qui en comptait huit. Les six rubriques retenues sont donc les suivantes :

A propos du muse : dans cette rubrique sont placs les contenus qui ont trait directement au muse, cest--dire son histoire et sa plaquette de prsentation. A voir au muse : ici figure un ensemble dinformations sur les collections que le visiteur peut dcouvrir, sur les parcours de visite, ainsi quun coup de projecteur sur les uvres emblmatiques du muse.

La programmation : il sagit dnumrer lensemble des services mis la disposition du public : les rendez-vous mensuels, ainsi que les visites thmatiques qui ont lieu le dimanche soir.

23

Amlie, BOUCHER, Architecture de linformation, 29 fvrier 2004. http://www.ergolab.net/articles/architecture-information.php 24 J-F NOGIER, Ergonomie du logiciel et design web, Dunod, Paris, 2003, pages 112 114.

31

Lactualit : cest la partie la plus volutive du site o sont annoncs les diffrents vnements et animations qui ont lieu au muse de lhtel Sandelin.

Interactivit : dans cette section, on met en avant le lien avec linternaute, par le biais de diffrentes fonctionnalits : le tlchargement de documents, linscription des activits via les formulaires en ligne, et un contenu spcifique aux enseignants et la prparation des activits scolaires au muse.

Espace junior : aprs analyse des concurrents, il est ressorti que de nombreux sites proposaient un espace exclusivement rserv aux enfants et adolescents, avec le dtail des programmations qui leur sont proposes. Nous avons donc reproduit cette tendance au sein du site.

mem_00430584, version 1 - 9 Nov 2009

Afin de matrialiser lorganisation des pages partir de la page daccueil, un plan du site a t dessin. Il permet de visualiser la largeur et la profondeur du site et donc didentifier quels sont les liens entre les pages. Un premier plan de site a t construit puis remani suite des entretiens avec la conservatrice du muse. Nous nous sommes finalement arrts sur la version disponible en annexe.25

A un niveau immdiatement en-dessous, cest la structuration des pages web quil faut mettre en place, autrement dit la trame. Tout dabord, il faut se concentrer sur la page daccueil. Elle tient un rle de taille dans un site puisque, gnralement, cest le point dentre des visiteurs, l o se cre leur premire impression. Elle doit donc permettre lutilisateur de cerner clairement la thmatique aborde dans le site, et lui donner les moyens de pousser plus loin la visite 26. En clair, les objectifs de cette page sont dinformer lutilisateur sur la vocation du site, dune part, et de lui offrir les moyens de naviguer lintrieur, dautre part. Cette page ne doit pas tre une jump page , cest--dire un cran dintroduction qui saffiche avant dentrer sur le site, pour choisir, par exemple, la langue ou la version du site. Ce type de page est en effet peru comme un obstacle laccs direct au contenu. Enfin, le temps de chargement de la page daccueil doit tre minimis : lajout danimations doit tre modr, car il peut agacer linternaute ou ncessiter le tlchargement dun plug-in, de mme les images doivent tre utilises raisonnablement,
25 26

Annexe 77 J-F. NOGIER, Ergonomie du logiciel et design web, Dunod, Paris, 2003, page 168.

32

afin de ne pas ralentir la progression du visiteur. Jakob Nielsen, expert mondial de lergonomie et auteur de louvrage Conception de sites web, dit ce propos que les sites les plus visits sont ceux dont les pages se chargent le plus vite .

Par ailleurs, il existe certaines conventions et usages respecter au niveau de la trame de la page, pour que lutilisateur sy retrouve :

Un haut de page, avec le logo dans le coin gauche, un bandeau avec le nom du site au centre, un champ recherche et des liens utilitaires (accueil, contact, presse, mentions lgales, etc) dans le coin droit.

mem_00430584, version 1 - 9 Nov 2009

La navigation principale, gauche sous le logo pour une navigation verticale, sous le bandeau pour une navigation horizontale.

Un corps de page, avec les dernires nouveauts prsentes sur le site et une prsentation textuelle du site. Cest la partie de la page qui est vue et lue en premier par linternaute.

Un pied de page, reprenant des liens de la navigation principale ou des liens utilitaires. Une maquette27 a t dessine pour identifier ces diffrents emplacements. Puis, un

template a t retenu pour la page daccueil et choisi en fonction de ces recommandations. Il sagit du template rhuk solarflare ii , livr par dfaut avec Joomla. Aprs ajout de modules, corrections graphiques et personnalisation, voici quoi ressemble la page daccueil (figur 3):

27

Annexe page 78

33

mem_00430584, version 1 - 9 Nov 2009

fig3. Structure de la page daccueil

Le logo apparat seulement en bas de page car plac en position top , il risquait de nuire lesthtique du site. Lidentit visuelle du site est donc suggre par le bandeau figurant la faade de lhtel ainsi que par le message de bienvenue en haut de la page. La navigation principale se prsente sous la forme dun menu vertical sur la gauche tandis que le corps de page est au centre, il est consacr aux dernires actualits du site et la prsentation du muse. Enfin, le pied de page est rserv aux liens utilitaires, dautres liens de ce type figurant galement dans lencart du haut.

En ce qui concerne la structure des autres pages du site, elle est globalement identique celle de la page daccueil, sauf que les logos et le message de bienvenue disparaissent.

Pour tre efficace, la navigation doit tre la plus simple possible, afin de servir la recherche dinformations de lusager. Voyons donc comment ont t conus les lments de navigation.

34

2.2.2. Les lments de navigation : menu, liens et boutons

Comme lindique Jean-Franois Nogier, dans Ergonomie du logiciel et design web, paru aux ditions Dunod en 2003, la navigation est uniquement un moyen, pas une fin en soi , ce qui signifie quelle doit simplement assister lutilisateur et lui montrer le chemin suivre dans sa dmarche de recherche dinformations, et ce, le plus rapidement possible : cest la rgle des trois clics .

2.2.2.1. Le menu

La barre de navigation, plus communment appele mem_00430584, version 1 - 9 Nov 2009 menu, doit tre organise de telle faon que les contenus soient placs dans lordre de frquence de visite des internautes. Nous nous sommes donc bass sur les rponses aux questionnaires pour laborer cette hirarchie. La premire demande des utilisateurs potentiels tait dobtenir des informations sur le muse, puis sur les collections. Ces deux rubriques sont donc apparues en premires dans le menu (figur 4).
fig4. Premires rubriques du menu

La barre de menu apparat de la mme manire sur toutes les pages du site, afin de favoriser une bonne cohrence et donner au visiteur les moyens de se reprer correctement. Si le schma standard place la barre de navigation principale en haut gauche de la page, nous avons choisi de maintenir la configuration initiale du template, avec un menu vertical gauche de la page, qui joue la fois le rle de navigation primaire et de navigation secondaire. En effet, aprs un clic, plusieurs sous-rubriques peuvent apparaitre lintrieur dune rubrique et donc permettre de se dplacer dans celle-ci.

Par ailleurs, par le jeu des couleurs, on peut galement fournir un repre visuel linternaute et lui indiquer o il se trouve dans le site. Par lintermdiaire de la proprit CSS a : visited , nous avons donc dfini une couleur spcifique pour longlet pointant vers la

35

page actuellement affiche. Le noir a t choisi pour le premier niveau de profondeur (figur 5), tandis quun gris ple a t utilis pour le second niveau de profondeur(figur 6).
fig5. Couleur du lien du premier niveau de profondeur

mem_00430584, version 1 - 9 Nov 2009

fig6. Couleur du lien du second niveau de profondeur

Dautres artifices graphiques ont t utiliss, comme le rollover qui consiste changer la reprsentation dun visuel lorsque lutilisateur passe la souris au-dessus 28. Lorsque linternaute passe le curseur au-dessus dun lment du menu, cet lment change de couleur : il devient plus fonc et le texte se teinte en orange (figur 7).
fig7. Rollover

2.2.2.2. Les liens

Les liens sont la base de toute navigation sur le web. Des tudes scientifiques se sont attardes sur la prsentation de ces liens. Ainsi Nielsen prconise que les liens textuels respectent une couleur et un format spcifique : souligns et bleus. Nous avons donc opt pour une couleur bleue fonce et un soulignement lorsque le curseur se dplace sur lintitul du lien (figur 8) :

fig8. Lien textuel

28

Jean-Franois, NOGIER, Ergonomie du logiciel et design web, Dunod, Paris, 2003, p. 144.

36

Aujourdhui, en effet, les utilisateurs appliquent chaque site ce quils ont appris au gr de leur navigation sur le web : sils distinguent un lien par un effet de soulignement et un attribut de couleur spcifique, alors ils sattendent retrouver ce standard sur chaque site quils visitent. Si cette attente se concrtise, alors leur recherche dinformations sera, de fait, acclre.

Par ailleurs, les lments textuels ne doivent pas prter confusion, ils ne doivent pas tre assimilables des liens. En effet, un effet de soulignement ou un mot color en bleu interpelle les utilisateurs, qui peuvent sattendre devoir cliquer dessus. Cest pourquoi, lors de la mise en forme du contenu, le soulignement a t trs peu employ, et la couleur bleue bannie. mem_00430584, version 1 - 9 Nov 2009

De plus, le texte du lien doit tre assez explicite. Il doit constituer un indice prfigurant linformation que lutilisateur va trouver sur la page cible. La terminologie a donc t tudie pour amliorer la comprhension des liens. Par exemple, lintitul du lien lire la suite a t chang par cliquez pour continuer car il renseigne mieux sur la nature et le contenu du lien et est susceptible dinciter davantage au clic. De mme, les liens ne doivent pas tre courts, car un lien trop petit sera difficile slectionner. Nielsen prconise donc une longueur de quatre mots au maximum, les liens devant tre placs de prfrence sur les mots-cls (figur 9).

fig9. Lien sur mots-cls

Enfin, il est recommand que le contenu des liens soit prcis au moyen de la balise title. Ainsi, le lien est dcrit de manire complte. Dans lditeur WYSIWYG choisi pour Joomla, JCE Editor Mambot, il est possible de renseigner cette balise title lors de linsertion dun lien.

37

2.2.2.3. Les boutons

Les boutons sont des images cliquables utiliss comme liens. Dans le template employ dans Joomla, des icnes sont prdfinies pour renvoyer plusieurs types de liens. Nous les avons remplaces par des icnes publies sous Creative Commons afin quelles correspondent ce que lon rencontre le plus souvent sur le web :

mem_00430584, version 1 - 9 Nov 2009

Tlcharger au format PDF : un document surmont du logo dAcrobat Reader. Envoyer par mail : une icne en forme denveloppe avec une flche denvoi. Version imprimable : une icne en forme dimprimante.

Tous ces lments permettent de guider au mieux lutilisateur dans son parcours transversal du site. Dautres lments peuvent tre ajouts linterface afin daider lutilisateur se positionner dans le site. Voyons de quoi il sagit.

2.2.3 Orienter lutilisateur : plan de site et chemin de progression

Si un utilisateur prouve des difficults se reprer dans le site et quil nen comprend pas la structure densemble, il risque de sen aller et de se rendre sur un site concurrent. Cest pourquoi il est important de lui indiquer tout moment quel niveau de la navigation il se trouve. Dans cette optique, un chemin de progression ou fil dAriane a t affich sur chacune des pages du site. Il indique les rubriques qui sparent la page daccueil de la page courante 29.

Le chemin de progression donne en effet voir la structure du site et permet dillustrer le parcours de lusager depuis la page daccueil jusque la page terminale. Il joue un rle complmentaire au systme de navigation : grce lui, lutilisateur peut revenir en arrire. Son affichage sest lui aussi standardis : il doit tre plac en haut de la page. De mme, en rgle gnrale, le connecteur entre chaque rubrique est une flche. Dans le
29

Jean-Franois, NOGIER, Ergonomie du logiciel et design web, Dunod, Paris, 2003, p. 146.

38

template utilis pour le site du muse, nous avons donc plac une flche orange entre chaque lien du module (figur 10).

fig10. Chemin de progression

Par ailleurs, pour que linternaute puisse avoir un aperu de lorganisation globale du site, il est souvent utile de mettre sa disposition un plan de site ou sitemap . Grce cela, il peut se crer une image mentale du contenu du site, ou avoir accs une information prcise quil ne trouve pas par le biais du menu. Nous avons donc install le composant Joomap qui permet facilement de gnrer un plan de site. Il est accessible depuis un lien mem_00430584, version 1 - 9 Nov 2009 situ dans le pied de page et est donc visible depuis nimporte quelle page du site30.

Le systme de navigation a donc t tudi de manire la rendre souple et autonome: linternaute ne doit pas avoir besoin dune phase dapprentissage pour se dplacer sur le site. Voyons dsormais le deuxime volet sur lequel sapplique lergonomie web : le design.

2.3. Lapparence visuelle du site : sobrit et lisibilit

Le design dun site est un vecteur de communication important, cependant il doit respecter un certain nombre de principes ergonomiques, afin de donner envie linternaute de poursuivre sa navigation. Lensemble des pages du site doit ainsi se rfrer une charte graphique homogne et cohrente.

2.3.1. La charte graphique

Une charte graphique est lensemble des codes graphiques (formes, couleurs) u tiliss dans la communication dun site ou dune entreprise. Le muse disposait mon arrive de sa propre charte graphique : la couleur dominante, celle du logo, tant le vert empire. Dans les codes
30

Annexe page 79

39

sociaux associs aux couleurs, le vert signifie le calme, lapaisement, il est galement utilis sur les cartes routires pour signaler un lieu touristique. Il correspond donc au climat que le muse souhaite crer sur le site. Cest pourquoi, aprs quelques hsitations, nous avons dcid de reprendre cette couleur, et lavons implment au niveau des rubriques du menu et des titres des articles. Pour cela, nous nous sommes appuys sur des feuilles de style CSS31 : elles prsentent lavantage dallger le code HTML et facilitent les ventuelles modifications visuelles ultrieures.

Par ailleurs, pour une meilleure interaction entre lhomme et la machine, les couleurs employes sur le site ne doivent pas tre trop agressives. Des couleurs flash ont tendance fatiguer lil du visiteur. Aprs avoir expriment ces couleurs sur le site (rose, mem_00430584, version 1 - 9 Nov 2009 bleu, orange, jaune, vert, rouge), nous nous sommes rendu compte de leur inadaptation la lecture sur cran. Il est prfrable dutiliser une couleur neutre, claire pour le fond dcran, lidal tant de choisir le gris, qui garantit le fonctionnement dun grand nombre de contrastes. En effet, pour amliorer le confort visuel dune interface, un contraste positif (fond clair, caractres sombres) est plus adapt quun contraste ngatif (fond sombre, caractres clairs) car il entrane un dilatement de la paupire plus petit32. Ainsi, un texte bleu sur fond noir sera mal peru par lil humain. Nous avons donc opt pour un fond gristre trs ple en arrire plan et une police dcriture noire, sature, classique de celle rencontre sur de nombreux sites Internet (figur 11) :

fig11. Fond et contenu textuel

31 32

CSS : Cascading Style Sheet Amlie BOUCHER, Faciliter la lecture dinformations sur le web, 15 novembre 2003 http://www.ergolab.net/articles/faciliter-lecture-informations-web.php

40

Par ailleurs, nous nous sommes restreints un nombre limit de couleurs, afin dviter leffet sapin de Nol . Pour associer ces couleurs, je me suis rendu sur le site Color Scheme Designer, disponible ladresse suivante : http://colorschemedesigner.com/#. A partir de la couleur verte, cet outil fait correspondre des couleurs complmentaires, en harmonie : orange, bleu et rose. Jai donc opt pour le orange, et intgr le code hexadcimal (#FF7400) de cette couleur dans la feuille de style de chaque template, pour les liens de la barre top . La couleur orange apparait ainsi en surbrillance au dessus des liens de la barre de menu en haut de page (figur 12).

mem_00430584, version 1 - 9 Nov 2009

fig12. Complmentarit des couleurs

La charte graphique du muse inclut galement un logo, bien identifiable, qui a t repris sur la page daccueil (figur 13). Il est enserr entre dautres logos : celui de la ville de Saint-Omer, puisquil sagit dun muse municipal, celui du label Ville et Pays dArt et dHistoire, qui tmoigne des actions de valorisation du patrimoine effectues par la ville et celui du muse de France, label cr par le Ministre de la Culture et dcern en fonction de lintrt des collections et des missions effectues auprs du grand public.

fig13. Logos

2.3.2. Images et animations

Linsertion de visuels sur le site doit rpondre lopportunit dajouter une plus value au site. Elle doit permettre dillustrer un contenu, ou viter de se perdre dans la rdaction dun texte trop long. Une image vaut parfois mieux quun long discours. Cependant, les images ont tendance alourdir le temps de chargement dune page. Leur

41

poids doit donc tre minimis. Cest pourquoi toutes les images du site ont t compresses au format JPEG, et affiches sur une petite surface.

Par ailleurs, nous avons dcid de nafficher aucune animation car elles ont tendance agacer lutilisateur. De plus, certains formats vido, tels que Flash, peuvent requrir lajout dun plug-in, ce qui peut conduire un usager abandonner sa visite.

2.3.3. La mise en forme du contenu

La mise en forme dun texte sur une page web se heurte des contraintes que le mem_00430584, version 1 - 9 Nov 2009 format papier ignore. En effet, pour mettre en valeur linformation, il est ncessaire dutiliser des techniques spcifiques, qui permettent damliorer la lisibilit visuelle et la lisibilit cognitive du site.33

2.3.3.1. La lisibilit visuelle

La lisibilit visuelle est lie la perception de lutilisateur, cest--dire leffort physiologique induit par lactivit de lecture. Sur un cran, en effet, la lecture est beaucoup plus lente que sur le papier. Pour que lutilisateur puisse lire sans peine les caractres affichs lcran, le site doit donc respecter un certain nombre de rgles de mise en page. Tout dabord, concernant la police. Le nombre de polices doit tre infrieur quatre et il est conseill dutiliser une police droite, sans empattement, adapte la lecture sur cran, telle quArial ou Verdana. Sur le site, la police Arial a t utilise pour rdiger le contenu des articles. La police Times New Roman, certes moins recommande, a t utilise pour les titres des articles : selon le vu de la tutrice de stage, ce type de police est cens crer un cho latmosphre baroque du muse. Par ailleurs, il convient de bien arer le texte pour ne pas surcharger leffort visuel de lusager : pour le site, un interligne de 150% a t dfini pour chaque article au moyen des feuilles de style CSS.

33

Amlie BOUCHER, Faciliter la lecture dinformations sur le web, 15 novembre 2003 http://www.ergolab.net/articles/faciliter-lecture-informations-web.php

42

La taille des caractres est un lment prendre en compte galement. Elle doit tre ajustable, selon la rsolution de lcran et les facults visuelles de linternaute. Pour ce faire, il convient de dfinir cette taille en pixels. Sur le site, la police est de douze pixels pour les articles et de onze pixels pour les boutons de navigation. Pour faciliter la tche des utilisateurs, un module a t install sur Joomla : FW Resize font. Ce module permet daugmenter ou de diminuer la police par dfaut par simple clic34. Il a t implment au dbut de chaque article.

2.3.3.2. La lisibilit cognitive

La lisibilit cognitive est leffort cognitif, dapprhension et de comprhension mem_00430584, version 1 - 9 Nov 2009 notamment, induit par la lecture dune page web. Lorsquun usager parcoure un cran pour la premire fois, il adopte une stratgie en Z 35. Cela signifie quil balaye la page de manire transversale, de manire retrouver au plus vite le contenu qui lintresse. Cest pourquoi la typographie utilise doit tre efficace et permettre de saisir immdiatement limportance et la hirarchie des informations. Deux techniques de mise ne valeur du texte sont principalement requises cette fin :

La graisse : elle permet de faire ressortir un mot dans une phrase. La liste puces : elle permet de structurer le texte, de dgager des mots-cls et ainsi dacclrer la lecture des informations.

Litalique est viter autant que possible car il confre une mauvaise lisibilit aux caractres. Nous avons suivi ces recommandations afin doffrir aux visiteurs une lecture agrable (figur 14) :

34 35

Annexe page 80 Jean-Franois, NOGIER, Ergonomie du logiciel et design web, Dunod, Paris, 2003, page 2.

43

mem_00430584, version 1 - 9 Nov 2009

fig14. Typographie et mise en page

Par ailleurs, linformation doit tre structure de manire cohrente et organise : le texte doit tre spar en diffrentes parties, associes chacune un titre et un sous-titre. Sur le site, titres et sous-titres sont ajusts au mme format, sur chacune des pages. Les paragraphes doivent tre courts (une ide dans chacun des paragraphes) et concis car une densit textuelle trop importante empche le lecteur de saisir linformation utile parmi le bruit environnant . La rgle est donc dutiliser deux fois moins de mots que sur du papier. Lorsque les textes sont jugs trop longs, il est prconis de laisser lutilisateur la pos sibilit de dcharger une version imprime, ce qui a t fait sur le site.

Nous avons donc appliqu les principales rgles ergonomiques et avons tir pleinement parti des potentialits de Joomla pour crer un site simple utiliser, fluide et lisible. Cependant, si ces prcautions sont aujourdhui valables pour tout type de site, linterface web dun tablissement musal comporte certaines spcificits lies sa stratgie de communication.

44

3. Optimiser la communication web : les spcificits du muse

Internet est un hypermdia devenu incontournable dans une socit qu e lon qualifie volontiers de socit de linformation . Pour se forger une E-rputation , il existe des mthodes et des dispositifs de communication spcifiques, qui diffrent de ceux employs par les mdias traditionnels. Sagissant du muse Sandelin, la stratgie de communication adopte est lie limage que le muse souhaite vhiculer. Mais son statut dorganisme public loblige respecter certaines normes, comme laccessibilit.

3.1. Une mdiation culturelle pour tous : vers laccessibilit du site mem_00430584, version 1 - 9 Nov 2009

3.1.1. Laccessibilit : une obligation lgale

Laccessibilit est une notion aujourdhui rcurrente dans les projets de conception de site Internet. Un site est dit accessible lorsque son contenu est utilisable par nimporte qui, indpendamment de sa condition physique (sourd, aveugle, mal-voyant, mal-entendant, etc) ou du matriel sa disposition (navigateur, systme dexploitation, cran, etc). Le web tant conu comme une plate-forme de savoirs et de connaissances universelles, un vecteur dintgration sociale et culturelle, il est ncessaire quil soit mis la porte de chaque individu. Les efforts du W3C36 vont dailleurs dans ce sens : un groupe de travail, le WAI37, a t cr afin de dfinir des principes suivre, et des recommandations ont t publies. Tim Berners-Lee, pionnier de lInternet, dfinit ainsi laccessibilit : () mettre le Web et ses services la disposition de tous les individus, quels que soient leur matriel ou logiciel, leur infrastructure rseau, leur langue maternelle, leur culture, leur localisation, gographique, ou leurs aptitudes physiques ou mentales . Il sagit donc de prendre en compte la proportion de personnes handicapes, de seniors, qui naviguent sur leur web mais aussi les diffrents types de matriels utiliss pour laffichage des pages web.

En France, le rfrentiel Accessiweb compile 92 rgles de mise en uvre de laccessibilit. Par ailleurs, depuis, le 16 mai 2009, le dcret relatif la loi pour l'galit des
36 37

W3C : World Wide Consortium, instance qui rgit le web WAI:Web Accessibility Initiative

45

droits et des chances, la participation et la citoyennet des personnes handicapes est entr en vigueur. Il stipule que les services de communication publics en ligne doivent rendre leur site accessible aux personnes souffrant dun handicap. Il incombe donc au muse de lhtel Sandelin de concevoir un site accessible, dautant que sa volont est dintgrer les minorits dans la transmission et la valorisation du patrimoine culturel de la ville. Pour ce faire, nous avons agi deux niveaux : laccessibilit visuelle du site et son accessibilit technique.

3.1.2. Laccessibilit visuelle

mem_00430584, version 1 - 9 Nov 2009

Pour optimiser la lecture des informations lcran, un premier effort a port sur le jeu des contrastes, comme nous avons vu prcdemment : le texte noir ressort dun fond gris ple. Un code couleur a galement t mis en place sur le site (vert pour les rubriques, bleu pour les liens, orange pour les liens du menu). Cependant, au vu de la proportion actuelle de personnes daltoniennes ou ne distinguant pas les couleurs, il a t ncessaire de la mettre en valeur par des changements de comportement comme le rollover. Certaines informations textuelles ont galement t doubles dicnes. Les icnes employes dans la barre de menu servent illustrer le contenu auquel linternaute aura accs :

A propos du muse : une icne reprsentant la faade du muse A voir au muse : une icne reprsentant un il La programmation : une icne reprsentant un bloc-notes Actualit : une icne reprsentant une punaise de tableau daffichage Interactivit : une icne reprsentant des utilisateurs Espace junior : une icne reprsentant une palette de couleurs

46

Ce jeu sur la smiologie des images permet damliorer la perception des information s : lutilisateur associe un mot un signe quil a dj rencontr dans la vie courante. Par ailleurs, la page doit tre construite de telle faon quelle puisse tre lue par les navigateurs alternatifs tels que BrailleSurf ou Jaws, qui interprtent lensemble des informations sous forme de texte. Cest pourquoi, pour les images illustratives insres dans les articles, la balise alt a t renseigne : elle fait figurer un substitut textuel chaque image, et affiche une info-bulle sur les navigateurs classiques comme Mozilla (figur 17). Enfin, le composant choisi pour mettre en forme les formulaires dans Joomla, Artform, respecte les standards mem_00430584, version 1 - 9 Nov 2009 daccessibilit : interprtation vocale du code de scurit, messages derreurs, etc.

fig15. Info-bulle

3.1.3. Laccessibilit technique

Laccessibilit technique consiste concevoir un site qui saffranchit des quipements matriels et logiciels utiliss par les utilisateurs. En effet, il existe ce niveau de grandes disparits : systmes dexploitation, taille de lcran, vitesse de connexion, etc. Pour rendre le site accessible dun point de vue technique, la rflexion a donc port sur plusieurs points. Tout dabord, comment procder pour que le site saffiche correctement sur tous les crans ? Cette question est lie la dimension des pages. Dans le parc informatique actuel, la majorit des crans observent une rsolution de 1024x768 pixels : 55% des crans dans le monde en 2007, selon le site Le journal du Net38. Limage place en background a donc t dfinie selon une taille de 1024x768 pixels. Le site est optimis pour un affichage dans cette rsolution. Cependant, pour un site grand public comme celui du muse, Nicolas Chu, dans son ouvrage Russir un projet de site web paru aux ditions Eyrolles en 2006, prconise de disposer le contenu selon une rsolution de 800x600 pixels. En effet, si le
38

Rsultats dtudes parues sur le site Le Journal du Net. http://www.journaldunet.com/solutions/dossiers/chiffres/navigateurs.shtml

47

contenu tait dispos sur toute la largeur, soit 1024 pixels, alors les internautes ayant une rsolution de 800x600 pixels seraient contraints dutiliser les ascenseurs horizontaux : mieux vaut viter ce recours. Cest pourquoi dans le code source de la page, le bloc principal a t dfini selon une largeur de 808 pixels, et la hauteur a t dfinie en pourcentage (100%), afin doccuper toute la page. En changeant les paramtres daffichage de lcran, nous avons pu constater que le site saffichait correctement pour nimporte quelle rsolution dcran : mem_00430584, version 1 - 9 Nov 2009

800x600 pixels (figur 18) 1024x768 pixels (figur 19) 1280x700 pixels 1280x800 pixels

fig16. Rsolution 800x600

48

mem_00430584, version 1 - 9 Nov 2009

fig17. Rsolution 1024x768

Par ailleurs, des tests ont t effectus sur les navigateurs les plus utiliss lheure actuelle, afin de vrifier si laffichage tait correct. Ayant dvelopp le site sur Mozilla Firefox, le browser le plus plbiscit en Europe, jai donc vrifi que le site tait compatible sur Internet Explorer, Opera et Safari.

Enfin, mme si le haut dbit compte de plus en plus dabonns, il ne faut pas oublier les personnes qui sont encore relies Internet par le biais d un modem avec une connexion bas dbit. Pour ce type dusagers, il a fallu prendre garde au poids des visuels et les compresser au maximum, en JPEG, sans pour autant perdre en qualit.

Le site du muse Sandelin remplit donc au mieux sa mission daccessibi lit : il peut tre vu par tout type dindividus, indpendamment de sa condition physique ou de sa configuration matrielle. Mais il se doit aussi dtre attractif : lobjectif premier est dattirer un grand nombre de visiteurs.

49

3.2. Sduire les visiteurs : pour une page web attractive

Limpact communicationnel dun site web se mesure essentiellement son attractivit. Dans le domaine du web, celle-ci dpend de plusieurs facteurs-cls. Tout dabord, lesthtique. En effet, sur le net, la communication e st essentiellement visuelle : le site doit se dmarquer tout en restant fonctionnel. Le muse a donc souhait que le site web manifeste une touche doriginalit, dans loptique de modifier la perception traditionnelle, cloisonne, de la socit vis--vis des tablissements musaux.

3.2.1. Lesthtique du site : pour se dmarquer mem_00430584, version 1 - 9 Nov 2009

La recherche du beau nest pas considre comme une priorit absolue lors du dveloppement dun site Internet. Cependant, lintrt dun site esthtiquement valide est de retenir lattention de lusager : un design atypique peut laisser une trace durable dans sa mmoire et linciter revenir rgulirement sur le site. Cest en gnral lun des critres qui motivent le plus les projets de refonte de sites internet. Pour le muse Sandelin, la volont du personnel tait de rompre avec le discours ambiant autour des tablissements musaux : un lieu froid, austre et fig. Le site devait donc vhiculer limage dun lieu color, ouvert sur le monde et dynamique. Cest pourquoi nous avons dcid de capter lattention des visiteurs en faisant varier larrire-plan pour chaque rubrique du site. Les images devaient tre en adquation avec lintitul de la rubrique, et permettre dajouter des nuances de couleur un ensemble assez sobre.

Pour raliser chacun de ces fonds, nous avons utilis le logiciel Photofiltre Studio. Il a permis de crer un fondu qui adoucit limage et sintgre parfaitement dans larrire plan gris de la page. Par ailleurs, les images choisies mettent valeur les collections du muse ou se focalisent sur un dtail architectural de la btisse:

Le blason de la ville pour la page daccueil. Un mascaron ornant lentre de lhtel pour la rubrique propos du muse . Le tableau du Lever de Fanchon pour la rubrique voir au muse . Nous avons dcoup le tableau selon une forme elliptique, une sorte de parenthse, pour tre en

50

accord avec le caractre intimiste de luvre : une scne de genre montrant une jeune femme au lever du lit. mem_00430584, version 1 - 9 Nov 2009 Une mosaque mdivale pour le parcours histoire. Le tableau Les Sirnes de Lon Belly pour le parcours Beaux-arts : il reprsente une scne de la mythologie grecque: Ulysse entour des sirnes. Des statuettes en cramique japonaise pour le parcours cramique. Le tableau La dispute des Philosophes, choisi pour illustrer la rubrique la programmation car lun des deux personnages montre son vis--vis un livre. Une photo du public en visite, dans lescalier central pour donner un ct dynamique la rubrique actualit . Une photographie dun chantillon du fonds documentaire du muse pour la rubrique interactivit , essentiellement consacre la documentation et aux crits divers (formulaires, guide pour les enseignants). Une photo datelier avec des pinceaux et des dessins, pour l espace junior . Cette photographie montre au jeune public les activits ludiques proposes par le muse.

Par ailleurs, un module photo a t install sur la page daccueil : chaque rechargement de la page, cette photographie change. Nous avons choisi dy placer cinq uvres : un tableau, une pice ornementale, un bois sculpt, une mosaque et une cramique. Cela permet ainsi de renforcer le caractre dynamique et color de la page.

Le dcor mis en place est donc cens favoriser la perception du visiteur : les tons chauds doivent donner limpression quil se trouve dans un endroit agrable, paisible et attrayant. Pour retenir le visiteur, nous avons galement mis en place des systmes interactifs.

3.2.2. Un site interactif : faire participer linternaute

La participation des internautes est aujourdhui une recette incontournable pour booster lactivit dun site. En effet, le site doit permettre linternaute dinteragir avec le contenu des pages mais aussi avec les autres utilisateurs. Cest lesprit du web 2.0 , une

51

volution du web qui touche la fois les pratiques sociales, les innovations technologiques et les processus ditoriaux. Le point fort de Joomla, le CMS utilis pour construire le site, est quil offre une palette doutils interactifs : flux RSS39, newsletter, sondage, recommandation un ami, etc. Autant doutils que les muses commencent sapproprier, en particulier outre-Atlantique. Lors de lanalyse des besoins, nous avons soumis la question de ces fonctionnalits web 2.0 aux usagers potentiels du site. Il en est ressorti que pour le site du muse, leur intrt pour ces fonctionnalits tait limit voire nul. Nous avons donc dcid de limiter linteractivit quelques outils :

Des formulaires dinscription diffrents activits : par le biais du composant Artform, nous avons mis en place trois formulaires dinscription : pour lvnement ct cour,

mem_00430584, version 1 - 9 Nov 2009

ct jardin , pour les ateliers, et pour les rencontres autour dune uvre . Ces formulaires, mis en page grce une feuille de style CSS (technique oriente web 2.0), permettent donc lusager dsireux de se rendre au muse, de combler pleinement sa demande directement sur le site.

La possibilit de sabonner un flux RSS : cest un des aspects les plus marquants de la rvolution 2.0 , une technique qui permet lutilisateur de recevoir directement linformation, sans se dplacer sur le site. Les flux RSS permettent ainsi de communiquer les informations les plus fraches du site le plus rapidement possible. Leur lecture peut se faire via une application installe sur lordinateur de lusager, cest--dire un agrgateur, ou simplement sur un navigateur. Ce principe de syndication de contenu repose sur la technologie XML40. Grce Joomla, nous avons pu installer un systme de flux RSS. Il suit le fil des mises jour de la page daccueil puisque cette page est consacre aux dernires nouveauts prsentes sur le site. Il a t plac en dans le coin droit en haut de la page (figur 20).

Fig.18. Flux RSS

39 40

RSS Really Simple Syndication Extensible Markup Language

52

La recommandation un ami : pour chaque article, lditeur de Joomla propose dafficher une icne e-mail, afin de conseiller larticle un ami. Cette fonctionnalit, peu couteuse en termes despace, a donc t ajoute chaque article. Ainsi, linternaute pourra partager linformation dans son rseau social et contribuer une hausse du trafic sur le site. De plus, ladresse mail de ce contact sera rcupre par lapplication.

Par ailleurs, afin de maintenir un taux de frquentation lev, le site doit dvelopper un contenu de qualit et frquemment mis jour.

3.2.3. Fidliser les utilisateurs : optimiser la gestion de contenus mem_00430584, version 1 - 9 Nov 2009

La qualit du contenu est le premier critre retenu par les internautes pour valuer la performance dun site41. Celui-ci cherche avoir accs une information claire et actualise. Rdiger sur le web impose donc certaines contraintes :

Adopter une syntaxe simple Insister sur les mots et expressions-cls, porteurs de linformation utile Intervenir intervalles rguliers sur le contenu du site

A lheure o jcris ce mmoire, le site dispose encore de peu de contenu textuel. Nanmoins, nous avons fix quelques rgles ce sujet. Tout dabord, la page daccueil mettre chaque fois en exergue une uvre du muse, par le biais du dossier du mois . Celui-ci sera consacr la description dtaille dune uvre, avec des commentaires et diverses anecdotes, le but tant de faire dcouvrir pas--pas la richesse des collections musales. A la manire dun blog, cette section sera ainsi loccasion de crer un point de rendez-vous sur le site. En effet, mme si le site a t conu dans loptique dtre une vitrine de ltablissement sur le web, il nen demeure pas moins quil aura vocation diffuser des contenus dynamiques.

41

Rsultats de sondage parus sur http://www.marketing-internet.com/articles/conception/contenusite.html

53

Par ailleurs, il a t recommand la personne charge dalimenter le site aprs mon dpart de respecter une syntaxe simple lors de la mise en forme du contenu, et ce pour viter les dparts prcipits des visiteurs, dus une mauvaise comprhension ou une mauvaise interprtation des informations mises en avant. De mme, ce contenu doit tre personnalis et ne pas se limiter un simple copier-coller dune information obtenue par un autre canal de diffusion. Il sagit dy ajouter une plus-value : une image, un commentaire, une information indite, etc. La charte ditoriale du site a donc t fixe selon trois exigences : mem_00430584, version 1 - 9 Nov 2009

Sadresser tout type dutilisateur, par le biais dun vocabulaire simplifi Produire un contenu mis jour frquemment Se dmarquer des autres vecteurs dinformations sur le muse

Aprs avoir agi sur laspect graphique du site et sur son cont enu, la dernire tape a t de faire en sorte quil soit en bonne place dans les moteurs de recherche. Cest l quinterviennent les stratgies de rfrencement.

3.3. Rfrencer et promouvoir le site : pour une meilleure visibilit sur le web

Lhbergement et la mise en ligne du site ntant pas encore effective au moment o jcris ces lignes, il sagira ici de prsenter lintrt dune stratgie de rfrencement pour amliorer la visibilit du site, et de donner quelques recommandations ce sujet.

3.3.1. Etre identifiable sur le web

Pour effectuer le rfrencement dun site, il faut connatre au pralable la nature de la cible vise. Sagissant du muse Sandelin, la cible est le grand public mais en particulier les amateurs dart, dhistoire, et de culture au sens noble du terme. Lintrt du rfrencement est donc, non seulement de permettre facilement aux personnes qui connaissent le site de le retrouver, mais galement de le faire dcouvrir des personnes qui nen auraient pas

54

connaissance. Lobjectif qui sous-tend cette dmarche tant daccrotre la notorit du muse dans la France entire, mais galement de contrler les informations qui sch angent sur le web propos du muse Sandelin, cest--dire de leur confrer un caractre officiel.

Il est souhaitable que le muse dpose son propre nom de domaine : actuellement, il sagit de http://www.musees-ville-saint-omer.com/. Cependant, ce dernier semble inadapt car le nom du muse napparat pas dans lURL. Afin daider les usagers mmoriser ladresse du site, Il faudrait donc rserver un nom de domaine spcifique, qui comporte les mots muse et Sandelin . Lextension peut tre en .com ou en .fr.

Il faudrait ensuite soumettre le site auprs des outils de recherche. Selon Jean-Pierre mem_00430584, version 1 - 9 Nov 2009 F.Eskenazi, dans louvrage Rfrencement, comment rfrencer son site web, paru aux Editions Webedition en 1999, les outils de recherche (moteurs de recherche et annuaires) sont consults par plus de 95% des internautes. Leur rapidit, la quantit des rsultats retourns et leur souplesse de mise ne uvre en font des partenaires privilgies de la recherche dinformations chez les usagers. Pour tre visible, le site du muse doit donc tre aisment reprable dans les pages de rsultats de ces outils. Une fois le site plus fourni en termes de contenu, la premire tape consistera alors ajouter son URL aux principaux moteurs de recherche et annuaires. Le choix de ces derniers doit tre motiv par leur popularit : lheure actuelle, Google domine le march, devant Yahoo, LiveSearch et Altavista. Il ne faut cependant pas ngliger les moteurs de recherche alternatifs comme Mozbot ou Exalead. Cependant, tre prsent ne signifie pas pour autant tre visible : pour cela il est impratif de se positionner sur les mots-cls susceptibles dtre saisis par les internautes et doptimiser les pages pour le passage des robots.

3.3.2. Renseigner les balises meta et optimiser les pages

Le choix des mots-cls doit tre tabli en fonction de ce que des internautes dsireux davoir des informations sur le muse Sandelin pourraient taper. Il convient ainsi dadopter un comportement intuitif et de se mettre la place de lutilisateur final en qute dinformations. Quelles requtes pourrait-il formuler ? Les mots-cls choisis doivent

55

galement coller le plus possible au contenu textuel des pages. Une mthode consiste ainsi relever les occurrences dans les textes des sites. Pour le muse Sandelin, un choix de motscls pertinent serait, par exemple : muse, Sandelin, Saint-Omer, beaux-arts, cramique, collections, Boilly, cabinets damateurs, scne de genre. Des termes trop gnriques tels que culture doivent tre carts, il est en effet impossible de se positionner sur des mots-cls trs recherchs. Des tests de rsonnance peuvent tre mens cette fin afin de cerner quels sont les mots-cls qui gnrent le plus rsultats dans les moteurs de recherche et les retirer de notre propre liste. Mieux vaut se concentrer sur quelques mots-cls essentiels. Concrtement, Les diffrentes balises renseigner sont les suivantes : mem_00430584, version 1 - 9 Nov 2009

Balise meta title : cest le titre de la page courante. Cette balise doit comporter une dizaine de mots-cls qui reprennent le thme de la page courante, de manire fonctionnelle et concise. Par exemple : Site officiel du muse de lHtel Sandelin SaintOmer.

Balise meta keywords : cette balise contient les mots-cls dfinis pour une page. Elle ne doit pas comporter plus de cinquante mots, crits en minuscule et spars par des virgules. Aujourdhui, elle est de moins en moins prise en compte par les moteurs de recherche, cause notamment des techniques de spamdexing42.

Balise meta description : elle doit rsumer le contenu des pages en quelques mots (vingtcinq environ). Elle dcrit ce que le visiteur va trouver sur le site. Ce texte saffiche en effet sur les pages de rsultats de Google, en-dessous de lURL. Il ne doit pas dpasser 200 mots. Dans le CMS Joomla, nous avons la possibilit, lors de la cration dun article, de

dfinir pour ce dernier un ensemble de mots-cls et une description. Par contre, le titre de la page reprend le titre donn au site, ainsi que lintitul de la rubrique, sous la forme Titre du site Titre de la rubrique (figur 21).

42

Spamdexing : rptition abusive de mots-cls

56

Fig.19 Balise meta title

Par ailleurs, le site du muse est constitu de pages dynamiques, cest --dire faisant appel une base de donnes pour tre affiches sur les navigateurs. Ces pages comportent donc des caractres spciaux comme le ? ou le = . Or, la majorit des spiders rejettent les URL dites exotiques 43. Cest pourquoi il sera ncessaire dutiliser la technique de lURL rewriting afin de crer des URL propres . Tous les hbergeurs ne supportent pas ou nactivent pas lURL rewriting, il est donc ncessaire de prvoir cette ventualit avant la mem_00430584, version 1 - 9 Nov 2009 mise en ligne.

La communication du muse doit galement passer par des actions de promotion qui vont jouer un rle dacclrateur dans la notorit du muse.

3.3.3. Promouvoir le site : une stratgie marketing

La mdiation entre les collections musales et le public va aujourdhui de paire avec une relle stratgie de marketing culturel . Il sagit de mettre en place des campagnes de promotion, la manire dune entreprise qui dmarche un client potentiel pour lui vendre son produit. Ramen la sphre web et au lieu muse, cela sexprime par des annonces dvnements (expositions, journes privilges) diffuses massivement sur le mdia Internet. A titre dexemple, citons le buzz cr rcemment par lexposition de Jeff Koons au chteau de Versailles. Un site avait t lanc pour lvnement ainsi quune newsletter44. Dans dautres muses, ce type dvnements occasionnent la parution dun blog ou la publication de vidos sur YouTube : lessentiel est de faire parler deux.

43 44

N. CHU, Russir un projet de site web, Editions Eyrolles, Paris, 2006, page 111. Bernard, HASQUENOPH, Versailles 2.0, un buzz qui fait splash, novemebre 2008, http://www.louvrepourtous.fr/Versailles-2-un-buzz-qui-fait,099.html

57

Concernant le muse de lhtel Sandelin, des actions concrtes, ncessitant peu dinvestissement, peuvent tre menes pour accrotre la popularit du site. Trois procds simples mettre en place retiennent ici notre attention : Le netlinking : il sagit dun change crois de liens avec des sites partenaires. Il peut sagir de simples liens hypertextes ou dimages cliquables, par exemple le logo du muse Sandelin. Cela permet daugmenter, sans frais, la popularit dun site. Il faut se rapprocher de sites dont la thmatique se rapproche de celle dveloppe sur notre propre site ou encore se tourner vers des sites disposant dun PageRank45 lev. Le muse, on la vu, est entour de nombreux partenaires : les Amis des muses, les Antiquaires de la Morinie, la Ville de Saint-Omer, etc. Il sagira donc de mem_00430584, version 1 - 9 Nov 2009 proposer ces organisations dafficher un lien sur leur site, en change dun lien sur le ntre. Le site contient une rubrique Partenaires o sera affich ce type de liens. La campagne de e-mailing : le muse communique normment par mail, il serait donc judicieux de lancer une campagne de-mailing destination des personnes qui entretiennent de prs ou de loin des liens avec le muse. Cependant, il faut veiller ne pas tre tax de spam, cest--dire ne pas diffuser massivement lannonce de la mise en ligne du site, sans accord explicite des destinataires. Le communiqu de presse : il sagit de rdiger un communiqu de presse pour annoncer le lancement du site. Ce canal de promotion obit des critres prcis : il doit tre clair, concis et accrocheur. Il pourra tre diffus dans la presse spcialise, dans la presse locale, comme La Voix du Nord, ou tre envoy des journalistes avec le qui le muse entretient un contact permanent. Enfin, il est utile de disposer dun espace presse sur le site, dans lequel figurent des informations pertinentes et convaincantes destines aux organismes de presse en qute de documentation sur le muse, ou prparant un article sur ses activits ou son actualit. Limpact sur limage de marque du muse peut-tre dcisif.

45

PageRank : Indice de popularit calcul par Google

58

Conclusion
A lheure de la rvolution numrique, la mise en place dun site Internet musal impose une rflexion pousse sur les stratgies employer pour toucher un public fuyant, adepte de changements et de nouveauts. Lors de lanalyse des besoins, il a t important de dgager les points essentiels sur lesquels lon devait se baser pour dvelopper le site. Tout dabord, il est clair qutre prsent sur le mdia web constitue aujourdhui un passage oblig pour tout tablissement musal. En effet, les nouveaux modes de consommation et de recherche de linformation font la part belle au rseau Internet, qui inonde par son haut dbit plus de cinquante pourcent des foyers franais. Disposer dun site vitrine est donc un minimum pour toucher ce public distant. Mais il ne suffit plus. De nouvelles exigences sont mem_00430584, version 1 - 9 Nov 2009 apparues, et avec elles, de nouvelles contraintes de communication online : pour retenir les internautes, un site web doit respecter certains principes dergonomie, cette science qui fait la part belle au cheminement intellectuel de lusager et son comportement devant une interface homme/machine. Une navigation autonome, fluide, intuitive, qui guide lutilisateur jusqu linformation recherche est un pr-requis indispensable la russite dun projet de cration de site Internet et sa prennit. Des actions ont donc t menes ce niveau : liens identifiables et cohrents, contrastes visuels suffisants, dispositifs pour orienter lusager, etc. Mais le site doit aussi voluer, surprendre le visiteur : tout dabord en prsentant une esthtique originale, fdratrice, mais aussi en lui proposant un contenu rgulirement mis jour. Cest dans cette optique que sont utiliss les logiciels open source CMS, tels que Joomla, qui a t choisi pour le muse de lhtel Sandelin. Le personnel du muse pourra au moyen de cet outil, ajouter un contenu actualis ou proposer dautres fonctionnalits aux visiteurs. Lanimation future du site et sa frquentation dpend ent fortement de cette capacit faire voluer le site et raliser un suivi efficace du rfrencement.

Pour assumer pleinement sa mission de mdiation culturelle, de partage et de transmission des savoirs, le muse doit veiller rester accessible, une contrainte faisant dsormais office de loi, mais aussi sadapter aux mutations sociales et technologiques qui lui imposent lentre dans le web communautaire.

59

Bibliographie
Ouvrages

ABOU, Olivier et ANDRIEU, Olivier, Imaginer son site web, Microsoft Press, 2001. 389 pages. ISBN : 2 84082 886 3 CHU, Nicolas, Russir un projet de site web, 4me dition, Eyrolles : Paris, 2006. 244 pages. ISBN : 2 212 11974 7 ESKENAZI, Jean-Pierre, Rfrencement, comment rfrencer son site web, Webedition : Versailles, 1999. ISBN : 2 9512348 1 3

mem_00430584, version 1 - 9 Nov 2009

NOGIER, Jean-Franois, Ergonomie du logiciel et design web, 2me dition, Dunod : Paris, 2003. 267 pages. ISBN : 2 10 007097 5 SALZMANN, Claude, Dvelopper un projet internet, Nouvelles logiques et pratiques prouves, Dunod : Paris, 2001. 255 pages. 2 10 005578 X WARBESSON, Karine, Crez votre site web, le guide complet, 2me dition, Micro Application : Paris, 2007. ISBN : 978 2 300 01123 8

Articles sur Internet

BOUCHER, Amlie, Accessibilit visuelle des interfaces web, 21 janvier 2004. [En ligne]. Disponible ladresse suivante : http://www.ergolab.net/articles/accessibilite-visuelle-web.php

BOUCHER, Amlie, Faciliter la lecture dinformations sur le web, 15 novembre 2003. [En ligne]. Disponible ladresse suivante : http://www.ergolab.net/articles/faciliter-lecture-informations-web.php

BOUCHER, Amlie, Architecture de linformation, 29 fvrier 2004. [En ligne]. Disponible ladresse suivante : http://www.ergolab.net/articles/architecture-information.php

ROJAS, Estrella, Le web 2.0 et les muses des sciences : quel accs la culture scientifique ?, Universit Paris 8.

60

 Autres ressources

Forum

francophone

de

Joomla,

disponible

ladresse

suivante :

http://forum.joomla.fr/ GAUTREAU, Ivan, Joomla pour les Nuls, ou comment crer et administrer en toute znitude un site web avec Joomla !, publi sous Creative Commons, avril 2007.

mem_00430584, version 1 - 9 Nov 2009

61

mem_00430584, version 1 - 9 Nov 2009

ANNEXES

62

Table des figures

Figure 1 Figure 2 Figure 3 Figure 4 Figures 5, 6, 7, 8 Figure 9 mem_00430584, version 1 - 9 Nov 2009 Figure 10 Figure 11 Figure 12, 13 Figure 14 Figure 15 Figure 16 Figure 17 Figure 18 Figure 19

p9 p 20 p 34 p 35 p 36 p 37 p 39 p 40 p 41 p 44 p 47 p 48 p 49 p 52 p 57

63

Table des annexes

Questionnaire

p 65

Planning

p 68

Analyse de lexistant

p 69

Critres ergonomiques de Bastien et Scapin

p 75

mem_00430584, version 1 - 9 Nov 2009

Plan du site

p 78

Maquette

p 79

SiteMap

p 80

Module Resize Font

p 81

64

Questionnaire

Enqute sur lusage des sites Internet de muse

mem_00430584, version 1 - 9 Nov 2009

En 2008, le site Internet du muse de lHtel Sandelin a t supprim et nest donc plus disponible. Dans le cadre dun stage, ma mission est de crer et de mettre en ligne un nouveau site Web. Jaimerais donc connatre vos usages en matire de navigation sur Internet, et vos attentes concernant le site qui va se mettre en place

1 - Comment avez-vous eu connaissance du muse de lhtel Sandelin ? a. Presse locale b. Affiche ou flyer c. Internet Site touristique Site personnel Site associatif Autre d. Revue spcialise e. Recommandation dun ami

2 - Avez-vous dj consult le site Internet du muse de lhtel Sandelin, aujourdhui hors ligne ? Oui Non passez la question 6

65

3 - Si oui, quelles taient les informations que vous consultiez en priorit? a. Actualits (vnements, expositions, rsidences dartistes, etc.) b. Collections c. Histoire du muse d. Horaires douverture et de fermeture e. Tarifs f. Modalits de contact g. Plan daccs

4 - Comment avez-vous valu la navigation lintrieur de ce site ? a. Fluide mem_00430584, version 1 - 9 Nov 2009 b. Lourde

5 - Le contenu du site rpondait-il vos attentes ? a. Oui b. Non (pourquoi ?)

6 - Pour le nouveau site, quelles seraient les fonctionnalits auxquelles vous aimeriez accder ? a. Newsletter b. Agenda c. Moteur de recherche d. Dpt de commentaires (raction aux articles publis) e. Documentation tlcharger f. Galerie photos g. Autre :

7 - Vous tes-vous dj inscrit une activit propose par le muse ? Oui Non

66

8 - Seriez-vous intress par la possibilit de vous inscrire en ligne aux activits du muse, via un formulaire dinscription ?
Oui/Non

9 - Si oui, dans quel but ? a. Rservation pour les visites des groupes scolaires b. Inscription aux ateliers enfants

10 - Quelles sont, selon vous, les informations indispensables qui doivent figurer sur un site musal ? a. Actualit mem_00430584, version 1 - 9 Nov 2009 b. Prsentation des collections c. Informations pratiques d. Activits du muse e. Autre :

11 - Pour le site, vous souhaitez un design : Sobre Elabor

12 - Vous rendez-vous souvent sur les sites de muse ?

a. Oui b. Non

Merci de votre contribution. Antoine B.

67

mem_00430584, version 1 - 9 Nov 2009

Planning

68

tude du site web prcdent

Page daccueil

Elle sorganise autour de plusieurs rubriques, mais nidentifie pas clairement ce qui est disponible sur le site. Dans la version 2007, la page daccueil comportait plusieurs rubriques :

Exposition : un rapide tour dhorizon sur lactualit immdiate du muse : en loccurrence une exposition destampes japonaises des muses de Calais et de Saint Omer

mem_00430584, version 1 - 9 Nov 2009

Les documents tlcharger : ils sont au format PDF, qui est libre de droits. Il sagit essentiellement du programme du muse, du dpliant et du programme pour les groupes scolaires.

69

Les liens utiles : une compilation de liens pour approfondir le sujet trait dans la page daccueil.

mem_00430584, version 1 - 9 Nov 2009

Ouverture au public : un ensemble dinformations utiles et pratiques sur les horaires douverture, les tarifs, les adresses de contact, etc.

Les diffrentes rubriques

Le site sorganise autour dune dizaine de rubriques, prsentes dans le bandeau suprieur de la page.

Prsentation : une page assez longue qui dcrit la situation du muse Sandlin, ses origines, qui voque les collections mais aussi le chantier de rnovation du muse. Elle prsente galement le nouveau parcours musographique. Lensemble est accompagn dillustrations.

Bref histoire du muse Sandelin : elle contient un ensemble dinformations trs denses sur lhistoire du muse, organises de manire chronologique. Elle contient galement

70

des fiches portrait sur les grands collectionneurs et mme des blocs de texte sur les collections. Il y a un sommaire, mais disponible uniquement la fin des pages. En effet, cette rubrique tient sur 5 pages et ncessite de finir la premire page pour pouvoir accder la seconde ( passer la page suivante , en bas de la page). Il ny a pas de menu droulant permettant daccder la page de son choix. Cette page est structure selon diffrents niveaux de lecture : la commission dhistoire naturelle, la cration du museum, lhistoire de lhtel Sandelin, etc.

Collectionneurs : elle prsente deux personnages qui ont lgu leurs collections aux muses : Henri Dupuis et Tell Chaix dEst-Ange.

mem_00430584, version 1 - 9 Nov 2009

Parcours : cette rubrique aborde chaque parcours du muse en profondeur. Dabord une prsentation gnrale, qui reprend la couleur verte densemble, puis un niveau en dessous, les trois parcours. Chacun de ces trois parcours arbore une couleur spcifique : bleu pour la cramique, jaune pour lhistoire, et rouge pour les beaux-arts.

Informations pratiques : un ensemble dinformations pratiques sur ladresse du muse, les modalits de contact, daccs, les horaires douverture, les tarifs, etc., organises en 3 sous rubriques : ouverture au public , adresse , accs , pour entrer en contact avec lquipe de conservation . Est disponible galement le programme des activits scolaires tlcharger au format PDF, ainsi quune photo de laccueil.

71

Dossiers : un focus sur 3 uvres du muse, avec description de lartiste, de luvre et du contexte dacquisition. Ici, La crucifixion, du Matre du Rhin Moyen, Les Sirnes de Lon Belly, et des peintures et estampes Ukiyo-E.

uvres : un rfrentiel trs fourni des uvres majeures du muse, rpertories selon les diffrents parcours : Histoire, Beaux-Arts, Cramique. Diffrents champs renseignent chaque uvre prsente : Auteur, Excutant, Ecole, Priode, Datation, Domaine, Technique, Dimensions, Gense, Prcisions concernant la gense, Statut, Mode dacquisition, Date d'acquisition, Inventaire. Le jeu de couleurs pour distinguer les trois parcours est repris.

mem_00430584, version 1 - 9 Nov 2009

Plan du muse : une rubrique divise en trois sous-rubriques : sous-sol, rez-de-chausse, 1er tage. lintrieur de ces sous-rubriques, une page est rserve chacune des salles prsenter. Quand on a fini de parcourir chaque salle, on peut accder un sommaire. Sur la gauche, un schma pour localiser les salles et leur agencement : en cliquant sur une salle, on accde au contenu qui y est rattach. ne barre de navigation permet de se rendre au niveau -1, 0 ou 1.

La charte graphique

Typographie : la police choisie est de petite taille et semble correspondre une police empattement. Pour les titres des pages, la taille des caractres est plus grande. Certains mots ont t mis en valeur par le gras et litalique. Une deuxime police a t utilise pour les rfrences aux uvres ou aux artistes.

Couleurs dominantes : le site utilise comme couleurs dominantes le blanc et le vert. Le vert est plac dans le bandeau de navigation, en en-tte mais aussi dans les titres des paragraphes. Les sous-rubriques se distinguent par une couleur verte plus claire, ou parfois on a recours dautres couleurs (rouge, jaune, bleu) pour signifier une distinction entre les trois parcours, le blanc est la couleur choisie comme fond. Cette trame est cohrente et respecte sur toutes les pages.

72

Logo : le logo napparat pas sur le site, par contre on retrouve un petit encart dans le coin gauche en haut de la page avec le nom du muse.

Le schma de navigation

Le site prsente une architecture arborescente : partir de la page daccueil, on peut accder diffrentes rubriques, elles-mmes subdivises en sous-rubriques plus spcifiques. mem_00430584, version 1 - 9 Nov 2009 La navigation passe essentiellement par un menu horizontal deux niveaux non droulant. Les sous-rubriques sont souvent constitues de plusieurs pages, quil faut parcourir en entier pour accder la suivante car le lien vers la page suivante nest disponible quen bas de page.
Page OU UU Page

Sous-rubrique Rubrique

Page daccueil Page daccueil

Sous-rubrique Rubrique Rubrique

Bilan

Tout dabord, le site prsente une surabondance dinformations. Ici, on vise davantage un public de connaisseurs ou de passionns quun internaute lambda. Les dfilements verticaux sont trop frquents, cela nincite pas lire. On observe, par ailleurs, beaucoup dinformations redondantes (ex : portrait des collectionneurs dans deux rubriques diffrentes), il faut donc simplifier le contenu et arer la mise en page. La charte graphique

73

est cohrente mais la police empattement induit une mauve visibilit. Les polices de type Verdana ou Arial sont plus adaptes la lecture sur cran. Pour ce qui est de la couleur, le vert est repris sur toutes les pages, mais le choix dun dgrad serait plus judicieux. La distinction des parcours par le jeu de couleurs aide se reprer, cependant celles-ci sont trop agressives lil. Des icnes pourraient servir de guide linternaute. De plus, lactualit du muse est peu mise en valeur, elle ne fait lobjet que dun paragraphe en page daccueil. Enfin, la navigation nest pas optimise et la rgle des trois clics nest pas respecte. Pour accder une page, il faut bien souvent cliquer sur plus de trois liens.

mem_00430584, version 1 - 9 Nov 2009

74

Critres ergonomiques de Bastien et Scapin

(Daprs http://www.ergonomia.ca/CriteresErgonomiques.pdf)

Guidage
Conseiller, orienter l'usager dans son interaction avec le systme.

Incitation Critre lmentaire (barre d'tat, mesure, espace, format, indice, titre, aide...tout lment facilitant la navigation).

Groupement/distinction mem_00430584, version 1 - 9 Nov 2009 Organisation visuelle de l'information pour illustrer une relation de classe de type appartenance/distinction par: - la localisation - le format

Feedback immdiat Rtroaction du systme: - qualit - rapidit

Lisibilit Critre lmentaire: caractristiques lexicales de prsentation des

informations l'cran (luminance, contraste, caractres, dimension, espacement, longueur des lignes, etc.)

Charge de travail
Rduction de la charge perceptive ou mnsique.

Brivet *Concision: lments individuels d'entre ou de sortie.

75

*Actions minimales = squences d'entre (suites d'actions pour atteindre un but).

Densit informationnelle Charge perceptive ou mnsique pour des ensembles d'lments et non des items individuels

Contrle explicite
Actions explicites Transparence du systme mem_00430584, version 1 - 9 Nov 2009

Contrle utilisateur Rversibilit: possibilit de revenir sur ses pas, d'annuler ses actions.

Adaptabilit
Flexibilit Alternatives (procdures, options, commandes) pour un mme objectif.

Prise en compte de l'exprience de l'utilisateur Dbutant, intermdiaire, avanc.

Gestion des erreurs

Protection contre les erreurs Dtecter et prvenir les erreurs lors de la saisie vs validation.

Qualit des messages d'erreur Pertinence, exactitude, facilit de lecture de la nature et des raisons des erreurs et solutions.

Correction des erreurs Moyens mis la disposition de l'usager pour faciliter la correction des erreurs.

76

Homognit/Cohrence
Cohrence interne Cohrence gnrale des diffrents lments du systme entre eux. * Mtaphore: cohrence des rfrents du systme. * Mapping: cohrence de l'ensemble des signifiants. * vidence (affordance): vidence physique pragmatique des lments.

Signifiance des codes et dnominations

Relation smantique forte Relation entre objet ou information affiche et rfrent. mem_00430584, version 1 - 9 Nov 2009

Compatibilit
Critre lmentaire Cohrence externe Similitude entre divers lments, environnements et applications

77

Plan du site

Prsentation A propos du muse Un peu d'histoire Les collections A voir au muse Les parcours Les chefs d'oeuvre La programmation Les rendezvous Les visites thmatiques Agenda Histoire Beaux-Arts

Cramique

mem_00430584, version 1 - 9 Nov 2009

Actualit

Evnements Expositions temporaires Doumentatio n Espace enseignant Devenir enseignant correspondant Documents pdagogiques Activits proposes Prparer sa visite Une journe St-Omer Inscription en ligne Contenu dynamique La visite au conte Les rendezvous de la comtesse

Page d'accueil

Interactivit

Contes et comtesse Espace junior Les ateliers

78

mem_00430584, version 1 - 9 Nov 2009

Maquette de la page daccueil

79

mem_00430584, version 1 - 9 Nov 2009

SiteMap

80

mem_00430584, version 1 - 9 Nov 2009

Module FW Resize Font

Avant

Aprs

81

Rsum
Aujourdhui, les muses prennent la mesure de limpact des nouveaux usages lis lexplosion de lInternet grand public. Leurs stratgies de communication visent investir pleinement ce nouveau mdia. Etre prsents sur Internet leur offre en effet lopportunit de toucher des cibles jusqualors inaccessibles : enfants, tudiants, ou simples passionns de la toile. Mais galement de rompre avec limagerie traditionnelle du muse repli sur sa tour divoire . Dans le cadre de ce stage, jai donc t amen concevoir le site Internet du muse de lhtel Sandelin, en adoptant une rflexion centre utilisateur . Le prsent mmoire dcrit les diffrentes tapes de mise en place du site, depuis le recueil des besoins jusqu son dploiement sur le web. Ltude des besoins a permis de retenir comme outil le CMS Joomla, support de la communication en temps rel du quotidien musal. La phase de conception a rvl lintrt de suivre des principes ergonomiques

mem_00430584, version 1 - 9 Nov 2009

pour amliorer le confort de visite des usagers. Enfin, la diffusion du site a permis de mettre en relief laspect stratgique de la communication musale auprs du public.

Mots-cls : communication web, utilisabilit, ergonomie, accessibilit, CMS, site internet de muse, rfrencement, dmocratisation culturelle, attractivit.

Abstract
Nowadays, museums are more and more sensitive to the deep impact of Internet technologies on peoples behavior. Their communication policies have to include this new media. The benefits of Internet presence are linked to the new public they can reach: children, students, or passionate Internet users. Thereby, they can also break stereotypes making museums some kind of ivory towers. During this work placement, I had the responsibility to create the website of the Hotel Sandelin Museum, and I conducted a users-oriented project. This statement describes, step by step, the implementation of the website, from the needs analysis to the online publication. The results of the needs analysis concluded that the CMS (Content Management System) Joomla was appropriate, because the museum intends to communicate, day after day, about its activities. The conception phase of the project revealed that it was necessary to respect some ergonomic rules in order to improve the browsing performance. Finally, the launching of the website highlighted some strategic aspects about communication to the public.

Keywords : web communication, usability, website ergonomy, web accessibility, CMS, museums website, search engine optimisation, cultural democratization, attractivity.

82