Arborescence de site web | Des exemples | Comment réussir son arborescence ?

 

 

Des exemples d’arborescence de site internet 

 

 

 

 

 

 

 

Bien concevoir l’architecture de son site web. Les 5 étapes indispensables

C’est quoi une architecture de site web ?

Une architecture de site web est la formalisation de la structure de votre site internet sous forme de hiérarchisation de l’information. L’architecture d’information, c’est l’art d’organiser l’information : inventorier, analyser, concevoir, structurer, hiérarchiser et mailler l’information. Elle est utilisée notamment par les moteurs de recherche. Le but de cette architecture est de donner une vision de l’ensemble des pages du site et des caractéristiques qui y sont liées :

• Les URLs des pages
• Les mots clefs pour le référencement naturel
• Les liens entre les pages en termes de maillage interne

Cela vous permet d’organiser son site internet de façon précise et logique.

 

Comment concevoir son arborescence ?

 

 Première étape  Le cadrage

 Deuxième étape  La conception générale proprement dite. La clef de voute de votre futur site et de votre projet web

 

Cette étape doit permettre aussi de prioriser les tâches suivantes :

• Peu de contenus sont disponibles ? Commencez par cela.
• UX et parcours compliqués ? Allouez du temps à cette phase. Il faut avoir un plan de site clair et structuré avant de commencer.
• Changement d’offres ? Il faut penser Service Design (voir plus bas). Quand votre produit n’est plus seulement ce que vous vendez, mais comment vous le vendez via le digital
• Votre site web est dynamique ? Il vous faut donc une architecture de site web dynamique et évolutive. Les principaux CMS sont pensés pour cela. Bien réfléchir la structure d’un site en pages catégories et sous-catégories

 

 Cinquième étape  Le suivi aval

Votre conception est calée. Les wireframes sont posés. Tout semble se dérouler correctement ! Mais vous n’avez pas terminé. Car tout se joue maintenant. En effet, votre concepteur de site – architecte de l’information – a une idée assez précise du site, des parcours et même de la DA.

Mais si vous transférez trop tôt le document à une équipe plus orientée production et réalisation, il y a toutes les chances que le résultat soit décevant. A travers des réunions de suivi hebdomadaire le concepteur doit s’assurer avec le chef de projets que sa vision initiale est bien respectée. C’est particulièrement vrai en phase intégration où tout peut déraper si les délais sont tendus ! Très vite le cahier des charges fonctionnel doit être rédigé et communiqué à toutes les parties prenantes.

 

 

L’arborescence de sites web dans l’assurance

L’arborescence du site se « voit » par l’utilisateur et se matérialise le plus souvent dans le système de menus. Le but d’une arborescence est de savoir comment on présente aux internautes le contenu de son site de la façon la plus logique. On peut donc dire que la logique d’une arborescence est faite pour hiérarchiser le contenu pour l’internaute et l’architecture est faite pour classer le contenu pour les moteurs de recherche. En anglais, on parle « d’information design », par opposition à « graphic design ».

Un exemple ? un constructeur automobile pourra avoir une arborescence par modèle de voiture mais son architecture (notamment s’il veut pousser les nouvelles mobilités) sera autour des énergies : traditionnelles, hybrides, électriques.

 

Les étapes clés pour concevoir son arborescence

1/ Faire l’inventaire du contenu disponible

Commencer à écrire tout ce que vous devez afficher sur votre site web. Absolument tout ! Fiches produits, édito, information corporate, éléments de blog, video, schéma. Sans forcément être dans une logique de page à ce stade. L’organisation vient ensuite.Vous pouvez ensuite rassembler par grandes catégories (5 ou 6 maximum) le contenu disponible.

Dans l’assurance, on a très souvent :

> Les offres et produits d’assurance : IARD, Auto, Santé, Epargne

> Les informations « A propos » : Histoire, Actionnaires, Adresses agence, Mentions légales..

