Le menu hamburger doit-il se fermer uniquement sur un clic sur l'icône ou sur un clic à l'extérieur également?
Nous utilisons un menu hamburger sur la vue mobile de notre site Web réactif, http://edmdesigner.com
Il y a un débat en cours dans l'équipe:
a) Le menu hamburger doit-il se fermer si vous cliquez/tapez à l'extérieur du hamburger ouvert?
b) Ou doit-il seulement se fermer si vous cliquez/appuyez sur la véritable "icône de hamburger"?
Quelques faits:
L'image ci-dessous est tirée de l'article Comment les utilisateurs détiennent-ils vraiment les appareils mobiles? . Vous pouvez trouver de nombreux autres articles sur le Web sur la façon dont les utilisateurs utilisent un téléphone mobile. Les données ont été collectées en observant à distance des milliers de propriétaires de téléphones portables.
Orange foncé/rouge - pourcentage de personnes qui utilisent leur téléphone avec le pouce seul
Violet - Pourcentage de personnes qui utilisent leur téléphone en position de berceau
Magenta - deux mains
D'autres ont participé à un appel ou à d'autres activités ( voir l'article pour plus de détails ).
Les résultats ci-dessus montrent que 60 à 70% des personnes utilisent un seul pouce pour utiliser le téléphone . Les appareils de téléphonie mobile deviennent de plus en plus grands ces jours-ci. L'accessibilité d'un pouce unique est principalement sur la partie inférieure et vers la droite.
L'image suivante montre les zones où ce pouce peut atteindre: 
Dans le cas d'un menu hamburger, ce serait un effort supplémentaire pour l'utilisateur de déplacer ses doigts dans la position juste pour le fermer.
Il serait donc préférable qu'ils puissent le fermer en appuyant n'importe où à l'extérieur.
Un autre point est l'attente de l'utilisateur . La plupart des utilisateurs connaissent le menu hamburger de nos jours, et ils s'attendront à ce qu'il se ferme s'ils tapent en dehors du menu (tout comme une boîte pop-up).
Modifier
Ajout des suggestions des commentaires-
Une option glisser pour fermer/ouvrir est également fortement recommandée.
Les utilisateurs sont habitués à le faire glisser vers l'intérieur et vers l'extérieur, cela peut être fait indépendamment des positions de l'écran - donc fortement recommandé.
Évaluons les scénarios
Les utilisateurs s'attendent à cliquer sur le menu pour fermer
- S'il se ferme sur le menu en cliquant sur => bon
- Qu'il ferme ou non toucher à l'extérieur => peu importe, car ils utiliseront le bouton. De plus la plupart des gens ne s'attendront pas à ce qu'un composant basculable reste ouvert lorsque vous cliquez à l'extérieur et même si quelqu'un s'y attend, refaire l'action ne sera pas une douleur ou ne se sentira pas comme un situation de blocage. Les menus déroulants, les menus de navigation, les modaux, etc. se ferment lorsque vous les touchez la plupart du temps.
Les utilisateurs s'attendent à cliquer à l'extérieur pour fermer
- s'il se ferme sur le menu en cliquant sur => Ok, c'est attendu
- s'il se ferme, toucher l'extérieur => super, comme prévu.
- si elle NE ferme PAS toucher à l'extérieur => les utilisateurs deviennent fous
Conclusion et conseils
Donc, si vous voulez réduire la probabilité que les utilisateurs deviennent fous, laissez-les fermer le menu en appuyant sur l'extérieur.
Vous devez également empêcher les actions à exécuter (comme les liens ou les boutons enfoncés) lorsque le hamburger est ouvert et que l'utilisateur tape à l'extérieur. Bien qu'il soit probable que cette attente ne soit pas la même pour le bureau.
Si vous allez utiliser un menu hamburger, alors il devrait s'effondrer lorsque vous cliquez ou appuyez ailleurs (sur le bureau également, si le menu persiste au lieu de répondre à unhover). Sur les mobiles également, les autres éléments ne doivent pas être activés lorsque vous appuyez sur le menu.
Mais je pense que la bonne réponse, en fournissant le meilleur UX - qui est votre véritable objectif, n'est-ce pas? - est: n'utilisez pas du tout un menu hamburger .
De deep.design :
Le menu Hamburger ne fonctionne pas
C'est une solution belle et élégante qui se trompe, et il est temps de passer à autre chose
L'icône du hamburger n'a pas parfum d'information . C'est un gros problème.
Le "menu" hamburger appartient à la classe de menu des modèles d'interface utilisateur. à cet effet, si vous regardez comment les menus se comportent, ils se ferment dans les deux cas lorsque l'utilisateur clique/touche à nouveau ou quelque part en dehors de sa zone de succès.
La même chose s'appliquerait également aux menus de hamburgers.
En tant que développeur de Picnic CSS , je me demande la même chose depuis longtemps. J'ai décidé de le fermer en cliquant dessus, mais dans tous les cas, l'action doit être rendue évidente .
Pour le rendre évident, lorsque le menu est ouvert, le reste du contenu est obscurci :
Un exemple notable de la façon de ne pas le faire est github. Visitez-le sur votre mobile, cliquez sur le menu et essayez de le fermer (vous devez cliquer sur le même élément de menu, et les liens extérieurs fonctionnent toujours).
Il semble que nous soyons tous d'accord ici. J'y ajouterai une autre perspective.
Loi de Fitts indique qu'une cible de tap plus grande est plus facile à toucher qu'une plus petite. Donc, si vous pouvez faire de l'arrière-plan tout entier une cible pour fermer le menu, allez-y.
En fonction de votre disposition et de votre menu actuels, je renoncerais également au menu hamburger.
Vous avez un nombre d'options assez limité, avec un faible nombre de lettres. Je voudrais réduire le menu de 1 ligne à 2:
EDMdesigner | API | APP | ECMS | JOBS | BLOG | Login ????
EDMdesigner Login ????
API | APP | ECMS | JOBS | BLOG
Mais si vous voulez utiliser un hamburger après tout, optez certainement pour "fermer lorsqu'il est pressé à l'extérieur". Lorsque les gens appuient en dehors du menu, cela peut signifier l'une des trois choses suivantes:
ils savent (dans des cas similaires) qu'il ferme le menu.
ils veulent utiliser un élément différent de votre côté, donc le menu n'est plus nécessaire.
ils se trompent accidentellement.
Nous en sommes au point où nous pouvons supposer que la majorité des utilisateurs sont suffisamment "alphabétisés" pour savoir que de savoir qu'en appuyant sur l'extérieur d'un menu le fermera (voir le menu de démarrage de Windows, etc.) et ceux qui ne le savent pas encore n'appuiera pas au hasard en dehors du menu, au lieu de cela, ils appuieront peut-être à nouveau sur le bouton de menu (s'il s'ouvre lorsque je clique ici, il doit également se fermer de cette façon, non?).
Nous avons donc un groupe majoritaire plus une minorité qui va pousser à l'extérieur et obtenir l'effet attendu, contre une minorité (espérons-le petite, en supposant que vos cibles tactiles soient suffisamment grandes) qui a fait une erreur. Souhaitez-vous sacrifier la convivialité à la majorité au profit d'une minorité d'erreurs?