Arborescence site web : 5 outils pour en créer facilement

Création de site maps en ligne

Il est important, lors de la création d’un projet ou la refonte d’un site de définir l’architecture de votre projet. Une mauvaise structure peut avoir des conséquences pour l’ensemble des acteurs du projet.

L’arborescence site web permet de visualiser les imbrications et les connexions entrent les différentes pages d’un site ou d’une application mobile.

Cette représentation sous forme d’arborescence permet à l’ensemble des acteurs du projet de partager leur vision.

La création d’arborescence site web est aussi utilisée en SEO, lors de la conception de l’architecture de votre site, vous serait amener à travailler avec un référenceur. Découvrez mon article sur la complémentarité des métiers du référencement et de l’UX design.

Liste des outils arborescence site web

FlowMapp est un outil en ligne de création d’arborescence de site et de userflow visuels qui vous aide à concevoir et à planifier efficacement l’expérience utilisateur.

MindNode vous aide à créer votre arborescence et donne une image claire de votre idée.

Visuel et intuitif, il vous aidera à créer facilement votre arborescences professionnel.

Un excellent outil pour développer vos arborescences interactifs.

Un outil 100% gratuit qui vous permet de réaliser une arborescence simple et efficace.

L’arborescence d’un site web, une étape fondamentale dans la création de votre site

L’arborescence, ou plan du site, est généralement présentée sous la forme d’un diagramme qui organise les pages du site en sections et définit les différents niveaux de navigation.

C’est généralement la première étape de la conception d’un site web. Une fois l’arborescence site web validée, toute l’équipe dispose d’une vue d’ensemble sur le site, et on peut descendre d’un niveau afin de vérifier les pages en vue de la production de maquettes.

L’étape suivante consiste à créer les zonages des pages, c’est-à-dire à découper les pages principales en zones, par exemple un rectangle horizontal pour le logo et le menu principal, un rectangle vertical à gauche pour le menu secondaire, etc.

Ensuite, nous passons des zonages aux wireframes où nous ajoutons les textes principaux et les éléments graphiques, puis enfin des wireframes aux modèles graphiques du site.

Construire son arborescence site web, mes conseils

L’arborescence d’un site web est le plan des éléments principaux. Ceux que vous souhaitez mettre en avant aussi bien pour les utilisateurs que pour les moteurs de recherche. Cette architecture va donc correspondre au menu de votre site. Elle comprend les pages principales et les pages secondaires.

Les pages principales structurées par l’arborescence d’un menu principal vont comprendre toutes les informations importantes que le visiteur est venu chercher sur votre site. Vous pouvez parfaitement réaliser un sticky menu pour le principal, c’est-à-dire laisser le menu apparent tout au long du défilement de la page.

Par exemple, sur un site e-commerce de vêtements, l’arborescence de votre menu se dessinera comme suit :

  • Femme
  • Homme
  • Enfant
  • Panier
  • Contact

C’est bien sûr une vision très simplifiée d’un menu, mais l’idée est de permettre aux visiteurs d’avoir un aperçu clair de ce que le site propose. Vous pouvez également détailler cette architecture en plusieurs niveaux. Limitez-vous cependant à 2 niveaux, voire 3 au maximum pour rester simple et accessible. Reprenons l’exemple de la boutique de vêtement en ligne, l’arborescence du site web à plusieurs niveaux serait comme cela :

  • Femme – Robes – Robes longues
  • Homme – T-shirt – T-shirt à manches courtes
  • Enfant – Garçon – Pantalon
  • Panier

Que votre site soit une boutique en ligne, une entreprise de service ou un blog personnel, il est toujours préférable d’insérer dans le menu la page À propos et la page de Contact.

En ce qui concerne le menu secondaire, celui-ci va regrouper toutes les pages qui n’ont pas de liens directs avec les produits ou les services que vous proposez. Il se situe en règle générale en haut à droite de l’interface, dans une police plus fine. Il peut s’agir des pages de :

  • Blog
  • Opportunité de carrières
  • Contact

Le menu secondaire est présent sur toutes les pages, mais reste invisible lors du défilement de la page par l’utilisateur.

Lorsque l’arborescence du site peut prendre plusieurs supports outre les menus principal et secondaire. Cette organisation permet également de créer d’autres supports de navigation tels que la barre de recherche, un menu latéral ainsi que le pied de page.

Trouvez des mots clés pour votre arborescence

Pour les moteurs de recherches, le menu regroupe des liens cliquables. Ce qui représente une occasion supplémentaire pour travailler le SEO de votre page. De ce fait, une bonne analyse sémantique va vous aider à construire votre arborescence site web. L’objectif est double : répondre aux intentions de recherche des internautes et l’optimisation SEO de votre site à travers l’arborescence web.

Organisez et triez votre contenu

L’arborescence du site est le plan structuré qui facilite la navigation des utilisateurs au sein de votre site web.

  • Commencez par établir une liste des produits ou services proposés par votre interface.
  • Établissez un user journey map pour organiser l’arborescence des menus.
  • Hiérarchiser vos contenus afin de les organiser en catégories
  • Concrétisez l’arborescence du site sur papier ou l’aide d’un outil en ligne.

Construire votre arborescence

Avant de construire l’arborescence d’un site web, regardez ce que font vos concurrents. Trouvez-y de l’inspiration, sans copier ! Il arrive parfois d’être tellement concentré sur un projet pour en oublier les petits détails importants !

La construction de l’arborescence d’un site web nécessite donc une bonne préparation en amont. Il existe de nombreux outils de construction d’arborescence, accessibles en ligne, simples d’utilisation et ergonomiques.

L’arborescence site web permet d’avoir une vision globale du site et du chemin de navigation avant de préparer les modèles des pages principales.

Réaliser le plan de son propre site web est souvent une chose très difficile à faire. Il n’est jamais facile d’organiser les contenus, qui sont souvent plus hétérogènes que ce que l’on imaginait au départ.

Avant tout, concevoir un plan signifie établir un classement, faire des choix, ce qui peut prendre du temps et susciter des discussions en équipe. C’est un exercice difficile, mais ô combien important.

Sans une navigation bien pensée, un site web, aussi joli soit-il, a peu de chances d’atteindre ses objectifs. Ce billet doit vous donner toutes les clés pour comprendre les enjeux et créer concrètement la structure de votre site.

Conclusion : les objectifs d’une arborescence site web :

  • Matérialiser les pages
  • Mettre en avant les fonctionnalités de chaque pages
  • Représenter les imbrications entres les pages
  • Compléter la documentation autour du projet
  • Faciliter les échanges entres les acteurs du projet