Cours Webmaster

Conception, refonte de sites web : la méthode de la conception participative


Télécharger Conception, refonte de sites web : la méthode de la conception participative

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Conception, refonte de sites web : la méthode de la conception participative

Eve Demazière, 26 juin 2004

Ces dix dernières années, le web a changé, les sites web ont changé, les profils des acteurs du web ont changé : alors, forcément, la conception de sites web change. Voici pourquoi, et comment.

Comme conceptrice multimédia, j'ai participé à la conception ou à la refonte de sites pour différents services d'une grande institution, sites s'intégrant dans un portail global grâce à un cadre graphique commun dont les exigences sont peu nombreuses ; chacun jouit donc d'un espace de personnalisation "à la carte". En contrepartie, le service demandeur s'engage à le gérer de manière autonome. 

Mon rôle consistait à accompagner le service demandeur dans la conception et la réalisation de son site.

Ce texte explique la méthode de conception participative, que j'ai perfectionné durant deux ans. Un grand merci à toutes les équipes qui m'y ont aidé par leur participation.

NB : cette méthode est entièrement indépendante de l’outil de réalisation des pages, qu’il s’agisse d’un éditeur de HTML statique ou de pages dynamiques générées par ce qu’on veut.

1. Evolutions nécessaires

Pendant longtemps, la création et la mise à jour des sites web ont été l’apanage de spécialistes : as du HTML, dans les premières années de l’internet, qui brodaient amoureusement leurs « pages perso » avec un éditeur de texte type NotePad ou BBEdit ; puis, dans les années 90, les « web agencies », ces agences de communication spécialisées dans le web qui détenaient et monnayaient fort cher le secret des « sites web qui tuent ».

Plusieurs éléments de l’évolution du web de ces dernières années concourent à éliminer les professionnels de certaines sphères de la production. Ce sont :

•   La nouvelle orientation du rôle du webmestre : les sites web prenant de l’ampleur, le « webmestre » ne peut en assurer seul la mise à jour. Il délègue donc un certain nombre d’opérations – variable selon la technique utilisée – à des personnes généralement éloignées de la technique, et plus proches de l’information (ici les « personnes-ressources ») ; sa fonction se recentre sur des thèmes de réflexion et d’action plus conceptuels (évolution des outils, cohésion éditorial du portail, animation du groupe des personnes-ressources, etc.) ;

•   Le développement des outils de « web content management » : plus besoin d’être un as du HTML, de nombreux outils existent (type PHP-Nuke, SPIP et autres blogues) qui permettent de mettre à jour un site web à partir d’un simple navigateur web ;

•   La nécessité d’une mise à jour proche de l’information : les sites web ne sont plus de simples « cartes de visite », et ils sont de plus en plus nombreux. Pour être visibles, ils doivent donc être le reflet fortement spécialisé, personnalisé, d’un métier, d’une pratique, d’une offre. Ceci fonctionne au mieux lorsque le schéma de circulation de l’information « producteur »-« consommateur » est aussi direct que possible, sans intermédiaires ni délai.

En mélangeant ces trois ingrédients, on approche de l’idée qu’un site web, qui doit être fortement personnalisé et sera mis à jour par des personnes-ressources du service demandeur, doit également, lors de sa conception ou de sa refonte, s’appuyer sur une participation importante de ce même service.

Voici pourquoi.

Un bon site web, c’est un site utile. L’internaute-lecteur y trouve ce qu’il cherche, facilement, et l’information est correcte et complète. En terme de conception, d’aussi simples et évidents besoins nécessitent beaucoup de réflexion, de décisions et d’actions :

•   Déterminer les publics et le contenu : qu’ai-je à dire et à qui ?

•   Regrouper et hiérarchiser l’information, pour le ou les publics identifiés : où le public ira-t-il chercher l’information sur le site ? comment faire pour qu’il voit le principal ?

•   Mettre à jour, rapidement et efficacement.

