Existe-t-il des meilleures pratiques de conception de matériaux pour le filtrage / tri dans une disposition d'onglet?
Ce que j'essaie de faire J'essaie de savoir quelles sont les meilleures pratiques de conception de matériaux pour ajouter des options de filtrage et de tri indépendantes à CHAQUE onglet dans une disposition d'onglets.
Ce que j'ai proposé Je propose de placer un bouton de texte Filtrer/Trier sous les onglets à côté du premier sous-en-tête de liste.
Quels exemples j'ai trouvés dans Google Apps J'ai des exemples où le concepteur a mis des options de tri dans le premier sous-en-tête de liste.
Je comprends que Material Design ne couvre pas tous les aspects de l'UX, mais il semble y avoir un chevauchement lorsqu'ils suggèrent comment filtrer les listes (c'est-à-dire le filtre de titre de liste).
En cherchant plus loin cette question assez similaire au lien ci-dessous, sauf que j'ai trouvé des exemples de Google dans l'espoir de la bonne réponse.
Mobile - Tri des éléments sur un onglet
Ce que je pense n'est pas une solution
Le filtre de titre de liste est probablement hors de question car il s'agit d'une page à onglets. L'ajout d'une icône dans la barre d'outils n'est pas disponible car il contient déjà un contenu fixe.
Grande question - j'ai exactement le même problème. D'après ce que je comprends de la spécification Material Design, il y a beaucoup d'options.
À propos de mon application Web
J'ai des onglets avec des cartes affichées en eux. Dans l'architecture d'information de mon application Web, les onglets correspondent aux catégories de cartes (Endroits où manger, Choses à faire, Vie nocturne, etc.). Mais mes cartes ont également des étiquettes (adaptées aux enfants, Open Now, Low Price, etc.). Les cartes ne peuvent appartenir qu'à une seule catégorie, mais plusieurs balises peuvent être appliquées.
Ainsi, les options que j'envisage et que je pense sont conformes à la spécification Material Design sont:
Option A - Barre d'outils
Je pourrais utiliser une barre d'outils en haut de la feuille qui contient les cartes - dans ce cas, la feuille est dans un onglet. Selon le spec "Les barres d'outils sont polyvalentes et peuvent être utilisées de différentes manières." Par exemple (à partir de la spécification) sur une carte ou flottante:
Je ne sais pas si vous êtes d'accord mais je vois votre comme une barre d'outils en haut d'une feuille - donc tout à fait OK selon les spécifications.
Option B - Barre d'outils de la feuille de fond
Je pense que je pourrais également utiliser une barre d'outils au bas de la feuille qui lance une étagère. Selon le spec les feuilles de fond modales peuvent être utilisées pour "afficher un menu contextuel, quand il n'y a pas de point d'entrée évident pour un menu." Voici un exemple de la spécification: 
Cela fonctionnerait pour moi car je n'ai pas encore de navigation inférieure dans l'application Web.
Option C - Boutons
Ceux-ci seraient affichés sous la barre d'onglets et répétés dans chaque onglet. Vous pouvez envisager d'utiliser des boutons de pied de page persistants si cela vous convient. J'aime l'idée d'avoir les boutons de filtrage en bas de l'onglet car cela signifie qu'il y a moins de contrôles en haut ... et donc l'utilisateur est moins susceptible de toucher accidentellement le mauvais.
Option D - FAB qui se développe pour afficher la barre d'outils ou les menus déroulants. Un FAB peut certainement être utilisé sur les onglets - voir ici dans la spécification =. Voici un exemple de cette référence:
Selon la spécification, un FAB peut se transformer en barre d'outils ou en une seule feuille de matériau qui contient toutes les actions:
J'aime cela, car pour mon application, la principale action sur la page (et donc à quoi sert le FAB) est de filtrer les cartes. Jetez un oeil à la spécification, il a une bonne vidéo qui montre le mouvement à ce sujet - c'est-à-dire que FAB devient une feuille de même couleur qui contient votre barre d'outils (très bien).
Une autre alternative serait de l'avoir comme ceci, où le FAB se développe en un avatar d'icône pour chaque balise (j'aime ça aussi): 
Cela ne fonctionnerait que si vous n'aviez que 6 balises - car c'est le maximum recommandé dans la spécification. Je ne sais pas combien nous allons en avoir, ce ne sera peut-être que 6.
Je pense que je vais aller avec l'option FAB à la barre d'outils ...
Je pense que la toile de fond de Material Design pourrait résoudre votre problème
https://material.io/design/components/backdrop.html
Il permet au calque arrière de contenir plusieurs filtres et contrôles et le calque avant d'afficher le contenu filtré voir la ligne directrice du matériau sur le composant de fond lié ci-dessus.
Je pense que certaines questions fondamentales doivent être posées:
Quoi s'est produit qui a provoqué le résultat des onglets nécessitant un tri unique ET filtrage?
Quoi essayons-nous de réaliser avec cette application et son contenu?
La combinaison d'onglets, de filtrage ET de tri (sur un écran de smartphone) est-elle compatible avec l'expérience que nous tentons de générer?
Quoi d'autres façons de présenter et d'organiser le matériel, le contenu, les activités et les objectifs qui n'impliquent pas que l'utilisateur soit accablé par une expérience interactive aussi complexe et chargée?
Spéculation et commentaire pour l'analyse de problèmes contextuels:
Je suppose que vous essayez en fait d'éviter la responsabilité de prendre la myriade de décisions requises pour les nombreux aspects de la présentation, de la conception et de l'intégration du fonctionnement de tout ce que vous êtes chargé de présenter et d'interagir avec et sur.
Votre décision, pour éviter la prise de décision et la réalisation réelle de la conception, vous amène à trouver des moyens de répartir les responsabilités. Dont certaines imposent des responsabilités à l'utilisateur, aux directives d'Android et à toutes les "meilleures pratiques", aujourd'hui. Et les bons utilisateurs de ce site.
Plus précisément, dans cette entreprise, il semble que vous ayez décidé que le filtrage et le tri sont les moyens de se soustraire à la responsabilité de la présentation, de l'utilisation et de la découvrabilité, en la rejetant plutôt sur l'utilisateur.
Suggestion
Repenser la conception/la structure de l'interface utilisateur en tenant compte de l'UX:
Prenez du recul et examinez le contenu et la capacité des écrans tactiles, puis prenez le temps de vous sentir comme un utilisateur et ressentez-le également.
Cette approche, j'espère, révèle les problèmes de la fusion du tri et du filtrage de cette manière. De plus, j'espère que cela révèle que la voie la plus efficace pourrait bien être une repenser la façon d'atteindre la fonctionnalité souhaitée, et ouvrir un discours avec les décideurs internes quant aux compromis acceptables entre fonctionnalité et convivialité, espace d'écran et découvrabilité, codage et réactivité.
Pensez à utiliser le menu de débordement.
Les puces permettent aux utilisateurs d'entrer des informations, de faire des sélections, de filtrer le contenu ou de déclencher des actions. Les puces doivent apparaître dynamiquement comme un groupe de plusieurs éléments interactifs. Contrairement aux boutons, qui devraient être un appel à l'action cohérent et familier, celui qu'un utilisateur s'attend à voir apparaître comme la même action dans la même zone générale.