Il s’appelle comment, ce bouton ? Le Menu Hamburger !

hamburger-menu-icon

Le web sur mobile a changé non seulement les usages, mais aussi la façon de concevoir les sites : applis, webapps, sites mobiles, responsive design…les solutions ne manquent pas.

Ces nouvelles pratiques devaient également être accompagnées de conventions, et les concepteurs ont du jongler avec certaines contraintes visuelles, notamment le menu. En effet, comment faire tenir sur mobile un élément qui s’étend sur toute la largeur d’un site ?

Très vite, on s’est mis à la mode « picto », et alors s’est imposé le menu Hamburger (certains l’appellent le menu Hot Dog) qui permet, en dessous d’une largeur d’écran, de masquer le menu et de le déployer d’un seul clic. Le menu hamburger fut créé au début des années 80 par Norm Cox pour le logiciel « Star » de Xerox.

Pour créer le pictogramme, Cox a travaillé sur une signalétique visible et reconnaissable, dans le même esprit que les panneaux de signalisation routière. Avec une contrainte de taille, à savoir 16×16 pixels. Le picto a pourtant fait son bonhomme de chemin et traversé les époques au point de faire partie intégrante du paysage des interfaces, à l’image du [x] de fermeture (on y reviendra).  Néanmoins, le designer devait être bien loin de s’imaginer que son picto deviendrait un standard du web à l’aube des années 2010.

Pourtant, certains n’hésitent pas à parler de fléau, d’élément anti-ergonomique, et proposent des solutions plus orientées « appli », à la façon de Twitter par exemple. De gros pictos, situés en bas de l’écran, représentant clairement chacune des catégories. Certes, c’est plus lisible, mais se pose néanmoins le problème des sites comportant un nombre important de rubriques.

Le Menu hamburger, à force d’être adopté par les « Majors », est devenu une convention pour les utilisateurs, d’autant qu’il est souvent accompagné du terme  « menu ». A un tel point que certains l’utilisent même en version Desktop, comme Google Chrome…une bonne idée ? Le menu Hamburger doit-il rester spécifique à la navigation mobile ?

Prends soin de toi,
LCS

Source 1
Source 2
Source 3

, 1 Commentaire

Cultive également ton style avec notre ami Tostadora.fr