On comprendra que personne mieux que le service demandeur ne saura identifier le(s) public(s), les besoins, l’importance respective des contenus. Quant à la mise à jour, elle sera efficace si elle est directe, et d’autant plus que la personne-ressource, ayant accompagné sa gestation, connaît son site sur le bout des doigts.

A quoi sert donc le concepteur multimédia, me direz-vous ?

Il apporte son expertise « outil », complétant l’expertise « métier » du service demandeur. 

L’expertise « outil » comprend plusieurs aspects :

1.   la connaissance et la pratique des spécificités de l’outil web comme vecteur de l’information

2.   La connaissance des pratiques des utilisateurs (ou « internautes »), en particulier sous l’angle « comment inspirer confiance »

3.   La veille des « bonnes pratiques » pour la présentation de sites web (les modes changent vite)

4.   l’heureuse concrétisation – charte graphique, principes de navigation - des choix en terme de contenu, d’organisation et de hiérarchisation de l’information

5.   l’intégration du site dans le portail global : cadre graphique et fonctionnel global, espaces de choix vs. contraintes, passerelles vers l’information fournie par d’autres sites

6.   la connaissance des étapes nécessaires pour faire un bon site web, ne rien oublier, et avancer de manière sûre

7.   les connaissances techniques et graphiques nécessaires à la réalisation d’une charte graphique efficace, et des gabarits nécessaires à la réalisation des pages (il faut tenir compte des disponibilités internes, en terme de compétences et de temps)

8.   les connaissances nécessaires à la transmission du savoir pour la réalisation des pages (compréhension et respect de la charte graphique, spécificités de l’écriture pour le web, réalisation des pages et mise en ligne…), et l’assurance du suivi de la réalisation et de la mise à jour.

Les points 1 à 3 forment la facette « ergonome » de la profession ; le point 4 complète les points précédents, avec une spécialisation d’architecte de l’information ; le point 6 est un apport de type méthodologique ; le point 7 est purement technique, et le 8 pédagogique. On notera que le métier de concepteur multimédia, généralement réduit au choix des couleurs et des images et à la connaissance du HTML, est notablement plus complexe. 

Le chapitre suivant fixe, dans l’exposition de la méthodologie, le cadre de la collaboration service demandeur/concepteur multimédia : que faut-il faire, et quels sont les apports respectifs à la réalisation commune ?



Ci-dessous, la conceptrice multimédia, c’est « je », c’est moi. Allez, au travail, ensemble.

2. Cadre de la collaboration

La réalisation d’un site web consiste en un grand nombre d’étapes – petites et grandes, mais toutes essentielles - qui doivent se suivre dans un ordre précis, et avec des étapes de validation, tout ceci afin de ne pas risquer de devoir tout détricoter et retricoter. La matérialisation du site – hiérarchisation de l’information, principes de navigation, charte graphique -  est l’expression finale des nombreuses décisions prises : à chaque étape, il importe que le service demandeur en connaisse l’importance et l’impact, afin de personnaliser au mieux les choix.

J’apporte le plan d’action – élaboré grâce à mes compétences « outil » -, je le montre, je l’explique, et demande qu’on s’y soumette. Ce plan d’action consiste en questions, que je pose en prenant soin d’expliquer les conséquences des choix : les réponses proviendront toutes du service demandeur. Le résultat de la réflexion sera consigné dans un document mémoire du site (nous en reparlerons).

Le service demandeur attend de moi que je l’oriente, et que je l’écoute : qu’il soit assuré que ses demandes seront toutes prises en compte, et intégrées au bon endroit – celui de leur efficacité maximale - dans le produit final. 1. L’équipe de travail

Pour participer, il faut être plusieurs… Et puis il faut avoir quelque chose à dire, envie d’en être, et le temps. Ceci posé, l’équipe idéale comportera un « décideur », car il y a des choix politiques à effectuer, un « technicien », celui qui réalisera et mettra à jour le site (l’une des variables importantes est le temps disponible pour la mise à jour des pages), et un

« communiquant », quelqu’un qui connaît bien le service, vers qui converge l’information et qui a goût à la redistribuer. On aura besoin d’un excellent « rédacteur », également, pour réaliser les textes.