> La prévention : santé, alertes meteo, relations avec les sociétaires et adhérents

> La marque employeur : RH, valeurs, recrutement

> La connexion aux espaces privés : login, enregistrement

> Le tunnel devis / souscription : unique ou multiple en fonction des produits proposés

 

A ce stade, vous devez aussi commencer à être dans une logique SEO et chercher à identifier les bons mots-clés. SEMRush, PAA (People Also Ask dans Google) ou Yooda Insight seront vos alliés.

Partez d’un mot et l’outil vous proposera de nouvelles idées. Cela servira à trouver des rubriques et sous-rubriques pour classer vos pages. Vous devrez toujours arbitrer entre volume de requêtes et concurrence sur le mot en question

Pensez à regarder le volume de recherches mensuelles, ainsi que le niveau de concurrence. Le must : des expressions qui génèrent de nombreuses requêtes (au moins 500 par mois) et une concurrence faible.

 

2/ Benchmarker la concurrence

L’arborescence de vos concurrents est  une source d’information fondamentale, voire inépuisable. Pourquoi ? Si 10 de vos concurrents ont refondu leur site web dans les trois dernières années, vous allez bénéficier de leur intelligence collective. En pratique, vous vérifierez de pas oublier une idée ou une dimension clef dans votre secteur. Cela vous inspirera sur l’arborescence qu’ils ont choisie sans forcément la copier. Dans l’assurance toujours, vous verrez qu’il n’y pas mille façons d’envisager une arborescence efficace. Un outil comme Screaming Frog peut être utile à ce stade.

 

3/ Organiser votre contenu

Avec tous vos contenus prêts, les mots clefs identifiés, les inputs SEO, vous allez maintenant organiser le contenu selon 3 niveaux, la page d’accueil étant toujours le niveau 1. Le but est de rendre l’information accessible en moins de 3 clics.

Deux grands principes co-existent :

L’approche bottom-up consiste à partir de chaque micro-contenu (ou contenu individuel  – la page)  identifié dans la première étape, de les rassembler dans des mini-arborescences et de remonter au fur et à mesure. Le risque est d’oublier les contenus transverses

L’approche top-down consiste à partir de la home page puis de descendre petit à petit.

Les deux approches sont complémentaires et vous ferez un peu des deux.

Si le SEO est fondamental pour vous (et pour qui ne l’est-il pas ?), c’est à ce stade que vous réfléchirez aux fameux cocons sémantiques et au maillage interne

 

4/ Dessiner l’arborescence sur papier ou avec un logiciel ad-hoc

La recommandation est de faire des arborescence sur paper-board en mode co-construction avec les PO (Product Owner) et représentants clefs de la structure (marketing, vente, IT, direction générale). Ce type de séance peut durer plusieurs heures ou s’étendre sur plusieurs sessions.  Ensuite vous passerez à des logiciels comme Sketech, Balsamiq ou Cacoo ou conserver Powerpoint ou Keynote si vous êtes plus confortable.

 

5/ Finaliser, penser SEO et itérer !

Une fois l’arborescence finalisée vous devez la confronter :

> A l’interne, en faisant une session finale pour vous assurer qu’aucun contenu n’a été oublié

> A l’externe, en imaginant et listant les parcours possibles que votre visiteur pourra emprunter. Attention il n’arrivera pas forcément sur la home (un site bien référencé ne capte que 20% du trafic depuis la home). L’arrivée directe sur des landing page, fiches produits, espace support… sera le point d’entrée clef.

Vous entrerez alors dans un processus itératif qui durera quelques semaines.

 

L’architecte de l’information, un métier essentiel à la refonte de votre site web, et pourtant trop souvent ignoré

 

 

Un architecte d’information doit s’assurer que la structure de contenu d’un site web est adaptée aux attentes, aux parcours et au vocabulaire de l’utilisateur. Il va utiliser une série de techniques de conception et de tests utilisateur, afin de concevoir un site web efficace, centré sur les besoins des visiteurs (user centric), et en cohérence avec les objectifs de l’entreprise.

