La bonne utilisation du menu Hamburger

Ces 5 dernières années, le menu Hamburger – ou ‘burger icon’ est devenu un symbole qui s’est inséré progressivement dans le paysage digital. Ceci est dû à la prédominance de la navigation sur smartphones et tablettes (58% de la population en 2015) - il s’agit là d’une signalétique qui rentre dans les usages chaque jour un peu plus.

L’utilisation d’un menu ‘burger’ a d’abord concerné l’univers des terminaux mobiles. Par conséquent, designers et développeurs ont dû répondre à des contraintes ergonomiques spécifiques, relatives à la surface réduite des écrans.

Une question de ‘taille’ se pose : comment rendre la navigation sur mobile intuitive et esthétique sans perte de contenu tout en prenant en compte une surface d’écran réduite (360×640px pour la plupart des mobiles)?

Une apparence pas si futile !

Ce pictogramme qui ressemble de manière très stylisée à un hamburger (ou un listing) est employé pour faire apparaître des options, des actions ou des liens de navigation. Il permet un gain de place significatif.

burger icon2

Son apparence très simple ne l’empêche pas d’évoluer : il arrive de le trouver sous forme de 3 à 4 barres, asymétrique, vertical, quadrillé…C’est un élément graphique qui n’est pas négligé par les designers. Il arrive fréquemment qu’une action lui soit associée (translation de barre en croix, rotations au survol…) lui donnant une valeur ajoutée en terme d’esthétisme.

 

01-PICTOS

*cf. lien 1 dans les références

Une utilisation plus subtile sur grand écran

La tendance des sites responsive / fullscreen et du mobile first a démocratisé son emploi dans les versions desktop; il en devient alors l’unique porte d’entrée de navigation du site.

Souvent employé par soucis esthétique, il a pour intérêt de libérer de la place pour le contenu et valorisera davantage le design du site.

Son utilisation, parfois maladroite ou peu pertinente, est encore sujette à débat dans la mesure ou l’expérience utilisateur s’en trouve modifiée et l’internaute peut sembler encore dérouté : cette option multiplie le nombre de clics pour accéder au menu (2 clics au minimum pour le menu burger contre 1 clic pour la traditionnelle barre de navigation, directement visible) – donc pas d’accès rapide.

02-HELLO

www.3mbassy.com

Pour faciliter son implémentation, il arrive parfois que le terme ‘MENU’ soit affilié à cette icône. Cela accentuera d’une part la compréhension et permet à l’internaute d’intégrer ce symbole et en quelque sorte de le prendre par la main.

03-3EXEMPLES

auchan.fr     I     telerama.fr   I     galerielafayette.com

Il est fréquent que des sites utilisent ce processus (menu + picto) dans les résolutions desktop et tablette pour ensuite ne laisser que le picto Hamburger seul en résolution mobile

(exemple : voyages-sncf (ci-dessous), Quick, Auchan).

 

04-VOYAGES-SNCF

voyages-sncf.com

 

Minimalisme et sobriété

Enfin, certains sites revendiquent un certain minimalisme en utilisant uniquement l’icône comme point d’entrée quitte à y intégrer les accès de connexion ‘Mon compte’ ainsi que les réseaux sociaux.

Ce type d’exemple illustre parfaitement le nouvel écosystème digital qu’est le mobile first (exemple ci-dessous : etq-amsterdam).

 

05-ETQ

etq-amsterdam.com

 

Conclusion

Pour conclure, il est évident que ce symbole n’a pas fini d’évoluer ; Il a commencé a s’intégrer dans le monde des smartphones et mobiles avec les contraintes d’ergonomie associées – pour devenir petit à petit un standard de la conception web et s’élargissant aux écrans d’ordinateur.

Il est probable que le type d’audience influe la capacité d’assimilation du pictogramme : sur un site grand public avec une cible large (15-65 ans), il sera conseillé d’utiliser l’intitulé ‘Menu’ en plus du Hamburger (Télérama, Sncf, Auchan, Galeries Lafayette…) contrairement à un site orienté vers un public plus jeune et familier de cet environnement où l’icône se suffira à elle-même (design, mode, communication & digital…).

 

Références :

* http://ixd.education/2015/08/ergonomie-et-responsive-design/

http://www.simpleweb.fr/2014/07/29/faut-il-abandonner-les-menus-facon-hamburger/

http://newflux.fr/le-menu-hamburger-icon-efficace-ou-icone-inutile/

http://www.blogoergosum.com/40709-burger-menu-approche-t-lindigestion

http://www.webdesignertrends.com/2014/05/tendance-web-design-fullscreen-menu/

http://www.rouge-interactif.com/ux/la-suprematie-du-burger.html

http://www.zdnet.fr/actualites/infographie-portrait-de-l-utilisateur-de-smartphone-francais-39796286.htm

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.