Après avoir pesé le pour et le contre, c’est décidé… l’entreprise opte pour la refonte de son site web. Mais par où commencer ? Dans cet article, nous vous guidons à travers les différentes étapes de la refonte d'une architecture de l’information.
Journaliste de formation
Architecte de l'information
Expert UX
Auteure de "Refonte de site web"
A paraître chez Eyrolles
Architecte de l'information
Les étapes d’un projet de refonte de site pourront varier en fonction du type de projet, de son envergure, mais dans les grandes lignes, on peut identifier les quatre étapes suivantes.
Tout d’abord, deux étapes pour bien identifier le pourquoi et le comment :
De l’analyse des besoins à la conception
Crédits photo : https://pxhere.com/fr/photo/588786 et https://pxhere.com/fr/photo/1172036
Viennent ensuite les phases de la concrétisation du projet et de son suivi :
De l’étude au développement
Crédits photo : https://pxhere.com/fr/photo/761922
Dans un projet de refonte de site, l’architecture de l’information intervient à différentes étapes, mais en tout cas, de préférence dès le début !
Dans les pays où les maisons se construisent sans plan, elles sont généralement une réplique d’un modèle existant adapté à la cellule familiale traditionnelle. Et ça marche ! Sur le web, nous pouvons transposer cette façon d’agir pour des sites vitrines qui se porteront à merveille avec leurs quelques menus et leur nombre restreint de pages : Qui sommes-nous ?, Nos services, Où nous trouver, Contact, Mentions légales, etc.
Pour des sites plus volumineux et plus complexes, l’architecte d’information s’impose. Au plus vous faites intervenir cette expertise en amont, au mieux votre projet se portera.
Elle intervient dans les étapes suivantes :
Pour rappel, l’architecture de l’information consiste à organiser des informations de tout genre et à les mettre en scène, de sorte que l’utilisateur trouve ce qu’il cherche et atteigne son objectif, tout en remplissant les objectifs de l’entreprise. En l’absence d’une réflexion sur l’architecture de l’information du site, le projet résulte dans des projets superficiels qui doivent souvent faire l’objet d’une refonte quelques mois plus tard. Après quelques tentatives d’améliorations de surface, très vite, le projet patine et c’est l’impasse.
A lire : Qu'est-ce que l'architecture d'information ?
Les étapes d’une refonte de site
Source : Yellowdolphins.com
Lors de la phase d’étude, l’architecte de l’information va analyser le contexte, le contenu et le profil des utilisateurs.
Quel est le contexte du projet ? L’architecte de l’information analyse la stratégie de l’entreprise, ses besoins, ses objectifs, mais également ses contraintes au niveau des ressources, de la technologie, des budgets, de la législation, etc.
C’est essentiel, notamment pour éviter de rêver d’une architecture que l’entreprise n’a pas les moyens de mettre en place.
Quelle est l’offre de contenu ? Un inventaire complet du contenu existant va permettre de mieux comprendre l’offre et de l’analyser sur le fond et sur la forme. Une analyse des forces et des faiblesses nous conduira à améliorer l’existant.
Notre expérience de centaines de sites web démontre que, dès que les sites web atteignent une masse critique, de nombreuses entreprises en perdent le contrôle. Certaines n’ont aucune idée du nombre de pages (et parfois de sites !) qu’elles gèrent.
Je ne suis capable de contrôler que ce dont j’ai conscience. Ce qui échappe à ma perception me contrôle.
John Whitmore
Quel est le profil des utilisateurs ? A qui s’adresse ce site, en d’autres mots, quelle est la cible ? Que vient-elle réaliser comme tâches sur le site et comment ? L’analyse des utilisateurs permettra de préciser leurs besoins et de comprendre leur comportement de recherche afin de mieux y répondre.
Le livrable de la phase d’étude et d’analyse se présente généralement sous la forme d’un audit, assorti de recommandations.
Il arrive qu’une entreprise rechigne à passer par cette phase d’études en argumentant le fait qu’elle a déjà fait une analyse, des sondages, des enquêtes, qu’elle sait ce qu’elle veut, qu’elle n’a pas de budgets à y consacrer, etc. Ce n’est pas toujours un bon calcul.
À titre d’exemple, un célèbre magasin de lingerie s’était basé sur le modèle de ses boutiques pour présupposer de la cible de son site Internet, sans faire d’études. Des femmes venaient acheter leur lingerie en boutique, il en serait de même en ligne. C’est bon, on code et que ça roule. Ça roule, ça roule… oui, ça roulait… Au petit détail près que le public en ligne était constitué en grande majorité… d’hommes (on se demande pourquoi), ce qui n’était pas un problème en soi, sauf que leurs besoins et leur comportement de recherche devaient être différents de ceux des dames !
Qui d’après vous est le premier persona d’une boutique de lingerie en ligne ?
Crédits photo : https://pxhere.com/fr/photo/657834
Suite à la phase d’étude, l’architecte de l’information va formuler une stratégie pour le nouveau site et proposer un plan d’action assorti d’un planning détaillé pour la refonte. Le chef de projet de la refonte pourra synchroniser ce planning avec celui des autres intervenants (graphistes, développeurs, etc.).
Exemple d’un planning de refonte de site internet
Source : Yellowdolphins.com
L’architecture d’information est comme une grande construction de Lego. Elle va s’appuyer sur différentes composantes, qui toutes mises ensemble, vont orchestrer l’information :
Ci-dessous, chaque petit rond nous ramène à une réflexion en matière d’architecture d’information. Comment organiser mon menu, mon sous-menu, quels noms choisir pour les catégories et sous-catégories, comment offrir un fil d’Ariane cohérent, quelle typologie pour le titre de la page, comment afficher le score de la recette, quels tags associer au contenu, comment choisir et afficher les liens contextuels, selon quelle logique organiser les ingrédients de la recette pour pouvoir les réutiliser, quelles données pratiques faut-il afficher, etc.
L’architecture de l’information est partout en coulisse.
Source : www.marmiton.org
La phase de conception a donc pour but de trouver la meilleure solution pour présenter aux utilisateurs ce qu’ils veulent, tout en tenant compte du contexte et du contenu identifiés lors de la phase d’analyse.
Les livrables clés de la phase de conception sont le plan du site détaillé (l’arborescence), ainsi que les maquettes fonctionnelles (wireframes) des pages clés du site.
Le plan du site ou arborescence met en scène l’organisation du contenu de haut en bas. Tous les libellés de rubrique, qui constitueront le système de navigation, apparaissent ici. Le plan débute généralement par la page d’accueil et descend jusqu’aux niveaux les plus profonds. Dans le cadre d’une refonte, chaque élément peut être assorti d’informations complémentaires pour faciliter la gestion et le déploiement de l’arborescence, par exemple les métadonnées structurelles (titre, sous-titre, section, etc.), descriptives (format, type, sujet, public, etc.), voire administratives ou organisationnelles (auteur, département, date de création, date de suppression, etc.).
Pour la plupart des refontes, nous partons de l’existant, fort des petits bémols ou des grosses cacophonies identifiés lors de la phase d’analyse. Cette manière d’agir permet de capitaliser sur les forces, de valoriser le travail des équipes qui ont travaillé sur le site (oui, elles ont certainement fait du bon travail J), de gagner de l’énergie et de préparer la phase de migration sans perte de référencement. Chaque projet d’architecture est unique. L’un aura pour objectif d’adopter une approche orientée utilisateur, l’autre de nettoyer les écuries d’Augias la masse de contenu, l’autre encore, de décloisonner et mailler un contenu parfois trop géré en silos.
Exemple d’un plan de site, au format Excel
Source : Yellowdolphins.com
Une fois le plan du site arrêté, les fonctionnalités et les scénarios utilisateurs bien définis, place aux wireframes, ou squelettes, qui vont formaliser les zones de contenu et d’interaction pour les pages clés du site ! Ils représentent donc l’organisation de l’information au sein d’une page.
Cette mise en scène de l’information en deux dimensions va mettre en exergue des contraintes d’espace, de hiérarchie, d’association et de logique. Elle va pousser l’architecte à répondre aux questions suivantes : quel élément dois-je mettre en avant prioritairement, ai-je pensé à afficher cet objectif important, où placer tel élément de contenu pour être cohérent avec la logique informationnelle, quel libellé utiliser pour tel élément, quels éléments figureront sur le bloc d’une actualité, etc.
Des tests utilisateurs pourront être effectués assez rapidement sur base des wireframes, sans devoir passer par des développements plus lourds et plus coûteux. À l’issue des tests utilisateurs, il se peut que certains changements soient souhaitables, et ce serait dommage de devoir recommencer les développements !
S’ils sont généralement bruts et moches (si, avouons-le honnêtement, c’est très moche), les wireframes ont l’avantage d’être visuels et concrets, et contrairement au plan de site, ils suscitent l’attention de vos interlocuteurs. Maintenant, si vous en avez la possibilité, confiez vos wireframes aux mains d’un graphiste ou d’un pro du Photoshop pour leur donner une allure un peu plus sexy.
Un wireframe humanisé ;-)
Source : Yellowdolphins.com
Une fois le travail de conception terminé, nous vous conseillons de tester l’arborescence de votre site et les maquettes.
Il existe différentes sortes de tests utilisateurs pour mesurer objectivement les résultats :
A lire : Votre sitemap est-il en bonne santé et en particulier le points 3 (Construire et tester la nouvelle architecture)
Lors de la phase de développement, l’architecte de l’information pourra venir en soutien des équipes pour mettre tout ce qui a été conçu en musique, enfin… en code. Il s’agit d’assurer le lien entre le plan du site, les maquettes, le contenu, les fonctionnalités, le CMS et les processus. Cette étape se fait généralement en très étroite collaboration avec l’équipe IT, les gestionnaires de contenu, l’équipe de communication et le graphiste.
La phase de développement vue du ciel ;-)
Crédits photo : https://pxhere.com/fr/photo/749603
Par exemple, l’architecte de l’information collaborera avec l’équipe IT pour déployer l’arborescence du site, pour s’assurer que les rédacteurs disposent de tous les champs essentiels nécessaires à l’intégration du contenu. Il pourra également vérifier et finaliser les libellés des différents menus et modèles de contenu. Si l’architecte est formé au SEO (ce qui est souhaitable), il pourra contrôler la structure du code et le bon usage des balises qui affectent le référencement.
Chaque projet de refonte est unique et dépend de l’expertise des intervenants.
Par exemple, il nous est arrivé de collaborer à la refonte éditoriale d’un intranet, alors qu’au départ, nous étions appelés uniquement pour concevoir la nouvelle architecture de l’information. En effet, la refonte d’un site nécessite souvent d’adapter le contenu aux nouvelles interfaces. Mais surtout, la refonte vise à améliorer l’expérience du contenu existant, tant sur le fond que sur la forme, et elle invite à rédiger de nouveaux textes. Se retrouver avec des centaines de pages de contenu à produire en plus du travail quotidien n’est pas gérable pour une équipe déjà très sollicitée. C’est ainsi que nous avons rédigé des briefs de contenu pour chacune des 700 pages de la nouvelle arborescence. Cela a considérablement facilité la réécriture des contenus et cela nous a permis d’assurer une belle homogénéité et granularité de l’information proposée dans chacune de ces pages. Sur base de notre document de guidance, une équipe de rédacteurs·trices s’est chargée de mettre les briefs en application, de rédiger les textes et de les intégrer dans le CMS.
Pour un autre projet, nous avons pris en main le chantier de migration pour nous assurer que la mise en ligne du nouveau site, produit de la fusion de deux autres sites, se faisait sans perte de référencement.
Une refonte de site peut se faire sans perte de référencement !
Source : Yellowdolphins.com
Un troisième projet nous a fait glisser sur le terrain de la stratégie éditoriale. La nouvelle architecture de l’information était validée, mais l’équipe avait besoin de conseils en matière de stratégie de contenu. Comment alimenter le nouveau site, quelle ligne éditoriale développer, quelle stratégie mettre en place pour acquérir du trafic qualifié ? La stratégie de contenu, le UX et le SEO étant nos dadas, à côté de l’architecture de l’information, nous nous sommes fait une joie de les accompagner !
Une fois que tout a été réfléchi, conçu, validé, développé, comment s’assurer que l’architecture de l’information et ses interfaces résisteront au temps et aux pressions de tout genre ? Si vous avez déjà été confrontés au fameux syndrome du « Vice presidential button », vous comprendrez ce que nous voulons dire.
Le syndrome du vice presidential button sur une page d’accueil, c’est un peu ça.
Crédits photo : https://pxhere.com/fr/photo/411087
Le besoin de visibilité pousse, tôt ou tard, les personnes et les départements à revendiquer une place de choix dans une architecture qui, jusque-là, semblait équilibrée.
Les menaces viennent de toute part et l’envahisseur s’attaque généralement aux endroits les plus stratégiques : la page d’accueil, le menu principal, les emplacements au-dessus de la ligne de flottaison.
Pour contrer l’attaque, nous déployons l’arme fatale : le document de gouvernance.
Il redéfinit les grands principes qui ont guidé l’architecture et résume les leçons apprises au cours de la refonte. Il définit les règles à suivre pour préserver l’architecture de l’information dans le temps : à quelles conditions rajouter une rubrique, une page, une métadonnée, etc. Il fournit des conseils ergonomiques et éditoriaux pour les différents types de pages ou gabarits. Il formalise les workflows éditoriaux, il reprend une bibliothèque d’éléments réutilisables, etc.
A côté de cela, nous rédigeons des guides qui accompagneront les rédacteurs et les contributeurs tout au long de leur travail. Dans le « guide de style », nous expliquerons par exemple comment rédiger un titre pour le nouvel intranet, comment ajouter un lien pour qu’il soit cohérent, comment rédiger un chapeau ou une méta description optimisée pour un bon référencement, quels métadonnées doivent être remplies dans le CMS et comment faire pour que le moteur de recherche puisse fonctionner de manière pertinente, etc.
Il nous arrive également de former les équipes à différents outils nécessaires à la bonne gouvernance du site : formation à l’analyse de trafic, à l’écriture web, au référencement ou à la stratégie éditoriale.
En fait, on a tellement aimé le projet tout au long de ces mois qu’on a du mal à partir ;-)
Crédits photo : https://pxhere.com/fr/photo/480450
Les livrables clés de cette dernière phase sont un document de gouvernance, la liste des KPI (indicateurs de performance), un guide de style et, parfois, une charte éditoriale.
FAQ - Refonte de site web
• Qu’est-ce que l’architecture d’information ?
• Quand une refonte est-elle vraiment nécessaire ?
• Quelles sont les étapes d'une refonte de site web ?
• Qui se charge idéalement de la refonte du site web ?
VIDÉOS
• L’architecture d’information, une clé de votre site web
• Intranet : les 5 minutes qui valaient un million d’euros
• Architecture d’un site web public : les 5 points clés
• 3 solutions pour lutter contre l’obésité éditoriale
POUR ALLER PLUS LOIN
• Les 7 pièges d’une refonte de site web
• Les maladies de votre arborescence
• Les 10 bénéfices d’une bonne arborescence
• L’audit SEO avant refonte
![]() |
Votre refonte... on en parle ?Tél. +32 486 35 97 11 Notre offre : "10.000 pages, même pas peur !" |
![]() |