Je ne m’étais pas trop intéressé à cette problématique de l’icône de menu sous la forme de burger sur les sites responsives.
Il se trouve que je viens de réaliser des tests utilisateurs sur un site responsive. Le test se déroulait principalement sur ordinateurs, puis certaines tâches étaient à réaliser une deuxième fois, soit sur tablette (iPad) soit sur smartphone (iPhone ou android). Donc les utilisateurs connaissaient le chemin et l’avaient réalisé sans problème majeurs sur un ordinateur.
La tâche était de trouver une page de description d’un produit, deux chemins étaient principalement utilisés sur l’ordinateur : le menu > une page « catalogue » > le produit ou la recherche > les résultats > le produit. Mais voila en responsive, sur un iPad à la verticale, le menu et la recherche se retrouvait dans un menu burger qui était positionné en haut à droite.
Organisation de la page
Ce qu’on observe
Tous les utilisateurs, en l’occurrence six, que j’ai vus, ont rencontré des difficultés pour repérer le burger menu. Ils ont commencé par parcourir la page verticalement avant de se dire que ce n’était pas par là. Deux utilisateurs sont allés jusqu’au pied de page pour trouver le lien vers la page catalogue.
Là, on peut remercier les conditions de test qui incitent fortement les utilisateurs à en faire plus que chez eux. Je pense qu’en dehors de ces conditions de test, les utilisateurs les plus âgés (60 ans et plus) auraient simplement abandonné. Mais n’allez pas croire que c’est juste un problème de génération, non, tous les utilisateurs de 26 à 63 ans ont hésité, cherchés avant de trouver ou pas ce menu burger.
Donc, j’ai bien l’impression que le menu burger (XL ou normal ? Frites ou Rustiques ?) c’est un truc de concepteurs, de développeurs. On le connaît parce qu’on en parle et que ça pose en réalité plus de problème que ça n’apporte de solutions.
768 pixels
Dans le cas observé, je pense clairement que la solution est d’afficher le menu en entier sur la page, d’autant plus que celui-ci ne compte que 4 items.
J’avais déjà observé la même chose sur le thème que j’utilise pour ce blog. Le menu disparaît un peu trop rapidement au profit d’icônes dès qu’on rétrécit un peu la fenêtre alors qu’il y a largement la place de garder le menu en dessous de 1 024 pixels de large. (Oui, un jour, je vais modifier ça)
Il faut donc conserver ce qui peut-être affiché au maximum et éviter des solutions trop simples qui font sauter la mise en page à des points de ruptures plus ou moins arbitraire. Ça rejoint cet article que je viens de lire sur la conception en mode guérilla. Il faut penser responsive en termes de composants, de contenus et non en termes d’écrans. Donc quand un élément est trop large pour s’afficher correctement, il faut envisager une présentation différente, sinon il faut privilégier le confort de l’utilisateur.
Le burger de la mort
Et non ça n’a rien à voir avec cette émission culte, qui est quand même un très bel exemple d’utilisation de la mémoire de travail.
En effet, le hamburger menu est un sujet récurrent depuis un ou deux ans dans l’UXosphère et la majorité des UX designers le combattent. Il fait partie de ces fausses bonnes idées que tout le monde applique et ré-applique alors qu’il est condamné par la majorité des spécialistes UX (comme le sempiternel carrousel d’image).
Apple a même fini par faire un papier dessus, et de tête, il y a parmi les vidéos/conf de LukeW une très bonne synthèse sur le sujet, issue de gros A/B Tests.
En résumé, on préférera au minimum un simple « MENU » textuel, avec un border (pour rappeler que c’est un élément clicable/tappable), ou une combinaison icône hamburger + « MENU ».
Bonjour
J’aurais tendance à dire que le menu burger n’est pas justifié uniquement dans le contexte de l’article,
D’abord parce qu’il est seul dans son coin et non pas accompagné d’un contexte visuel de navigation (accueil, recherche, etc.) et ensuite parce qu’il n’y a effectivement que 4 entrées.
Bonjour Raphaël,
Nous avons constaté à plusieurs reprises en tests utilisateurs les mêmes difficultés…
Au delà du seul sujet du burger (qui est symptomatique du problème), on observe une immense dérive qui consiste, sous prétexte de « mobile first » et de « content centered », à complètement dégrader l’ux sur ordinateur, le burger devenant l’unique mode de navigation, quelque soit le facteur de forme utilisé !… On perd des critères de base comme la hiérarchisation, la facilité de navigation, le guidage utilisateur, le groupement et distinction…
Effectivement ces menus burgers, avec une icône de petits traits empilés, sont difficiles à voir, souvent à gauche et parfois à droite, et engendrent bon nombre de soucis aux utilisateurs, quel que soit leur âge d’ailleurs.
Problème, côté développeur, ils sont faciles à implémenter (des frameworks javascript en proposent des tout-prêts avec des animations différentes) et permettent de maximiser la surface d’interaction rapidement sur des devices aux largeurs faibles.
Difficile pour l’utilisateur, facile pour les développeurs et conforme aux exigences clients.
Pour améliorer cela, déjà si le mot « menu » était écrit en toutes lettres, ça aiderait beaucoup. Idem pour l’affordance, une plus grande surface du bouton aiderait forcément. Et enfin, l’animation de déroulement du menu devrait être moins rapide et plus adapté aux reflexes humains. Marre des boutons boite à surprise, qui s’ouvrent et surtout se ferment, quand ils veulent.
« Difficile pour l’utilisateur, facile pour les développeurs et conforme aux exigences clients. »
C’est justement pour ça qu’il y a des UX designer : penser à l’utilisateur, cadrer le développeur (il ne sont pas tous feignants au point d’intégrer directement ce que propose leur Bootstrap/Foundation/whatever) et accompagner le client afin d’évaluer ses « exigences ». 🙂
J’avais eu les mêmes résultats sur un site destiné essentiellement à du mobile…
Et du coup, j’avais opté pour le burger + un menu comportant les pages essentielles pour les utilisateurs tablette ou mobile…
Au moins, on assure une visibilité accrue aux pages les plus importantes. Reste par contre à intégrer le menu de manière intelligente sur sa page…
Cela fait certes doublon, et c’est pas idéal, mais cela va permettre à l’utilisateur de trouver l’information qu’il cherche…