Qu’est-ce qu’un menu hamburger ?

13 Oct, 2020  - écrit par  dans Simple Hosting

Un menu « hamburger« , en langage web, c’est l’icône constituée de trois lignes superposées destinée à développer un menu sur un site Web. Il a ses avantages et ses inconvénients mais avec un peu de de magie CSS, JavaScript et HTML, vous pouvez faire des merveilles.
Si vous allez sur Internet avec votre smartphone, vous avez sans doute remarqué que les menus sur les sites Web que vous fréquentez depuis votre PC sont remplacés par trois barres parallèles horizontales.
Ce sont ces trois barres que nous appelons « menu hamburger ». Cette icône à été nommée ainsi car elle ressemble (probablement involontairement) au sandwich du même nom, bien qu’elle n’ait pas pour vocation de promouvoir un quelconque fastfood

D’où vient l’icône « menu hamburger » ?

En raison de sa popularité sur les sites mobiles, nous pourrions croire que l’icône a été conçue lors de la création du smartphone ou du design responsive, mais il se trouve que le menu hamburger (aussi surnommé « air vent » à l’origine) a été conçu par Norm Cox en 1981 suite à la création des toutes premières interfaces graphiques pour la « star » Xerox. [lien en anglais]
Cox l’a conçu pour représenter une liste d’options qui se déroulerait une fois l’icône cliquée. Sur cette interface limitée en pixels, les graphistes ont voulu être aussi minimalistes que possible et de simplifier son identification comme les symboles sur les panneaux de signalisation routière.
De nombreuses icônes standard auxquelles nous sommes habitués sur les ordinateurs proviennent de cette époque de conception d’interfaces graphiques.
Tout cela remonte à 1980. Mais ce n’est qu’une trentaine d’années plus tard, en 2009, qu’Apple a ajoutée le menu hamburger à l’application Voice memo. Adopté par quelques autres pionniers, le menu hamburger s’est rapidement démocratisé : il représente cette icône cliquable, qui développe une liste d’options. Aujourd’hui, son design épuré est attrayant pour les mêmes raisons qu’à l’époque : il communique rapidement son but en utilisant un minimum d’espace sur l’écran.

Dois-je utiliser un menu hamburger ?

Le choix d’insérer un menu hamburger sur son site Web est controversé, comme tout choix de design, il a ses avantages et ses inconvénients.
Sachez que ces inconvénients doivent être rigoureusement pris en compte, nous les listons pour vous ci-dessous.

Les inconvénients d’un menu hamburger

Difficile à reconnaître

Tout d’abord, les menus hamburger peuvent être déroutants pour certaines personnes. Les internautes les moins aguerris n’interprètent pas nécessairement ces trois lignes comme signifiant « cliquez/touchez ici pour voir le menu ». De ce fait, si la navigation de votre site est entièrement intégrée dans un tel menu, vous risquez de perdre des visiteurs.

La surcharge

Deuxièmement, la « surcharge » d’un menu hamburger est également un risque. En créant votre site web et en organisant votre menu hamburger, vous pourriez penser « Qu’est-ce qu’un élément de plus dans une liste ? Un de plus , qu’est-ce que ça change ? ».
Remplir votre menu hamburger de plusieurs options est très simple, au risque de perdre votre visiteur dans la manière dont les informations sont hiérarchisées. Il est primordial de penser à la navigation des visiteurs et de leur faciliter l’accès aux informations. Un chemin trop compliqué pourrait mener à un l’abandon d’une visite sur votre site.

Trop de clics

Ces menus hamburgers ont un autre inconvénient. Vous gagnez en espace visuellement mais au prix d’un clic pour votre utilisateur. En effet, à chaque clic supplémentaire nécessaire à la navigation, la probabilité que le visiteur y arrive est d’autant plus faible, pressé de trouver l’information facilement.
De même, lorsqu’il n’est pas développé, l’icône hamburger en lui-même ne fournit aucune information en soit. Il n’est  pas possible d’un premier coup d’œil de savoir quels sont les éléments du menu, mais simplement qu’il existe un menu avec une liste d’options.

Les avantages des menus hamburger

Toutefois, le côté positif du menu hamburger réside dans son utilisation qui offre un design simple, minimaliste et élégant à votre site mobile. 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.
Pour éviter de nombreux inconvénients, vous devez réduire les options de votre menu au minimum et trouver des moyens d’intégrer d’autres options dans la navigation de votre site sans agrandir indéfiniment le menu.

Essayez vous-même

Si vous avez du temps libre, nous vous suggérons de jouer avec cela dans votre site web. Si vous avez besoin d’un laboratoire de test, n’hésitez pas à créer une instance de Simple Hosting et à l’essayer.