Conception de site web : comment créer l’arborescence et la navigation

Arborescence et architecture de site web

Elaborer l’architecture et l’arborescence d’un site web

L’arborescence désigne l’architecture des contenus d’un site web, la manière dont ils sont reliés les uns aux autres.

La règle des 3 clics

Une règle bien établie veut que 100% des contenus d’un site soient accessibles en moins de 3 clics depuis la page d’accueil. Si ce n’est pas le cas, alors vos contenus semblent introuvables.

Par exemple, imaginons que vous vendiez des cours de français en PDF sur votre site web professionnel.

En page d’accueil comme sur toutes les pages du site, un menu général présente 3 élément :

  • Accueil
  • A propos
  • Cours
  • Contact

On clique sur cours, on obtient une liste générale des cours proposés, dont les cours de français.

On clique dessus, on tombe sur une page de vente avec un bouton “acheter” : on clique dessus, ça fait 3 clics.

S’il y avait une ou plusieurs étapes supplémentaires, alors les clients pourraient s’y perdre et ne pas trouver le cours de français facilement.

Arborescence en silo

Architecture de site en silo

L’arborescence en silo, qui consiste à pré-classer les contenus dans une structure de catégories enchâssées, aura des conséquences positives en termes de SEO aussi bien qu’en termes d’ergonomie pour l’utilisateur.

En effet, elle crée des « niches » de contenus reliés entre eux : le robot explorateur d’un moteur de recherche comme Google ou Bing tient compte de ce contexte pour évaluer la qualité d’une page web.

Pour l’utilisateur, elle facilite (ou gêne) la navigation en gérant la proximité et la différence sémantiques.

Penser la navigation sur un site web

Les menus de navigation

Un menu de navigation sert à accéder au premier niveau de l’arborescence.

Quand vous confiez la création de votre site web à un professionnel, par exemple une agence web locale à Versaille, il passera forcément par une étape de conceptualisation de la structure du site, qui aboutira à la forme du menu de navigation.

Exemple : la navigation d’un site Internet à publics multiples

Sur tel autre site Internet, le besoin diffère : imaginons le cas d’une entreprise qui fasse des activités complexes dans des zones géographiques différentes. Ils présentent une offre dans telle région, et une offre différente dans une autre région.

Dans ce cas, il y a donc non pas un mais DEUX PUBLICS, à qui l’entreprise propose deux offres.

Dans ce cas, il sera bon de faire varier le menu principal en fonction du contexte. La navigation principale proposera par exemple en page d’accueil un choix entre “isolation thermique en Alsace” et “Isolation acoustique en Bretagne”. Si on clique le premier, le menu principal s’adapte et montre dorénavant trois choix : Isolation par l’intérieur, isolation par l’extérieur, isolation monomur. De cette manière, même dans la navigation on ne montre au public que ce qu’il veut voir, sans l’embarrasser de ce qui ne le concerne pas.

Exemple : la navigation d’une boutique e-commerce

Prenons le cas d’une boutique e-commerce : une entreprise qui vend des vêtements pourrait commettre l’erreur de créer un menu du genre :

Accueil / A propos / Boutique / Mon compte / Contact

Le souci, c’est que cette structure met au même niveau des éléments qui n’ont pas du tout la même importance.

Solution : créer d’abord un sous-menu pour grouper les pages techniques :

A propos / Mon compte / Contact

Quand à la page Contact, on peut la placer dans la même barre sous la forme d’une icône « message » avec un lien vers la page contact.

Ensuite, on développe le menu de la boutique, qui doit être mise en valeur et développée ainsi :

Robes / Jupes / Pantalons / Chemisiers / Pulls

=> Cette structure de menu qui rend accessible tous les rayons en premier niveau est beaucoup plus pertinente. Elle rend l’essentiel, à savoir les vêtements, plus accessible à l’internaute.

Les menus contextuels

Dans une rubrique blog, il est judicieux de placer – souvent en sidebar / barre latérale – un menu contextuel listant les articles de la présente catégorie.

Cela encourage la navigation par proximité thématique et cela joue un rôle sur le SEO en améliorant le maillage interne.

La navigation sur un site one-page

Un site one-page, conçu en une seule page, a un menu dont les éléments renvoient à des sections de son unique page, la page d’accueil.

Exemple de menu de navigation sur un site web pour avocat

Ainsi, on pourrait concevoir le site web d’un avocat : dans la première section il se présenterait, dans la deuxième section il présenterait ses spécialités, dans la troisième section il montrerait des statistiques sur ses victoires judiciaires, dans la quatrième section il recenserait ses articles juridiques publiés, dans la dernière section il proposerait un formulaire de contact.

Cela donnerait le menu suivant :

  • X, avocat
  • Spécialités
  • Statistiques
  • Articles
  • Contact

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 0 / 5. Nombre d'avis donnés 0

Soyez le premier à donner votre avis



Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

Besoin d'un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C'est pourquoi j'y héberge tous mes sites. Hébergement O2Switch
Panier
//
Retour en haut