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:

enter image description here enter image description here enter image description here

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:

enter image description here

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:

enter image description here

According to the spec a FAB can transform into a toolbar or a single sheet of material which contains all the actions:

enter image description here enter image description here

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):

enter image description here

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.

Tags: