web-dev-qa-db-fra.com

Application mobile avec onglets une mauvaise idée?

J'essaie de dessiner ce que je veux construire pour une nouvelle application mobile, et je suis tombé sur une énigme avec des onglets. J'ai quatre catégories principales de contenu, et je pensais que ce serait bien d'avoir des onglets en haut que les utilisateurs pourraient sélectionner pour accéder rapidement au contenu qu'ils voulaient, comme indiqué ci-dessous. (Veuillez excuser la crudité de mon dessin MSPaint. Actuellement, l'onglet Utilisateurs est sélectionné.)

App wireframe with 4 tabs across the top

Le problème que j'ai rencontré se trouve dans mon diagramme de flux (c'est ce que j'appelle un diagramme qui montre comment une page passe à la suivante, vue du point de vue de l'utilisateur). Disons que j'ai du contenu sur l'onglet Utilisateurs , et je veux ajouter un écran qui me permet d'ajouter un Nouvel utilisateur ou un écran qui me permet de mettre à jour les informations d'un utilisateur existant. J'avais pensé que je ferais juste un pop-up s'ils cliquaient sur le nom d'un utilisateur existant (ou Nouvel utilisateur ), mais je commence à me demander si les onglets et les popups ne se mélangent pas bien.

Jusqu'à certains des commentaires ci-dessous, j'avais pensé que je ne voulais pas avoir de fil d'Ariane différent pour chaque onglet, car je pense que cela pourrait être extrêmement difficile à naviguer (mais maintenant je repense cela). Donc, la racine de ma question est: quelle est la ligne directrice courante pour avoir plus d'un écran par onglet? Ou dois-je abandonner complètement les onglets? Chacun de ces 4 onglets peut avoir plusieurs écrans.

1
kmort

J'ai rencontré un problème similaire lors de la conception d'une de mes propres applications plus tôt cette année.

Une chose que je veux souligner immédiatement, c'est que la pratique courante pour les interfaces mobiles est d'avoir des onglets en bas de l'écran ou ci-dessous un titre et des boutons de navigation. Dans le cas d'Apple, si vous ne suivez pas la stricte directive d'interface utilisateur d'avoir des onglets en bas, votre application peut même ne pas être acceptée dans l'App Store. Je ne suis pas entièrement sûr de la plate-forme que vous prévoyez de distribuer votre application, mais je tenais à le signaler en premier. Je recommande fortement de consulter le Apple Human Interface Guidelines , et le Android Design Guidelines pour voir si vous devez apporter des modifications à votre mise en page.

En ce qui concerne votre question sur les onglets de page, je vous recommande fortement de vous en tenir à votre plan actuel car ils sont une partie cruciale de nombreuses interfaces mobiles. Il s'agit de savoir si vous choisissez d'utiliser des onglets pour afficher des pages "sans issue" (pages qui ne permettent pas de naviguer vers une autre page), ou une hiérarchie de vues distincte avec plusieurs pages. Pour déterminer au mieux votre meilleure option, vous devez considérer quelques éléments simples:

  1. Considérez chaque onglet comme une catégorie. Votre onglet "Utilisateurs" ne doit contenir que des vues (pages) relatives à la création d'utilisateurs, à la modification d'utilisateurs, etc. Attribuer un nom large à un onglet vous permet de transmettre dans quelle "zone" de votre application l'utilisateur se trouve actuellement et vous permet de afficher de nombreuses pages pendant que cet onglet est en surbrillance. Si vous avez plusieurs vues similaires, vous devez avoir plusieurs pages dans un onglet. Vous souhaiterez également fournir à l'utilisateur un moyen de se retirer d'une hiérarchie de vues, et éventuellement conduire à la vue d'origine que l'onglet présente - sinon cela devient intuitif et difficile pour l'utilisateur de naviguer.

  2. Si vous ne présentez qu'une seule page pour chaque onglet, vous devez examiner les fenêtres contextuelles ou les lightbox qui s'affichent sur la page d'origine, car sinon vous n'aurez pas de place logique pour les pages utilisateur correspondantes. Les fenêtres contextuelles qui couvrent l'intégralité de la page (y compris la barre d'onglets) fonctionnent parfaitement. Ils ne sont pas intuitifs et présentent une demande directe de contribution de l'utilisateur - et c'est également une pratique assez courante.

Dans mon exemple, je créais une application pour un événement en direct qui s'est produit dans ma région. Il fallait avoir plusieurs onglets pour les vendeurs d'aliments, des informations sur les divertissements, etc., et je voulais pouvoir fournir plus d'informations sur des vendeurs d'aliments spécifiques lorsqu'ils étaient sollicités. J'ai fait une vue détaillée et rempli les étiquettes en conséquence, et j'ai ajouté des boutons de retour pour que la page d'origine soit accessible, et une pression sur l'onglet reviendrait également à la page d'origine dans la hiérarchie. J'ai trouvé que cela fonctionnait bien pour mon application et j'ai respecté toutes les directives d'Apple dans mon cas.

Faites-moi savoir comment vous allez et si vous avez d'autres questions!

3
Aaron

Les onglets sont une grande partie de la vie mobile. Pour les deux Apple et Android, les onglets sont en bas de l'écran. Cela permet un en-tête où vous pouvez conserver vos commandes de navigation et les boutons associés à cette vue de l'onglet sélectionné. Remarque: la plupart Android ont un bouton de retour dédié (matériel).

Il y a un bon article sur Medium expliquant comment utiliser un contrôleur de navigation iOS avec une barre d'onglets. Regardez le gif en bas - ça vaut son poids en mots. https://medium.com/@ITZDERR/uinavigationcontroller-and-uitabbarcontroller-programmatically-Swift-3-d85a885a5fd

De plus, voici les ressources pour développeurs pour iOS et Android

https://developer.Apple.com/documentation/uikit/uitabbarcontrollerhttps://material.io/components/bottom-navigation/

J'espère que cela t'aides

1
ghostkind