After researched the quick filter using scenario and the products, Finding out that we could separate the filter function into Quick filter and Advanced filter in order to meet the different needs.
The Quick filter is suitable for commonly used situation.It is fast, simple and obvious. It is used in the common scenario and easy to apply.
Here is the Quick filter design: http://pf-blog-patternfly.b9ad.pro-us-east-1.openshiftapps.com/quick-filter-improvement-for-the-current-filter-pattern/
In some cases, for complicated using scenario, the quick filter can not meet the user’s need. Especially for those products that have large amount of criteria and multi select options. Developers of the products can only meet the needs by adding on more functions. We could design a new filter pattern to meet the requirement.
Advanced filter is suitable for users who want to:
- Quickly filter the data from a large amount of criteria
- Fast searching for data from a long list of value
- Combine multiple filter criteria into a single filter
- Save the custom filters that can be recalled and reapplied at another time
Here are some product examples:
1. Errata Tool
User : Developers / QE
Job: Working and cooperating on a certain type of advisory until the rpm package delivered to the customer.
The user needs to filter and watch a certain advisory. When finish part of the work of an advisory, the user needs to deliver it to another department for review. During the review process, the user will work on other advisories. After review, the user will spend some time to configure the filter again to search the advisory to continue the work.
Since the configure field is too much, the user would like to have a function to save the custom filters that can be recalled and reapplied at another time. Currently, the user can only favorite the advisory page in browser.
User : Administrator
Job: Managing Linux systems.
The user needs to filter and watch a certain Linux system. The user takes time to filter out the data from the multi categories. The common search field can not meet the needs well. The user needs a more accurate and visualized filter. Currently, the user can type in a rule to search.
User : Administrator
Job: Unify the portal of ceph and gluster storage systems.
Pain point: The user needs to filter and watch a certain storage system and filter out the data from a multiple filter criteria. Currently the filer can only filter from the single filter criteria.
User : Developer
Job: Renting hardware.
The user needs to rent a certain hardware. When filtering the hardware, the user needs to read through a long list of values and also fill in several criteria. The user would like to quickly get the correct value from the long list and to simplify the filter interaction.
More research could be found in google doc: https://docs.google.com/document/d/1Pw61shgHM2RmoPwsY1p0CgjdLa7pix_aCOXPrUXsy54/edit#
Advanced filter is based on the current quick filter pattern and provides a filter solution that contains a group of dropdown menu and a custom selector.
The dropdown menu group includes single selector, single selector with search and multi selector.
The custom selector contains a button to create custom filter and also a dropdown menu for saved custom filter. It is used for users to define their own filters and save them that can be recalled and reapplied at another time.
Users could choose to implement either of the functions based on their own requirement.
Single dropdown selector
The quick searching filter remains the same as the current filter pattern.
- Attribute Selector (optional): Contains a list of the possible attributes by which to filter.
- Single dropdown selector: Use when there are less than 8 possible values. The filter is activated when the user click the dropdown.
Single dropdown selector with search
- Single dropdown selector with search: Use when there are more than 8 possible values.
Multi dropdown selector
- Multi dropdown selector: Use when there are multiple filter criteria to search in a single filter. Click the checkbox to check or uncheck the filter. Clicking the “X” of active filters could also remove the multi filters.
The custom selector contains a “create a filter” button and a “My filter” dropdown selector. When users haven’t save any filter before. The “My filter” button will not show unless users save one.
- Change the name: Use when saving the custom filter. Click the field to change the name and click “Save” button to save the filter. After clicking the “Save” button the filter is activated.
- Cancel: Use when canceling the custom filter.
- Apply the custom filter: Use when applying the custom filter but not saving it.
- My filter: Use when reapplying the saved custom filter.
- Delete button: Use to delete the saved custom filter. When hovering one of the filter, the delete button will show.
More design details could be found in Invision: https://redhat.invisionapp.com/share/XABBZKPJC#/screens/228445030_Quick1