La barre d'onglets doit-elle être accessible sur les sous-pages d'une application mobile?
Je viens de rejoindre une équipe en tant que UX/graphiste développant une application pour iOS et Android. L'application est déjà en production et je travaille à la mise en œuvre de nouvelles fonctionnalités et à la modification de la conception actuelle.
Notre application est basée sur des onglets et comporte cinq onglets pour les pages principales de l'application. Il existe également plusieurs sous-pages de chaque onglet auxquelles l'utilisateur peut accéder.
Une chose que j'ai remarquée est que la barre d'onglets n'est pas visible/accessible lorsque l'utilisateur navigue plus profondément. Au lieu de cela, vous devez utiliser le bouton de retour dans la barre de navigation pour revenir à la page parent avant de pouvoir utiliser la barre d'onglets.
D'après mon expérience avec d'autres applications comme Facebook, Messenger, Instagram, App Store, Spotify, SoundCloud et ainsi de suite, la barre d'onglets est toujours accessible à partir de chaque sous-page. C'est quelque chose que je pense que je vais essayer de convaincre mon équipe de faire.
Mais encore, quels sont les avantages et les inconvénients d'avoir la barre d'onglets toujours accessible? Quelqu'un ici a-t-il une expérience de ce problème?
Les directives de conception des matériaux soulignent à juste titre votre problème:
La barre de navigation inférieure permet un déplacement rapide du plus profond d'un sujet vers le haut d'un autre sujet. Gardez-le disponible lorsque l'utilisateur descend la hiérarchie, soit en le montrant de manière persistante, soit en le masquant et en le révélant lors du défilement.
La barre de navigation inférieure ne doit pas être utilisée pour:
- Les vues se sont concentrées sur une seule tâche, comme un écran de composition de courrier électronique.
- Vues contenant les préférences ou les paramètres utilisateurSur Android, le bouton Précédent ne permet pas de naviguer entre les vues de la barre de navigation inférieure.
Donc, avec votre application, masquer la barre d'onglets chaque fois que l'utilisateur saute sur une sous-page est pas toujours une bonne méthode. Vous devez empiler la sous-page au-dessus de la page principale des onglets et il y aura un bouton de retour "<-" sur les sous-pages pour revenir à la page principale. Le flux est parfaitement fait sur Instagram.
ne exception concerne les formulaires. Lorsqu'une sous-page est un formulaire, où vous avez besoin de toute l'attention de l'utilisateur, vous devez masquer la barre d'onglets.
ne règle d'heuristique d'utilisation est le contrôle ou la liberté de l'utilisateur: Toutes les sections et sous-sections doivent être navigables et l'utilisateur doit avoir le contrôle.
Cela pourrait également être un problème structurel, la structure de votre application peut avoir de nombreuses (plus de 3) sections qui poussent l'utilisateur trop loin, si tel est le cas, une solution simple serait de fournir une "Accueil aka Sortie d'urgence ("Annuler" si les pages sont des formulaires) "Icône sur le côté droit de la navigation supérieure.
Voici comment je gérerais la structure de l'application.
Couche 1 (page parent) - Toutes les sections principales de l'application doivent être accessibles par la barre d'onglets (le nombre idéal doit être maintenu à 4-5 onglets si plus il doit être défilable horizontalement, Max ne doit pas être supérieur à 7. Si plus que 7, vous devrez peut-être penser à une structure différente).
Couche 2 (Pages enfants) - Sous-sections (Premier enfant) aucun bouton de retour nécessaire dans l'en-tête. Dans les applications, ce sont généralement des "listes".
Couche 3 (Grand Child Pages) - Ces pages nécessitent un bouton de retour pour revenir aux pages enfants. Ils peuvent également contenir des activités telles que remplir un formulaire, les détails d'une instance particulière de la page enfant couplée avec des boutons d'action. Ici et au-delà de cette barre d'onglets, il convient de ne pas encourager la mise au point et la clarté.
Vous devez absolument toujours garder le même modèle de navigation dans votre interface utilisateur, donc je garderais les onglets dans toutes les pages. Considérez-le comme un cadre où les fonctions clés sont facilement accessibles (les applications grand public comme Facebook ou Instagram en sont un bon exemple). À l'intérieur du cadre, vous souhaitez afficher les informations. Si vous avez envie d'avoir des problèmes d'espace (sur les anciens smartphones par exemple), vous devez utiliser un onglet qui disparaît lorsque les utilisateurs interagissent avec les données (défilement ou lecture). Cette solution est bonne si vous avez peu de fonctions clés et que vous souhaitez qu'elles soient toujours visibles et facilement accessibles. Quoi qu'il en soit, si ce ne sont pas des fonctions "clés", je préférerais utiliser un menu latéral commun derrière une icône de burger. Cette solution ajoutera un robinet au processus (icône 1.burger, icône 2.function), mais elle gardera propre votre interface utilisateur. C'est ton appel!