L’une de mes plus redoutables tâches est d’indiquer dès le début que la réalisation d’un site web, ou sa refonte, est certes possible – je m’en porte garante – mais qu’elle demande du temps et du travail. Pas de compétences techniques, par contre, autre qu’une bonne pratique des outils de l’internet (web et courrier électronique). Techniquement parlant, je me charge d’élaborer, en fin de projet, les gabarits nécessaires à la réalisation des pages, et de former la ou les personnes en charge de la création du site. Car je ne réalise pas les pages : la conception du bébé revient au service demandeur, et son accouchement itou, rien de tel pour connaître un site jusqu’au bout du HTML. 2. Le cahier des charges

Ce premier document, un simple mais indispensable fichier texte, réunit les réponses du service demandeur aux questions de base de tout projet de communication : pourquoi un site web ? en quoi sert-il les internautes ? en quoi sert-il le service ? quel(s) public(s)-cible ?

quelles informations ?  quelle image de lui-même le service veut-il donner ? y a-t-il une charte visuelle du service demandeur à transposer sur le web (logos, couleurs, typographie, images, etc.) ?

En cas de refonte : quels manques, quelles améliorations à la précédente version du site ? Mais aussi quels atouts à conserver ?

Etude des sites de la « concurrence » : quels sont les bons sites, et pourquoi ? quels sont les mauvais sites, et pouquoi ?

Pour la création du site : documents textes ou graphiques disponibles, compétences rédactionnelles…

Pour la mise à jour, plus tard : temps (attention à bien sensibiliser le « décideur » à la charge de travail nécessaire à la mise à jour des rubriques), compétences, matériel informatique et logiciel disponibles.

Réseau de communication interne : les membres du service, non présents dans l’équipe de conception, sont-ils sensibles à l’utilité du site web ? Ont-ils également des besoins ? Penseront-ils plus tard à communiquer l’information dont ils disposent pour qu’elle soit mise en ligne ?

Le cahier des charges servira bien sûr d’aune pour mesurer la qualité de la réalisation finale.

3. Le rubricage global

Grâce aux définitions précédentes, on est à la tête d’un tas d’informations. Il faut maintenant les organiser, les ranger, en fonction de priorités (définies par le service demandeur, selon les publics-cible) et de pratiques (études des sites web proches connus et appréciés – apport du service demandeur -, et de l’ergonomie web en général - c’est mon apport).

Jusque là, tout va bien. L’atmosphère se gâte généralement au point suivant, écueil nécessaire (mais je suis la seule convaincue, à cette étape de la conception, qu’il est nécessaire : « vous verrez, c’est pour votre bien »).

4. Le rubricage technique

Ce document-texte est la version détaillée du rubricage global.

Il comprend :

•   la liste complète des pages, classée de manière hiérarchique (rubrique 1 – sous-rubriques

1.1 et 1.2, sous-sous-rubriques 1.1.1 à 1.1.4,  X pages de contenu pour chacune),

•   pour chaque rubrique, pour chaque page, le titre définitif et une brève description du contenu (s’il s’agit d’une refonte de site, on indique l’URL de la page existante équivalente),

•   des indications de rangement physique (nom des répertoires, sous-répertoires, nom des fichiers HTML correspondant à chaque page). Si le répertoire est destiné à contenir un grand nombre de pages sur le même modèle, préciser la « politique de nommage » (par exemple, un fichier par région = ),

•   des indications de format (.html, .pdf, etc.),

•   pour les rubriques concernées, l’indication de l’archivage de l’information caduque : oui ? non ? si oui : comment, où et quand ?

•   les liens complémentaires : pages dont le contenu complète utilement le thème abordé. On en profitera également pour déterminer et noter les meta-tags et les balises de titre, utiles pour le référencement du site.

Le rubricage technique est indispensable :

•   pour préciser intégralement la structuration de l’information (découpage du plus général au plus précis),

•   pour déterminer la « profondeur » du site (combien de sous-niveaux nécessaires), ce qui aura une influence déterminante sur les principes de navigation nécessaires,

