Meilleures pratiques de filtrage / tri en matière de conception de matériaux?
Je conçois une application Web à l'aide de la spécification Material Design.
Je dois autoriser les utilisateurs à filtrer les cartes qui apparaissent sur un onglet.
D'après ce que je comprends de la conception matérielle, il existe plusieurs options différentes qui fonctionneraient pour cela - voir les options A à D décrites ci-dessous.
Je pense actuellement que j'irai avec une action de tri de la barre d'outils (option A ci-dessous) ou un FAB avec des menus déroulants (car je n'aurai que 6 options au maximum (option D ci-dessous).
L'avantage de A est que l'action est tout en haut (c'est-à-dire changer les onglets et les cartes de filtre) et l'inconvénient de A est que l'action est tout en haut (plus facile à manquer, appuyez sur le mauvais bouton sur les petits appareils) ... intéressé à savoir avec quoi les autres iraient.
J'ai à l'origine ajouté ceci comme ma réponse à cette question mais Mayo m'a suggéré de le créer comme une question alors le voici.
À 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.
Les options que j'envisage et qui, selon moi, 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 la spécification "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 les spécifications, les feuilles de fond modales peuvent être utilisées pour "afficher un menu contextuel, lorsqu'il n'y a pas de point d'entrée évident pour un menu". Voici un exemple de la spécification:
Ce ne serait pas une option pour moi car j'ai déjà une navigation en bas 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 des onglets - voir ici dans les spécifications. 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 vais certainement planifier la barre d'outils au lieu de la mise en page FAB. Bien qu'il soit sûr d'avoir un maximum de 6 options en ce moment, la même chose peut changer sur une période de temps.
Une autre chose est que le FAB est normalement utilisé comme une barre de raccourcis, fournissant des actions rapides. Donc, utiliser cela comme option de filtrage créera de la confusion.
Je préférerai personnellement utiliser la barre d'outils et faire voler les 6 cartes lorsque l'utilisateur tapera sur la barre d'outils. De cette façon, il donnera aux utilisateurs des boutons de filtrage rapides et permettra aux futures améliorations de fonctionner sans problème.
Toutes les options que vous avez énumérées semblent pouvoir fonctionner, mais leur bon fonctionnement dépend d'un certain nombre de choses. Par exemple, devrez-vous afficher des étiquettes de texte ou les icônes seront-elles suffisamment descriptives? Visez-vous principalement l'utilisation d'un téléphone, d'une tablette ou d'un ordinateur portable et quelle sera l'expérience sur chacun d'eux? Y aura-t-il un maximum de 6 balises, et sinon, comment votre design pourra-t-il s'adapter davantage?
Je suggérerais de créer des wireframes ou des maquettes basse fidélité pour chaque option et de voir dans quelle mesure chacune fonctionne dans différents scénarios (téléphone vs ordinateur portable, tactile vs souris, etc.).
Ensuite, je suggérerais de faire des maquettes haute fidélité d'une ou deux solutions que vous avez choisies, de les connecter en prototypes réalistes et de les peaufiner.