Guide de la gestion de projet digitale

Téléchargez notre Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !

Blog

Arborescence d'un site web : un enjeu majeur pour votre site web

26 mars 2021
Accueil du Blog   /   #UX Design   /   Arborescence d'un site web : un..
Introduction
Partagez

Il est coutume de dire que s’il faut plus de 3 clics pour atteindre une page, celle-ci est inutile. Mais organiser une grande quantité d’informations est difficile. Soignez l’arborescence de votre site web et guidez au mieux l’utilisateur vers le contenu qu’il recherche, sans frustration !

Si vous êtes familiers (ou non) des sites web, vous devez sûrement savoir que l’arborescence est un élément incontournable. L’arborescence constitue l’une des clés de réussite et de performance d’un site web. C 'est aussi un élément essentiel pour garantir la qualité de l'expérience utilisateur.

C’est un sujet important, transverse, qui a de nombreux impacts sur votre site, même les plus insoupçonnables...

Pas de panique ! Cet article est là pour vous expliquer les impacts de l’arborescence sur la conception de votre site web.

arborescence dun site web (1)

L'impact de l'arborescence sur la conception UX d’un site web

L’arborescence désigne la façon dont vous « rangez les contenus » de votre site web. On parle aussi d’architecture de l’information. Tel un architecte, il faut penser, concevoir la structure du site, l’emplacement des différents contenus.

Cette organisation des contenus du site a un impact sur plusieurs éléments :

L'image de l'entreprise

En fonction des grandes entrées de navigation proposées, vous vous positionnez d’une certaine façon vis-à-vis de l’utilisateur.

Vous donnez une image institutionnelle, commerciale ou orientée utilisateurs.

Illustrons cette notion par quelques exemples :

  • L'image institutionnelle : le menu du site de l’INRIA
    L’INRIA, l’institut national de recherche en sciences et technologies du numérique affiche clairement son image de marque institutionnelle dès le menu de navigation. Ici, il n’est pas question de vendre quoi que ce soit mais de présenter les actions menées, communiquer sur les offres d’emplois disponibles et avant tout partager de l’information.

menu de navigation- image institutionnelle - INRIA

 

  • L'image commerciale : le menu du site H&M

Pour rappel H&M est une enseigne spécialisée dans l’habillement. L’intention du menu de navigation du site H&M est claire. Toutes les entrées du menu font référence à une catégorie de produits. L'objectif : vendre ! Les entrées secondaires (service client...) apparaissent plus petites et en dehors du menu principal.

menu de navigation - image commerciale - h&m

 

  • L'image orientée utilisateur : le menu du site Sostrene Grene 

Sostrene Grene est une enseigne spécialisée dans la vente d'articles de décoration. L'objectif de leur site web est évidemment de vendre leurs produits. Pour autant, le menu de navigation n'est pas orienté 100% vente. La première entrée du menu présente évidemment les produits. Mais toutes les autres entrées sont orientées utilisateurs : inspiration, projets de bricolage, découverte de la marque et son univers.

menu de navigation - image utilisateurs - sostrene grene

 

Le référencement naturel

L'arborescence est l'un des aspects les plus importants de la performance SEO. Les entrées du menu principal sont pré-pondérées par les moteurs de recherche. Il est donc important de toujours se confronter aux requêtes des internautes et de choisir des mots-clés stratégiques ciblés.

Les parcours utilisateurs

Qu’il s’agisse des rubriques du menu principal, des sous-rubriques, des pages de niveau 3,4,5... vous définissez le parcours que vos utilisateurs doivent emprunter pour atteindre le contenu qu’ils recherchent. Autant leur faciliter la tâche !

Le menu de navigation, le premier enjeu de l'arborescence

Le nombre d’entrées a un impact sur l’affichage du menu de navigation. Le choix du type de menu est directement corrélé avec le nombre d’entrées principales que vous souhaitez mettre en avant.

Les menus de navigation horizontaux sont compatibles avec les navigations fixes entre 3 et 6 entrées.

Les menus burger plein écran sont quant à eux compatibles avec les navigations de 7 entrées de navigation. Au-delà de ces 7 entrées principales, l’utilisateur peut se sentir perdu.

Il est possible que le menu doive intégrer des entrées annexes, dites entrées profils, en plus des entrées principales. Il peut s'agir par exemple d'un Espace Presse, Ressources humaines, Service Client ... Ces entrées peuvent être intégrées au header ou être présentées dans un espace spécifique dans la navigation :

navigation entrées profils - exemple groupe rocher

 

  • L’exemple du menu de navigation du site Franprix

menu de navigation horizontal franprix

Ici, Franprix propose une navigation horizontale avec 10 entrées de menu principales et un accent sur la possibilité de faire ses courses en ligne.

  • L’exemple du menu de navigation du site Monoprix

