Scroll

Pourquoi un menu Hamburger Et pour quels sites ?

3 oct. 2018

Mes excuses à ceux qui lisent ça le ventre vide. La fast food n’est bien sûr pas le sujet ici. Sur le web, le terme de “hamburger menu” désigne une pratique bien moins apétissante, issue de la navigation sur les sites et apps mobiles sur lesquels, par souci de gain de place et d'ergonomie, on masque généralement le menu derrière un bouton. Ce dernier est alors indiqué par trois barres horizontales empilées à la manière d’un steak entre deux tranches de pain, d’où cette appellation imagée.

Cette pratique s’est étendue au delà du monde du mobile et se retrouve maintenant sur les résolutions les plus larges de nombreux sites web.

Mais est-elle pour autant adaptée à tous les usages ?

Tour d'horizon Avantages et inconvénients

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.

Les plus

Non intrusif : un menu hamburger a le gros 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 minimal et soigné, très bien intégré graphiquement au design global.

Fermé, il laisse la place au contenu : de par son côté moins intrusif, il permet de mettre l’accent sur le contenu de la page et de ne pas perturber sa lecture par l’affichage d’autres rubriques dans la page en cours de lecture.

 

Ouvert, il concentre l’attention sur la navigation en compartimentant la navigation dans un panneau ou un “tiroir”, clarifiant ainsi la navigation globale, surtout lorsque celle-ci est sobre et minimaliste, car elle prend alors un réel impact en terme de design.

Il a sa propre mise en page, non perturbée par le contenu, et peut ainsi avoir son propre design extrêmement poussé, et même 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 atténue l’avantage de clarté qui caractérise normalement ce type de navigation.

Suggestions Posologie et contre-indications

Au regard de ces quelques points, on peut déjà 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, plus familiers de cette pratique, vous pouvez l’envisager sereinement.

Travaillez à l’échelle

Et au pinceau… Blague à part, avant de vous lancer dans ce type de solution de design, assurez-vous que votre menu est suffisamment concis pour mériter un traitement en hamburger.
Votre site comporte moins d’une dizaine de pages ? Le 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, car 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 ensuite capital de sélectionner soigneusement ce qui mérite de se retrouver dans ce menu, et veillez à nommer clairement et de la manière intelligible et percutante chacun des éléments qui le composeront.
Pensez à vos utilisateurs : en un balayage du regard, ils doivent avoir compris votre plan global et garder vague mémoire des différentes rubriques qui les ont intrigués afin d’y revenir plus tard. Sans quoi leur navigation risque d’être poussive et de les décourager à moyen terme.

Une bonne idée peut être de proposer les deux ou trois entrées les plus cruciales de la navigation directement sur la page, tandis qu’on regroupe les éléments plus secondaires derrière un hamburger. On offre ainsi un excellent compromis à l’utilisateur entre design épuré et fluidité d’utilisation du site.

Scénarisez la navigation

Si vous cachez le menu ainsi, il peut aussi ê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, ou des appels à l'action (call to action) pour l'inviter à interagir.

Si cela peut être 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é pas à pas, et que sa navigation se fait sans effort, son engagement dans votre site n’en sera que meilleur.

Pour conclure

Mal employé, un menu hamburger tient rapidement plus du handicap que de l’atout pour un usage web sur grand écran.

Mais utilisé avec conscience et parcimonie, un menu hamburger peut magnifier la version desktop de votre site. Comme d’habitude, 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...

Jaufrey
Jaufrey Designer gourmand

Lancez Votre projet

Vous souhaitez nous briefer pour un super projet ? Connaître toutes nos références ?
Discuter ? Nous rencontrer ? Rejoindre notre team ?

Démarrez un chat

Je m'abonne à la newsletter