La navigation qui apparait à la demande d’un utilisateur est souvent représentée par une icône constituée de 3 barres horizontales empilées connue sous le nom de menu “Hamburger”. Le menu “Hamburger” est très à la mode, a beaucoup été utilisé ces dernières années et sans doute nombre d’entre vous savent ce qu’il représente aujourd’hui. Pourtant des tests utilisateurs ont montrés que tous les visiteurs ne comprennent pas spontanément la fonction de l’icône “Hamburger”. De plus l’utilisation de ce menu “Hamburger” demande une action supplémentaire pour déployer les items du menu. Cette action répétée peut décourager un utilisateur de naviguer sur un site web ou une apps mobile. Il faudra donc vérifier que cette navigation est pertinente dans l’utilisation qu’on en fait. L’intérêt du menu “Hamburger”, c’est qu’il laisse de l’espace libre pour le contenu (très pratique sur un écran mobile par exemple).

L’origine de l’icône “Hamburger”

Pour retrouver la trace du fameux menu Hamburger, il faut remonter à l’une des premières interfaces graphiques avec l’un des premiers ordinateurs personnel : le Xerox Star de 1981 . Son créateur, Norm Cox, avait pensé à un menu ressemblant à une simple liste avec trois lignes empilées. Le nom donné à cette icône était tiroir sur le côté ou menu latéral. Après ses débuts dans l’interface utilisateur du Xerox Star, le menu “Hamburger” a disparu pendant plusieurs années sans doute à cause de l’échec commercial qu’à connu cet ordinateur.

Xerox Corporation Star, 1981

Le come-back de l’icône menu “Hamburger”

C’est avec l’arrivée des applications mobile que l’icône du menu “Hamburger” à fait sa réapparition. Une des première application où l’on retrouve cet icône c’est Voice Memos, une application iOS 3.0 qui vous permet d’enregistrer rapidement une note vocale. Un clic sur l’icône du Hamburger permet d’afficher une liste de notes d’enregistrements et de partages de mémos vocaux.

Menu “Hamburger” dans l’application Voice jusqu’à iOS 6

L’application la plus connue à adopter le menu de “Hamburger” était Facebook. Facebook à d’abord utilisé une icône de grille à deux rangées en 2008, pour évoluer vers une grille à trois rangées en 2009 et enfin à trois barres horizontale empilées en 2010. En 2009, l’icône du hamburger a également été utilisée dans Tweetie , la première application mobile de Twitter. Après cela, il n’a pas fallu longtemps pour que bon nombres d’applications Web ou mobile utilisent le symbole du menu “Hamburger”. En quelques années, des entreprises comme Google, Starbucks ou Disney utilisaient des menus “Hamburger” dans leurs applications et sites mobiles.
Alors la démocratisation du menu “Hamburger” par les sites mobiles et les applications, a-t-elle amenée les utilisateurs à adopter ce bouton pour afficher la navigation ?

Facebook : l’évolution du Menu “Hamburger” (Image crédits : Arstechina / Appdevice / vowe)

La remise en question de l’icône menu “Hamburger”

On comprend bien le succès de ce type de navigation à la demande puisqu’il permet de résoudre le problème de l’espace libre posé par la réduction de la taille des écrans. Cependant, dès 2014 des concepteurs ont commencés à remettre en question l’utilisation du menu “Hamburger”. On constate lors de tests utilisateurs et avec l’analyse des statistiques de consultation des sites que cette navigation peut entrainer une chute de l’engagement des visiteurs. L’une des problématiques vite révélée côté UX Design, c’est que les options de navigation cachées par ce type de menu sont beaucoup moins utilisées. La Phrase célèbre de Josh Constantine de TechCrunch résume bien ce problème : “Pour l’essentiel, ce qui n’est pas vu, n’est pas connu.”
Le design de l’icône pose aussi un problème car on s’aperçoit que les utilisateurs ne la reconnaissent pas forcément comme un symbole de navigation.
D’ailleurs en le remplaçant par une Tab Bars avec les 4 rubriques principales, Facebook voit très vite l’implication et la satisfaction de ses utilisateurs s’améliorer. Ces exemples, parmi tant d’autres, montrent bien l’importance que revêtent la conception et l’amélioration constante de l’expérience utilisateur.

Facebook : Tab bars Controller

Alors le menu “Hamburger”, plutôt pour ou contre ?

Plusieurs tests ont mis en évidence le manque d’engagement du menu Hamburger comparé à un bouton avec un label “Menu”, ou alors à l’affichage des items directement.
Selon les données de Moovweb, il existe encore des utilisateurs qui n’ont aucune idée de l’utilité du menu “Hamburger”. Le menu “Hamburger” n’est pas la solution parfaite mais il est devenu populaire dans l’expérience mobile et tend à devenir aujourd’hui de plus en plus identifié par les utilisateurs.

Les avantages du menu “Hamburger” :

• Libère de la place sur l’écran avec le système du sidebar menu ou navigation “tiroirs”
• Permet de visualiser l’ensembles des rubriques ou options une fois déployé
• Donne la possibilité de proposer une navigation riche

Les inconvénients du menu “Hamburger” :

• Nécessite d’être identifié comme un menu
• Demande une action supplémentaire à l’utilisateur
• Masque le menu

Les solutions ou les alternatives au menu “Hamburger” ?

La solution pour ne pas dérouter le visiteur, c’est de conserver une navigation permanente. Cette navigation peut se faire sous forme d’onglets ou tab bars avec les items essentiels et un bouton ‘more’ afin de cacher des items moins importants. Pour un site mobile, on évitera de placer ces items dans le bas de la page pour ne pas se retrouver en conflit avec le navigateur. Pour une apps mobile on s’en tiendra aux standards de chaque système (en bas pour iOS et en haut pour Windows et Android).

Si vous devez conserver ce principe de navigation, pensez donc à afficher un label “menu” accompagnant l’icône  du “Hamburger”. La compréhension doit l’emporter sur le reste. Ajoutez éventuellement à l’affordance d’un tel bouton avec une bordure ou une ombre pour bien comprendre que c’est un bouton. Le simple fait de d’étiqueter le mot “menu” avec l’icône peut augmenter les interactions de 61% .

Une autre solution semble de démarrer en montrant à l’écran le tiroir de navigation ouvert. Ce principe d’UX Design permet à priori de s’assurer que les utilisateur connaissent toutes les vues et les options disponibles. Mais attention, le réseau social spécialisé dans la télé, zeebox a testé ce système en pensant résoudre le problème “hors de la vue, hors de l’esprit” et ce fût un désastre. A la vue de leurs analyses, les concepteurs ont restauré la navigation supérieure par défaut. Découvrez leur expérience à ce sujet.

test de principes de navigation de l’apps zeebox : Le résultat est probant, les utilisateurs cliquent d’avantage sur un des choix du menu affiché en haut plutôt que de choisir le menu hamburger couplé au logo.

Le collectif Freelance VanilleFraise espère que cet article vous sera utile et vous invite à visiter ce site pour visualiser des exemples de navigation responsives.