L'icône du menu à 3 lignes : qu'est-ce qu'un menu hamburger ?

Et si je vous disais que les sites Web et les smartphones contenaient des hamburgers ? Vous penseriez probablement que je l'ai totalement perdu après avoir arrêté mes médicaments. Mais c'est absolument vrai, je ne plaisante pas.

Lorsque vous ouvrez une application sur votre smartphone ou certains sites Web aujourd'hui, vous pourriez regarder un hamburger - une icône de menu hamburger, c'est-à-dire.

Qu'est-ce que le menu des hamburgers ?

Le menu hamburger (qui ne vient pas avec une commande de frites) est les trois lignes horizontales que vous voyez maintenant en haut de nombreux écrans, soit à l'extrême gauche, soit à l'extrême droite.

C'est une icône, en fait.

En touchant, en tapant ou en cliquant sur l'icône, cela ouvre un menu latéral avec une sélection d'options ou de pages supplémentaires.

Certains développeurs adorent l'icône de menu hamburger à 3 lignes, car elle leur permet d'intégrer davantage de fonctionnalités dans leurs applications ou leur navigation. La petite icône occupe une quantité minimale d'espace à l'écran. Cela donne à l'application ou au site un aspect minimaliste et épuré.

Il est assez facile pour l'utilisateur de l'application ou le visiteur du site Web d'appuyer sur le bouton pour faire glisser le menu vers l'intérieur et vers l'extérieur.

Ou alors vous pourriez penser.

Cependant, d'autres développeurs et certains utilisateurs détestent absolument l'icône du menu hamburger ou en sont tout simplement perplexes. Pourquoi? Parce qu'il n'est pas évident pour tous les utilisateurs que les trois lignes sont en fait une icône de menu, et cela ne dit pas aux utilisateurs ce qu'il y a dedans.

Qui a "inventé" l'icône du menu hamburger ?

Le visionnaire derrière l'icône omniprésente du menu hamburger est un pionnier créatif nommé Norm Cox. Il a créé l'icône de menu hamburger désormais omniprésente, un symbole universel qu'il a initialement conçu pour Xerox Star, la première interface utilisateur graphique au monde, il y a plus de trois décennies.

Cependant, après sa conception, l'image iconique a semblé glisser dans une période de relative obscurité.

La résurgence de l'icône remonte à l'essor des appareils mobiles. C'est à cette époque, en 2008, que l'icône à trois lignes a commencé à revenir, apparaissant pour la première fois dans l'application Twitter, Tweetie.

L'année suivante, l'icône a trouvé une nouvelle maison dans l'interface de l'application Voice Memos pour l'iPhone 3GS.

Dans une interview avec Small Business Trends, Cox a partagé sa perplexité face à la résurgence de sa création, déclarant: «Je dois rire de toute l'attention que le petit symbole« hamburger »attire ces derniers temps. Jusqu'à il y a environ neuf mois, je n'avais pas pensé au « goutte à goutte dans mon seau de carrière en design » depuis plus de 30 ans ! »

Lors de la réflexion sur le symbole, quelques alternatives ont été envisagées :

• Une flèche pointant vers le bas en forme de triangle, indiquant la direction dans laquelle le menu résultant apparaîtrait. Ceci, cependant, a été rejeté car il était trop souvent interprété comme un pointeur.
• L'astérisque (*) ou le symbole plus (+) ont également été pris en compte mais finalement rejetés en raison de leur nature abstraite.

En fin de compte, Cox a déclaré que l'image du hamburger à trois lignes atteignait l'équilibre parfait : « Ce symbole était visuellement simple, facile à expliquer et fonctionnellement mémorable. Trois lignes étaient le nombre parfait.

L'icône du hamburger, un élément de design simple mais puissant, a ainsi consolidé sa place dans le monde de la conception d'interfaces utilisateur, témoignant de l'attrait intemporel de la simplicité.

Quels sites Web ou applications utilisent cette icône de menu hamburger infâme ?

