Le menu hamburger : Pour qui ? Comment ?

Les avantages et inconvénients du menu burger

Comme toute chose, le menu hamburger vient bien sûr avec son lot d’atouts et de défauts. Tentons d’en dresser une liste rapide et non-exhaustive.
 

Ses avantages

• Non intrusif
  Un menu hamburger a l'avantage d’être moins intrusif qu’un menu textuel in extenso ou qu’une imposante sidebar. Le bouton, lui-même très visuel, pourra bénéficier d’un design soigné et être très bien intégré graphiquement.
• Fermé, il laisse la place au contenu.
  De par son côté non intrusif, il met l’accent sur le contenu de la page et permet de ne pas perturber sa lecture, notamment par l’affichage d’autres rubriques sur la page.
• Ouvert, il concentre l’attention sur la navigation.
  Il compartimente la navigation dans un panneau ou un “tiroir”, clarifiant ainsi la navigation globale. D'autant plus lorsque celle-ci est sobre et minimaliste, car elle prend alors un réel impact en termes de design.
• Il a sa propre mise en page.
  De ce fait, il n'est pas perturbé par le contenu et peut avoir son propre design, extrêmement poussé. Il peut contenir ses propres extras, comme des mises en avant de produits ou d’articles, ou tout autre élément qui mérite d’être conservé au travers des pages du site.

Les moins

• Certains utilisateurs peuvent passer à côté.
  Comme cet usage provient du monde du mobile, les utilisateurs les moins rompus à la navigation sur smartphone pourront se heurter à un schéma d’usage inconnu, ne pas voir le bouton hamburger (ou ne pas en comprendre le sens) et s’en tenir au contenu de la page en cours, voire pire, arrêter là l’expérience.
• On n’a pas de vision globale, ou du moins pas tant qu’on n’a pas cliqué sur le bouton hamburger, ce qui peut être déroutant, surtout lorsque l’info que l’on cherche ne figure pas directement sur la page.
• On rajoute un clic à chaque accès au menu.
  Pour les utilisateurs les moins intrigués ou engagés dans la découverte de votre site, cela peut provoquer une certaine lassitude et rendre leur navigation poussive, voire les inciter à y mettre fin par agacement.
• On peut être tenté de les surcharger.
  Possédant leur propre “page”, il est tentant de vouloir remplir celle-ci en faisant proliférer les rubriques et sous-rubriques. Ce faisant, on annihile complètement l’avantage de clarté qui caractérise normalement ce type de navigation.
   

Les bonnes pratiques

Au vu de ces quelques points, on peut dégager quelques bonnes pratiques et mises en gardes dans l’utilisation de ce type de menu.

• Adaptez-vous à votre cible
  C’est l’un des nerfs de la guerre pour la globalité de votre communication, mais c’est d’autant plus vrai pour cet aspect de design.
  Si vous destinez votre site à un public très large ou aux générations les plus âgées, le menu hamburger risque de leur échapper. Si en revanche vous concentrez votre cœur de cible sur les jeunes actifs, vous pouvez l’envisager sereinement.
• Travaillez à l’échelle 
  Avant de vous lancer dans ce type de solution de design, assurez-vous que votre menu soit suffisamment concis pour mériter un traitement en hamburger. Votre site comporte moins d’une dizaine de pages ? Votre menu devrait alors s’en trouver magnifié, car mieux mis en valeur. Si en revanche, votre arborescence comporte de multiples sous-niveaux et des dizaines de pages, envisagez une autre solution. Surcharger ce genre de menu produit exactement l’inverse de l’effet clarifiant recherché.
• Soignez votre arborescence 
  Le dernier point étant pris en compte, il est malgré tout nécessaire de sélectionner soigneusement ce qui mérite de se retrouver dans ce menu. Veillez à nommer clairement, et de la manière la plus concise et percutante, chacun des éléments qui le composeront.
  Pensez à vos utilisateurs. En un regard, ils doivent avoir compris votre plan et retenu les rubriques qui les ont intrigué afin d’y revenir plus tard. Sans cela, leur navigation risque d’être poussive et de les décourager à moyen terme. L'idéal peut être de proposer les deux ou trois entrées les plus cruciales de la navigation directement sur la page, et de regrouper les éléments plus secondaires derrière un hamburger. On offre ainsi un excellent compromis à l’utilisateur entre design épuré et praticité d’utilisation du site dans sa globalité.
• Scénarisez la navigation 
  Si vous cachez le menu, il peut être intéressant de tracer pour le visiteur des chemins prédéfinis dans votre site, par exemple en proposant des pages connexes à la fin (ou au milieu) d’une page de contenu. Utile à n’importe quelle production web, c’est d’autant plus recommandé lorsque votre menu est masqué et que l’utilisateur n’a pas tout de suite de vision globale. Si l’utilisateur de votre site se sent guidé et que sa navigation se fait sans effort, son engagement n’en sera que meilleur.

Le mot de la fin

Nos réalisations

Il est courant que nous ayant recours à la mise en place d'un menu hamburger lors de la réalisation ou de la refonte d'un site web.
C'est notamment le cas de Diapason, une salle de spectacle située à Saint-Marcellin.

Découvrez l'étude de cas qui leur est dédiée !