•   pour vérifier qu’il n’y a pas de déséquilibre entre des rubriques maigrichonnes et d’autres replètes,

•   pour vérifier la future coordination entre les pages,

•   pour homogénéiser la présentation des contenus de rubrique (même nom et même type de page d’accueil de rubrique, par exemple),



•   pour compter le nombre de pages final,

•   pour réaliser les textes nécessaires, sans en oublier,

•   pour réaliser les gabarits (une page par rubrique, par sous-rubrique, avec les éléments de navigation finaux),

•   pour réaliser les pages du site (on n’aura alors plus à se soucier que de HTML),

•   pour la compréhension du site, plus tard, lors de la mise à jour.

Son défaut principal : il doit être extrêmement précis, alors que peu de gens sont capables, à cette étape de la conception, de le transposer en terme de site web. Autrement dit, l’équipe peine à revêtir ce squelette de la peau, des muscles, et de la couleur des yeux leur permettant d’y voir l’être séduisant qui en sortira.

Cette étape est longue, ardue : certaines équipes n’y arrivent pas seules. Et ce document a le chic (c’est son rôle) pour mettre en lumière une foule de détails importants, non réglés dans la phase antérieure de rubriquage global.

5. Sensibilisation du reste du service

Tout au long du travail de conception, il faut veiller à informer l’ensemble du service des progrès du projet. Cette sensibilisation vise à impliquer tout le monde, de manière à commencer à établir le réseau de communication qui mènera l’information jusqu’au bureau de la personne chargée, plus tard, de la mise à jour. On peut imaginer plusieurs interventions :

•   Tout au début : présentation du projet, de la conceptrice multimédia, de son rôle, et des membres de l’équipe de conception.

•   Présentation de documents intermédiaires : il faut choisir des documents lisibles par tous. Le rubricage global en est un, le rubricage technique pas vraiment. La charte graphique est celui sur lequel tout le monde réagira (c’est un peu tard, malheureusement, mais mieux vaut tard…)

•   Présentation du site terminé, par l’équipe de conception, à l’ensemble du service

•   Formation à l’utilisation du site, plus personnalisée

6. Des développements sont-ils nécessaires ?

Le rubricage global permet d’évaluer si des développements informatiques sont nécessaires (bases de données, formulaires, etc.). A moi d’accompagner l’expression des besoins, et de faire l’interface avec les développeurs. J’assure également le suivi des développements, et leur mise en service. Je veille à la rédaction d’une documentation qui précise les domaines d’intervention de chacun.

7. Charte graphique

Quand le rubricage technique est fini (ouf), l’équipe choisit une gamme colorée. 

Et j’ai maintenant tous les éléments nécessaires pour réaliser un prototype de page, généralement sous Photoshop pour pouvoir le modifier rapidement, qui comprend les éléments d’identification (où suis-je ?) et de navigation (où puis-je aller ?).

Cette étape est fondamentale : l’équipe s’empare du projet enfin matérialisé, elle commente, modifie, amende et valide. Il arrive que l’on modifie les intitulés de rubrique ou même le contenu et la répartition de l’information. Le prototype est un bon élément à montrer à l’ensemble du service, pour l’inclure dans le processus de conception : tout le monde sait lire une image, tout le monde a un avis sur ce qui est joli, ou sur un bon site web.

La charte graphique, même si elle n’est que le papier peint (la toute dernière étape), dans la maison que nous travaillons à construire, doit plaire. C’est l’émanation du service, c’est lui qui la verra à longueur de journée, c’est la première impression qu’il donne, à l’extérieur. Il faut absolument établir, au sein de l’équipe de conception – voire au sein du service tout entier - un consensus basé sur le plaisir de l’œil.

C’est la dernière grande étape de conception : elle aussi peut être longue, en terme d’allers et retours.

8. Réalisation : gabarits et textes

Chacun son job, maintenant : les rédacteurs rédigent, les décideurs approuvent les textes. De mon côté, je transpose la charte graphique en pages web, je fais des tests sur des pages-types (soumises à l’équipe de conception : « est-ce que ça marche ? »), je crée l’architecture physique, je réalise et y range les gabarits nécessaires à la création des pages.  9. Réalisation du site

