Comment créer l’arborescence de votre site Web?

Comment créer l'arborescence de votre site WebL’arborescence de votre site est la manière dont seront classées et liées vos pages web. Vous devez structurer votre site de manière à ce que le visiteur trouve l’information dont il a besoin rapidement.

Avec une bonne arborescence, votre site aura toutes les chances d’atteindre les objectifs que vous lui avez fixés. Regardons ensemble comment y arriver.

1. Listez tous les contenus

Pour bien faire passer votre message, chacune de vos pages ne devrait présenter qu’un seul sujet. Commencez donc par lister tous les contenus de votre site. Faites la liste de vos réalisations, vos produits, vos services, vos documents techniques, formulaires, etc. Pensez aux articles que vous souhaitez publier et les fonctionnalités à offrir en ligne.

Truc : Utilisez des cartons ou post-its. Inscrivez chaque contenu sur un post-it différent.

2. Regroupez les contenus

Regrouper vos contenus (post-its) par similarités jusqu’à ce que vous ayez des ensembles cohérents pour votre public cible. Ces ensembles formeront les rubriques de votre site. La difficulté est de trouver les regroupements qui rassemblent le mieux ce que vous souhaitez présenter et qui sont en même temps logiques pour l’internaute.

Truc : Faites appel à des personnes représentant votre public cible et demandez-leur de regrouper vos post-its. Cela vous permettra de valider vos rubriques.

Quelques regroupements possibles

Vous pouvez décider d’organiser vos contenus de différentes manières selon vos objectifs et le type de site Web (éditorial, corporatif, boutique, blogue, etc.).

Regrouper par catégorie

  • type de produits ou de services
  • par thématique
  • par saison, année ou mois
  • nouveautés, en solde, régulier

Regrouper par besoin ou problématique de vos clients

  • se former, réseauter, obtenir du financement
  • pour cheveux secs, cheveux fins, cheveux traités
  • trouver un contrat, offrir un contrat

Regrouper par type de client/utilisateur

  • entre amis, en famille, pour enfants
  • femmes, hommes, filles, garçons
  • aînés, adultes, adolescents, enfants
  • citoyens, touristes, investisseur
  • particuliers, entreprises
  • industriel, commercial, résidentiel
  • avancé, intermédiaire, débutant

 3. Élaborez l’arborescence

L’organigramme est souvent utilisé pour présenter l’arborescence d’un site. Présentez maintenant vos regroupements et vos contenus sous forme de rubriques et de pages. Identifiez-les par un nom court et pertinent.

Exemple d'organigramme

Voici l’organigramme une fois dans le menu (navigation) du site web :

Exemple de menu

4. Ajoutez des liens contextuels

Si vous souhaitez aller plus loin, étudiez la navigation de votre organigramme en vous mettant à la place de l’utilisateur. Arrivé sur une page pourrait-il chercher une information supplémentaire? Si oui, vous pouvez proposer dans la page, un lien vers cette information. Ces liens faciliteront la navigation à l’intérieur de votre site Web.

Exemple d'organigramme

Exemples de liens contextuels dans une page

  • les commerces qui proposent le produit
  • les promotions liées au produit
  • les produits similaires
  • le personnel en lien avec le service
  • etc.

5. Créez des appels à l’action

N’oubliez pas d’identifier les actions que vous souhaitez voir faire par l’internaute. Pour mon exemple de salon de coiffure, si l’objectif est d’obtenir plus de rendez-vous, un bouton « Prenez rendez-vous » et menant vers la page en question serait tout indiqué pour les pages proposant les services du salon.

Lire aussi comment créer des appels à l’action efficaces

Exemple d'organigramme

Conclusion

N’oubliez pas qu’un site Internet ne sert pas à ranger de l’information. Il sert à communiquer. Votre arborescence ne doit pas présenter toute l’information sur votre entreprise, mais seulement celle qui appuiera votre message et vous aidera à atteindre vos objectifs.
 


Infolettre

Recevez gratuitement nos articles par email. Abonnez-vous à l’infolettre de l’agence!

Je m’abonne

Vous avez aimé cet article ? Partagez-le avec vos amis en cliquant sur les boutons ci-dessous :

Commentaires (7)

  1. Ping : Écrire les pages de votre site Web | Blogue

  2. Tim'o Répondre

    Bonjour,

    L’article est vraiment intéressant. Je conseille aussi, pour aller plus loin, un article de la Fabrique du Net, comparateur de logiciels de création de sites web, qui est aussi très complet !

    10 février 2015 à 17:06
  3. frere Répondre

    J’aimerais avoir un modèle pour faire l’arborescence concernant des éléments familiaux
    photo appartement louer, courriers divers dossier personnel par enfant.

    Je vous remercie par avance.

    9 février 2015 à 15:32
  4. Mélanie Imbeault Répondre

    Merci à mes collègues Martin et Isabelle de partager ici leur point de vue et leur expérience face à cette étape d’un projet web. Comme on dit : ils savent de quoi ils parlent 😉

    4 septembre 2014 à 16:13
  5. Isabelle Durette Répondre

    En effet Martin, avoir une bonne arborescence aide vraiment beaucoup à la réalisation du site. C’est un outil indispensable!

    4 septembre 2014 à 16:05
  6. Martin Ayotte Cummings Répondre

    J’ajouterais ceci de mon point de vue d’intégrateur web : une bonne arborescence, lorsqu’elle est bien faite, rend la création du site beaucoup plus rapide et efficace, car nous savons tout de suite où va chaque élément du site.

    Le menu sera plus logique, le contenu devient plus lisible parce que nous savons quels sont les sujets que chaque page renferme, etc.

    Et pour le client, l’arborescence rend aussi la rédaction des textes plus facile et efficace. Vous savez de quoi vous devez parler, comment vous devez en parler et sous quel angle l’aborder.

    Oui, ça peut être une prise de temps au début, mais penser au temps gagné au final.

    Comme le dit l’adage : la ligne droite n’est pas toujours le plus court chemin.

    3 septembre 2014 à 16:36

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>