N’utilisez pas de menu hamburger sur des sites vitrines

La vidéo

Ce que vous allez découvrir

En résumé

L’arrivée de l’iPhone a entrainé une révolution brutale et rapide de notre manière de parcourir le Web. Ce rectangle d’à peine 12 × 6 centimètre a mit un terme à des années de conception en 1024 pixels de large. Les designers ont dû trouver une solution pour permettre aux utilisateurs de naviguer correctement avec un écran à peine plus grand qu’une carte bleue. Le menu hamburger — qui porte son nom à cause de son icône à 3 traits horizontaux— a été la solution choisie en masse pour caser le menu de navigation sur mobile et tablette. Ce menu peut être un excellent ou un mauvais choix selon le projet sur lequel vous travaillez.

Qu’est-ce qu’un menu hamburger ?

Le menu hamburger est un menu caché qui se dévoile lors qu’on clique sur un bouton «Menu» :

L’appellation “hamburger” vient de l’icône à 3 barres horizontales (buns supérieur, steak, buns inférieur). Son objectif est de pouvoir ranger la navigation principale d’un site à côté du logo. Sur mobile, la place est très limitée et l’élément qui doit être le plus visible, c’est le contenu. En cela, ce menu remplit bien son rôle. Quand on arrive sur un site avec son mobile, le logo et la navigation prennent environ 60 pixels de haut. Donc la place restante pour le contenu est très appréciable. Mais il y a un mais.

Évitez le menu hamburger sur un site vitrine

Le prix à payer pour prendre si peu de place va être de cacher les items de la barre de navigation. C’est ça qui me pose un problème. La plupart du temps, je travaille sur des sites vitrines. Sur ces sites (c’est ma spécialité), il existe une certaine récurrence en terme de page : accueil, contact, à propos. Mais d’une entreprise à une autre, il y a des pages supplémentaire qui leurs sont propre. Mon travail est de tout faire pour convaincre les utilisateurs que mon client est LA solution à son problème. Si je cache l’accès à du contenu important, je me mets en situation de handicap par rapport à mon objectif. Pour qu’un menu caché ne le soit plus, il faut aller cliquer sur le bouton. Par conséquent, il faut que l’utilisateur soit suffisamment motivé pour presser ce bouton avec intitulé générique comme «Menu». Si vous êtes Google ou Facebook, vous pouvez vous permettre de faire un peu ce que vous voulez parce que les utilisateurs feront toujours l’effort nécessaire. Mais pour une entreprise locale avec une forte concurrence, c’est risqué de cacher l’accès à des pages importantes.

Le bon contexte pour le menu hamburger

En design, il n’y a rien de mauvais. Il faut juste veiller à faire des choix adaptés au objectifs que l’on a. Ce type de menu peut-être parfait pour un e-commerce par exemple :

Sur un site marchand, vous avez un nombre de rayons plus ou moins important de rayons à afficher. Et il y a d’autres éléments critiques comme l’accès à l’espace client, le formulaire de recherche, le panier. Votre interface peut vite devenir très lourde avec des boutons et des liens partout. C’est là que le menu burger va alléger très efficacement votre interface. L’utilisateur vient pour rechercher un produit donc si j’utilise un bouton avec un intitulé nos produits, il n’y aura aucun problème de motivation. L’utilisateur cliquera dessus pour afficher la liste des rayons et trouver celui qui correspond à son besoin. Il suffit de veiller à ce que le bouton soit bien visible. Idéalement dans une zone chaude pas très loin du logo.

L’alternative : le scroll horizontal

Si je déconseille le menu hamburger pour un site vitrine, vers quelle solution s’orienter ? Le scroll horizontal ! Dans ce système, le responsive design prend tout son sens. Si j’ai un petit mobile, je verrai probablement pas plus de 2 items de navigation. En revanche, plus mon écran sera grand, plus j’aurai un nombre important d’items sous les yeux jusqu’à voir l’ensemble des pages disponibles. La démonstration de la solution se trouve à 7 minutes 14 sur la vidéo associé à cette article.

Commentaires bientôt disponible …

Réseaux sociaux

Suivez-moi pour ne rien rater