17 octobre 2020
6minutes

Qu’est-ce que l’arborescence d’un site web ? Le principe des systèmes de navigation. Les différents types de menus sur le marché | Le guide de référence

 

Qu’appelle-t-on l’arborescence d’un site web ?

Une structure de site web est une projection structurelle d’un espace informationnel qui permet un accès intuitif au contenu. Elle contribue à former un système de navigation compréhensible, grâce auquel l’utilisateur peut trouver facilement les informations dont il a besoin. Un facteur clef de l’UX Design donc !

Si les visiteurs ne trouvent pas votre formulaire web, peu importe son design épuré, ça ne servirait à rien.

En matière de référencement SEO, la structure de navigation d’un site web a un impact énorme sur les taux de conversions, les ventes et les taux de rebond. La règle d’or : tout système de navigation doit permettre d’accéder à n’importe quelle page du site et de trouver ce dont on a besoin en 3 clics. Rentrons dans le vif du sujet.

 

L’arborescence d’un site web est au cœur de l’UX design

Autrefois la navigation arborescente était une méthode favorite des concepteurs web. Aujourd’hui, elle a été remplacée par des alternatives modernes orientées UX.

L’User eXperience fait référence à la façon dont un visiteur perçoit la convivialité, l’ergonomie et l’esthétique d’un site web. Et optimiser son UX Design représente tout un processus. Les éléments clefs qui jouent un rôle dans l’UX :

– police de caractère, couleur, iconographie,

– titre, call-to-action

– temps de chargement des pages

– conception des formulaires.

GlooMaps est un excellent outil de réalisation d’arborescence de site web, de même que Octopus.do avec sa rapidité et son interface simpliste.

 

Interface de création d’arborescence de site web de l’outil visuel de sitemap Octopus.do

 

Une structure de site pour un objectif précis

Il existe deux approches pour optimiser le schéma structurel d’un site :

L’approche top-down : basée sur les objectifs et les besoins de l’utilisateur. Pour atteindre les objectifs commerciaux, il faut procéder à un inventaire logique de contenu en le décomposant graduellement en catégorie. Il en résultera, de ce fait, une structure hiérarchique du site pour servir de base à l’organisation du contenu. Ce qui aide à définir les fonctionnalités appropriées. Tout se prépare pendant la phase d’architecture du site.

L’approche bottom-up : le moyen de développer la structure en fonction du contenu disponible au moment du lancement. Cette approche implique également une accentuation des catégories et sous-catégories. Son développement doit commencer par la recherche de contenu. Et en fonction du contenu fourni, il faut regrouper les éléments dans des catégories du niveau le plus bas.

 

Les 7 menus de navigation mobile et desktop 

 

Les styles des menus de navigation sont fonctionnels et font aussi partie intégrante de la conception elle-même. Voici les types de menus de navigation :

 

Type #1 Le menu horizontal : le standard qui passe partout

C’est le plus courant. Il présente une liste horizontale des pages principales du site nommé en un ou deux mots. On peut les créer via des graphiques ou du texte HTML et qui interagissent lorsque les utilisateurs les survolent. Ajouter des micro-interactions est un plus.

 

Menu horizontal

 

Type #2 Un hamburger menu ou Flyout menu : une solution haut de gamme

Créée à l’origine par Norm Cox, en 1981 pour indiquer une liste dans le système Xerox, le menu « hamburger »  est un menu en quelques lignes souvent vues sur les sites web mobile qui cachent le menu traditionnel des fichiers jusqu’à ce qu’on clique dessus.

Illustration d’un menu hamburger en version mobile-friendly chez le landing page builder Landingi

 

Également appelée Flyout Menu, cette option de menu dynamique offre également une solution haut de gamme, élégante et subtile à une version de bureau d’un site web où un design minimaliste ultra-moderne occuperait le devant de la scène.

La tendance des hamburgers menus est davantage axée sur la conception ou refonte de site web version desktop, car les conceptions de bureau et de mobile convergent.

 

Remarquez que notre site Eficiens.com utilise le menu hamburger…pour le moment ! Patience, çà va changer !

 

Type #3 Méga-menu : survoler et afficher

Souvent présent sur les sites e-commerce et dans les entreprises qui proposent de nombreuses options dans un seul menu, un méga-menu est une interface déroulante déclenchée par l’utilisateur qui survole un lien / zone définie. Il affiche ainsi toutes les options dans un méga-panneau principal et regroupe des sujets connexes dans des catégories.

Le souci ? Les méga-menus risquent de submerger l’utilisateur d’options et sont, par conséquent, délicats à afficher de manière élégante dans des vues mobiles réactives.

 

mega menu

 

Type #4 Le menu scroll-trigger

Les effets web déclenchés par le défilement (scrolling) ont gagné en popularité en amenant l’UX à un nouveau niveau interactif de visualisation en ligne. Ces effets d’interface utilisateur sont alors visibles dans des effets de parallaxe ou dans des animations. Ces dernières sont activées par le défilement de l’utilisateur.

En termes de navigation, les effets déclenchés par le défilement offrent une profondeur et une expérience animée qui peuvent, par exemple, rendre la navigation simple et amusante.

 

Scroll-trigger menu

 

Type #5 Le sidebar vertical

Plus répandue dans la conception des sites web d’il y a dix ans, la navigation verticale ne produit pas de structure hiérarchique logique pour le traitement uniforme des liens ni pour les sites qui ont une certaine profondeur. De ce fait, cette navigation verticale épuise inutilement le précieux espace de l’écran.

Il existe des exceptions où la navigation verticale peut fonctionner sur les pages intérieures d’un site web, pourtant la navigation verticale est une méthode dépassée sur la navigation primaire de haut niveau.

 

sidebar vertical menu

 

Type #6 Menu déroulant activé par le survol

Le type de menu de navigation semi-controversé. Un menu déroulant activé par le survol suppose l’intention de l’utilisateur. Il fournit également des options de menu supplémentaires lorsqu’une souris passe sur un lien. Le fait qu’un utilisateur survole un lien ne signifie pas nécessairement qu’il a l’intention d’interagir avec lui.

Grâce à un UI bien conçu, il peut être appliqué à la navigation primaire sur les versions desktop afin de créer une expérience simplifiée. Quant à la version mobile, un menu déroulant activé par le survol est plus problématique.

 

menu déroulant activé par hover

 

Type #7 Menu de navigation sticky : la tendance populaire

Le menu de navigation sticky ou collant ou fixe ne disparaît pas lorsque l’utilisateur fait défiler une page web. Elle est utilisée dans les sites web où les éléments du Call-to-Action se trouvent dans la barre de navigation horizontale principale.

 

menu sticky

 

Également appelés barres de navigation persistantes, ces menus fonctionnent bien pour donner à l’utilisateur un sentiment de contrôle sur les sites web pouvant faire l’objet d’une action et sur les pages web plus longues.

Roy Eyal explique très bien comment créer un menu sticky chez la page builder Elementor.

D’ailleurs, nous avons rédigé un article détaillé sur la page builder Elementor.

 

Rédaction initiale : Ando Ranaivosoa

 

Vous avez aimé ? Notez-nous !