6

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.

1

I will definitely plan for the toolbar instead of FAB layout. While it is sure to have a maximum of 6 options right now, the same can change over a period of time.

Another thing is that the FAB is normally used as a shortcut bar, providing quick actions. So, using that as filtering option will create confusion.

I will personally prefer to use the toolbar and have the 6 cards flyout when user taps on the toolbar. That way, it will give user quick filter buttons, and will allow future enhancements to work without trouble.

0

All of the options you listed sound like they could work, but whether they will work well depends on a number of things. For example, will you need to show text labels or will icons be descriptive enough? Are you primarily targeting phone, tablet, or laptop use and what will the experience be like on each one? Will there be a maximum of 6 tags, and if not, how will your design accomodate more?

I'd suggest creating some wireframes or low-fidelity mockups for each option and seeing how well each one works in various scenarios (phone vs. laptop, touch vs. mouse, etc.).

Afterward, I'd suggest making high-fidelity mockups of one or two solutions you chose, connecting them into realistic-feeling prototypes, and polishing them off.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.