Gmail, Facebook, Reeder, Twitter et Starbucks comptent parmi les noms importants qui utilisent l'icône du hamburger dans leurs applications.

Et maintenant, les sites Web et les navigateurs ont également adopté l'icône de menu à 3 lignes. Les navigateurs Chrome et Firefox en sont un exemple, en utilisant le menu en haut à droite. Le menu hamburger masque toutes les options, paramètres et extensions. Et l'icône s'allume en orange lorsque quelque chose dans le navigateur doit être corrigé ou mis à jour.

Time.com est un exemple de site Web majeur qui utilise le menu hamburger - dans ce cas, dans le coin supérieur gauche. Lorsque vous cliquez sur l'icône du menu à 3 lignes, une diapositive montrant des liens de contenu supplémentaires apparaît.

Certains experts soulignent que les fonctions du menu hamburger sont à peine utilisées.

Tout d'abord, beaucoup de gens n'ont pas encore compris que les 3 lignes horizontales sont en fait une icône de menu, et pas simplement une image.

Deuxièmement, l'icône hamburger rend les informations du menu caché "hors de vue, loin de l'esprit". À moins qu'ils ne cliquent ou ne touchent l'icône du menu à 3 lignes, ils ne voient pas les choix qui s'y trouvent.

En effet, dans le cas de Time.com, le mot « menu » a dû être ajouté sous l'icône pour rendre plus évident ce qu'est le symbole.

Moins dépendre du menu hamburger

Divers développeurs ont exprimé leur mécontentement face à l'icône du hamburger et à ses défauts.

Certains refusent d'utiliser l'icône, malgré sa tendance.

Mais l'entreprise la plus en vue qui a fait un changement est Facebook. Pour être tout à fait clair, Facebook n'a jamais déclaré publiquement vouloir s'en débarrasser totalement. Mais Facebook fait ressortir certaines des fonctionnalités mobiles qui étaient auparavant cachées derrière l'icône du hamburger.

Ils sont maintenant affichés dans une barre horizontale en bas de l'écran, appelée barre d'onglets.

La barre d'onglets inférieure occupe un peu plus d'espace à l'écran, mais elle rend certaines fonctions plus évidentes.

Nous avons parlé avec Mrinal Desai qui est le PDG et co-fondateur d'Addappt. Il était également à l'origine de Crossloop, une application de technologie à distance participative, qui a finalement été vendue à AVG Anti-Virus.

"Le menu hamburger n'est pas vraiment pour les paramètres", a déclaré Desai, s'adressant à Small Business Trends. « C'est presque comme un 'plus' ou on peut même y voir une alternative à la 'barre d'onglets'. Il est rare de voir les deux, mais chez Addappt, nous avons exploré cela avec un prototype, mais nous avons finalement choisi d'emprunter la voie de la "barre d'onglets".

"Ces décisions dépendent souvent de l'objectif de l'application. L'icône du hamburger a tendance à reléguer les fonctions alors que la barre d'onglets les rend plus évidentes », a ajouté Desai.

Le créateur d'icônes de hamburger a le dernier mot

Alors devriez-vous utiliser une icône de menu hamburger dans votre propre site Web, thème mobile ou application ?

Nous pensons que le développeur original de l'icône devrait avoir le dernier mot.

"La longévité du symbole (depuis les années 1980) témoigne de sa simplicité, de son utilité, de sa facilité d'apprentissage et de sa mémorisation", a déclaré Cox, interrogé sur les appels à tuer l'icône du hamburger.

"Chercher à" tuer "ou" abolir "un outil ou un widget d'interface utilisateur basé sur une mauvaise utilisation ou une mauvaise implémentation est à la fois un peu myope et trop réactif."

Ce tableau décompose l'histoire et l'utilisation de l'icône à différentes époques, de sa création à sa réintroduction et à son utilisation généralisée actuelle, soulignant comment sa réception et son application ont changé au fil du temps :

Hamburger, icône rouge Photos via Shutterstock