De l’utilisation du hamburger

Hamburger or not hamburger? Voilà un sujet qui agite le monde de l’UX depuis un petit moment. Il est fréquent d’entendre des déclarations du type « les annonceurs XYZ utilisent le menu hamburger » ou « c’est quand même la tendance depuis quelques années » (…) mais la vraie question est de savoir pourquoi ils l’utilisent ? Quelle incidence à eu ce changement sur leur tunnel de conversion, l’utilisabilité s’en est-elle trouvée améliorée?

Avant d’aller plus loin, usons d’une citation de notre cher Luke :

« Il est tentant de compter sur un menu hamburger pour simplifier une interface mobile, spécifiquement sur de petits écrans. Mais cacher une partie si importante d’une application derrière ce types de menus peut avoir un impact négatif sur l’utilisabilité de l’interface ». Luke Wroblewski

Menu Hamburger : go/no go ?

Si il est indéniable que l’utilisation d’un menu hamburger permet d’épurer une interface, cela induit que l’utilisateur réalise davantage de travail pour naviguer à travers les sections de l’application. Efforts cognitifs accrus, et navigation de gestes plus soutenue sont au rendez-vous de ce choix ergonomique. Bien qu’il simplifie l’aspect graphique, l’hamburger opacifie l’information par la présence des ces 3 lignes qui ne dévoilent rien des items de navigation de l’interface, Vincent Flanders appelle ce type de menu « mystery meat navigation« .

Si l’utilisateur est au cœur de vos démarches design (et c’est bien entendu le cas), vos choix ergonomiques sont guidés par leurs attentes et vos partis pris sont solidement appuyés d’insights. Ces utilisateurs comprendront-ils la signification de ces 3 lignes? Ont-ils déjà interagis avec ce type de menu? Interviews, tests, études de cas vous permettront sans doute de répondre à ces questions.

Jamais dans la tendance, toujours dans la bonne direction.

Comme le rappel Fiona Foster, « Le menu hamburger est l’une de ces tendances que les designers ne remettent pas en question. Il est pourtant dangereux d’implémenter des tendances graphiques sans savoir si ces choix font sens dans le contexte de l’interface. Cela est particulièrement vrai quand on parle de la navigation principale du site ! »

La plupart des gens naviguent en fonction de ce que l’on appelle « information scent » (odeur de l’information). Quand ils sont face à plusieurs options, ils choisissent l’option qui délivre les indications les plus fortes en lien avec ce qu’ils recherchent, comme un animal reniflant autour de sa nourriture. Un menu représenté par par 3 traits horizontaux n’envoie aucune odeur.

Ils utilisent un menu Hamburger

Largement investit dans une démarche User Experience, UBER propose une interface dont le menu est sous forme de hamburger.

Pourquoi ? L’app donne toute la place à l’action principale et à la motivation première de l’utilisateur : programmer une course. Les items situés dans la navigation cachée ne présentent que des actions secondaires comme la visualisation des ses courses et de ses paiements. Ces fonctionnalités ne sont pas utilisées de manière systématique par l’utilisateur. Elles sont donc dans un menu caché.

Vente privée utilise lui aussi un menu hamburger pour les éléments de navigation secondaire. On y retrouve les
éléments de compte client, ses commandes, le parrainage (…) La navigation principale est clairement présentée dans le top au travers des typologies de catégories de ventes. En appui à la navigation, une barre de recherche est positionnée de manière prédominante dans le top, pas de risque de contrarier l’information scent.

Ils ont banni le menu hamburger

Guess what? Le 1er réseau social mondial n’utilise plus de hamburger pour sa navigation principale depuis un bon moment. Comme le rappelle James Archer, « Facebook doesn’t use it as primary navigation anymore. They tried it, but it sucked. They switched to a tab bar instead ». C’est désormais une best practice dans le design d’app mobile, l’utilisation de la tab bar permet de relayer les items de menu en action disponible on tap. Twitter, Instagram, Nike+Run Club, Ebay et Amazon, NBC News (…) ont banni le menu hamburger après des expériences mitigées ou catastrophiques (dans le cas de NBC News). Un menu directement visible permet de fournir un accès en un tap à des fonctions clés ou de donner l’idée à l’utilisateur d’explorer des rubriques qu’il ne connaît pas ou pour lesquelles il n’était pas venu.

http://www.lukew.com

« Mais j’ai beaucoup trop d’entrées pour utiliser une tap bar »

Tout est question de priorité.. L’importance de vos entrées de menu principale est forcément hiérarchisable. Priorisez des items visibles en lien avec les attentes utilisateurs, les items considérés comme « moins importants » peuvent être poussés dans la page avec des call to action. L’utilisation de « + » (« more » chez les anglosaxons) peut aussi regrouper ces items moins stratégiques.

Le hamburger est mort vive « the Priority + menu »

Jame Harcher décrit le « Priority + menu » comme une alternative forte et facile à implémenter. L’idée est de hiérarchiser par ordre d’importance décroissant les items de votre navigation principale. En fonction de la résolution d’écran sur laquelle l’interface est consultée, les items considérés comme « moins importants » rejoindront le menu hamburger. Les éléments de menu indispensables demeureront visibles. James Harcher et Chris Coyier pensent que le Priority + Menu remplacera inéluctablement le menu hamburger par son lien direct avec le traditionnel menu visible.

En conclusion

Comme beaucoup d’agences, nous construisons des interfaces selon des attentes clients, des insights utilisateurs et des contraintes de temps ;-)) Le dernier mot peut parfois revenir à un comité de direction n’ayant pas toutes les cartes en mains pour mesurer la pertinence de certains choix ergonomiques. Le menu hamburger est devenu une convention et il est parfois difficile de le remettre en question. Cependant, la data nous permet de faire évoluer certains partis pris considérés (à tort) comme des « best practices ». Le menu hamburger n’est pas une solution satisfaisante en terme d’UX et l’A/B testing doit permettre d’orienter la mise en place de tels changements. Le changement est parfois difficile mais la rationnalisation des choix ergonomiques par les chiffres (test & learn) devrait clôturer l’ère du hamburger.

Liens utiles

https://www.nngroup.com/articles/hamburger-menus/

https://css-tricks.com/the-priority-navigation-pattern/

http://www.lukew.com/ff/entry.asp?1945