Hi @Saad thanks for the detailed feedback and feature request! We are actively working to get an implementation of this up and running! Here are two ideas that I am proposing.
Expansion panel with buttons
Expansion panel with checklist
Both approaches in these sketches are powered by an expansion panel. It's basically a control that expands when the user clicks it. Thus allowing the user to select options before collapsing it.
The first screenshot has buttons that become active when selected. The list is then filtered by all the buttons that are active.
The second approach has a list with items accompanied with checkboxes. When an item is clicked it's checkbox gets selected and the list is filtered by that item.
When no buttons or items are active/selected then no filtering takes place at all.
Points to note.
When the panel is collapsed it shows a summary so that the user can know which options have been selected or not.
I was toying around with multiple approaches to how the summary should be shown when the panel expands. I was thinking it should still be shown followed by the Filter by message but I also tried showing the summary and just the filter. Those minor details are things we could iron out together.
Overall, I like this approach because it gives visibility to the current filter and also it's really easy to gain access to the filters by tapping summary to expand the panel.
I've created another topic at Collect: send submissions by SMS and Internet simultaneously for discussions on what it'd look like to have two queues. I've discussed this with a few members of the @TAB and I'm hoping they'll chime in with feedback on how they think it should work. I'll also put a call out on social media to get feedback from folks who are using the SMS feature.
I'd like to use this topic to make it easier for forms that have been sent via SMS to be resent via Internet because we have that working now and we could make it a little easier for folks. I've renamed the topic to reflect that.
@joeldean I like the gist of your second sketch, but I worry that we are adding yet another interaction. We currently have sorting in the Fill Blank Form list as shown below.
That interaction works pretty well, no? For the Send Finalized Form, we could have an icon (pun!) on the toolbar. Tapping that would have a sheet slide up from the bottom with checkboxes for Unsent, Sent via SMS, Sent via Internet. It's not perfect, but it's more discoverable than the status quo. I'm particularly curious what @Saad thinks...
Second UI design seems good. Also, Yaw's suggestion is also considerable.
Awesome! This idea works as well and can be accomplished a-lot easier than the expansion panel so this could be the way forward for the implementation.
I like the bottom sheet. How are you thinking it would get triggered? There are three things on the action bar currently: sort, search and overflow. Overflow contains two things: change settings and change view.
@yanokwa, are you suggesting adding the eye icon on the action bar? That doesn't seem possible. It seems the best bet is to change the "Change View" entry in the overflow menu to "Filter visible forms". If we were to use an icon, we should probably try to use something that's "standard" for filtering such as a funnel icon.
A problem with that approach is that it provides no feedback on how the list is filtered. My experience with adding filters to lists is that it can really scare a user when a filter is left accidentally on and it looks like a bunch of items are missing. This is not really a problem now because the two options are "sent and unsent" and "unsent" only. A user doesn't really expect sent forms there and may be a little confused if they do show up but nothing will ever look like it's missing.
If a filter for showing only filled forms that were sent over SMS is left on, a user will come back to this screen and not see any of their recently filled forms. This is scary stuff. So I think the UI needs to provide some kind of feedback about the presence of a filter.
I agree with Hélène, the whole point of making the sure the current filter is visible on the screen was the reason I like the expansion panel idea because that filter and the ability to show the options are basically being merged into one.
What are some good options here? I think we can agree that there needs to be some kind of feedback on what filter is applied. Can we still do that with the bottom sheet approach? Perhaps using a skinny bar underneath the action bar like with @joeldean's expansion panel sketch but tapping it opens a bottom sheet? @yanokwa do you think the expansion panel is likely to be confusing to users or are you just trying to avoid having to build yet another UI component that may only be useful here?
What do other apps do for filtering? Is there a material design standard for it?
Based on what I have seen there isn't a standard for filters. Different apps based on their requirements use a variety of controls.
- Actionbar menu
- Slide out menu
- Popup dialog
- Expansion panel
Some examples :
I just took another look on the sort menu and I am thinking we could probably put the grouping functionality there. One of the reasons against this was that we don't want the menu to be too big on smaller screens but I don't think adding three more options in another group wouldn't cause that kind of issue. Also, the material design examples I have seen so far for filters are using the same icon that's being used for the sort to symbolize that. Just a thought.
I have an Alcatel One Touch 5020D and the menu shows up collapsed and then takes up most of the screen when expanded, especially in languages where the text might be longer:
I think that's about the smallest screen we should handle. I don't think it would be good to add too much there but perhaps a line or two would be ok.
Perhaps something like the Jira prototype would work? That is, adding a single line at top that says filter and shows the filters applied and that when tapped lets the user change the filters?
With that kind of approach, how does the user know that filters are applied when the menu is collapsed? I like something like but it's not clear how it would apply in our case. I think we want to make it really obvious to users when only forms sent by SMS are displayed but we don't really need to differentiate between unsent only and sent/unsent. In fact, the standard case is unsent only.
We could simply just put the filter control underneath the toolbar and clicking it opens up the bottom sheet with all the options. I think that solves the issue of knowing which filter is currently selected, and it also fits with the sort bottom sheet functionality as well. The control would be a simple view with a border around it that shows an icon, the current status and a down arrow that indicates it's clickable.
Something like the following?
I went with three separate options because I don't think it's common for bottom sheets to have multiple selection (usually they collapse on selection, like with sort). I think this is ok. I can't currently think of a use case for showing only forms sent via HTTP and I doubt we'd add many different filter options.
This ends up being a lot like the expansion panel but hopefully it's a little simpler for users to get used to and to build because it matches what sort does.
Is that what you had in mind?
Yes, this is exactly what I had in mind
I propose we pause on this and spend some time exploring Collect: send submissions by SMS and Internet simultaneously. I think it'll solve the fundamental problem more elegantly without adding more to the current UI. Also, we have a user to ground those changes, so that's a huge bonus.
I'm arguing for this approach because SMS submissions are a very small percentage of current submissions. These proposed changes will make SMS submissions slightly more convenient, but will potentially make the UI more complicated for HTTP submissions.
Does this seem reasonable?