Je forme à la technique de réalisation et de mise en ligne des pages, et j’assure le suivi de la réalisation, jusqu’au bout. Une fois terminé, le site doit être validé par le responsable du service demandeur, et par la webmestre. C’est moi qui le mettrai en ligne. 10. Tests-utilisateurs

Les tests-utilisateurs sont une excellente pratique, pour tester le site bien sûr, et aussi pour resserrer toujours plus les liens entre l’équipe de conception et son site. La procédure, c’est moi qui la propose, bien sûr : mais c’est l’équipe qui sélectionne les testeurs, qui rédige les questions à leur poser. L’un de ses membres assiste au test, et prend des notes. Le compterendu de chaque test est rédigé à deux, ainsi que le bilan final. Les modifications nécessaires sont décidées par l’équipe (je ne fais que des recommandations, en général de type ergonomiques), et réalisées par elle. A cette étape du projet, l’équipe a tous les éléments en main pour pouvoir décider seule, et c’est parfait. C’est vraiment son enfant qu’elle habille. 11. Mise à jour et documentation

Plus besoin de moi pour élever et faire grandir l’enfant. Juste un peu d’aide technique, de temps en temps ? Je peaufine de mon côté le document de conception/réalisation, parce que tout le monde en a assez, des fichiers textes. Ce document est l’acte de naissance du site, et son carnet de santé : il comprend le rubricage, et toutes les données techniques nécessaires à la mise à jour. Il est stocké dans un lieu où l’équipe et moi-même pouvons y accéder : charge à l’équipe de le tenir à jour, en y consignant les changements importants. Il servira si la personne chargée de la mise à jour change, à former sa remplaçante, ou lors de la prochaine refonte, à déterminer plus rapidement les éléments à modifier, et ceux à conserver.

3. Ecueils, mesure de la réussite

Voici les écueils sur lesquels j’ai trébuché, et les solutions imaginées :

-       ça n’avance pas, l’équipe se lasse, ne fait pas sa part du travail : elle n’a pas compris qu’il s’agissait d’un projet à long terme (plusieurs mois), et qu’elle allait devoir participer. A moi de la redynamiser, voire de la recomposer. La variable « temps » n’est absolument pas mesurable : tout le projet repose sur le dynamisme de l’équipe, sa réactivité. Un projet raté le sera parce que la réflexion, en particulier dans les étapes de rubricage et rubrique technique, n’aura pas été menée à terme, par manque de temps.



-       Mes interventions sont pénibles (variante : je ne prends pas suffisamment en compte ce que veut l’équipe de conception). C’est le signe que mes champs de compétences ne sont pas reconnus. Incroyable le nombre de gens qui pensent que, puisqu’ils cliquent sur des liens hypertextes, ils sont capables de réaliser des sites web. Ils lisent le journal et ne s’imaginent pas pour autant rédacteur en chef, pourtant… J’ai parfois du mal à établir l’importance de mes domaines de compétence, et à défendre les décisions qui en dépendent. Or l’ergonomie, ou la charte graphique, ont les mêmes caractéristiques : on a réussi quand ça semble évident. Sauf qu’il faut beaucoup de savoir-faire, pour réaliser quelque chose de simple et d’efficace. -     Pas moyen de finaliser la charte graphique, il y a toujours quelque chose qui ne va pas : attention, pour une simple question d’organisation de l’espace, ou de couleurs, c’est l’ensemble du projet qui peut être remis en question (et plusieurs semaines de travail productif). On peut proposer, si un budget peut être dégagé, l’intervention d’un graphiste extérieur, qui fera un prototype sur Photoshop : charge à moi de veiller à ce qu’il travaille avec les éléments déjà déterminés (rubricage, principes de navigation, éléments de localisation, normes techniques pour l’hébergement, etc.). Ceci posé, l’équipe fonctionnera en solo avec lui.

