Comment dois-je réduire mes menus?
Je conçois un tableau de bord pour un service. J'ai un menu principal en haut du navigateur. Le menu comporte 5 points et prend beaucoup de place. J'ai également une barre latérale sur la gauche pour naviguer vers la page sélectionnée. Je vais travailler pour optimiser pour les appareils mobiles et les tablettes. Comment suis-je censé rouler le menu?
Désolé pour la réponse tardive ...
Google Material Material Guidelines ont documenté de nombreuses solutions courantes à ce problème. Voici quelques exemples avec lesquels j'ai réussi.
La découverte est essentielle
Le fameux menu hamburger a proliféré en réponse à la nécessité d'intégrer une navigation complexe dans une vue mobile. L'effet secondaire sans surprise a été de masquer l'architecture de l'information et d'importants ensembles de fonctionnalités. Les propriétaires de produits ont remarqué un peu partout que la navigation cachée derrière le hamburger a connu un engagement considérablement plus faible que leurs homologues constamment disponibles.
Comment activer la découverte dans une fenêtre limitée? Workflows et curation. Évaluez comment les utilisateurs se déplacent dans votre application (données que vous devriez déjà avoir) et comment vous pourriez améliorer cela. Prenez ces données et cartographiez quand, où et pourquoi leurs besoins de navigation. Concevez votre navigation autour de cette carte.
Quand la découverte n'est pas critique
Vous constaterez que tout ne convient pas. Il existe des vues et des actions qui entrent dans la catégorie "uniquement lorsqu'ils le recherchent". Ce sont des choses que les utilisateurs s'attendent à trouver quelque part, souvent derrière le hamburger. Les composants qui correspondent à cette catégorie peuvent inclure la déconnexion, les paramètres de profil, les informations de compte, etc.
Hiérarchie de niveau supérieur
Mobile a un modèle familier pour les vues de haut niveau, bien illustré par le cadre de Google:
Dans cet exemple, "Tous" peut être utilisé pour révéler ses vues de frère:
Dans ce cas, il est souvent préférable de commencer à partir d'une sorte de "tableau de bord" ou de la page principale où toutes les vues de niveau supérieur sont disponibles côte à côte. Descendre dans l'un d'entre eux passe à ce format.
Catégories d'enfants
La profondeur potentielle des catégories d'enfants est ce qui pousse de nombreuses personnes à simplement lancer un hamburger. Mais, si vous pouvez rationaliser ce groupe, les onglets sont une excellente solution.
Dans cet exemple, les onglets défilent vers la gauche et la droite pour révéler le débordement. Pas idéal, mais avec un espacement soigné pour permettre un "aperçu" de contenu supplémentaire, la plupart des utilisateurs le découvriront. Je recommande d'inclure une ombre Edge ou une flèche de pagination (ou les deux) pour souligner davantage l'action de défilement latéral.
Quelques possibilités si votre navigation est assez simple.
- Une navigation principale horizontale fonctionnera correctement sur mobile si vous n'avez pas beaucoup d'articles.
- Une navigation secondaire verticale occupera probablement trop d'espace à l'écran sur mobile, mais vous pouvez l'ajouter comme deuxième barre horizontale, ou éventuellement une liste déroulante de la navigation principale. Encore une fois, cela dépend du fait de ne pas avoir beaucoup d'éléments à afficher.
Je pourrais voir quelque chose comme ça être un compromis raisonnable si votre site est principalement utilisé sur le bureau, mais peut être utilisé occasionnellement sur mobile.
Remarque: j'ai répondu sur la base d'une modification inappropriée de la question, qui a maintenant été corrigée. Ces informations peuvent toujours être utiles, mais ce n'est probablement pas la meilleure réponse à la question réelle de l'OP.