Material Design app bar filtering best practices

Question

I’m looking into material-design filtering patterns and came across this example. I have two concerns about it:

1. Not quite sure about the visual compatibility of the filter icon and the hamburger menu icon in the app bar.

2. If a filter is selected, should the app bar title (i.e. ‘Everything’) adapt to display the currently chosen filter? If so, wouldn’t that conflict with the functionality of the hamburger menu?

For example, say that there’s a section in the navigation drawer called ‘Timeline’. And within Timeline you have filters that can be applied (Filter 1, Filter 2, etc.). Navigating to Timeline and then choosing Filter 1 will change the app bar title to Filter 1. While in the Navigation Drawer, if opened, ‘Timeline’ will still be highlighted.

What do you guys think?

Answer 1

1) When using icons, it's generally good practice to use the ones adopted as standard by the platform. If you're doubtful about it, you can do a user test or simply use text instead.

2) Indicating the currently active filter is likely important (not necessarily in the action bar) and I don't see any conflict with the hamburger menu. However, it's not at all clear that the current screen is showing pushes rather than, say, channels, so I encourage you to think about using "Pushes" as a title and indicating the current filter elsewhere. (Perhaps have a separate filter/search bar? The search icon in the filter sidebar seems unexpected and ambiguous -- at first glance, it seems like it searches through filters.)