bandeau3.jpg

Le menu hamburger : Pour qui ? Comment ?

Digital Design 22 janvier 2020

Mes excuses à ceux qui lisent ça le ventre vide. La fast food n’est bien sûr pas le sujet ici.


En effet, le terme “Hamburger menu” désigne un élément de navigation utilisé notamment pour les applications et versions mobiles de sites web. Par souci de gain de place, on masque généralement le menu derrière un bouton. Celui-ci est représenté par trois barres horizontales empilées à l'image d’un steak entre deux tranches de pain, d’où cette appellation.
On l'appel aussi menu latéral.


Cette pratique s’est étendue au-delà du monde mobile et se retrouve sur les résolutions les plus larges de nombreux sites web. Mais est-elle pour autant adaptée à tous les usages ? C'est ce que nous allons voir !
 

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

menu hamburger les 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 moins du menu hamburger

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

Mal employé, un menu hamburger tient rapidement plus du handicap que de l’atout pour un usage web sur grand écran.
Cependant, utilisé avec conscience et parcimonie, un menu hamburger peut magnifier la version desktop de votre site. Tout est question de mesure et de travail en amont, notamment sur l’arborescence et la navigation globale.

Si tous les marqueurs sont au vert, alors pourquoi pas un hamburger ?
Maintenant, je ne sais pas vous, mais cet article m'a donné faim ... 

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 !


Vous avez un projet ?
Dites-le nous !
1 - Faisons connaissance
Votre prénom est obligatoire
Votre nom est obligatoire
2 - Vos informations
Votre email est obligatoire
Votre email n'est pas valide
3 - Dites-nous en plus sur votre projet *
Votre message est obligatoire
4 - Vous souhaitez joindre un document ?
Glissez et déposez vos fichiers ici !
Votre consentement est obligatoire

Ce site est protégé par reCAPTCHA et les Politique de confidentialité et Condition d'utilisation de Google s'appliquent.

Merci pour votre demande, nous vous répondrons dans les plus brefs délais.