Menu burger : bonne ou mauvaise idée pour votre site ?

Prêtez votre téléphone à quelqu'un qui ne connaît pas votre site et demandez-lui de trouver vos tarifs. S'il hésite devant les trois petits traits en haut de l'écran, votre menu burger lui complique la tâche. Ce menu replié a pourtant de bonnes raisons d'exister, à condition de l'employer avec discernement.

Pourquoi ce menu existe

Le menu burger doit son nom à son icône : trois barres horizontales empilées, qui évoquent un hamburger. Sur un écran étroit, un menu complet ne tient pas en largeur. Les trois barres le rangent derrière un seul bouton, qui déroule la liste des pages au toucher.

Les sites sur téléphone l'ont popularisé, et beaucoup de visiteurs le reconnaissent. Les personnes peu familières des applications hésitent davantage.

Il a aussi un vrai mérite : sur un site de quinze pages, il met toute la navigation à un toucher sans encombrer l'écran. Tout l'enjeu consiste à choisir ce que l'on range dedans et ce que l'on laisse à découvert.

Là où il pose problème

• Ce qui est caché est moins utilisé. Les visiteurs voient d'abord ce qui est affiché, et les rubriques rangées derrière l'icône passent facilement inaperçues.
• Les actions importantes disparaissent avec lui. Le téléphone, la réservation ou l'itinéraire, rangés dans le menu, demandent deux touchers au lieu d'un.
• Il cache l'étendue du site. Un visiteur qui ne voit aucune rubrique ne sait pas si vous proposez des tarifs, une carte ou des réalisations.
• Il gaspille la place sur un site de quelques pages. Trois ou quatre rubriques tiendraient sans difficulté dans l'en-tête.
• Sur ordinateur, il a rarement sa place. Un écran large permet d'afficher le menu en entier.

Ces défauts figurent parmi les erreurs décrites dans l'article sur l'ergonomie d'un site, qui conseille aussi de nommer les rubriques avec les mots de vos clients.

S'en passer ou le garder avec méthode

Quand quelques rubriques suffisent

Un site de quatre ou cinq pages n'a pas besoin de menu replié. « Carte », « Réserver », « Infos » et « Contact » tiennent souvent sur une ligne en haut de la page, même sur un petit téléphone. Une rangée de rubriques que l'on fait glisser du doigt, ou une barre fixe en bas de l'écran, offrent des solutions intermédiaires : le bas de l'écran est la zone que le pouce atteint le plus facilement quand on tient son téléphone d'une main. Essayez chaque solution sur un téléphone à petit écran avant de l'adopter.

L'étiqueter et le placer

Écrivez le mot « Menu » à côté de l'icône : un mot se comprend sans apprentissage. Placez le bouton dans un coin de l'en-tête, au même endroit sur toutes les pages, avec une zone de toucher assez grande pour le pouce, de l'ordre de 44 à 48 pixels de côté selon les repères courants. Une fois le menu ouvert, une croix bien visible, ou un toucher en dehors du menu, doit le refermer.

Le garnir avec soin

Gardez de cinq à sept rubriques, aux intitulés que vos clients emploient : « Carte », « Tarifs », « Réalisations », « Contact ». Le menu mobile doit contenir les mêmes pages que celui de l'ordinateur : une page qui n'y figure pas devient plus difficile à trouver, pour les visiteurs comme pour Google.

Garder les actions importantes à découvert

Sortez du menu ce qui fait venir les clients. Un en-tête qui réunit le logo, un bouton « Appeler » ou « Réserver » et le bouton « Menu » coûte peu de place et fait gagner un toucher. Une barre fixe en bas de l'écran, avec deux boutons au plus, fonctionne aussi, à condition de ne pas cacher le contenu ni de s'empiler avec le bandeau de cookies.

Sur ordinateur et sur tablette

Sur un grand écran, affichez le menu en barre horizontale, avec toutes les rubriques visibles. L'icône à trois barres ne doit apparaître que lorsque la largeur de l'écran l'impose. Vérifiez la bascule en réduisant la fenêtre de votre navigateur et en tournant une tablette : le menu doit passer d'un affichage à l'autre sans rubrique coupée ni chevauchement.

Le test de dix minutes décrit dans l'article sur le site responsive passe aussi le menu en revue sur votre téléphone, rubrique après rubrique.

Un menu utilisable par tous

Le bouton doit se commander au clavier, avec la touche Tabulation puis Entrée, et un lecteur d'écran doit l'annoncer avec un libellé clair, comme « Menu », ainsi que son état, ouvert ou fermé. La touche Échap doit refermer le menu, et l'élément actif doit rester visible, par exemple entouré d'un cadre.

Les sous-rubriques ne doivent pas dépendre du survol d'une souris, que l'écran tactile ne connaît pas. Le contraste du texte et la taille des caractères comptent autant que dans le reste du site, comme le rappelle le guide de l'accessibilité d'un site internet.

À faire cette semaine

1. Faites trouver vos tarifs et vos horaires sur téléphone à trois personnes qui ne connaissent pas le site, et notez leurs hésitations.
2. Ajoutez le mot « Menu » à l'icône, et sortez du menu le bouton d'appel ou de réservation.
3. Si votre site est refait, décrivez dans la demande de devis la navigation voulue sur mobile, avec les actions à garder visibles.