Comme M Jourdain, dans le digital, tout le monde fait (intuitivement) de l’architecture d’information… mais les professionnels, qui maîtrisent les techniques dédiées à la structuration de l’information ne sont pas légion.

Chez Eficiens, nous collaborons avec un très grand architecte de l’information qui a œuvré sur EDF, La Poste, PFG, RTL et quantité d’autres sites web de premier ordre.

 

Pour aller plus loin, une approche futée et novatrice en 2020, le service design

Le design de service est au croisement d’une étude centrée sur l’utilisateur, la collaboration entre les différents acteurs du projet et une approche de co-création. Il s’agit d’identifier non seulement les services à proposer à l’utilisateur mais surtout comment l’utilisateur va les identifier, sélectionner, acheter, utiliser. Une véritable approche « user centric ». On parle aussi de Design de service, de Design d’expérience utilisateur ou de Customer experience design.

 

Cette petite video est assez parlante sur le sujet (merci à Usabilis pour l’inspiration)

 

Note de culture digitale : Service Design et Design System est-ce la même chose ?

Surtout pas ! Le Service Design comme expliqué plus haut vise à inspirer la création des produits et des services en mettant l’utilisateur au centre. Le digital est bien sûr fondamental dans cette approche notamment quand le produit est le site web lui même. Amazon par exemple a une grande partie de son expérience client liée à son site. Itérer en permanence pour inventer une nouvelle expérience web ou améliorer des parcours existants est donc su Service Design.

Le Design System se situe lui à la croisée de l’UX et de la direction artistique. Il vise à modulariser à l’extrême la conception des pages web (on va jusqu’à l’Atomic Design) pour une meilleure efficacité. Un article sur UX Design explique cela très bien.

 

 

La conception d’une arborescence de site web à distance, c’est possible. Visio, co-création et ateliers remote avec Zoom, Teams et Klaxoon pour bien poser l’architecture de votre site

Avant même le début de la pandémie, il y avait une demande forte pour améliorer l’efficacité des ateliers de co-création amont. Mais voyons d’abord :

• Quel est l’objectif des ateliers ?
• Qui participe aux ateliers ?
• Les livrables attendus (arborescence, menus, navigation…)
• Les ateliers en mode 100% digital. Comment cela se passe-t-il ?

 

 

 

Méthodologie et planning pour la construction d’un site

En résumé, voici la méthodologie que nous suivons afin de livrer un site web prêt à l’emploi. Vous pouvez la télécharger librement. Grâce à cela et à ses étapes à suivre, vous aurez une idée claire du rétro-planning à mettre en place.

 

Un exemple de site web pour lequel nous avons assuré l’intégralité de l’architecture de l’information et l’arborescence

L’enjeu pour la Mutuelle Bleue était de digitaliser son parcours devis souscription. La principale astuce UX trouvée a été de mettre un module starter de pré-tarification dès la home page

 

 

Découvrez le cas complet Mutuelle Bleue.

 

Pour APREF, l’enjeu était similaire : refaire l’intégralité du site et donc revoir l’architecture de l’information et l’arborescence

 

 

Téléchargez gratuitement un cahier des charges prêt à l’emploi (PDF de 4 pages)

Ce cahier des charges servira de base à votre processus d’appel d’offres. Vous pouvez télécharger ici un gabarit de cahier des charges de refonte de site web.

 

Ce cahier des charges a une coloration sur le secteur assurance car c’est la spécialisation de l’agence. Mais 95% des éléments contenus peuvent s’appliquer à d’autres secteurs.

 

Estimez rapidement le tarif de mise à jour de votre site internet, phase de conception incluse

Avec notre calculateur, estimez-vous même le budget de refonte d’un site Internet

 

 

Pour toute autre demande, contactez-nous et pensez aussi à consulter notre grille tarifaire.