Trois façons de créer un menu pour des sites avec beaucoup de contenu

Après quelques coups de baguette magique et certainement des dizaines d’heures de travail, vous en êtes à choisir une navigation pour votre site web et vous hésitez sur la façon d’organiser le menu. Ça tombe bien, on vous écrit un article pour vous proposer des solutions.

1 – Le menu Burger

On utilise le terme burger pour le célèbre icône qu’il représente, mais aujourd’hui les 2 ou 3 barres horizontales peuvent être remplacées pour des nouveaux concepts. Un signe «+», le mot «menu» ou un design plus personnalisé font tout aussi bien l’affaire.

Le principe reste le même : stocker la navigation derrière un clic. Après ce clic, un monde de possibilités s’offre à vous! Un, deux, trois niveaux de navigation; un menu horizontal ou vertical; peu d’éléments avec une grosse police; beaucoup d’éléments avec une police plus petite, etc. You get the point.

Le menu burger laisse beaucoup de place à l’imagination. Ce n’est pas toujours le meilleur ami des clients qui pensent encore que la règle des 3 clics est une règle universelle. La réalité, c’est qu’il vaut mieux plusieurs clics dans une architecture d’information bien rangée que 2 ou 3 clics dans une interface où on donne toutes les informations possibles en même temps.

La Fnac, un site e-commerce français, aurait dû prendre conscience de ces conseils pour mieux étaler l’offre de ses produits.

Un bon exemple de menu burger en dehors d’un e-commerce est le Cégep de Trois-Rivières. À l’ouverture du menu on retrouve les sections principales qui elles-mêmes disposent d’une navigation au sein de leur page.

Voici un exemple de site web à menu «burger» plus simple réalisé par Kryzalid pour l’entreprise québécoise Naya.

2 – Menu déroulant

Cette méthode est sûrement la plus classique. Autrement dit, ce n’est peut-être pas très original, mais ça fonctionne bien dans la plupart des cas. La seule contrainte se trouve sur le premier niveau. Idéalement on ne dépasse pas 6, voire 7 grandes sections maximum.

Dans les exemples connus, on a le site d’Indigo Chapters. Le catalogue de cette entreprise de divertissement et décoration est très fourni. Les grandes sections sont clairement définies et les menus déroulants sont bien structurés.

Au besoin, il est même possible d’ajouter une navigation secondaire au-dessus pour donner accès à des pages uniques seulement. On retrouve cette idée sur le site d’Indigo, mais aussi sur le nouveau site du Centre de services scolaires de Laval, réalisé par Kryzalid.

3 – Menu déroulant + menu burger

Quand on veut le beurre et l’argent du beurre, on concile plusieurs méthodes. Vouloir mettre de l’avant plusieurs sections et se garder un espace «fourre-tout», c’est possible. Disposer un menu déroulant et un menu burger permet de valoriser certaines parties de l’offre du client tout en gardant un espace structuré avec des éléments moins facilement classifiables.

Le site de Loyola Marymount University utilise bien ce système. Dans le menu horizontal on retrouve les fonctions principales du site de l’université : appliquer, visiter, donner. Puis l’icône menu vient donner plus d’informations sur les programmes par exemple.

Le nouveau site web d’IKEA utilise un menu de ce type e mettant de l’avant Produits, Pièces et SOLDE ainsi qu’un menu burger dans lequel on trouve l’ensemble de la navigation du site web.

Kryzalid a utilisé cette technique de menu déroulant et de menu burger pour classer le menu volumineux du Cégep de Sorel-Tracy.

4 – C’est bien beau tout ça, mais en mobile ça donne quoi?

Excellente question! Je sors mon ukulele pour te chanter une petite chanson.

L’accordéon est ton ami, 
Les titres de sections aussi,
Fais donc slider les éléments,
Pour ne pas voir tout en même temps!

On peut interpréter ces douces paroles selon chaque projet. L’accordéon est utile pour stocker les informations d’un second niveau. Si on dépasse 2 niveaux, il est plus sage d’utiliser une navigation par slider. C’est-à-dire afficher les titres des grandes sections dans un premier temps puis au tap, faire apparaître les éléments du niveau suivant. On laisse bien sûr une flèche retour pour accéder à la section précédente. IKEA vise juste en choisissant ce système. Ainsi, l’utilisateur ne se concentre que sur l’information qu’il souhaite voir.

Le défi d’une refonte se trouve principalement dans la reconstruction de la navigation. Il est essentiel de passer du temps sur l’arborescence afin de trouver la meilleure façon de naviguer pour les futurs visiteurs. Idéalement si le budget le permet, on fait tester plusieurs solutions à des utilisateurs types afin d’arriver avec un produit parfait ou presque. Je ne vous l’apprend pas mais c’est certainement important à souligner.

L’équipe de Kryzalid est entièrement à votre disposition pour vous guider sur le sujet. Sur ce, belle journée à vous!