Filter/Sorting best practice in Material Design?
I'm designing a web application using the Material Design spec.
I need to allow users to filter the cards that appear on a tab.
From what I understand of Material Design there are quite a few different options that would work for this - see Option A to D outlined below.
I'm currently thinking I'll go with a toolbar sort action (Option A below) or a FAB with flyouts (as I will only have maximum of 6 options (Option D below).
Advantage of A is that the action is all at the top (ie change tabs and filter cards) and the disadvantage of A is that the action is all at the top (easier to miss it, press wrong button on small devices)...interested to know what others would go with.
I originally added this as my answer to this question but Mayo suggested I create it as a question so here it is.
About My Web App
I have tabs with cards displayed in them. In the information architecture for my web app the tabs equate to the categories of cards (Places to Eat, Things to do, Nightlife etc). But my cards also have tags (Kids friendly, Open Now, Low Price etc). Cards can only be in one category but can have multiple tags applied.
So the options I am considering and which I think are consistent with the Material Design spec are:
Option A - Toolbar
I could use a toolbar at top of the sheet that contains the cards - in this case the sheet is in a tab. According to the spec "Toolbars are versatile and can be used in many different ways." For example (from the spec) on a card or floating:
Not sure if you agree but I see your as like a toolbar at the top of a sheet - so totally OK according to the spec.
Option B - Bottomsheet Toolbar
I think I could alternatively make use of a toolbar at the bottom of the sheet that launches a shelf. According to the spec modal bottomsheets can be used to "display a contextual menu, when there is no obvious entry point for a menu." Here is an example from the spec:
This would not be an option for for me as I already have bottom navigation in the web app.
Option C - Buttons
These would be displayed below the tab bar and be repeated in each tab. You could consider using persistent footer buttons if that suits. I like the idea of having the filtering buttons at the bottom of the tab as it means there are fewer controls at the top...and therefore the user is less likely to accidently touch the wrong one.
Option D - FAB that expands to show toolbar or flyouts. A FAB can definitely be used over tabs - see here in the spec. Here is an example from that reference:
According to the spec a FAB can transform into a toolbar or a single sheet of material which contains all the actions:
I like this as for my app the primary action on the page (and therefore what the FAB should be used for) is to filter the cards. Have a look at the spec it has a good video that shows the motion on this - ie FAB becomes sheet of same colour which contains your toolbar (very noice).
Another alternative would be to have it like this, where the FAB expands to an icon avatar for each tag (I like this also):
This would only work if you only had 6 tags - as that is the recommended max in the spec. I am not sure how many we are going to have, it might only be 6.