navigation horizontale et menu burger - monoprix-1

Monoprix a choisi une navigation horizontale simplifiée avec 3 grandes entrées principales : courses, mode, maison et loisirs.

Une fois la catégorie principale sélectionnée le site propose un menu burger plus complet.

  • L’exemple du menu de navigation du site Carrefour

menu de navigation burger - carrefour (1)

Le site Carrefour propose quant à lui un menu burger uniquement avec une entrée par rayons, soit 29 entrées au total !

Arborescence de site et typologie des gabarits

L’un des enjeux de l’arborescence est de regrouper des contenus d’une même thématique ou avec le même objectif. En triant les contenus et les rangeant dans les bons tiroirs, se dessinent des types de page (autrement appelés gabarits).

 

Le gabarit “Carrefour de contenus”

arborescence 4 niveaux

Si l'arborescence est profonde (c'est-à-dire plus de 4 niveaux de pages) ou lorsque les contenus destinés à une cible particulière sont éparpillées un peu partout sur le site, on peut mettre en place un gabarit "carrefour". Son objectif est de réorienter les internautes et leur offrir un parcours utilisateur plus rapide.

Il peut s'agir de proposer à l'utilisateur de renseigner à quel profil il appartient. Il est ainsi redirigé vers les contenus susceptibles de l'intéresser.

 

Le gabarit “Liste”

Si l'offre proposée sur le site web est très large, le gabarit liste est incontournable. Il permet de regrouper toutes les offres sur une seule et même page. Pour optimiser la recherche des utilisateurs, il faut proposer un système de tri par mot-clé, filtres, tags en fonction des besoins.

Dans l'exemple ci-dessous, le groupe hospitalier de Détroit a choisi un gabarit liste pour recenser tous ses établissements de santé. L'utilisateur peut parcourir l'ensemble des éléments en faisant défiler la page ou utiliser la fonction de recherche en début de liste.

exemple de gabarit liste - arborescence (1)

 

Le gabarit “Fiche”

Le gabarit fiche quant à lui permet de présenter des produits ou services très différents. Pour autant, l'usage d'un gabarit unique permet d'assurer la cohérence du catalogue produit et créer des repères de navigation pour les internautes. L'utilisateur est capable de repérer rapidement où se trouvent les différents éléments d'une page et de les mémoriser. Le gabarit fiche lui permet de garder ces repères. S'il a déjà vu la page une première fois, il se souvient où se trouvent le prix, la description du produit, les caractéristiques techniques, etc.

Arborescence de site et contenu des pages

 

Le maillage interne : faire le lien entre les contenus

Au sein même de l'arborescence, vous allez sans doute imaginer des ponts entre des contenus ou rubriques. Et à juste titre, se posera la question du duplicate content. Comment faire si une page entre dans deux catégories et donc à deux endroits de l'arborescence ? Faut-il "sacrifier" une catégorie ou dupliquer la page pour qu'elle apparaisse aux deux endroits ?

Pour palier à ce problème, il est possible de créer des blocs de liens entre les pages pour créer un maillage interne entre les rubriques.

maillage interne - arborescence site web - exemple musée picasso

C'est ce qu'a fait ici le Musée Picasso. En bas de la page qui permet de découvrir les expositions en cours est intégré un bloc qui fait le lien avec d'autres rubriques du site : les privatisations, les boutiques et l'Hôtel Salé. Cette solution permet de travailler le maillage interne et fait office de zone de rebond. Zone de rebond : késako ? Continuez la lecture 😀

 

La zone de rebond : pousser du contenu pour garder l'utilisateur

Dans la même logique que celle du maillage interne, la fin d'une page ne doit pas signifier que l'expérience utilisateur s'arrête !

Travailler les zones de rebond, c'est proposer à l'utilisateur de continuer sa navigation et de découvrir de nouveaux contenus. L'objectif : qu'il quitte le site le plus tard possible et donc diminuer le taux de rebond.

La zone de rebond peut prendre plusieurs formes :

  • une lame qui présente les clients et donc les projets,
  • un encart de type "ces articles peuvent vous intéresser" ou "sur le même sujet",
  • un call-to-action pour diriger l'utilisateur vers un contenu spécifique, en lien avec la page qu'il vient de lire,
  • ...

 

La définition d’une arborescence est une étape cruciale et complexe dans un projet web. Il est important d’en mesurer les impacts pour ne pas faire n’importe quoi avec la vitrine digitale de votre entreprise. Elle est un gage de qualité pour votre référencement naturel mais aussi et surtout pour vos parcours utilisateurs. La conception de votre site, notamment l’architecture du dispositif, est primordiale pour atteindre vos objectifs (d’image, de performance...) et aider les internautes à atteindre les leurs 😉.

Nouveau call-to-action

Publié par
Daniel Ventura