Existe-t-il des alternatives aux menus hamburger + tiroir?
Sur Internet, il y a beaucoup de dénigrement sur l'icône du hamburger et le tiroir de navigation correspondant.
Je me rends compte que cela peut parfois être un modèle qui devrait être évité lorsque des options plus simples et plus explicites sont disponibles.
Cependant, je n'ai pas vu d'alternatives appropriées à un grand menu de navigation latéral qui ne donnerait pas envie à un utilisateur comme moi de désinstaller l'application.
Je me demandais quelles alternatives existaient en remplacement du tiroir de navigation, pour les applications natives et les sites Web.
L'option la plus courante que j'ai vue est la barre d'onglets qui fonctionne bien avec 3 ou 4 éléments. Cependant, nous faisons toujours défiler verticalement en général pour lire plus de lignes et lorsque vous avez plus de 10 éléments, cela ne sera pas pratique.
Nav Drawer, 2 étapes: cliquez sur l'icône ou balayez de gauche à droite pour afficher. Une fois révélé, vous devriez voir toutes les options disponibles.
Barre d'onglets, 2 étapes: glissez sur la barre dans l'espoir de trouver l'élément que vous recherchez si vous savez même quoi chercher, puis une fois trouvé, appuyez sur l'élément.
Un problème dans l'application actuelle sur laquelle je travaille est qu'il existe des vues qui contiennent en fait des barres d'onglets, jusqu'à 3 éléments ici, qui sont principalement cliqués vers le niveau de vue suivant.
Peut-être pertinent: je ne construis pas une simple extension de site Web, c'est pour les communautés auxquelles les gens participent activement et il y a beaucoup de profondeur et de détails. Environ 8 modules différents et du contenu personnalisé sont disponibles, élargir tout cela en une seule page/vue unique sera presque impossible. C'est peut-être la raison pour laquelle je suis prêt à vivre avec le Nav Drawer car il est juste extrêmement complexe à la fin.
Toutes mes excuses pour avoir apporté cela négativement, mais j'aimerais voir d'autres options dans tous les cas, je conviens que lorsque la navigation est simple, elle devrait tenir dans la vue principale.
OUI
Vous signalez qu'il y a un surplus de critiques et une rareté d'alternatives au menu hamburger.
Contexte
Les menus hamburger ont été critiqués car:
- Ils cachent les liens et le contenu à l'utilisateur au lieu de lui présenter des options directes.
- L'icône du hamburger est placée en haut de l'écran où les utilisateurs ont tendance à l'ignorer .
- L'icône du hamburger n'est pas familière à de nombreux utilisateurs (mais cela change).
- Ils facilitent la conception bâclée car les concepteurs peuvent empiler négligemment des liens et du contenu dans le tiroir.
- Ils peuvent être difficiles à atteindre pour les utilisateurs mobiles avec des écrans plus grands lorsqu'ils sont placés en haut à droite ou (pire) en haut à gauche.
- Ils testent mal en A/B et autres tests utilisateur . Voir cet article qui contient des liens supplémentaires que vous pouvez suivre.
L'évangéliste UX d'Apple a donné une courte critique du hamburger à la WWDC 2014 qui est une bonne lecture.
Alternatives typiques
Les alternatives typiques suggérées pour le hamburger + tiroir sont les barres de navigation et les onglets . Ces alternatives répondent aux problèmes ci-dessus en réduisant le nombre d'options pour l'utilisateur (simplification du choix) et en les rendant explicites:
Nouvelles alternatives
Les problèmes avec les onglets et les navbars du bas, comme vous le faites remarquer, sont qu'ils ne sont pas utiles quand il y a beaucoup d'options dans un menu . Vous avez alors un compromis à faire autour de savoir s'il faut déborder le contenu ou tronquer le nombre d'options.
Les puristes de la conception se moqueront de ne pas pouvoir réduire les options, mais dans de nombreuses applications (par exemple, entreprise ou technique), cela est inévitable et conduit à une pire interface utilisateur.
Voici trois alternatives au menu hamburger qui offrent un plus grand nombre de choix de menu (cliquez pour agrandir).
Les feuilles de fond sont utilisées dans le framework Material Design UX de Google comme alternative aux menus. Voir cette spécification . Le placement inférieur de la feuille améliore l'ergonomie avec les écrans mobiles plus grands d'aujourd'hui.
La barre de menu inférieure rend l'option
Menuexplicite car elle teste mieux . Encore une fois, le placement des boutons offre une meilleure ergonomie. En outre, le placement se situe à la fin du flux visuel de haut en bas, de sorte que les utilisateurs sont moins susceptibles d'ignorer l'option.Les boutons flottants pour hamburger utilisent des principes de disposition similaires à ceux ci-dessus pour améliorer l'ergonomie et le placement en fin de flux, mais utilisent également des ombres portées, des couleurs et une rupture de grille superposition pour rendre le menu plus visible comme un appel à l'action.
Ces alternatives ne sont pas une excuse pour une mauvaise conception et ne doivent pas être utilisées lorsque des options plus explicites sont disponibles. Mais ils peuvent aider quand il y a trop d'options de menu légitimes pour tenir dans un contrôle onglet ou une barre de navigation.
Exis a effectué un test A/B sur ce sujet. 
Dans son cas, le résultat était que le menu texte avec une bordure (ce qui rend très évident qu'il s'agit d'un bouton sur lequel vous appuyez pour afficher le menu) fonctionnait le mieux. Qui aurait pensé;)
Article complet: https://web.archive.org/web/20160711135801/http://exisweb.net/mobile-menu-abtest
Je suggère que la manière alternative de fournir le menu hamburger soit l'utilisation de boutons ou d'onglets de menu flottants qui aideront l'utilisateur à voir les options à l'avance et à ne pas utiliser l'ensemble de l'immobilier, ce qui augmentera également l'efficacité.