-       « Tous ces fichiers textes, ça ne sert à rien, je n’y touche pas » : dommage, voilà un site qui finira bricolé à la volée, selon l’air du temps. L’homogénéité des pages et la clarté de l’organisation de l’information en pâtira, l’internaute perdra confiance. Et si la personne qui met à jour les pages s’en va, sa remplaçante, manquant d’une documentation complète, aura le plus grand mal à mettre à jour correctement le site. C’est peut-être le but ?… -         « ça ne marche pas » : comprendre « je n’y arrive pas, malgré de nombreuses formations ». Parfois le « technicien » a été mal choisi. Il faut une certaine maîtrise de la technique, pour réaliser des pages web qui marchent. Et le goût nécessaire pour la technique et la rigueur n’est pas universel… Un outil de WCM peut aider, en supprimant le long apprentissage du HTML.

-       le site n’est pas alimenté, il végète : la meilleure technique du monde ne palliera pas une absence de volonté, ou de besoin, de communiquer, et à un réseau interne non réactif.

Voici maintenant quelques commentaires qui m’ont fait rosir de plaisir (« la conception participative, ça marche ! ») :

-       « avec le nouveau site, c’est bien plus facile de travailler » : un intervenant extérieur ne pensera pas, parmi les publics-cibles du site, à satisfaire les besoins des personnes du service chargées de renseigner l’extérieur, ou qui ont besoin d’une base d’information interne pour leur propre travail. Une équipe de conception issue du service demandeur intégrera ces besoins sans même s’en rendre compte.

-       «  avant, j’avais le plus grand mal à obtenir l’information à mettre en ligne ; maintenant, les responsables font la queue devant mon bureau, pour mettre à jour leur rubrique » : le réseau de communication existe et fonctionne, le site est le reflet d’une vraie vie interne. -    « je reçois quantité de courriels de félicitations, pour la richesse de l’information proposée sur le site web » : il y avait autant d’informations sur la version précédente du site, mais elle est maintenant mieux organisée, plus facile à lire, et de ce fait le travail du service est vraiment mis en valeur. Si ces courriels émanent de lecteurs d’autres sites de la même branche, c’est encore mieux : l’équipe de conception connaît les sites de la profession, et en a reproduit les usages ; elle est fière d’être louée par ses pairs.

-       «  fastoche, la mise à jour d’un site web ! » : oui, à condition de le connaître comme sa poche, et d’avoir prévu, en terme de mise à jour, une charge de travail convenable.

-       « je reçois bien plus de demandes qu’avant » : ah, ça, bien sûr, il ne fallait pas donner votre adresse électronique, ni proposer de formulaire en ligne… Maintenant que le site web remplit correctement ses fonctions de communication, le succès arrive, et avec lui ses contraintes.



Je dis bien « mettre à jour ». L’installation et le paramétrage de l’outil nécessitent encore des compétences informatiques ; la réalisation du cadre pour la présentation structurée et graphique de l’information demandent des compétences de concepteur multimédia.

Voir l’excellent site belge consacré à ce thème, « » :

Présentation synthétique des spécificités de l’ergonomie pour le web sur ce site canadien :

[4] Beaucoup de littérature en Amérique du Nord, sur ce thème, dans de gros livres imprimés sur du papier. Une première définition de l’Office québécois de la langue française – pertinente mais un peu courte, à proposer en ligne : . Et une version plus détaillées de Ergolab «site de ressources en ergonomie web et logiciel » : 

Voir le document-cadre « Plan d’action pour la conception/refonte d’un site web » : 1401-FNSP-DSI-PPWPDA-001-001_site

Ceci dans l’hypothèse d’un outil de réalisation permettant une organisation du rangement. Inutile dans le cas des WCM, par exemple.

Avec quelques « vrais » textes : un exemple de page longue, de page courte, de tête de rubrique, de niveau inférieur, une page-type d’un contenu reproduit…

Je réalise pour le moment les tests-utilisateurs lorsque le site est terminé, mais avant sa mise en ligne. L’équipe est en mesure de réaliser elle-même les modifications jugées nécessaires.



337