Avec les smartphones et l’augmentation de la consultation web via les mobiles, les sites web sont confrontés à un problème : ils doivent désormais intégrer toutes les fonctionnalités qu’ils ont inventées sur des écrans beaucoup plus petits avec des interfaces tactiles.
Pour alléger l’écran, une stratégie utilisée régulièrement dans la création de sites internet consiste à créer une petite icône qui cache derrière elle certaines des fonctionnalités les plus avancées du site. Cette icône se compose de trois barres horizontales. On l’appele le plus souvent le menu hamburger.
De nombreuses discussions animées ont eu lieu au sujet du menu hamburger, notamment au sujet de l’impact visuel auprès des internautes. Les utilisateurs sont-ils au courant de son utilité ? Et si c’est le cas, l’utilisent-ils vraiment ?
La touche « hamburger » se révèle ainsi à la fois populaire auprès de certains utilisateurs et incompréhensible pour d’autres. Il existe encore des internautes qui ignorent ce qu’est le menu hamburger, comme le révèlent plusieurs études. Ainsi, le simple fait d’y ajouter une mention « menu » augmente les interactions de 61 %.
La naissance d’une l’icône
Parmi les premiers ordinateurs personnels commercialisés, le Xerox Star innovait en proposant une interface graphique et d’autres concepts révolutionnaires à l’époque.
Il faut savoir que le menu hamburger – également appelé menu latéral ou navigation latérale – possède une riche histoire qui remonte à 1981 et plus particulièrement au Xerox Star. Parmi les premiers ordinateurs personnels commercialisés, le Xerox Star innovait en proposant une interface graphique et d’autres concepts révolutionnaires à l’époque.
Pour son fondateur, Norm Cox, le menu hamburger devait être aussi simple qu’un panneau de signalisation routière. Ses trois lignes superposées ressemblaient à une liste de menu.
Cependant, le menu hamburger n’est réapparu que plusieurs années après avec l’arrivée des smartphones. Sa première ré-apparition remonte à l’application iOS Voice Memo. Un simple clic sur l’icône hamburger affichait une liste pratique de mémos et d’options de partage.
L’icône hamburger a également fait sa ré-apparition dans Tweetie, la première application mobile de Twitter, en 2009. Tweetie est reconnu pour avoir eu un impact majeur sur la culture du design d’Apple.
L’application la plus connue faisant appel au menu hamburger reste Facebook. Facebook a évolué progressivement dans sa conception, en débutant par une icône en grille à deux lignes en 2008, pour passer à trois lignes en 2009 et pour enfin évoluer vers un menu hamburger classique à trois barres en 2010. Ensuite, les menus hamburger n’ont pas mis longtemps à s’imposer dans les applications et sur le web mobile.
Différentes utilisations en design de l’icône hamburger
Le menu hamburger : le mal aimé
Mais en 2014, plusieurs designers et journalistes ont commencé à critiquer l’utilisation du menu hamburger.
TechCrunch, un site d’information de référence spécialisé dans l’actualité web, avait qualifié le menu hamburger de « démon », expliquant que ce qui est invisible reste hors d’esprit : « Les options de navigation cachées derrière le menu hamburger seront au pire oubliées et dans le meilleur des cas seront rarement utilisées »
Selon d’autres designers web, le menu hamburger a rendu l’expérience de l’utilisateur beaucoup plus compliquée, faisant augmenter le nombre de clics requis pour accéder aux catégories du site.
D’autres critiques sont venues reprocher au design graphique de l’icône son côté trop abstrait pour l’internaute.
Mais que révèlent les chiffres ?
Aujourd’hui, les statistiques recueillies montrent qu’un grand nombre d’utilisateurs du web mobile se servent bien du menu hamburger. Mais les données recueillies montrent également que de nombreux utilisateurs ignorent encore ce qu’est le menu hamburger.
Une étude a analysé 50 sites mobiles très fréquentés de différentes domaines. Ils ont étudié les interactions des utilisateurs avec le menu hamburger. Le bouton menu hamburger a été utilisé par environ 20 % des visiteurs, et ce bouton figurait parmi les cinq boutons les plus populaires sur les sites mobiles.
Dans l’ensemble, l’utilisation du bouton de menu est très élevée, et les internautes l’utilisent presque autant que le bouton de recherche sur les sites mobiles.
Cette étude est allée plus loin, en ccherchant à savoir si le comportement des internautes avec le menu hamburger était le même sur tous les types de sites mobiles, ou si les visiteurs mobiles utilisaient le bouton différemment selon le type de secteur.
Ainsi, l’étude a démontré que dans le cas des sites de contenu, le menu hamburger semble être rarement utilisé. Les utilisateurs sont là uniquement pour s’informer sur un article spécifique, ou simplement pour consulter les titres de la page d’accueil.
Cependant, sur les sites où les internautes naviguent un peu plus loin que la page d’accueil, l’intérêt porté au menu hamburger est nettement supérieure. C’est le cas, par exemple, des sites de-e-commerce, qui affichent la plus forte participation au menu hamburger : 59 % des visiteurs mobiles ont visité le menu hamburger.
Un moyen simple d’améliorer l’engagement avec ce menu
Existe-t-il un moyen efficace de promouvoir le taux d’engagement avec le menu hamburger ? La réponse est oui. Il suffit simplement d’ajouter le mot « menu » aux 3 barres afin d’augmenter le taux d’engagement au-delà de 50%, à l’image de ce qui a été fait pour le site internet de Socalu.
Un test A/B a été effectué sur 300 000 utilisateurs d’un site mobile. 50% d’entre eux sont tombés sur un menu hamburger ne comportant aucune information écrite. Quant à l’autre moitié, ils ont vu la même icône accompagnée du mot « menu ».
Grâce à la simple inscription du mot « menu », le nombre de visiteurs ayant cliqué sur le menu hamburger a connu une augmentation de 61 %. Grâce à l’ajout d’une indication écrite, l’utilité du bouton hamburger est donc beaucoup plus claire. Et ce notamment en ce qui concerne les sites dont le public cible est plus âgé.
Hamburger ou pas hamburger, telle est la question
Bien entendu, il joue même un rôle central. De plus en plus, les gens se servent de leurs appareils mobiles et espèrent qu’ils pourront disposer des mêmes fonctionnalités que sur leur ordinateur personnel. Plus que jamais, il est indispensable d’offrir davantage de fonctionnalités dans une petite icône. Malgré ses inconvénients, le menu hamburger reste utilisé par de nombreux utilisateurs, en particulier dans le cadre d’expériences mobiles où la fonctionnalité principale est la navigation.
De plus en plus de sites internet semblent depuis peu voir les choses autrement dans l’utilisation du menu hamburger. Ce dernier est marqué d’un « plus » permettant d’accéder à davantage de fonctionnalités secondaires.
Aujourd’hui, le menu hamburger fait figure de convention qu’il est parfois difficile de contester. Bien pensé, le menu hamburger offre un design simple, minimaliste et élégant à votre site mobile, tout en offrant une bonne compréhension à l’ensemble des internautes. Il offre à vos utilisateurs un moyen efficace de contrôler leur navigation sur votre site, plutôt que de s’en remettre à un design à défilement sans fin.