Les étapes de l’architecture de l’information

Quelles sont les phases d’un projet de refonte de site web ?

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 :

• L’étude : cette phase analyse l’existant, elle identifie les contraintes, les objectifs et les besoins de l’audience ainsi que de l’entreprise.
• La conception : s’appuyant sur l’étape précédente, cette phase consiste à accoucher toute l’articulation du nouveau site web : la structure du contenu, les interfaces, les fonctionnalités et les processus.

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 :

• Le développement: cette phase matérialise ce qui a été conçu dans la phase précédente, le site se concrétise avec son outil de gestion de contenu, ses interfaces graphiques, ses fonctionnalités et son contenu.
• Le transfert et le suivi: cette dernière phase assure la migration de l’ancien vers le nouveau site, on teste, on forme, on corrige et on s’assure que tout fonctionne au mieux ;-)

De l’étude au développement
Crédits photo : https://pxhere.com/fr/photo/761922

A quel moment intervient l’architecture de l’information ?

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 :

• La phase d’études: pour définir l’expression des besoins de l’entreprise et des utilisateurs, identifier les personas et dresser l’inventaire des contenus. La phase d’études se clôture par la formulation de recommandations stratégiques.
• La phase de conception : pour concevoir l’arborescence et les maquettes fonctionnelles (wireframes). Dans certains cas, nous ferons appel aux tests utilisateurs pour valider ou adapter les hypothèses faites par les architectes de l’information avant de lancer les développements.
• La phase de développement : pour venir en soutien de l’équipe IT dans lors du déploiement de l’arborescence, ou lors du développement du front end pour affiner les détails. Si le budget le permet, des tests utilisateurs se feront sur des prototypes HTML.
• La phase de transfert et de suivi : pour assurer la pérennité de l’architecture de l’information, une documentation formalisera le pourquoi et le comment. Les gestionnaires de contenu et les webmasters seront formés à la maintenance de l’architecture de l’information et à la gestion de contenu dans les nouvelles interfaces. Afin d’éviter la perte du référencement, l’architecte d’information peut également aider à mettre en place le plan de migration et redirection des contenus !

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

En quoi consiste la phase d’étude ?

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

En quoi consiste la conception de l’architecture de l’information ?

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 :

• Le système d’organisation: il structure les contenus selon différentes logiques : par thème, par cible, par tâche, par chronologie, etc. Par exemple, un affichage des actualités par ordre anti-chronologique.
• Le système d’étiquetage : il nomme les différents éléments du site comme les catégories et les rubriques, les liens, les options dans un langage compréhensible par l’utilisateur… autant que possible il est et la force avec toi sera, dirait Maître Yoda ! Par exemple : Contact, Qui sommes-nous, Télécharger le rapport, etc.
• Le système de navigation: il propose un ensemble prédéfini de cheminements sous formes de menus et de liens afin d’aider l’utilisateur à naviguer dans les contenus du site. Voici les principaux éléments utilisés : menu et sous-menu, fil d’Ariane, liens raccourcis, liens contextuels, tags, carte géographique, ligne du temps, plan de site, etc.
• Le système de recherche: il permet à l’utilisateur de saisir ses propres requêtes et de chercher un contenu. Le moteur de recherche est composé d’une interface de recherche, de filtres et de facettes permettant d’ajouter des critères. Il s’appuie sur des règles grammaticales, sur des opérateurs (ET/OU, etc.), sur des vérificateurs orthographiques, des systèmes d’auto-complétion (qui complètent la requête au fur et à mesure que l’utilisateur l’encode) ou encore sur des systèmes de pondération qui permettent d’augmenter la performance en affinant les résultats (plus de poids pour les documents récents, par exemple).

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 :

• Test d'arborescence (indispensable pour vérifier l’efficacité des sites à plus de 3 niveaux)
• Test de tri de carte (pour concevoir une classification intuitive pour les utilisateurs)
• Test utilisateur scénarisé (pour assurer une belle expérience pour vos scénarios importants)
• Test de variantes d'interfaces (pour parfaire les détails qui améliorent les ventes et les conversions)
• Test de perception de contenu (pour comprendre ce qui se passe dans la tête du visiteur)
• Focus groupes (pour récolter un maximum de feedback en peu de temps)

A lire : Votre sitemap est-il en bonne santé et en particulier le points 3 (Construire et tester la nouvelle architecture)

Comment collaborer pendant la phase de développement ?

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 !

En quoi consiste la phase de migration et le suivi ?

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.

Retour au sommaire du dossier

DOSSIER COMPLET

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