Voilà presque 7 ans que l’iphone a été mis sur le marché. Sept années au cours desquelles les éditeurs se sont arraché les cheveux pour adapter leur site web aux contraintes des smartphones. Au fil des années les concepteurs se sont rapidement rendu compte qu’il n’y aurait jamais assez de pixels pour afficher un menu de navigation digne de ce nom et qu’il fallait donc s’en passer. Assez rapidement, un consensus a été trouvé autour d’un symbole abstrait en forme de hamburger. L’origine de ce symbole remonterait au PARC et désignerait une liste ou un empilement d’items (Who Designed the Hamburger Icon?).
Le problème est que ce pictogramme pose des problèmes d’interprétation. Autant le symbole de la loupe est universellement associé à une recherche (The Magnifying-Glass Icon in Search Design: Pros and Cons), autant ce symbole de hamburger n’évoque pas grand chose aux mobinautes : Don’t Make These Mobile Menu Mistakes. Du coup, nous avons eu droit ces derniers mois à une série d’articles déconseillant l’utilisation de ce symbole : Don’t Make These Mobile Menu Mistakes, The Hamburger is Bad for You, Why and How to avoid Hamburger Menus, Hamburgers & Basements: Why not to use left nav flyouts, The Advantages of table views over left nav flyouts, An update on the hamburger menu, Basement Menus and Breaking the Rules of App Design…
Les auteurs de ces articles sont unanimement tous d’accord pour dire que “la forme suit la fonction“, qu’il ne faut surtout pas “enfreindre le modèle mental des utilisateurs” et que comme le rappel Dieter Rams, “Good Design Makes A Product Understandable“. OK… soit… Je ne sais pas pour vous, mais la lecture de ces articles me laisse sur ma faim dans la mesure où ils ne donnent pas de solution alternative viable. Je sais bien que “Good Design Is Unobtrusive“, mais ça ne me dit pas comment résoudre le problème de place : le manque drastique de pixels nous force à trouver des compromis, pas des solutions idéales qui fonctionnent dans 100% des cas. Adopter le pictogramme du hamburger est d’autant plus tentant qu’il a été utilisé à de nombreuses reprises, notamment par des applications mobiles et desktop, cela créé donc un précédent :
Heureusement certains apportent des données concrètes à ce débat, notamment l’équipe d’Exis Web avec une série d’articles : Do Users Understand Mobile Menu Icons?, Mobile Menu AB Tested: Hamburger Not the Best Choice?, Hamburger vs Menu: The Final AB Test. Plusieurs versions du bouton “Menu” ont ainsi été testées auprès de presque 240.000 personnes.
Il ressort de cette étude que les deux premières versions fonctionnent le mieux, avec une préférence pour le libellé “MENU” encadré. Loin de moi l’idée de remettre en cause les résultats de cette étude… mais cette version ne règle pas forcément le problème de place. Parfois, vous n’avez pas d’autres choix que d’utiliser le pictogramme du hamburger parce que vous n’avez ni la place, ni le temps de trouver une meilleure solution (Mobile Navigation Menus and Great User Experience). Parfois, le choix n’est pas ici guidé par des règles ergonomiques, mais par le pragmatisme : il faut que ça rentre. Même s’il n’est pas parfait, ce pictogramme a été adopté par de nombreux sites, chacun en faisant sa propre interprétation : Le Parisien l’isole à gauche, Eurosport le met en italique, Le Figaro l’associe à son logo et 20Minutes la place à droite avec des puces.
Dans les exemples cités plus haut, ce n’est pas tant le picto qui pose problème, mais ses variations. Il serait bien moins risqué d’adopter une implémentation “standard” (ex : la responsive navbar de Boostrap). Ce n’est pas un hasard si les quatre exemples précédents sont issus du monde de l’édition : les portails d’information sont ceux qui ont le plus besoin de place, donc qui doivent impérativement masquer le menu de navigation. Deux sites s’illustrent dans cette catégorie : le Time Magazine (avec un picto qui change de couleur quand il est activé) et USA Today (avec l’intégration d’un moteur de recherche et d’une croix pour fermer le menu).
Puisque nous parlons d’afficher / masquer le menu de navigation, il est également très important de s’assurer d’une bonne réactivité de l’interface. Pour cela il existe une astuce très pratique dans la dernière version de Chrome pour Android : 300ms tap delay, gone away.
Donc… le pictogramme en forme de Hamburger s’impose petit à petit comme la convention de conception pour désigner un menu dans les interfaces mobiles. Avec le temps, les mobinautes vont finir par s’y habituer et développer un nouveau modèle mental (associer le picto du hamburger à un menu de navigation). Là où la situation se complique, c’est que certains commencent à l’utiliser pour gagner de la place sur la version desktop de leur portail : Le Time Magazine, Fortune, Money ou encore L’Express.
Certes, cela donne plus de visibilité à ce picto et accélère (en théorie) l’apprentissage de ce à quoi il correspond, mais cela génère également un gros risque de désorientation : Killing Off the Global Navigation: One Trend to Avoid. Je suis donc très mitigé quant à cette pratique, et je rejoins l’avis de l’auteur de l’article précédent : cette solution doit impérativement être testée pour valider sa viabilité.
Comme le dit le proverbe : “Il faut savoir balayer devant sa porte“, je me suis penché sur l’exercice délicat qui consiste à adapter la mise en page de mes blogs aux smartphones. Mon approche a été de partir de la version mobile en se concentrant sur l’essentiel : le titre du blog et les derniers articles. J’ai ensuite rajouté des éléments d’interface permettant de basculer à un autre blog (la flèche qui pointe vers le bas à droite du titre), d’afficher la liste des derniers articles (la bordure et l’étiquette avec un chevron à gauche) et d’afficher les outils (le picto hamburger en haut à droite).
La justification de ces choix est la suivante :
- Utiliser une flèche pour afficher la liste des blogs est une convention déjà utilisée dans les menus déroulants, cela permet également d’utiliser le titre du blog qui est déjà affiché ;
- La bordure à gauche fonctionne comme un indice visuel sur l’existence d’un panneau que l’on peut déplier en “tirant” sur la languette (comme le fait le site du Time Magazine dans sa version mobile) ;
- J’ai adopté le picto du hamburger pour signaler l’existence d’un menu déroulant et je l’ai positionné à droite du titre en bout de ligne, comme le fait le navigateur de façon native (à droite de la barre d’adresse).
Le résultat est, je pense, satisfaisant, même si je trouve le contraste encore trop faible.
Conclusion : le pictogramme du hamburger n’est pas la solution idéale, mais c’est un compromis intéressant pour les concepteurs qui manquent de place et de temps, à partir du moment où il est implémenté sans exantricité. Ceci étant dit, rien ne vous empêche de réfléchir à des alternatives et de tester l’impact pour valider les changements.
Très bon et complet article sur le design web. Profite de l’occasion pour te féliciter sur le design de ce blog, très réussi
Sympa de voir le menu hamburger aussi complexe à faire adopter. Mais le train est en route, dans 1 an je pense qu’il sera….PARTOUT
Pareil : le pragmatisme va l’emporter sur les règles ergonomiques érigées il y a 30 ans.
Le principe de convention est primordial dans une telle analyse.
Un symbole peut ne pas être justifiable, il deviendra légitime à partir du moment où il sera utilisé massivement. L’utilisateur rencontrera peut être des difficultés sur les premiers sites utilisant ce symbole, par convention externe, il apprendra à ne pas réitérer l’erreur sur les sites suivants. L’uniformisation est très importante et nécessaire dans l’objectif d’une optimisation cognitive.
Dès lors, quand Google (websites et Android) et Facebook adopte un symbole, il est plutôt bien vu d’en utiliser les liens cognitifs pour maximiser l’utilisabilité de sa propre interface.
Ce burger icon est une signalétique qui est en train de rentrer dans les usages, je ne pense pas qu’il faille le remettre en question au moment ou son usage se généralise. Le fait en revanche de mettre le terme menu à côté, me pose question dans certains types de sites, pour des restaurateurs, des hôteliers, des sites de recettes, le terme devient pour le moins ambigue, je serais partisan de le remplacer par navigation, à l’instar de la balise nav qui est devenue sémantiquement appropriée aux sites html5 ?
Je me souviens encore la première fois où j’ai vu cet icone et je me souvient également la première fois où j’ai du créer une interface mobile en utilisant ce menu, tout simplement pour “faire comme tout le monde”.
La première fois que j’ai vu cet icône, je n’avais pas compris dans un premier temps que ça permettait d’ouvrir le menu principal.
Personnellement je me demande si l’utilisation du symbole “▼” dans un bouton ne permettrait pas de servir d’alternative. Ca serait à tester à grande échelle pour vérifier de la pertinence d’un tel icône. Mais dans ce cas de figure je confirme qu’il ne pourrait y avoir qu’un seul “menu principal” pour éviter une abondance de ce même symbole qui à lui seul peut signifier beaucoup de choses.